@cqa-lib/cqa-ui 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/package.json +23 -49
  2. package/dist/cqa-ui/README.md +0 -226
  3. package/dist/cqa-ui/package.json +0 -56
  4. /package/{dist/cqa-ui/cqa-lib-cqa-ui.d.ts → cqa-lib-cqa-ui.d.ts} +0 -0
  5. /package/{dist/cqa-ui/esm2020 → esm2020}/cqa-lib-cqa-ui.mjs +0 -0
  6. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/button/button.component.mjs +0 -0
  7. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/dialog/dialog-ref.mjs +0 -0
  8. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/dialog/dialog.component.mjs +0 -0
  9. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/dialog/dialog.models.mjs +0 -0
  10. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/dialog/dialog.service.mjs +0 -0
  11. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/dialog/dialog.tokens.mjs +0 -0
  12. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/root-wrapper/root-wrapper.component.mjs +0 -0
  13. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/search-bar/search-bar.component.mjs +0 -0
  14. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/segment-control/segment-control.component.mjs +0 -0
  15. /package/{dist/cqa-ui/esm2020 → esm2020}/lib/ui-kit.module.mjs +0 -0
  16. /package/{dist/cqa-ui/esm2020 → esm2020}/public-api.mjs +0 -0
  17. /package/{dist/cqa-ui/fesm2015 → fesm2015}/cqa-lib-cqa-ui.mjs +0 -0
  18. /package/{dist/cqa-ui/fesm2015 → fesm2015}/cqa-lib-cqa-ui.mjs.map +0 -0
  19. /package/{dist/cqa-ui/fesm2020 → fesm2020}/cqa-lib-cqa-ui.mjs +0 -0
  20. /package/{dist/cqa-ui/fesm2020 → fesm2020}/cqa-lib-cqa-ui.mjs.map +0 -0
  21. /package/{dist/cqa-ui/lib → lib}/button/button.component.d.ts +0 -0
  22. /package/{dist/cqa-ui/lib → lib}/dialog/dialog-ref.d.ts +0 -0
  23. /package/{dist/cqa-ui/lib → lib}/dialog/dialog.component.d.ts +0 -0
  24. /package/{dist/cqa-ui/lib → lib}/dialog/dialog.models.d.ts +0 -0
  25. /package/{dist/cqa-ui/lib → lib}/dialog/dialog.service.d.ts +0 -0
  26. /package/{dist/cqa-ui/lib → lib}/dialog/dialog.tokens.d.ts +0 -0
  27. /package/{dist/cqa-ui/lib → lib}/root-wrapper/root-wrapper.component.d.ts +0 -0
  28. /package/{dist/cqa-ui/lib → lib}/search-bar/search-bar.component.d.ts +0 -0
  29. /package/{dist/cqa-ui/lib → lib}/segment-control/segment-control.component.d.ts +0 -0
  30. /package/{dist/cqa-ui/lib → lib}/ui-kit.module.d.ts +0 -0
  31. /package/{dist/cqa-ui/public-api.d.ts → public-api.d.ts} +0 -0
  32. /package/{dist/cqa-ui/styles.css → styles.css} +0 -0
