@ng-zen/cli 20.3.0-next.3 → 20.4.0-next.1

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## [20.4.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.3.0...v20.4.0-next.1) (2025-10-03)
+
+### 🚀 New Features
+
+* **alert:** add component ([#337](https://github.com/kstepien3/ng-zen/issues/337)) ([bc59953](https://github.com/kstepien3/ng-zen/commit/bc59953dc263561b0a8fb4e3fd0e753c1c14df77))
+
+### 🐛 Bug Fixes
+
+* **alert:** update icon selector ([#338](https://github.com/kstepien3/ng-zen/issues/338)) ([99b9d63](https://github.com/kstepien3/ng-zen/commit/99b9d63e0bbd9ef4dc61672b2b1b393ecd26c406))
+
+### 📚 Documentation
+
+* **seo:** add seo features ([#332](https://github.com/kstepien3/ng-zen/issues/332)) ([3afc125](https://github.com/kstepien3/ng-zen/commit/3afc12595d39ae8ffad8223e787862d143ec9b6a))
+
+## [20.3.0](https://github.com/kstepien3/ng-zen/compare/v20.2.1...v20.3.0) (2025-09-21)
+
+### 🚀 New Features
+
+* **switch:** add animations ([#303](https://github.com/kstepien3/ng-zen/issues/303)) ([6b48d4f](https://github.com/kstepien3/ng-zen/commit/6b48d4f39db1e5bfe22920fa749b652ac65e4432))
+
+### 🐛 Bug Fixes
+
+* **avatar:** improve css variables ([#323](https://github.com/kstepien3/ng-zen/issues/323)) ([eef614a](https://github.com/kstepien3/ng-zen/commit/eef614a0e2060fe32f72e00809b66009ae24832f))
+* **input:** resolve problem with wrong variables ([#322](https://github.com/kstepien3/ng-zen/issues/322)) ([30f5d10](https://github.com/kstepien3/ng-zen/commit/30f5d10c4c559f01ed3445b77e174340b4f2fb6f))
+
+### 🛠️ Code Refactor
+
+* **button:** improve css variables ([#321](https://github.com/kstepien3/ng-zen/issues/321)) ([4ed1310](https://github.com/kstepien3/ng-zen/commit/4ed1310450dde749164c419ec6b5da0a4fbb98bc))
+* **checkbox:** improve css variables ([#317](https://github.com/kstepien3/ng-zen/issues/317)) ([bbe1437](https://github.com/kstepien3/ng-zen/commit/bbe143704163394a9c9ce446aa9d749a57f9c62c))
+* **divider:** improve css variables ([#316](https://github.com/kstepien3/ng-zen/issues/316)) ([7a19ce7](https://github.com/kstepien3/ng-zen/commit/7a19ce72db58e8d23a4786aae2787db6bcfdbf6d))
+* **input:** improve css variables ([#314](https://github.com/kstepien3/ng-zen/issues/314)) ([58cdbb3](https://github.com/kstepien3/ng-zen/commit/58cdbb3bafb9c10057b75d73c7234247e519c97e))
+* **skeleton:** improve css variables ([#313](https://github.com/kstepien3/ng-zen/issues/313)) ([9f0c8fd](https://github.com/kstepien3/ng-zen/commit/9f0c8fd1b23172fa5bb9bf9f42b6739c7b232876))
+* **switch:** improve styles, css variables ([#304](https://github.com/kstepien3/ng-zen/issues/304)) ([3c04b87](https://github.com/kstepien3/ng-zen/commit/3c04b8754cd25af8cfc0c0ffa89ac8633de33145))
+* **textarea:** improve css variables ([#305](https://github.com/kstepien3/ng-zen/issues/305)) ([a9b412c](https://github.com/kstepien3/ng-zen/commit/a9b412c8ab1f77ba3d602384c963aade62308e6b))
+
+### 📚 Documentation
+
+* **README.md:** fix links ([#302](https://github.com/kstepien3/ng-zen/issues/302)) ([089587c](https://github.com/kstepien3/ng-zen/commit/089587c2ecbb8c27492bc34abd4896e7842e7d04))
+* **storybook:** add brand theme ([#325](https://github.com/kstepien3/ng-zen/issues/325)) ([97458f8](https://github.com/kstepien3/ng-zen/commit/97458f89de18896595a30f2a33ae93bb5ef75ac5))
+* **textarea:** update jsdoc about css variables ([#311](https://github.com/kstepien3/ng-zen/issues/311)) ([6ceabb5](https://github.com/kstepien3/ng-zen/commit/6ceabb58e6549e87bdbbe3b3b2f6e2e0928ab49b))
+
 ## [20.3.0-next.3](https://github.com/kstepien3/ng-zen/compare/v20.3.0-next.2...v20.3.0-next.3) (2025-09-15)
 
 ### 🐛 Bug Fixes

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://kstepien3.github.io/ng-zen/">
-    <img src="https://raw.githubusercontent.com/kstepien3/ng-zen/master/images/logo.png" alt="@ng-zen/cli Logo" width="256" />
+    <img src="https://raw.githubusercontent.com/kstepien3/ng-zen/master/assets/logo.png" alt="@ng-zen/cli Logo" width="256" />
   </a>
   
   <h1>@ng-zen/cli</h1>
@@ -117,6 +117,7 @@ pnpm add -D @ng-zen/cli@next
 | Component        | Description                      | Features                                           |
 | ---------------- | -------------------------------- | -------------------------------------------------- |
 | **Avatar**       | User profile images and initials | Image fallback, size variants, rounded styles      |
+| **Alert**        | Informational messages           | Customizable styles, dismissible options           |
 | **Button**       | Interactive buttons              | Primary/secondary variants, loading states, icons  |
 | **Checkbox**     | Form checkboxes                  | Indeterminate state, custom styling, validation    |
 | **Divider**      | Visual separators                | Horizontal/vertical, with labels, custom thickness |

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.3.0-next.3",
-  "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
+  "version": "20.4.0-next.1",
+  "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like avatar, button, checkbox, divider, form-control, icon, input, skeleton, switch, textarea with Storybook demos.",
   "license": "BSD-2-Clause",
   "private": false,
   "repository": {
+    "type": "git",
     "url": "git+https://github.com/kstepien3/ng-zen.git"
   },
   "bugs": {
@@ -18,16 +19,42 @@
   "homepage": "https://kstepien3.github.io/ng-zen/",
   "keywords": [
     "angular",
+    "angular-ui",
+    "ui-kit",
+    "angular-components",
     "schematics",
-    "ui-components",
-    "angular-cli",
-    "storybook",
-    "customizable-components",
+    "ng-cli",
+    "storybook angular",
+    "customizable ui",
+    "angular library",
     "avatar",
     "button",
     "checkbox",
     "input",
-    "textarea"
+    "textarea",
+    "switch",
+    "skeleton",
+    "divider",
+    "form-control",
+    "icon",
+    "angular ui",
+    "angular components",
+    "ui library",
+    "zen ui",
+    "storybook",
+    "component generator",
+    "ng add",
+    "angular kit",
+    "open source",
+    "modern angular",
+    "angular custom elements",
+    "storybook angular",
+    "form controls",
+    "material alternative",
+    "accessibility",
+    "theming",
+    "angular schematics generator",
+    "ui components cli"
   ],
   "ng-add": {
     "save": "devDependencies"
@@ -39,8 +66,8 @@
     "@angular/core": ">=20.0.0"
   },
   "dependencies": {
-    "@angular-devkit/core": "^20.1.0",
-    "@angular-devkit/schematics": "^20.1.0",
+    "@angular-devkit/core": "^20.3.2",
+    "@angular-devkit/schematics": "^20.3.2",
     "tslib": "^2.8.1"
   }
 }

package/schematics/components/files/alert/alert.scss

@@ -0,0 +1,39 @@
+// Globals
+$transition-duration: var(--zen-transition-duration, 0.4s);
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+
+:host {
+  --zen-alert-padding: 1rem;
+  --zen-alert-bg-color: hsl(0deg 0% 100%);
+  --zen-alert-color: hsl(0deg 0% 0%);
+  --zen-alert-border: 1px solid hsl(0deg 0% 80%);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  padding: var(--zen-alert-padding);
+  background-color: var(--zen-alert-bg-color);
+  color: var(--zen-alert-color);
+  border: var(--zen-alert-border);
+  border-radius: 0.625rem;
+  font-size: 14px;
+  transition-property: background-color, opacity;
+  transition-duration: $transition-duration;
+  transition-timing-function: ease;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5rem;
+}
+
+/* Title styles */
+::ng-deep [alert-title] {
+  padding: 0;
+  margin: 0;
+}

package/schematics/components/files/alert/alert.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenAlert } from './alert';
+
+describe('ZenAlert', () => {
+  let component: ZenAlert;
+  let fixture: ComponentFixture<ZenAlert>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenAlert],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenAlert);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/alert/alert.stories.ts

@@ -0,0 +1,67 @@
+import * as icons from '@hugeicons/core-free-icons';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenIcon } from '../icon';
+import { ZenAlert } from './alert';
+
+interface StoryParams {
+  content: string;
+  icon: string;
+  title: string;
+}
+
+type Options = ZenAlert & StoryParams;
+
+export default {
+  title: 'Components/Alert',
+  component: ZenAlert,
+  decorators: [moduleMetadata({ imports: [ZenIcon] })],
+  args: {
+    icon: 'Notification02Icon',
+    title: 'Alert Title',
+    content: 'This is an alert message',
+  },
+  argTypes: {
+    content: {
+      control: 'text',
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: 'ng-content',
+        },
+      },
+    },
+    icon: {
+      control: 'select',
+      options: Object.keys(icons),
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    title: {
+      control: 'text',
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+  },
+  render: ({ content, icon, title }) => ({
+    props: {},
+    template: `
+      <zen-alert>
+        ${icon ? '<zen-icon alert-icon icon="' + icon + '" />' : ''}
+        <h3 alert-title>${title}</h3>
+        ${content}
+      </zen-alert>`,
+  }),
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
+
+export const Default: Story = {};

package/schematics/components/files/alert/alert.ts

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * ZenAlert is a reusable alert component designed to provide
+ * a consistent and customizable alert style across the application.
+ * It can be used to display messages with different severity levels.
+ *
+ * @example
+ *
+ * ```html
+ * <zen-alert>
+ *   <zen-icon alert-icon icon="Notification02Icon" />
+ *   <h3 alert-title>Title</h3>
+ *   content
+ * </zen-alert>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --zen-alert-padding: 1rem;
+ *   --zen-alert-bg-color: hsl(0deg 0% 100%);
+ *   --zen-alert-color: hsl(0deg 0% 0%);
+ *   --zen-alert-border: 1px solid hsl(0deg 0% 80%);
+ * }
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  selector: 'zen-alert',
+  template: `
+    <ng-content select="[alert-icon]" />
+    <div class="content">
+      <ng-content select="[alert-title]" />
+      <ng-content />
+    </div>
+  `,
+  styleUrl: './alert.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenAlert {}

package/schematics/components/files/alert/index.ts

@@ -0,0 +1 @@
+export * from './alert';

package/schematics/components/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/components/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType =\n  | 'avatar'\n  | 'button'\n  | 'checkbox'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/components/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType =\n  | 'avatar'\n  | 'button'\n  | 'checkbox'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea'\n  | 'alert';\n\nexport interface Schema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}

package/schematics/components/schema.json

@@ -38,7 +38,8 @@
           "input",
           "skeleton",
           "switch",
-          "textarea"
+          "textarea",
+          "alert"
         ]
       },
       "multiselect": true,

package/schematics/components/schema.ts

@@ -10,7 +10,8 @@ export type ComponentType =
   | 'input'
   | 'skeleton'
   | 'switch'
-  | 'textarea';
+  | 'textarea'
+  | 'alert';
 
 export interface Schema extends GeneratorSchemaBase {
   components: ComponentType[];