# CQA UI

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

---

## 📦 Installation

```bash
npm install @cqa-lib/cqa-ui
```

### Peer dependencies

```bash
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

```ts
// 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)

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

**Option B: In `styles.css`**

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

### Step 3: Add Angular Material Icon Font

Add this to your `index.html`:

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

Or in `styles.css`:

```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`:

```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

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

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

### Search bar

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

### Segment control

```html
<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

```ts
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`:
   ```json
   "styles": [
     "node_modules/@cqa-lib/cqa-ui/styles.css",
     "src/styles.css"
   ]
   ```

2. **Missing Angular Material Icon font** - Add to `index.html`:
   ```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`:
   ```ts
   import { UiKitModule } from '@cqa-lib/cqa-ui';
   
   @NgModule({
     imports: [UiKitModule, ...]
   })
   ```

5. **Clear Angular cache and rebuild**:
   ```bash
   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):
   ```json
   {
     "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:
   ```bash
   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

```bash
npm run storybook
```

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

---

## 🛠 Development

```bash
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!