@ng-zen/cli 20.2.0 → 20.2.1

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

@@ -2,19 +2,46 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import { ZenButton } from './button';
 
+interface StoryParams {
+  content: string;
+  disabled: boolean;
+}
+
+type Options = ZenButton & StoryParams;
+
 export default {
   title: 'Components/Button',
   component: ZenButton,
-  tags: ['autodocs'],
-  render: args => ({ props: { ...args } }),
-} satisfies Meta<ZenButton>;
+  args: {
+    content: 'Test',
+    disabled: false,
+  },
+  argTypes: {
+    content: {
+      control: 'text',
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: 'ng-content',
+        },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      table: {
+        category: 'attributes',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+  },
+  render: ({ content, ...args }) => ({
+    props: args,
+    template: `<button zen-btn ${args.disabled ? 'disabled' : ''}>${content}</button>`,
+  }),
+} satisfies Meta<Options>;
 
-type Story = StoryObj<ZenButton>;
+type Story = StoryObj<Options>;
 
-export const Default: Story = {
-  render: () => ({
-    template: `
-        <button zen-btn>Test</button>
-    `,
-  }),
-};
+export const Default: Story = {};

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

@@ -2,38 +2,65 @@ import { Meta, StoryObj } from '@storybook/angular';
 
 import { ZenCheckbox } from './checkbox';
 