package/package.json CHANGED
@@ -1,18 +1,7 @@
1
1
  {
2
2
  "name": "@cqa-lib/cqa-ui",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "UI Kit library for Angular 13.4",
5
- "scripts": {
6
- "build:cqa-ui": "ng-packagr -p ng-package.json && npm run build:tailwind && npm run fix:package",
7
- "build:tailwind": "tailwindcss -i ./src/lib/styles/tailwind.css -o ./dist/cqa-ui/styles.css --minify",
8
- "watch:tailwind": "tailwindcss -i ./src/lib/styles/tailwind.css -o ./dist/cqa-ui/styles.css --watch",
9
- "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')\"",
10
- "storybook": "start-storybook -p 6006",
11
- "build-storybook": "build-storybook"
12
- },
13
- "files": [
14
- "dist/"
15
- ],
16
5
  "keywords": [
17
6
  "angular",
18
7
  "library",
@@ -41,42 +30,27 @@
41
30
  "@angular/material": "^13.3.9",
42
31
  "rxjs": "^6.6.7 || ^7.5.0"
43
32
  },
44
- "devDependencies": {
45
- "@angular-devkit/architect": "^0.1303.11",
46
- "@angular-devkit/build-angular": "^13.3.11",
47
- "@angular-devkit/core": "^13.3.11",
48
- "@angular/animations": "^13.4.0",
49
- "@angular/cdk": "^13.3.9",
50
- "@angular/cli": "^13.3.11",
51
- "@angular/common": "^13.4.0",
52
- "@angular/compiler": "^13.4.0",
53
- "@angular/compiler-cli": "^13.4.0",
54
- "@angular/core": "^13.4.0",
55
- "@angular/forms": "^13.4.0",
56
- "@angular/material": "^13.3.9",
57
- "@angular/platform-browser": "^13.4.0",
58
- "@angular/platform-browser-dynamic": "^13.4.0",
59
- "@storybook/addon-a11y": "6.5.16",
60
- "@storybook/addon-actions": "^6.5.16",
61
- "@storybook/addon-essentials": "^6.5.16",
62
- "@storybook/addon-links": "^6.5.16",
63
- "@storybook/angular": "^6.5.16",
64
- "@storybook/builder-webpack5": "^6.5.16",
65
- "@storybook/manager-webpack5": "^6.5.16",
66
- "@types/glob": "^8.1.0",
67
- "@types/lodash": "4.14.191",
68
- "@types/minimatch": "^5.1.2",
69
- "@types/node": "^14.18.36",
70
- "autoprefixer": "^10.4.21",
71
- "glob": "7.2.3",
72
- "minimatch": "5.1.6",
73
- "ng-packagr": "^13.3.0",
74
- "postcss": "^8.5.6",
75
- "postcss-loader": "7.3.3",
76
- "rxjs": "^7.5.0",
77
- "tailwindcss": "^2.2.19",
78
- "tslib": "^2.3.0",
79
- "typescript": "~4.6.4",
80
- "zone.js": "~0.11.8"
33
+ "module": "fesm2015/cqa-lib-cqa-ui.mjs",
34
+ "es2020": "fesm2020/cqa-lib-cqa-ui.mjs",
35
+ "esm2020": "esm2020/cqa-lib-cqa-ui.mjs",
36
+ "fesm2020": "fesm2020/cqa-lib-cqa-ui.mjs",
37
+ "fesm2015": "fesm2015/cqa-lib-cqa-ui.mjs",
38
+ "typings": "cqa-lib-cqa-ui.d.ts",
39
+ "exports": {
40
+ "./package.json": {
41
+ "default": "./package.json"
42
+ },
43
+ ".": {
44
+ "types": "./cqa-lib-cqa-ui.d.ts",
45
+ "esm2020": "./esm2020/cqa-lib-cqa-ui.mjs",
46
+ "es2020": "./fesm2020/cqa-lib-cqa-ui.mjs",
47
+ "es2015": "./fesm2015/cqa-lib-cqa-ui.mjs",
48
+ "node": "./fesm2015/cqa-lib-cqa-ui.mjs",
49
+ "default": "./fesm2020/cqa-lib-cqa-ui.mjs"
50
+ }
51
+ },
52
+ "sideEffects": false,
53
+ "dependencies": {
54
+ "tslib": "^2.3.0"
81
55
  }
82
56
  }
@@ -1,226 +0,0 @@
1
- # CQA UI
2
-
3
- Component library for Angular 13+, built with Tailwind CSS tokens and Storybook-driven documentation.
4
-
5
- ---
6
-
7
- ## 📦 Installation
8
-
9
- ```bash
10
- npm install @cqa-lib/cqa-ui
11
- ```
12
-
13
- ### Peer dependencies
14
-
15
- ```bash
16
- 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
17
- ```
18
-
19
- ---
20
-
21
- ## 🚀 Quick Start
22
-
23
- ### Step 1: Import the Module
24
-
25
- ```ts
26
- // app.module.ts
27
- import { NgModule } from '@angular/core';
28
- import { BrowserModule } from '@angular/platform-browser';
29
- import { UiKitModule } from '@cqa-lib/cqa-ui';
30
-
31
- import { AppComponent } from './app.component';
32
-
33
- @NgModule({
34
- declarations: [AppComponent],
35
- imports: [
36
- BrowserModule,
37
- UiKitModule
38
- ],
39
- bootstrap: [AppComponent]
40
- })
41
- export class AppModule {}
42
- ```
43
-
44
- ### Step 2: Import the Styles
45
-
46
- **Option A: In `angular.json`** (Recommended)
47
-
48
- ```json
49
- {
50
- "projects": {
51
- "your-project": {
52
- "architect": {
53
- "build": {
54
- "options": {
55
- "styles": [
56
- "node_modules/@cqa-lib/cqa-ui/styles.css",
57
- "src/styles.css"
58
- ]
59
- }
60
- }
61
- }
62
- }
63
- }
64
- }
65
- ```
66
-
67
- **Option B: In `styles.css`**
68
-
69
- ```css
70
- @import '@cqa-lib/cqa-ui/styles.css';
71
- ```
72
-
73
- ### Step 3: Add Angular Material Icon Font
74
-
75
- Add this to your `index.html`:
76
-
77
- ```html
78
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
79
- ```
80
-
81
- Or in `styles.css`:
82
-
83
- ```css
84
- @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
85
- ```
86
-
87
- ---
88
-
89
- ## 💡 Usage Examples
90
-
91
- ### Button
92
-
93
- ```html
94
- <cqa-button variant="filled" icon="save" (clicked)="onSave()">
95
- Save changes
96
- </cqa-button>
97
-
98
- <cqa-button variant="outlined" [disabled]="isSubmitting">
99
- Cancel
100
- </cqa-button>
101
- ```
102
-
103
- ### Search bar
104
-
105
- ```html
106
- <cqa-search-bar
107
- placeholder="Search components"
108
- [value]="query"
109
- [showClear]="true"
110
- (valueChange)="query = $event"
111
- (search)="onSearch($event)"
112
- ></cqa-search-bar>
113
- ```
114
-
115
- ### Segment control
116
-
117
- ```html
118
- <cqa-segment-control
119
- [segments]="[
120
- { label: 'Overview', value: 'overview' },
121
- { label: 'Analytics', value: 'analytics' },
122
- { label: 'Settings', value: 'settings', disabled: true }
123
- ]"
124
- [value]="currentTab"
125
- (valueChange)="currentTab = $event"
126
- ></cqa-segment-control>
127
- ```
128
-
129
- ### Dialog
130
-
131
- ```ts
132
- import { DialogService } from '@cqa-lib/cqa-ui';
133
-
134
- constructor(private readonly dialog: DialogService) {}
135
-
136
- openDialog(): void {
137
- this.dialog.open({
138
- title: 'Delete dashboard',
139
- description: 'Deleting this dashboard will remove it for all collaborators.',
140
- warning: 'This action cannot be undone.',
141
- content: {
142
- type: 'text',
143
- text: 'Are you sure you want to continue?'
144
- },
145
- buttons: [
146
- { label: 'Cancel', role: 'secondary' },
147
- { label: 'Delete', role: 'warn', handler: () => 'delete' }
148
- ]
149
- });
150
- }
151
- ```
152
-
153
- ---
154
-
155
- ## 🔧 Troubleshooting
156
-
157
- ### Component renders as empty tag (no inner HTML)
158
-
159
- If you see `<cqa-search-bar></cqa-search-bar>` without any inner content, check:
160
-
161
- 1. **Missing styles import** - Add to `angular.json`:
162
- ```json
163
- "styles": [
164
- "node_modules/@cqa-lib/cqa-ui/styles.css",
165
- "src/styles.css"
166
- ]
167
- ```
168
-
169
- 2. **Missing Angular Material Icon font** - Add to `index.html`:
170
- ```html
171
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
172
- ```
173
-
174
- 3. **Check browser console** for errors:
175
- - Missing peer dependencies (`@angular/material`, `@angular/cdk`)
176
- - Module import errors
177
- - Template compilation errors
178
-
179
- 4. **Verify module import** in your `app.module.ts`:
180
- ```ts
181
- import { UiKitModule } from '@cqa-lib/cqa-ui';
182
-
183
- @NgModule({
184
- imports: [UiKitModule, ...]
185
- })
186
- ```
187
-
188
- 5. **Clear Angular cache and rebuild**:
189
- ```bash
190
- rm -rf .angular
191
- npm start # or ng serve
192
- ```
193
-
194
- ---
195
-
196
- ## 📚 Storybook
197
-
198
- ```bash
199
- npm run storybook
200
- ```
201
-
202
- View component documentation and interactive examples at `http://localhost:6006`.
203
-
204
- ---
205
-
206
- ## 🛠 Development
207
-
208
- ```bash
209
- npm install
210
- npm run build:cqa-ui # build the library bundle
211
- npm run storybook # start Storybook
212
- npm run build-storybook # static Storybook build
213
- ```
214
-
215
- ### Publish workflow
216
-
217
- 1. Update version in `package.json`
218
- 2. `npm run build:cqa-ui`
219
- 3. `npm publish dist/cqa-ui`
220
-
221
- ---
222
-
223
- ## 📄 License
224
-
225
- MIT — contributions and issues welcome!
226
-
@@ -1,56 +0,0 @@
1
- {
2
- "name": "@cqa-lib/cqa-ui",
3
- "version": "0.0.1",
4
- "description": "UI Kit library for Angular 13.4",
5
- "keywords": [
6
- "angular",
7
- "library",
8
- "ui-kit",
9
- "cqa-ui"
10
- ],
11
- "author": "",
12
- "license": "MIT",
13
- "publishConfig": {
14
- "access": "public"
15
- },
16
- "private": false,
17
- "engines": {
18
- "node": "16.20.2",
19
- "npm": "8.19.4"
20
- },
21
- "overrides": {
22
- "glob": "7.2.3",
23
- "minimatch": "5.1.6"
24
- },
25
- "peerDependencies": {
26
- "@angular/cdk": "^13.3.9",
27
- "@angular/common": "^13.4.0",
28
- "@angular/core": "^13.4.0",
29
- "@angular/forms": "^13.4.0",
30
- "@angular/material": "^13.3.9",
31
- "rxjs": "^6.6.7 || ^7.5.0"
32
- },
33
- "module": "fesm2015/cqa-lib-cqa-ui.mjs",
34
- "es2020": "fesm2020/cqa-lib-cqa-ui.mjs",
35
- "esm2020": "esm2020/cqa-lib-cqa-ui.mjs",
36
- "fesm2020": "fesm2020/cqa-lib-cqa-ui.mjs",
37
- "fesm2015": "fesm2015/cqa-lib-cqa-ui.mjs",
38
- "typings": "cqa-lib-cqa-ui.d.ts",
39
- "exports": {
40
- "./package.json": {
41
- "default": "./package.json"
42
- },
43
- ".": {
44
- "types": "./cqa-lib-cqa-ui.d.ts",
45
- "esm2020": "./esm2020/cqa-lib-cqa-ui.mjs",
46
- "es2020": "./fesm2020/cqa-lib-cqa-ui.mjs",
47
- "es2015": "./fesm2015/cqa-lib-cqa-ui.mjs",
48
- "node": "./fesm2015/cqa-lib-cqa-ui.mjs",
49
- "default": "./fesm2020/cqa-lib-cqa-ui.mjs"
50
- }
51
- },
52
- "sideEffects": false,
53
- "dependencies": {
54
- "tslib": "^2.3.0"
55
- }
56
- }
File without changes
File without changes
File without changes
File without changes