CQA UI

Component library for Angular 13+, built with Tailwind CSS tokens and Storybook-driven documentation.

📦 Installation

npm install cqa-ui

Peer dependencies

npm install @angular/common@^13.4.0 @angular/core@^13.4.0 @angular/forms@^13.4.0 @angular/material@^13.3.9 rxjs@^7.5.0

🚀 Quick Start

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UiKitModule } from 'cqa-ui';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    UiKitModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

💡 Usage Examples

Button

<cqa-button variant="filled" icon="save" (clicked)="onSave()">
  Save changes
</cqa-button>

<cqa-button variant="outlined" [disabled]="isSubmitting">
  Cancel
</cqa-button>

Search bar

<cqa-search-bar
  placeholder="Search components"
  [value]="query"
  [showClear]="true"
  (valueChange)="query = $event"
  (search)="onSearch($event)"
></cqa-search-bar>

Segment control

<cqa-segment-control
  [segments]="[
    { label: 'Overview', value: 'overview' },
    { label: 'Analytics', value: 'analytics' },
    { label: 'Settings', value: 'settings', disabled: true }
  ]"
  [value]="currentTab"
  (valueChange)="currentTab = $event"
></cqa-segment-control>

Dialog

import { DialogService } from 'cqa-ui';

constructor(private readonly dialog: DialogService) {}

openDialog(): void {
  this.dialog.open({
    title: 'Delete dashboard',
    description: 'Deleting this dashboard will remove it for all collaborators.',
    warning: 'This action cannot be undone.',
    content: {
      type: 'text',
      text: 'Are you sure you want to continue?'
    },
    buttons: [
      { label: 'Cancel', role: 'secondary' },
      { label: 'Delete', role: 'warn', handler: () => 'delete' }
    ]
  });
}

📚 Storybook

npm run storybook

View component documentation and interactive examples at http://localhost:6006.

🛠 Development

npm install
npm run build:cqa-ui      # build the library bundle
npm run storybook         # start Storybook
npm run build-storybook   # static Storybook build

Publish workflow

1. Update version in package.json
2. npm run build:cqa-ui
3. npm publish dist/cqa-ui

📄 License

MIT — contributions and issues welcome!