+type Options = ZenCheckbox;
+
 export default {
   title: 'Components/Checkbox',
   component: ZenCheckbox,
-  tags: ['autodocs'],
   argTypes: {
     value: {
+      table: {
+        category: 'models',
+        type: {
+          summary: 'boolean | null',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
       control: 'radio',
       options: [true, false, null],
     },
-    disabled: { control: 'boolean' },
-    required: { control: 'boolean' },
+    disabled: {
+      control: 'boolean',
+      table: {
+        category: 'models',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    required: {
+      control: 'boolean',
+      table: {
+        category: 'inputs',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    onInput: {
+      table: {
+        readonly: true,
+        type: {
+          summary: '(value: boolean | null) => void',
+        },
+      },
+    },
   },
   args: {
     value: false,
     disabled: false,
     required: false,
   },
-} satisfies Meta<ZenCheckbox>;
+} satisfies Meta<Options>;
 
-type Story = StoryObj<ZenCheckbox>;
+type Story = StoryObj<Options>;
 
-export const Default: Story = {
-  render: args => ({
-    props: { ...args },
-    template: `
-      <zen-checkbox
-        [disabled]="${args.disabled}"
-        [value]="${args.value}"
-        ${args.required ? 'required' : ''}
-      />`,
-  }),
-};
+export const Default: Story = {};
 
 export const WithLabel: Story = {
   render: () => ({

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

@@ -37,7 +37,6 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
  */
 @Component({
   selector: 'zen-checkbox',
-  standalone: true,
   template: `
     <input
       [attr.aria-disabled]="disabled()"
@@ -68,7 +67,6 @@ export class ZenCheckbox extends ZenFormControl<boolean | null> {
    * Set value to `null` to mark the checkbox as indeterminate
    */
   readonly value = model<boolean | null>(false);
-  /** @ignore */
   private readonly inputElement = viewChild.required<ElementRef<HTMLInputElement>>('inputElement');
 
   constructor() {

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

@@ -7,22 +7,42 @@ interface StoryParams {
   vertical: boolean;
 }
 
+type Options = ZenDivider & StoryParams;
+
 export default {
   title: 'Components/Divider',
   component: ZenDivider,
-  tags: ['autodocs'],
   parameters: {
     layout: 'padded',
   },
   argTypes: {
-    content: { control: 'text' },
-    vertical: { control: 'boolean' },
-    align: { control: 'select', options: ['start', 'center', 'end'] },
+    content: {
+      control: 'text',
+      table: {
+        category: 'Story parameters',
+        type: {
+          summary: 'ng-content',
+        },
+      },
+    },
+    vertical: {
+      control: 'boolean',
+      table: { category: 'attributes', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+      table: {
+        category: 'Inputs',
+        defaultValue: { summary: 'center' },
+        type: { summary: '"start" | "center" | "end"' },
+      },
+    },
   },
   args: { content: '', vertical: false, align: 'center' },
-} satisfies Meta<ZenDivider & StoryParams>;
+} satisfies Meta<Options>;
 
-type Story = StoryObj<ZenDivider & StoryParams>;
+type Story = StoryObj<Options>;
 
 export const Default: Story = {
   render: args => ({

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

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
  * Content alignment can be controlled via the `align` input property.
  *
  * @example
+ *
  * ```html
  * <zen-divider/>
  * <zen-divider>With content</zen-divider>
@@ -42,17 +43,14 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
   },
 })
 export class ZenDivider {
-  /**
-   * Controls the alignment of content within the divider.
-   * @default 'center'
-   */
+  /** Controls the alignment of content within the divider. */
   readonly align = input<'start' | 'end' | 'center'>('center');
 
   /**
    * Computed property that determines if the divider contains any content.
    * Used to apply appropriate styling when content is present.
    */
-  readonly hasContent = computed(() => {
+  protected readonly hasContent = computed(() => {
     return this.elementRef.nativeElement.childNodes.length > 0;
   });
 

package/schematics/components/files/form-control/form-control.stories.ts

@@ -1,25 +1,68 @@
-import { Meta, moduleMetadata } from '@storybook/angular';
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 import { ZenCheckbox } from '../checkbox';
 import { ZenInput } from '../input';
 import { ZenSwitch } from '../switch';
 import { ZenFormControl } from './form-control';
 
+type Options = ZenFormControl<unknown>;
+
 export default {
   title: 'Components/FormControl',
   component: ZenFormControl,
-  tags: ['autodocs'],
-  decorators: [moduleMetadata({ imports: [ZenCheckbox, ZenInput, ZenSwitch] })],
+  decorators: [
+    moduleMetadata({ imports: [ZenCheckbox, ZenInput, ZenSwitch] }),
+    componentWrapperDecorator(
+      story => `<div style="display: flex; flex-direction: column; gap: 2rem; align-items: center">${story}</div>`
+    ),
+  ],
   args: {
     value: '',
     disabled: false,
     required: false,
   },
   argTypes: {
-    value: { control: false },
-    placeholder: { control: false },
-    disabled: { control: 'boolean' },
-    required: { control: 'boolean' },
+    value: {
+      control: false,
+      table: {
+        category: 'models',
+        readonly: true,
+        type: {
+          summary: 'T',
+        },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      table: {
+        category: 'models',
+        type: {
+          summary: 'boolean',
+        },
+        readonly: true,
+      },
+    },
+    required: {
+      control: 'boolean',
+      table: {
+        category: 'inputs',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+        readonly: true,
+      },
+    },
+    onInput: {
+      table: {
+        readonly: true,
+        type: {
+          summary: '(value: T) => void',
+        },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -30,8 +73,16 @@ export default {
       },
     },
   },
-} satisfies Meta<ZenFormControl<unknown>>;
+  render: ({ ...args }) => ({
+    props: args,
+    template: `
+      <zen-checkbox />
+      <zen-input />
+      <zen-switch />
+    `,
+  }),
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
 
-export { Default as Checkbox } from '../checkbox/checkbox.stories';
-export { Default as Input } from '../input/input.stories';
-export { Default as Switch } from '../switch/switch.stories';
+export const Default: Story = {};

package/schematics/components/files/form-control/form-control.ts

@@ -37,34 +37,18 @@ export const ZenFormControlProvider = <T extends ZenFormControl<any>>(component:
 export abstract class ZenFormControl<Value> implements ControlValueAccessor {
   /**
    * The underlying value of the control.
-   * Subclasses must provide their own implementation, typically using `model()`.
+   * Subclasses must provide their own implementation using `model()`.
    */
   abstract readonly value: ModelSignal<Value>;
 
-  /** The placeholder text for the form control. */
-  readonly placeholder = input<string>();
-
-  /**
-   * Whether the form control is disabled.
-   */
   readonly disabled = model(false);
-
-  /** Whether the form control is required. */
   readonly required = input(false, { transform: booleanAttribute });
 
-  /**
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: (value: Value) => void = () => {};
+  protected onChange: (value: Value) => void = () => {};
 
-  /**
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onTouched: () => void = () => {};
+  protected onTouched: () => void = () => {};
 
   /**
    * Should be called by the subclass when the control's value changes

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

@@ -1,3 +1,4 @@
+import * as icons from '@hugeicons/core-free-icons';
 import { Meta, StoryObj } from '@storybook/angular';
 
 import { ZenIcon } from './icon';
@@ -7,25 +8,42 @@ type Options = ZenIcon;
 export default {
   title: 'Components/Icon',
   component: ZenIcon,
-  tags: ['autodocs'],
   argTypes: {
-    size: { control: { type: 'range', min: 12, max: 100, step: 1 }, description: 'Size' },
-    strokeWidth: { control: { type: 'range', min: 1, max: 5, step: 0.25 }, description: 'strokeWidth' },
-    absoluteStrokeWidth: { control: 'boolean' },
+    icon: {
+      control: 'select',
+      options: Object.keys(icons),
+      table: {
+        type: { summary: 'string' },
+        category: 'inputs',
+        subcategory: 'required',
+        defaultValue: { summary: '' },
+      },
+    },
+    size: {
+      control: { type: 'range', min: 12, max: 100, step: 1 },
+      table: { category: 'inputs', type: { summary: 'number' } },
+    },
+    strokeWidth: {
+      control: { type: 'range', min: 1, max: 5, step: 0.25 },
+      table: { category: 'inputs', defaultValue: { summary: '1.5' }, type: { summary: 'number' } },
+    },
+    absoluteStrokeWidth: {
+      control: 'boolean',
+      table: { category: 'inputs', defaultValue: { summary: 'false' }, type: { summary: 'boolean' } },
+    },
+    color: {
+      control: 'color',
+      table: { category: 'inputs', type: { summary: 'string' }, defaultValue: { summary: 'currentColor' } },
+    },
   },
   args: {
-    size: 64,
+    size: 24,
     strokeWidth: 1.5,
     absoluteStrokeWidth: false,
+    icon: 'Tree02Icon',
   },
 } satisfies Meta<Options>;
 
 type Story = StoryObj<Options>;
 
-export const Default: Story = {
-  render: args => ({
-    template: `
-        <zen-icon icon="Tree02Icon" [size]="${args.size}" [strokeWidth]="${args.strokeWidth}" ${args.absoluteStrokeWidth ? 'absoluteStrokeWidth' : ''}>
-    `,
-  }),
-};
+export const Default: Story = {};

package/schematics/components/files/icon/icon.ts

@@ -20,7 +20,6 @@ interface Path {
  * @example
  * <zen-icon icon="Tree02Icon" />
  *
- * @license {@link https://github.com/hugeicons/angular/blob/main/README.md#license|MIT}
  * @see [Hugeicons](https://hugeicons.com)
  */
 @Component({
@@ -29,9 +28,9 @@ interface Path {
     <svg
       [attr.color]="color()"
       [attr.height]="size()"
+      [attr.viewBox]="'0 0 ' + BASE_SIZE + ' ' + BASE_SIZE"
       [attr.width]="size()"
       fill="none"
-      viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
       @for (path of paths(); track path) {
@@ -41,7 +40,7 @@ interface Path {
           [attr.fill]="path.fill"
           [attr.opacity]="path.opacity"
           [attr.stroke-width]="path.strokeWidth"
-          [attr.stroke]="'currentColor'"
+          stroke="currentColor"
         />
       }
     </svg>
@@ -51,22 +50,19 @@ interface Path {
 export class ZenIcon {
   /** Icon file names from HugeIcons */
   readonly icon = input.required({ transform: (icon: Icon) => icons[icon] });
+  /** Size of the icon in pixels. */
   readonly size = input<number>(24);
+  /** Determines if stroke width scales with icon size. */
   readonly absoluteStrokeWidth = input<boolean, unknown>(false, { transform: booleanAttribute });
+  /** Width of the stroke for icon paths. */
   readonly strokeWidth = input<number>(1.5);
+  /** Color of the icon. */
   readonly color = input<string>('currentColor');
 
-  readonly paths = computed<Path[]>(() => this.updatePaths());
-
+  protected readonly BASE_SIZE = 24;
+  protected readonly paths = computed<Path[]>(() => this.updatePaths());
   private readonly calculatedStrokeWidth = computed(() => this.calculateStrokeWidth());
 
-  private calculateStrokeWidth(): number {
-    if (!this.absoluteStrokeWidth()) return this.strokeWidth();
-
-    const BASE_SIZE = 24;
-    return (this.strokeWidth() * BASE_SIZE) / this.size();
-  }
-
   private updatePaths(): Path[] {
     return this.icon().map(([, attrs]) => ({
       d: attrs['d'],
@@ -76,4 +72,10 @@ export class ZenIcon {
       strokeWidth: this.calculatedStrokeWidth(),
     }));
   }
+
+  private calculateStrokeWidth(): number {
+    if (!this.absoluteStrokeWidth()) return this.strokeWidth();
+
+    return (this.strokeWidth() * this.BASE_SIZE) / this.size();
+  }
 }

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

@@ -2,15 +2,54 @@ import { Meta, StoryObj } from '@storybook/angular';
 
 import { ZenInput } from './input';
 
+type Options = ZenInput;
+
 export default {
   title: 'Components/Input',
   component: ZenInput,
-  tags: ['autodocs'],
   argTypes: {
-    value: { control: 'text' },
-    placeholder: { control: 'text' },
-    disabled: { control: 'boolean' },
-    required: { control: 'boolean' },
+    value: {
+      control: 'text',
+      table: {
+        category: 'models',
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+    placeholder: { control: 'text', table: { type: { summary: 'string' } } },
+    disabled: {
+      control: 'boolean',
+      table: {
+        category: 'models',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    required: {
+      control: 'boolean',
+      table: {
+        category: 'inputs',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    onInput: {
+      table: {
+        readonly: true,
+        type: {
+          summary: '(value: string) => void',
+        },
+      },
+    },
   },
   args: {
     value: '',
@@ -18,22 +57,11 @@ export default {
     disabled: false,
     required: false,
   },
-} satisfies Meta<ZenInput>;
+} satisfies Meta<Options>;
 
-type Story = StoryObj<ZenInput>;
+type Story = StoryObj<Options>;
 
-export const Default: Story = {
-  render: args => ({
-    props: { ...args },
-    template: `
-      <zen-input
-        [disabled]="${args.disabled}"
-        [value]="'${args.value}'"
-        ${args.placeholder ? 'placeholder="' + args.placeholder + '"' : ''}
-        ${args.required ? 'required' : ''}
-      />`,
-  }),
-};
+export const Default: Story = {};
 
 export const WithLabel: Story = {
   render: () => ({

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

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { ZenFormControl, ZenFormControlProvider } from '../form-control/form-control';
+import { ZenFormControl, ZenFormControlProvider } from '../form-control';
 
 /**
  * ZenInput is a reusable text input component designed to provide
@@ -32,7 +32,6 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control/form-con
  */
 @Component({
   selector: 'zen-input',
-  standalone: true,
   template: `
     <input
       [attr.placeholder]="placeholder()"
@@ -50,5 +49,9 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control/form-con
   imports: [FormsModule],
 })
 export class ZenInput extends ZenFormControl<string> {
+  /** The current input value with two-way binding support. */
   readonly value = model('');
+
+  /** The placeholder text for the form control. */
+  readonly placeholder = input<string>();
 }

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

@@ -8,30 +8,51 @@ interface StoryParams {
   width: number;
 }
 
-type StoryType = ZenSkeleton & StoryParams;
+type Options = ZenSkeleton & StoryParams;
 
 export default {
   title: 'Components/Skeleton',
   component: ZenSkeleton,
-  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' },
+    rounded: {
+      control: { type: 'boolean' },
+      table: {
+        category: 'attributes',
+      },
+    },
+    height: {
+      control: { type: 'range', min: 1, max: 20, step: 0.25 },
+      description: 'Height managed by css',
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: undefined,
+        },
+      },
+    },
+    width: {
+      control: { type: 'range', min: 1, max: 20, step: 0.25 },
+      description: 'Width managed by css',
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: undefined,
+        },
+      },
+    },
   },
   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"/>`,
   }),
-};
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
+
+export const Default: Story = {};