@ng-zen/cli 22.3.0-next.1 β†’ 22.3.0-next.2

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 (3) hide show
  1. package/CHANGELOG.md +3 -7
  2. package/README.md +119 -298
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,8 @@
1
- ## [22.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v22.2.0...v22.3.0-next.1) (2026-07-10)
2
-
3
- ### πŸš€ New Features
4
-
5
- * **ui/badge:** add component ([#439](https://github.com/kstepien3/ng-zen/issues/439)) ([ed1ccbc](https://github.com/kstepien3/ng-zen/commit/ed1ccbc3e29655d3c6f98ace327803e3fa4c7beb))
1
+ ## [22.3.0-next.2](https://github.com/kstepien3/ng-zen/compare/v22.3.0-next.1...v22.3.0-next.2) (2026-07-11)
6
2
 
7
3
  ### πŸ“š Documentation
8
4
 
9
- * project information, descriptions, and SEO ([#450](https://github.com/kstepien3/ng-zen/issues/450)) ([162ca7e](https://github.com/kstepien3/ng-zen/commit/162ca7e525e0f1b967ef91e1e63fd89b04c57a3e))
10
- * **ui/card:** integrate zen-input in card stories ([#453](https://github.com/kstepien3/ng-zen/issues/453)) ([42d03b8](https://github.com/kstepien3/ng-zen/commit/42d03b842415eaa57ca3f199474820f6cc9756bd))
5
+ * **README:** emphasize @ng-zen/cli ([#456](https://github.com/kstepien3/ng-zen/issues/456)) ([6306d4e](https://github.com/kstepien3/ng-zen/commit/6306d4efb5fef1b9a2de8790b4dc149e5069a5dd))
6
+ * **README:** simplify content structure and highlight key features ([#457](https://github.com/kstepien3/ng-zen/issues/457)) ([6ff7d4d](https://github.com/kstepien3/ng-zen/commit/6ff7d4d296b5be3bd86fcc44193028afcfe25dd7))
11
7
 
12
8
  Development mode - changelog will be generated during build.
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
  <a href="https://kstepien3.github.io/ng-zen/">
3
3
  <img src="https://raw.githubusercontent.com/kstepien3/ng-zen/master/assets/logo.png" alt="@ng-zen/cli Logo" width="256" />
4
4
  </a>
5
-
5
+
6
6
  <h1>@ng-zen/cli</h1>
7
7
 
8
8
  <p style="display: flex; gap: 1rem; justify-content: center;">
@@ -32,374 +32,195 @@
32
32
  </a>
33
33
  </p>
34
34
 
35
- <p><strong>Standalone Angular UI Kit Generator β€” not a utility suite, not a rigid library.</strong>
36
- <br/> Generate production-ready, customizable Angular UI components directly into your project πŸš€</p>
37
-
38
- <p>Stop wrestling with rigid UI libraries. **@ng-zen/cli** generates beautiful, modern Angular components <strong>as source code</strong> in your project, giving you complete control and ownership.</p>
35
+ <p>
36
+ <strong>Standalone Angular UI Kit Generator β€” the shadcn/ui alternative for Angular.</strong><br/>
37
+ Generate production-ready, highly customizable Angular UI components directly into your workspace. No rigid libraries, full code ownership.
38
+ </p>
39
39
  </div>
40
40
 
41
41
  <!-- TODO: Insert terminal recording GIF/WebM here showing the CLI in action -->
42
42
 
43
- ## 🎯 Why Choose @ng-zen/cli?
44
-
45
- Inspired by the philosophy of **shadcn/ui**, **@ng-zen/cli** brings the "own your components" approach natively to the modern Angular ecosystem.
46
-
47
- ### ✨ **Own Your Components**
48
-
49
- Unlike traditional UI libraries that give you `<library-button>` black boxes, @ng-zen generates **actual TypeScript, HTML, and SCSS files** directly into your project. You own the code, you control the future.
50
-
51
- ### 🏎️ **Instant Productivity**
52
-
53
- - **Production-Ready UI Elements:** Alert, Avatar, Badge, Button, Card, Checkbox, Dialog, Divider, Form Control, Icon, Input, Popover, Radio, Skeleton, Switch, Textarea
54
- - **Zero Configuration:** Works with Angular 20+ out of the box
55
- - **Complete Setup:** Each component includes unit tests, Storybook stories, and documentation
56
-
57
- ### 🎨 **Built for Customization**
58
-
59
- - **CSS Variables:** Easy theming without touching component internals
60
- - **Editable SCSS:** Modify styles directly when you need deeper customization
61
- - **Modern Architecture:** Standalone components, OnPush change detection, Angular signals
62
-
63
- ### πŸ“š **Developer Experience First**
64
-
65
- - **Interactive Documentation:** Live Storybook examples for every component
66
- - **TypeScript Ready:** Full type safety and IntelliSense support
67
- - **Test Coverage:** Generated components include comprehensive unit tests
68
- - **JSDoc Annotations:** Detailed inline documentation
69
-
70
- ## Table of Contents
71
-
72
- 1. [Quick Start](#-quick-start)
73
- 2. [Installation](#-installation)
74
- 3. [Available Elements](#-available-uis)
75
- 4. [Usage Examples](#-usage-examples)
76
- 5. [Perfect For](#-perfect-for)
77
- 6. [Advanced Features](#-advanced-features)
78
- 7. [Documentation](#-documentation)
79
- 8. [Project Status](#-project-status)
80
- 9. [Contributing](#-contributing)
81
- 10. [License](#license)
82
- 11. [Author](#author)
83
- 12. [See Also](#see-also)
84
- 13. [FAQ](#faq)
43
+ ---
85
44
 
86
- ## πŸš€ Quick Start
45
+ ## πŸš€ Getting Started
87
46
 
88
- > πŸ‘€ **See it in action before installing:** [Live Storybook Demo](https://kstepien3.github.io/ng-zen/)
47
+ The fastest way to install the CLI and generate your first component.
89
48
 
90
- The fastest way to get started:
49
+ **1. Add the package to your Angular 20+ project:**
91
50
 
92
51
  ```bash
93
52
  ng add @ng-zen/cli
94
53
  ```
95
54
 
96
- This command:
97
-
98
- - βœ… Installs the package
99
- - βœ… Sets up your project configuration
100
- - βœ… Ready to generate components
101
-
102
- Then generate your first component:
55
+ **2. Generate UI components (interactive mode):**
103
56
 
104
57
  ```bash
105
58
  ng generate @ng-zen/cli:ui
106
59
  ```
107
60
 
108
- Select components from an interactive menu and they'll be generated in the `ui` folder within your project's source directory (e.g., `src/app/ui`)! πŸŽ‰
109
-
110
- ## πŸ“¦ Installation
111
-
112
- ### Recommended: Using ng add
113
-
114
- ```bash
115
- ng add @ng-zen/cli
116
- ```
117
-
118
- ### Manual Installation
119
-
120
- ```bash
121
- # Stable version
122
- pnpm add -D @ng-zen/cli
123
-
124
- # Latest features and fixes
125
- pnpm add -D @ng-zen/cli@next
126
- ```
127
-
128
- ### Icon Library (Optional)
129
-
130
- To use the `zen-icon` component, install an icon library:
131
-
132
- ```bash
133
- # Using HugeIcons (recommended)
134
- pnpm add @hugeicons/core-free-icons
135
-
136
- # Or use any other SVG icon library
137
- ```
138
-
139
- Then import icons and pass them to the component:
61
+ **3. Use the generated standalone component:**
140
62
 
141
63
  ```typescript
142
- import { CheckmarkIcon } from '@hugeicons/core-free-icons';
143
- import { ZenIcon } from '@ng-zen/cli';
64
+ import { ZenButton } from './ui/button';
144
65
 
145
66
  @Component({
146
- imports: [ZenIcon],
67
+ imports: [ZenButton],
147
68
  template: `
148
- <zen-icon [icon]="CheckmarkIcon" />
69
+ <button variant="primary" zen-button>Action</button>
149
70
  `,
150
71
  })
151
72
  export class MyComponent {}
152
73
  ```
153
74
 
154
- ## 🧩 Available UIs
75
+ ## Table of Contents
155
76
 
156
- | Component | Description | Features |
157
- | ---------------- | -------------------------------- | ------------------------------------------------------------------------------ |
158
- | **Avatar** | User profile images and initials | Image fallback, size variants, rounded styles |
159
- | **Alert** | Informational messages | Customizable styles, dismissible options |
160
- | **Badge** | Status indicators and labels | 6 variants, icons support, focus-visible ring |
161
- | **Button** | Interactive buttons | Primary/secondary variants, loading states, icons |
162
- | **Card** | Content container | Multi-slot projection (header, title, subtitle, footer), CSS custom properties |
163
- | **Checkbox** | Form checkboxes | Indeterminate state, custom styling, validation |
164
- | **Dialog** | Native modal dialogs | Native dialog element, service API, size variants, backdrop config |
165
- | **Divider** | Visual separators | Horizontal/vertical, with labels, custom thickness |
166
- | **Form Control** | Form field wrapper | Labels, validation messages, required indicators |
167
- | **Icon** | SVG icon system | Huge Icons integration, size variants, colors |
168
- | **Input** | Text input fields | Validation states, prefixes/suffixes, types |
169
- | **Popover** | Native Popover API directive | Template/string content, placements, click toggle, CSS anchor positioning |
170
- | **Radio** | Form radio buttons | Group selection, two-way binding, custom styling, disabled state |
171
- | **Skeleton** | Loading placeholders | Multiple shapes, animation, responsive |
172
- | **Switch** | Toggle controls | On/off states, disabled state, custom labels |
173
- | **Textarea** | Multi-line text input | Auto-resize, character counts, validation |
174
-
175
- > πŸ’‘ **More components coming soon!** Planned: Directives, Pipes, Services, and additional UI elements.
176
-
177
- ## πŸ’‘ Usage Examples
178
-
179
- ### Basic Component Generation
77
+ 1. [Getting Started](#-getting-started)
78
+ 2. [Features](#-features)
79
+ 3. [CLI Usage & Options](#-cli-usage--options)
80
+ 4. [Available UIs](#-available-uis)
81
+ 5. [Customization](#-customization)
82
+ 6. [Philosophy & Architecture](#-philosophy--architecture)
83
+ 7. [Community & Contributions](#-community--contributions)
84
+ 8. [Documentation & Links](#-documentation--links)
180
85
 
181
- ```bash
182
- # Interactive mode - choose components from a menu (default path: src/app/ui if not provided)
183
- ng generate @ng-zen/cli:ui
86
+ ## ✨ Features
184
87
 
185
- # Generate specific UI elements
186
- ng generate @ng-zen/cli:ui --ui avatar button
88
+ - **Signal First Architecture:** Designed natively for Angular's reactive model. Full support for Signal Inputs, Queries, Model signals, and the new **Signal Forms** API.
89
+ - **Own Your Code:** Components are generated as raw `.ts`, `.html`, and `.scss` files directly in your project. You control the implementation.
90
+ - **Agnostic Styling:** Built with raw SCSS and CSS Variables. No forced dependencies on Tailwind CSS, but fully adaptable if needed.
91
+ - **Modern Angular:** Leverages Standalone Components, OnPush change detection, and eliminates unnecessary RxJS overhead in UI layers.
92
+ - **Production Ready:** Includes Vitest unit tests, Storybook stories, and accessibility features out of the box.
187
93
 
188
- # Custom location
189
- ng generate @ng-zen/cli:ui ./src/app/custom --ui input checkbox
94
+ ## πŸ› οΈ CLI Usage & Options
190
95
 
191
- # Include Storybook stories
192
- ng generate @ng-zen/cli:ui --ui button --stories
96
+ Generate multiple components at once, specify custom paths, or include Storybook documentation files directly from the terminal.
97
+
98
+ ```bash
99
+ ng generate @ng-zen/cli:ui [path] --ui <elements...> --stories
193
100
  ```
194
101
 
195
- ### What Gets Generated
102
+ ### Arguments & Flags
196
103
 
197
- Each component set includes:
104
+ | Property | Status | Default | Description |
105
+ | :-------------- | :--------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------- |
106
+ | **`[path]`** | _Optional_ | `src/app/ui` | The directory where components will be generated (e.g., `./src/app/shared/components`). |
107
+ | **`--ui`** | _Required_ | - | A space-separated list of components to generate (e.g., `button`, `alert`, `dialog`). Interactive prompt appears if omitted. |
108
+ | **`--stories`** | _Optional_ | `false` | Generates `.stories.ts` files alongside the component, instantly ready for your Storybook integration. |
109
+ | **`--project`** | _Optional_ | auto-detected | Specify the target project name in a multi-project workspace. |
198
110
 
199
- ```
200
- src/app/ui/
201
- β”œβ”€β”€ button/
202
- β”‚ β”œβ”€β”€ button.ts # Component logic
203
- β”‚ β”œβ”€β”€ button.scss # Customizable styles
204
- β”‚ β”œβ”€β”€ button.spec.ts # Unit tests
205
- β”‚ β”œβ”€β”€ button.stories.ts # Storybook documentation
206
- β”‚ β”œβ”€β”€ index.ts # Barrel exports
207
- β”‚ └── README.md # Component-specific docs
208
- └── input/
209
- β”œβ”€β”€ input.ts
210
- β”œβ”€β”€ input.scss
211
- β”œβ”€β”€ input.spec.ts
212
- β”œβ”€β”€ input.stories.ts
213
- β”œβ”€β”€ index.ts
214
- └── README.md
215
- ```
111
+ ### Examples
216
112
 
217
- ### Real-World Usage
113
+ **Interactive mode (Recommended):**
218
114
 
219
- ```typescript
220
- // After generation, import and use like any Angular component
221
- import { ZenButton } from './ui/button';
222
- import { ZenInput } from './ui/input';
115
+ ```bash
116
+ ng generate @ng-zen/cli:ui
117
+ ```
223
118
 
224
- @Component({
225
- selector: 'app-login',
226
- imports: [ZenButton, ZenInput],
227
- template: `
228
- <form>
229
- <zen-input placeholder="Enter email" type="email" />
230
- <button variant="primary" zen-button>Sign In</button>
231
- </form>
232
- `,
233
- })
234
- export class LoginComponent {}
119
+ **Generate specific components to a custom path:**
120
+
121
+ ```bash
122
+ ng generate @ng-zen/cli:ui ./src/app/shared/components --ui avatar badge card
235
123
  ```
236
124
 
237
- ## 🎯 Perfect For
125
+ **Generate components with Storybook files:**
238
126
 
239
- ### 🏒 **Enterprise Teams**
127
+ ```bash
128
+ ng generate @ng-zen/cli:ui --ui button input --stories
129
+ ```
240
130
 
241
- - Build consistent internal component libraries
242
- - Maintain design system compliance across projects
243
- - Avoid vendor lock-in with owned source code
131
+ ## 🧩 Available UIs
244
132
 
245
- ### πŸš€ **Startup Projects**
133
+ ### Forms & Inputs
246
134
 
247
- - Rapid prototyping with production-ready components
248
- - Easy customization as requirements evolve
249
- - No licensing concerns or bundle size bloat
135
+ | Component | Description | Features |
136
+ | ---------------- | --------------------- | ---------------------------------------------------------------- |
137
+ | **Checkbox** | Form checkboxes | Indeterminate state, custom styling, validation |
138
+ | **Form Control** | Form field wrapper | Labels, validation messages, required indicators |
139
+ | **Input** | Text input fields | Validation states, prefixes/suffixes, types |
140
+ | **Radio** | Form radio buttons | Group selection, two-way binding, custom styling, disabled state |
141
+ | **Switch** | Toggle controls | On/off states, disabled state, custom labels |
142
+ | **Textarea** | Multi-line text input | Auto-resize, character counts, validation |
250
143
 
251
- ### πŸ‘©β€πŸ’» **Angular Developers**
144
+ ### Data Display
252
145
 
253
- - Learn modern Angular patterns (signals, standalone components)
254
- - Speed up UI development workflow
255
- - Maintain full control over component behavior
146
+ | Component | Description | Features |
147
+ | ----------- | -------------------------------- | ------------------------------------------------------------------------------ |
148
+ | **Avatar** | User profile images and initials | Image fallback, size variants, rounded styles |
149
+ | **Badge** | Status indicators and labels | 6 variants, icons support, focus-visible ring |
150
+ | **Card** | Content container | Multi-slot projection (header, title, subtitle, footer), CSS custom properties |
151
+ | **Divider** | Visual separators | Horizontal/vertical, with labels, custom thickness |
152
+ | **Icon** | SVG icon system | Built to support any SVG icon library. Size variants, colors |
256
153
 
257
- ### 🎨 **Design Systems**
154
+ ### Feedback
258
155
 
259
- - Use as foundation for custom component libraries
260
- - Extend and modify components to match brand guidelines
261
- - Generate consistent documentation automatically
156
+ | Component | Description | Features |
157
+ | ------------ | ---------------------- | ---------------------------------------- |
158
+ | **Alert** | Informational messages | Customizable styles, dismissible options |
159
+ | **Skeleton** | Loading placeholders | Multiple shapes, animation, responsive |
262
160
 
263
- ## ⚑ Advanced Features
161
+ ### Actions & Overlays
264
162
 
265
- ### **Modern Angular Architecture**
163
+ | Component | Description | Features |
164
+ | ----------- | ---------------------------- | ------------------------------------------------------------------------- |
165
+ | **Button** | Interactive buttons | Primary/secondary variants, loading states, icons |
166
+ | **Dialog** | Native modal dialogs | Native dialog element, service API, size variants, backdrop config |
167
+ | **Popover** | Native Popover API directive | Template/string content, placements, click toggle, CSS anchor positioning |
266
168
 
267
- - **Standalone Components:** No NgModule dependencies
268
- - **OnPush Change Detection:** Optimized performance
269
- - **Angular Signals:** Reactive state management
270
- - **TypeScript 5.8+:** Latest language features
169
+ ## 🎨 Customization
271
170
 
272
- ### **Customization System**
171
+ Every generated component utilizes CSS variables for immediate theming without touching the core logic. Overwrite them globally or locally:
273
172
 
274
173
  ```scss
275
- // Easy theming with CSS variables
174
+ /* styles.scss */
276
175
  :root {
277
- --zen-button-primary-bg: #your-brand-color;
278
- --zen-button-border-radius: 8px;
279
- --zen-button-font-weight: 600;
176
+ /* Global theme variables */
177
+ --zen-primary: hsl(221deg 83% 53%);
178
+ --zen-transition-duration: 0.3s;
179
+ --zen-outline: 2px solid hsl(221deg 83% 53% / 50%);
180
+
181
+ /* Component-specific overrides */
182
+ --zen-button-primary: hsl(221deg 83% 40%);
183
+ --zen-button-shadow: 0 4px 6px hsl(0deg 0% 0% / 15%);
280
184
  }
281
185
  ```
282
186
 
283
- ### **Testing Integration**
284
-
285
- - **Vitest Ready:** All tests use Vitest framework for fast, modern unit testing
286
- - **Component Testing:** Isolated unit tests for each component
287
- - **Storybook Testing:** Visual testing and documentation
288
-
289
- ### **Development Tools**
290
-
291
- - **ESLint Integration:** Code quality enforcement
292
- - **Prettier Support:** Consistent code formatting
293
- - **Husky Hooks:** Pre-commit validation
294
-
295
- ## πŸ“š Documentation
296
-
297
- - **πŸ“– [Live Storybook Demo](https://kstepien3.github.io/ng-zen/)** - Interactive component examples
298
- - **πŸ”§ [Development Guide](https://github.com/kstepien3/ng-zen/blob/master/DEVELOPMENT.md)** - Setup and contribution workflow
299
- - **🀝 [Contributing Guide](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)** - How to contribute to the project
300
- - **πŸ“ [Changelog](https://github.com/kstepien3/ng-zen/blob/master/CHANGELOG.md)** - Version history and breaking changes
301
- - **πŸ’¬ Component READMEs** - Detailed docs generated with each component
302
-
303
- ## 🚧 Project Status
304
-
305
- **🟒 Actively Developed & Production Ready**
306
-
307
- - βœ… **Core Features:** Component generation is stable and tested
308
- - βœ… **Angular 20+ Support:** Compatible with latest Angular versions
309
- - πŸ”„ **Continuous Improvement:** Regular updates and new components
310
- - πŸ“‹ **Roadmap:** Directives, pipes, services, and more UI components planned
311
-
312
- ### Release Channels
313
-
314
- - **`@ng-zen/cli`** - Stable releases from `master` branch
315
- - **`@ng-zen/cli@next`** - Pre-releases from `next` branch with latest features
316
-
317
- > **Important:** Since @ng-zen/cli generates code into your project, you own that code completely. Updates to the CLI primarily add new features and components - they won't break your existing generated components.
318
-
319
- ## 🀝 Contributing
187
+ For structural changes (e.g., modifying the default `0.625rem` border radius or internal padding), simply edit the generated `.scss` files in your `./ui` directory.
320
188
 
321
- We welcome contributions! Whether it's:
189
+ ## πŸ›οΈ Philosophy & Architecture
322
190
 
323
- - πŸ› **Bug Reports** - Help us improve reliability
324
- - πŸ’‘ **Feature Requests** - Suggest new components or capabilities
325
- - πŸ”§ **Code Contributions** - Add features or fix issues
326
- - πŸ“š **Documentation** - Improve guides and examples
191
+ ### Perfect For
327
192
 
328
- > πŸš€ **Do you urgently need some new features? Report them in the [`issues`](https://github.com/kstepien3/ng-zen/issues) section! They will be scheduled for the next deployments.**
193
+ - **Enterprise Teams:** Build consistent internal design systems without vendor lock-in.
194
+ - **Startup Projects:** Rapid prototyping with components that can be easily customized as requirements scale.
195
+ - **Angular Developers:** Maintain full control over component behavior while enforcing modern Angular patterns (Signals, Signal Forms, Standalone).
329
196
 
330
- **Getting Started:**
197
+ ### Advanced Details
331
198
 
332
- 1. Read our [Contributing Guidelines](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)
333
- 2. Check the [Development Setup](https://github.com/kstepien3/ng-zen/blob/master/DEVELOPMENT.md)
334
- 3. Browse [open issues](https://github.com/kstepien3/ng-zen/issues)
335
- 4. Join the discussion!
199
+ - **Zero Configuration:** Works seamlessly with standard Angular CLI workspaces.
200
+ - **Reactive by Design:** Built from the ground up to utilize Angular Signals for state management, making integration with modern state libraries and Signal Forms seamless.
201
+ - **Continuous Updates:** Updating `@ng-zen/cli` brings new features and component blueprints, but will **never** overwrite or break your already generated code.
202
+ - **Icon Agnostic:** The optional `zen-icon` is built to be completely library-agnostic. While `@hugeicons/core-free-icons` is used in examples, you can integrate it with any SVG icon provider.
336
203
 
337
- ## License
204
+ ## 🀝 Community & Contributions
338
205
 
339
- This project is licensed under the [BSD 2-Clause License](https://github.com/kstepien3/ng-zen/blob/master/LICENSE) πŸ“œ.
206
+ **Built by developers, for developers.**
340
207
 
341
- ## Author
208
+ This project is actively developed and shaped by community feedback. We are highly open to suggestions, new features, and improvements.
342
209
 
343
- **Konrad StΔ™pieΕ„** - Creator & Maintainer
344
-
345
- - πŸ™ GitHub: [@kstepien3](https://github.com/kstepien3)
346
- - πŸ’Ό LinkedIn: [Konrad StΔ™pieΕ„](https://www.linkedin.com/in/konradstepien/)
347
- - πŸ“§ Email: [kord.stp@gmail.com](mailto:kord.stp@gmail.com?subject=%5BNG-ZEN%5D%20Question)
348
-
349
- ## See Also
350
-
351
- - **[ngx-schematic-builder](https://github.com/kstepien3/ngx-schematic-builder)** - Custom Angular builder for compiling schematics (used by this project)
352
-
353
- ## FAQ
354
-
355
- ### ❓ **How is this different from Angular Material or PrimeNG?**
356
-
357
- Traditional UI libraries give you pre-compiled components that you can't modify. @ng-zen/cli generates the actual source code into your project, so you have complete control. You can modify the TypeScript, HTML, and SCSS files however you need.
358
-
359
- ### ❓ **Can I customize the generated components?**
360
-
361
- Absolutely! That's the whole point. Every component is generated as editable source code in your project. You can:
362
-
363
- - Modify the TypeScript logic
364
- - Change the HTML templates
365
- - Customize the SCSS styles
366
- - Extend functionality as needed
367
-
368
- ### ❓ **What happens when I update @ng-zen/cli?**
369
-
370
- Updates to the CLI add new features and components but don't affect your already-generated code. Your components belong to you and won't be overwritten. You can always generate new components with the latest features.
371
-
372
- ### ❓ **Does this work with existing Angular projects?**
373
-
374
- Yes! @ng-zen/cli works with any Angular 20+ project. Just run `ng add @ng-zen/cli` in your existing project and start generating components.
375
-
376
- ### ❓ **Can I use this in production?**
377
-
378
- Definitely! The generated components are production-ready with:
379
-
380
- - Full TypeScript type safety
381
- - Comprehensive unit tests
382
- - Optimized performance (OnPush change detection)
383
- - Accessibility considerations
384
- - Modern Angular best practices
385
-
386
- ### ❓ **How do I theme the components?**
387
-
388
- Components use CSS variables for easy theming:
389
-
390
- ```scss
391
- :root {
392
- --zen-primary-color: #your-brand-color;
393
- --zen-border-radius: 8px;
394
- }
395
- ```
210
+ - **Missing a component?** Open a feature request.
211
+ - **Found a bug?** Submit an issue.
212
+ - **Have an idea?** Start a discussion.
396
213
 
397
- For deeper customization, edit the generated SCSS files directly.
214
+ We prioritize community requests in our roadmap. [Report issues or suggest features here](https://github.com/kstepien3/ng-zen/issues).
398
215
 
399
- ### ❓ **Why no Tailwind CSS?**
216
+ ## πŸ“š Documentation & Links
400
217
 
401
- You can tweak the code to use Tailwind if you want, but avoid adding extra libraries. Our goal is to create base components that are easy to improve later, work without any CSS libraries, and are fully customizable right out of the box.
218
+ - **πŸ“– [Live Storybook Demo](https://kstepien3.github.io/ng-zen/)** - Interactive examples
219
+ - **🀝 [Contributing Guide](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)** - Workflow & bug reporting
220
+ - **πŸ“ [Releases & Changelog](https://github.com/kstepien3/ng-zen/releases)** - Version history and release notes
221
+ - **πŸ“¦ [ngx-schematic-builder](https://github.com/kstepien3/ngx-schematic-builder)** - Custom compiler for this project
402
222
 
403
223
  ---
404
224
 
405
- **Ready to take control of your Angular UI components?** [Get started now!](#-quick-start) πŸš€
225
+ **License:** [BSD 2-Clause](https://github.com/kstepien3/ng-zen/blob/master/LICENSE)
226
+ **Maintainer:** Konrad StΔ™pieΕ„ ([@kstepien3](https://github.com/kstepien3))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-zen/cli",
3
- "version": "22.3.0-next.1",
3
+ "version": "22.3.0-next.2",
4
4
  "description": "Angular CLI generator for creating fully customizable UI components.",
5
5
  "license": "BSD-2-Clause",
6
6
  "private": false,