@cqa-lib/cqa-ui 0.0.2 → 0.1.0

package/package.json

@@ -1,18 +1,7 @@
 {
   "name": "@cqa-lib/cqa-ui",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "UI Kit library for Angular 13.4",
-  "scripts": {
-    "build:cqa-ui": "ng-packagr -p ng-package.json && npm run build:tailwind && npm run fix:package",
-    "build:tailwind": "tailwindcss -i ./src/lib/styles/tailwind.css -o ./dist/cqa-ui/styles.css --minify",
-    "watch:tailwind": "tailwindcss -i ./src/lib/styles/tailwind.css -o ./dist/cqa-ui/styles.css --watch",
-    "fix:package": "node -e \"const fs=require('fs');const p=JSON.parse(fs.readFileSync('dist/cqa-ui/package.json','utf8'));delete p.files;if(!p.publishConfig){p.publishConfig={};}p.publishConfig.access='public';fs.writeFileSync('dist/cqa-ui/package.json',JSON.stringify(p,null,2)+'\\n')\"",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "files": [
-    "dist/"
-  ],
   "keywords": [
     "angular",
     "library",
@@ -41,42 +30,27 @@
     "@angular/material": "^13.3.9",
     "rxjs": "^6.6.7 || ^7.5.0"
   },
-  "devDependencies": {
-    "@angular-devkit/architect": "^0.1303.11",
-    "@angular-devkit/build-angular": "^13.3.11",
-    "@angular-devkit/core": "^13.3.11",
-    "@angular/animations": "^13.4.0",
-    "@angular/cdk": "^13.3.9",
-    "@angular/cli": "^13.3.11",
-    "@angular/common": "^13.4.0",
-    "@angular/compiler": "^13.4.0",
-    "@angular/compiler-cli": "^13.4.0",
-    "@angular/core": "^13.4.0",
-    "@angular/forms": "^13.4.0",
-    "@angular/material": "^13.3.9",
-    "@angular/platform-browser": "^13.4.0",
-    "@angular/platform-browser-dynamic": "^13.4.0",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/angular": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@types/glob": "^8.1.0",
-    "@types/lodash": "4.14.191",
-    "@types/minimatch": "^5.1.2",
-    "@types/node": "^14.18.36",
-    "autoprefixer": "^10.4.21",
-    "glob": "7.2.3",
-    "minimatch": "5.1.6",
-    "ng-packagr": "^13.3.0",
-    "postcss": "^8.5.6",
-    "postcss-loader": "7.3.3",
-    "rxjs": "^7.5.0",
-    "tailwindcss": "^2.2.19",
-    "tslib": "^2.3.0",
-    "typescript": "~4.6.4",
-    "zone.js": "~0.11.8"
+  "module": "fesm2015/cqa-lib-cqa-ui.mjs",
+  "es2020": "fesm2020/cqa-lib-cqa-ui.mjs",
+  "esm2020": "esm2020/cqa-lib-cqa-ui.mjs",
+  "fesm2020": "fesm2020/cqa-lib-cqa-ui.mjs",
+  "fesm2015": "fesm2015/cqa-lib-cqa-ui.mjs",
+  "typings": "cqa-lib-cqa-ui.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./cqa-lib-cqa-ui.d.ts",
+      "esm2020": "./esm2020/cqa-lib-cqa-ui.mjs",
+      "es2020": "./fesm2020/cqa-lib-cqa-ui.mjs",
+      "es2015": "./fesm2015/cqa-lib-cqa-ui.mjs",
+      "node": "./fesm2015/cqa-lib-cqa-ui.mjs",
+      "default": "./fesm2020/cqa-lib-cqa-ui.mjs"
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0"
   }
 }

package/dist/cqa-ui/README.md

@@ -1,226 +0,0 @@
-# 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');
-```
-
----
-
-## 💡 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
-   ```
-
----
-
-## 📚 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!
-

package/dist/cqa-ui/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "@cqa-lib/cqa-ui",
-  "version": "0.0.1",
-  "description": "UI Kit library for Angular 13.4",
-  "keywords": [
-    "angular",
-    "library",
-    "ui-kit",
-    "cqa-ui"
-  ],
-  "author": "",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "private": false,
-  "engines": {
-    "node": "16.20.2",
-    "npm": "8.19.4"
-  },
-  "overrides": {
-    "glob": "7.2.3",
-    "minimatch": "5.1.6"
-  },
-  "peerDependencies": {
-    "@angular/cdk": "^13.3.9",
-    "@angular/common": "^13.4.0",
-    "@angular/core": "^13.4.0",
-    "@angular/forms": "^13.4.0",
-    "@angular/material": "^13.3.9",
-    "rxjs": "^6.6.7 || ^7.5.0"
-  },
-  "module": "fesm2015/cqa-lib-cqa-ui.mjs",
-  "es2020": "fesm2020/cqa-lib-cqa-ui.mjs",
-  "esm2020": "esm2020/cqa-lib-cqa-ui.mjs",
-  "fesm2020": "fesm2020/cqa-lib-cqa-ui.mjs",
-  "fesm2015": "fesm2015/cqa-lib-cqa-ui.mjs",
-  "typings": "cqa-lib-cqa-ui.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./cqa-lib-cqa-ui.d.ts",
-      "esm2020": "./esm2020/cqa-lib-cqa-ui.mjs",
-      "es2020": "./fesm2020/cqa-lib-cqa-ui.mjs",
-      "es2015": "./fesm2015/cqa-lib-cqa-ui.mjs",
-      "node": "./fesm2015/cqa-lib-cqa-ui.mjs",
-      "default": "./fesm2020/cqa-lib-cqa-ui.mjs"
-    }
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}