PECB UI

A modern Angular UI component library featuring reusable components with comprehensive Storybook documentation.

Components

• Button - Customizable button component with multiple variants
• Modal - Confirmation modal with loading states and customizable actions

Installation

npm install pecb-ui

Usage

Import the module

import { NgModule } from '@angular/core';
import { PECBUIModule } from 'pecb-ui';

@NgModule({
  imports: [PECBUIModule],
  // ...
})
export class AppModule { }

Use the components

Button Component

<pecb-button 
  label="Click Me" 
  variant="primary" 
  (click)="onButtonClick($event)">
</pecb-button>

Modal Component

<pecb-modal
  [isOpen]="showModal"
  title="Confirm Action"
  message="Are you sure you want to proceed?"
  confirmText="Yes"
  cancelText="No"
  [loading]="isLoading"
  (confirm)="onConfirm()"
  (cancel)="onCancel()"
  (close)="onClose()">
</pecb-modal>

Development

This library is built with:

• Angular 17
• Storybook 8
• TypeScript 5

Running Storybook

npm run storybook

Building the library

npm run build

License

MIT