CQA UI

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

📦 Installation

npm install @cqa-lib/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 @angular/cdk@^13.3.9 rxjs@^6.6.7 || ^7.5.0

🚀 Quick Start

Step 1: Import the Module

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

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

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

Step 2: Import the Styles

Option A: In angular.json (Recommended)

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@cqa-lib/cqa-ui/styles.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

Option B: In styles.css

@import '@cqa-lib/cqa-ui/styles.css';

Step 3: Add Angular Material Icon Font

Add this to your index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Or in styles.css:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Step 4: Copy Image Assets (Required for Empty State Components)

The library includes image assets that need to be copied to your application's assets folder. Add this to your angular.json:

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@cqa-lib/cqa-ui/src/lib/assets/images",
                "output": "/assets/images"
              }
            ]
          }
        }
      }
    }
  }
}

This ensures that empty state images are available at runtime.

💡 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-lib/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' }
    ]
  });
}

🔧 Troubleshooting

Component renders as empty tag (no inner HTML)

If you see <cqa-search-bar></cqa-search-bar> without any inner content, check:

1. Missing styles import - Add to angular.json:

   "styles": [
     "node_modules/@cqa-lib/cqa-ui/styles.css",
     "src/styles.css"
   ]

2. Missing Angular Material Icon font - Add to index.html:

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

3. Check browser console for errors:

   • Missing peer dependencies (@angular/material, @angular/cdk)
   • Module import errors
   • Template compilation errors

4. Verify module import in your app.module.ts:

   import { UiKitModule } from '@cqa-lib/cqa-ui';
      
   @NgModule({
     imports: [UiKitModule, ...]
   })

5. Clear Angular cache and rebuild:

   rm -rf .angular
   npm start  # or ng serve

Empty state images not showing

If empty state components are not displaying images:

1. Missing asset configuration - Ensure you've added the asset copy configuration in angular.json (see Step 4 in Quick Start):

   {
     "glob": "**/*",
     "input": "node_modules/@cqa-lib/cqa-ui/src/lib/assets/images",
     "output": "/assets/images"
   }

2. Rebuild after adding assets - After updating angular.json, restart your development server:

   npm start  # or ng serve

3. Check browser console - Look for 404 errors on image paths like /assets/images/TestCaseIcon.png

4. Verify assets are copied - Check that files exist in your dist/your-project/assets/images/ folder after building

📚 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!