@ng-zen/cli 19.2.0 → 19.3.0-next.2

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [19.3.0-next.2](https://github.com/kstepien3/ng-zen/compare/v19.3.0-next.1...v19.3.0-next.2) (2025-06-11)
+
+### 🐛 Bug Fixes
+
+* **storybook/components:** format and documentation ([#211](https://github.com/kstepien3/ng-zen/issues/211)) ([a0fb6f5](https://github.com/kstepien3/ng-zen/commit/a0fb6f576e1c47509ba2aed4cd4314dace894366))
+* **styles:** improve format of hls colors ([#207](https://github.com/kstepien3/ng-zen/issues/207)) ([354d698](https://github.com/kstepien3/ng-zen/commit/354d6989507ba86397268012f6a53002c2e02297))
+
+### 📚 Documentation
+
+* **DEVELOPMENT:** add release information ([#209](https://github.com/kstepien3/ng-zen/issues/209)) ([f9aad1b](https://github.com/kstepien3/ng-zen/commit/f9aad1b8be3d7d633c41ad9cff4bf3c6b93ad0f4))
+* resolve a problem with missing documentation ([#208](https://github.com/kstepien3/ng-zen/issues/208)) ([85e7969](https://github.com/kstepien3/ng-zen/commit/85e7969c23b6b7bd2039e9cfdc336dc8da6edcc1))
+
+## [19.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.2.0...v19.3.0-next.1) (2025-06-10)
+
+### 🚀 New Features
+
+* **skeleton:** add component ([#205](https://github.com/kstepien3/ng-zen/issues/205)) ([fa21c9a](https://github.com/kstepien3/ng-zen/commit/fa21c9a440ce918d521c12cd9e9eec17cade60cd))
+
 ## [19.2.0](https://github.com/kstepien3/ng-zen/compare/v19.1.0...v19.2.0) (2025-05-25)
 
 ### 🚀 New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.2.0",
+  "version": "19.3.0-next.2",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/components/components-generator.js.map

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

package/schematics/components/components-generator.ts

@@ -1,6 +1,6 @@
 import { GeneratorSchemaBase } from '../../types';
 
-export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'divider' | 'input' | 'switch' | 'textarea';
+export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'divider' | 'input' | 'skeleton' | 'switch' | 'textarea';
 
 export interface ComponentGeneratorSchema extends GeneratorSchemaBase {
   components: ComponentType[];

package/schematics/components/files/avatar/avatar.component.scss

@@ -1,6 +1,6 @@
-$size: var(--zen-avatar-size, 32px);
-$bg-color: var(--zen-avatar-bg-color, #d3d3d3);
-$color: var(--zen-avatar-color, #0f172a);
+$size: var(--zen-avatar-size, 2rem);
+$bg-color: var(--zen-avatar-bg-color, hsl(0deg 0% 80%));
+$color: var(--zen-avatar-color, hsl(0deg 0% 20%));
 $font-size: var(--zen-avatar-font-size, small);
 
 :host {

package/schematics/components/files/avatar/avatar.component.ts

@@ -8,9 +8,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
  *
  * This component utilizes Angular's optimized image directives for enhanced performance.
  *
- * ### Usage
- *
- * To use the component, you can provide an image source or project content:
+ * @example
  *
  * ```html
  * <!-- If an image source is provided, it will display the image -->
@@ -22,20 +20,17 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
  *
  * ### CSS Custom Properties
  *
- * You can customize the avatar using CSS custom properties:
+ * You can customize the component using CSS custom properties:
  *
  * ```css
  * :root {
- *  --zen-avatar-size: 16px;
- *  --zen-avatar-bg-color: black;
- *  --zen-avatar-color: white;
+ *  --zen-avatar-size: 2rem;
+ *  --zen-avatar-bg-color: hsl(0deg 0% 80%);
+ *  --zen-avatar-color: hsl(0deg 0% 20%);
  *  --zen-avatar-font-size: small;
  * }
  * ```
  *
- * @example
- * <zen-avatar src="https://picsum.photos/32" />
- *
  * @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)

package/schematics/components/files/button/button.component.scss

@@ -4,7 +4,7 @@ $color: var(--zen-button-color, hsl(0deg 0% 100%));
 $padding: var(--zen-button-padding, 0.5rem 1rem);
 $shadow: var(--zen-button-shadow, 0 2px 4px hsl(0deg 0% 0% / 10%));
 $transition-duration: var(--zen-transition-duration, 0.4s);
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 :host {
   display: inline-block;

package/schematics/components/files/button/button.component.ts

@@ -9,6 +9,20 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  * @example
  * <button zen-btn> ... </button>
  *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --zen-button-bg-color-hover: lightgrey;
+ *   --zen-button-bg-color: grey;
+ *   --zen-button-color: white;
+ *   --zen-button-padding: 0.5rem 2rem;
+ *   --zen-button-shadow: 0 2px 4px hsl(0deg 0% 0% / 10%);
+ * }
+ * ```
+ *
  * @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)

package/schematics/components/files/checkbox/checkbox.component.scss

@@ -1,14 +1,14 @@
 // Component Variables
 $size: var(--zen-checkbox-size, 16px);
 $border-radius: var(--zen-checkbox-border-radius, 6px);
-$focus-shadow: var(--zen-checkbox-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
+$focus-shadow: var(--zen-checkbox-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
 
 // Color Palette
-$appearance: var(--zen-checkbox-appearance, hsl(0% 0% 10%));
+$appearance: var(--zen-checkbox-appearance, hsl(0deg 0% 10%));
 $disabled-opacity: var(--zen-checkbox-disabled-opacity, 0.6);
-$border: var(--zen-checkbox-border, 1px solid hsl(0% 0% 80%));
-$error: var(--zen-error, hsl(0% 70% 50%));
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
+$border: var(--zen-checkbox-border, 1px solid hsl(0deg 0% 80%));
+$error: var(--zen-error, hsl(0deg 70% 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 // Animations
 $transition-duration: var(--zen-transition-duration, 0.2s);
@@ -51,12 +51,12 @@ input {
 }
 
 :host:has(input[type='checkbox']:disabled) {
+  opacity: $disabled-opacity;
+
   &,
   input {
     cursor: not-allowed;
   }
-
-  opacity: $disabled-opacity;
 }
 
 :host:has(input:focus-visible) {

package/schematics/components/files/checkbox/checkbox.component.ts

@@ -10,6 +10,21 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
  * @example
  * <zen-checkbox value="false" />
  *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-checkbox-size: 16px;
+ *  --zen-checkbox-border-radius: 6px;
+ *  --zen-checkbox-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-checkbox-appearance: hsl(0deg 0% 10%);
+ *  --zen-checkbox-disabled-opacity: 0.6;
+ *  --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
+ * }
+ * ```
+ *
  * @implements {ControlValueAccessor}
  *
  * @author Konrad Stępień

package/schematics/components/files/divider/divider.component.scss

@@ -1,4 +1,4 @@
-$appearance: var(--zen-divider-appearance, hsl(0% 0% 10%));
+$appearance: var(--zen-divider-appearance, hsl(0deg 0% 60%));
 $type: var(--zen-divider-type, solid);
 $align-offset: var(--zen-divider-align-offset, 25%);
 $gap: var(--zen-divider-gap, 0.25rem);
@@ -9,6 +9,7 @@ $thickness: var(--zen-divider-thickness, 1px);
   display: flex;
   align-items: center;
   gap: $gap;
+  color: $appearance;
 
   &::before,
   &::after {
@@ -21,8 +22,12 @@ $thickness: var(--zen-divider-thickness, 1px);
     border-width: #{$thickness} 0 0;
   }
 
-  &:not(.has-content)::after {
-    content: none;
+  &:not(.has-content) {
+    gap: 0;
+
+    &::after {
+      content: none;
+    }
   }
 
   &.zen-align-start::before,

package/schematics/components/files/divider/divider.component.ts

@@ -19,9 +19,11 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
  *
  * ```css
  * :root {
- *  --zen-divider-appearance: red;
- *  --zen-divider-type: dotted;
- *  --zen-divider-align-offset: 10%;
+ *  --zen-divider-appearance: hsl(0deg 0% 10%);
+ *  --zen-divider-type: solid;
+ *  --zen-divider-align-offset: 25%;
+ *  --zen-divider-gap: 0.25rem;
+ *  --zen-divider-thickness: 1px;
  * }
  * ```
  *

package/schematics/components/files/input/input.component.scss

@@ -1,13 +1,13 @@
 // Component Variables
-$border: var(--zen-input-border, 1px solid hsl(0% 0% 80%));
+$border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
 $border-radius: var(--zen-input-border-radius, 8px);
 $padding: var(--zen-input-padding, 0.5rem 1rem);
-$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
+$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
 
 // Color Palette
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
-$error: var(--zen-error, hsl(0% 70% 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+$error: var(--zen-error, hsl(0deg 70% 50%));
 
 input {
   border: $border;

package/schematics/components/files/input/input.component.ts

@@ -9,6 +9,19 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
  * @example
  * <zen-input value="string" />
  *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
+ *  --zen-input-border-radius: 8px;
+ *  --zen-input-padding: 0.5rem 1rem;
+ *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ * }
+ * ```
+ *
  * @implements {ControlValueAccessor}
  *
  * @author Konrad Stępień

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

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

package/schematics/components/files/skeleton/skeleton.component.scss

@@ -0,0 +1,72 @@
+$background: var(--zen-skeleton-background, hsl(0deg 0% 80%));
+$radius: var(--zen-skeleton-border-radius, 0.5rem);
+$animation-duration: var(--zen-skeleton-animation-duration, 1.6s);
+
+:host {
+  background: $background;
+  display: inline-block;
+  min-height: 1rem;
+  min-width: 1rem;
+  border-radius: $radius;
+  position: relative;
+  overflow: hidden;
+
+  // GPU acceleration hint
+  will-change: auto;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      hsl(0deg 0% 100% / 60%) 40%,
+      hsl(0deg 0% 100% / 60%) 60%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: shimmer $animation-duration ease-in-out infinite;
+  }
+
+  &[rounded] {
+    border-radius: 9999px;
+  }
+}
+
+// Accessibility: Motion sensitivity support
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    &::before {
+      animation: none;
+      content: unset;
+    }
+
+    // Subtle pulse animation as fallback
+    animation: pulse $animation-duration ease-in-out infinite alternate;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// GPU-optimized keyframes
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}

package/schematics/components/files/skeleton/skeleton.component.spec.ts

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

package/schematics/components/files/skeleton/skeleton.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * ZenInputComponent loader component that displays loading states.
+ *
+ * @example
+ *
+ * ```html
+ * <zen-skeleton rounded />
+ * ```
+ *
+ * ### Properties:
+ * - `rounded` - Whether to display rounded corners
+ *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-skeleton-background: hsl(0deg 0% 80%);
+ *  --zen-skeleton-border-radius: 0.5rem;
+ *  --zen-skeleton-animation-duration: 1.6s;
+ * }
+ * ```
+ *
+ * @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-skeleton, zen-skeleton[rounded]',
+  template: ``,
+  styleUrl: './skeleton.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenSkeletonComponent {}

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

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+import { ZenSkeletonComponent } from './skeleton.component';
+
+interface StoryParams {
+  rounded: boolean;
+  height: number;
+  width: number;
+}
+
+type StoryType = ZenSkeletonComponent & StoryParams;
+
+export default {
+  title: 'Components/Skeleton',
+  component: ZenSkeletonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    rounded: { control: { type: 'boolean' } },
+    height: { control: { type: 'range', min: 1, max: 20, step: 0.25 }, description: 'Height managed by css' },
+    width: { control: { type: 'range', min: 1, max: 20, step: 0.25 }, description: 'Width managed by css' },
+  },
+  args: {
+    rounded: false,
+    height: 3,
+    width: 3,
+  },
+} satisfies Meta<StoryType>;
+
+type Story = StoryObj<StoryType>;
+
+export const Default: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+      <zen-skeleton ${args.rounded ? 'rounded' : ''} style="width: ${args.width}rem; height: ${args.height}rem"/>`,
+  }),
+};

package/schematics/components/files/switch/switch.component.scss

@@ -1,6 +1,6 @@
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 $transition-duration: 0.15s;
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
 $size: var(--zen-switch-size, 16px);
 $margin: var(--zen-switch-margin, 2px);
 $width: var(--zen-switch-width, 30px);
@@ -9,7 +9,7 @@ $height: calc(#{$size} + #{$margin} * 2);
 
 :host {
   cursor: pointer;
-  background: hsl(0% 0% 80%);
+  background: hsl(0deg 0% 80%);
   border-radius: 9999px;
   width: $width;
   height: $height;
@@ -48,10 +48,10 @@ $height: calc(#{$size} + #{$margin} * 2);
   }
 
   &[data-checked='true'] {
-    background-color: hsl(0% 0% 10%);
+    background-color: hsl(0deg 0% 10%);
 
     .switch-handle {
-      color: hsl(0% 0% 10%);
+      color: hsl(0deg 0% 10%);
       right: 0;
     }
   }

package/schematics/components/files/switch/switch.component.ts

@@ -1,6 +1,36 @@
 import { ChangeDetectionStrategy, Component, forwardRef, model } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
+/**
+ * ZenInputComponent is a reusable text input component designed to provide
+ * a consistent and customizable input style across the application.
+ * It supports Angular forms integration and provides two-way data binding.
+ *
+ * @example
+ *
+ * ```html
+ * <zen-switch [disabled]="false" [value]="true" />
+ *```
+ *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
+ *  --zen-input-border-radius: 8px;
+ *  --zen-input-padding: 0.5rem 1rem;
+ *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ * }
+ * ```
+ *
+ * @implements {ControlValueAccessor}
+ *
+ * @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-switch',
   template: `

package/schematics/components/files/textarea/textarea.component.scss

@@ -1,13 +1,13 @@
 // Component Variables
-$border: var(--zen-input-border, 1px solid hsl(0% 0% 80%));
+$border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
 $border-radius: var(--zen-input-border-radius, 8px);
 $padding: var(--zen-input-padding, 0.5rem 1rem);
-$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
+$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
 
 // Color Palette
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
-$error: var(--zen-error, hsl(0% 70% 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+$error: var(--zen-error, hsl(0deg 70% 50%));
 
 :host {
   border: $border;

package/schematics/components/files/textarea/textarea.component.ts

@@ -8,6 +8,19 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  * @example
  * <textarea zen-textarea></textarea>
  *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
+ *  --zen-input-border-radius: 8px;
+ *  --zen-input-padding: 0.5rem 1rem;
+ *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ * }
+ * ```
+ *
  * @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)

package/schematics/components/schema.json

@@ -10,7 +10,7 @@
       "type": "array",
       "items": {
         "type": "string",
-        "enum": ["avatar", "button", "checkbox", "divider", "input", "switch", "textarea"]
+        "enum": ["avatar", "button", "checkbox", "divider", "input", "skeleton", "switch", "textarea"]
       },
       "multiselect": true,
       "x-prompt": "Which component should be generated?"