@ng-zen/cli 20.2.0 → 20.2.1

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

@@ -2,40 +2,63 @@ import { Meta, StoryObj } from '@storybook/angular';
 
 import { ZenSwitch } from './switch';
 
+type Options = ZenSwitch;
+
 export default {
   title: 'Components/Switch',
   component: ZenSwitch,
-  tags: ['autodocs'],
   argTypes: {
-    value: { control: 'boolean' },
-    disabled: { control: 'boolean' },
+    value: {
+      control: 'boolean',
+      table: {
+        category: 'models',
+        type: {
+          summary: '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) => void',
+        },
+      },
+    },
+    onKeyDown: {
+      table: {
+        readonly: true,
+      },
+    },
   },
   args: {
     value: false,
     disabled: false,
+    required: false,
   },
-} satisfies Meta<ZenSwitch>;
-
-type Story = StoryObj<ZenSwitch>;
+} satisfies Meta<Options>;
 
-export const Default: Story = {
-  render: args => ({
-    props: { ...args },
-    template: `
-      <zen-switch
-        [disabled]="${args.disabled}"
-        [value]="${args.value}"
-      />`,
-  }),
-};
+type Story = StoryObj<Options>;
 
-export const WithLabel: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; align-items: center; gap: 0.25rem">
-        <zen-switch id="label-example"/>
-        <label for="label-example"> With label </label>
-      </div>
-  `,
-  }),
-};
+export const Default: Story = {};

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

@@ -58,6 +58,7 @@ export class ZenSwitch extends ZenFormControl<boolean> {
 
   /**
    * Handles keyboard events for accessibility.
+   * Supports `Enter`, `Space`, `ArrowRight`, and `ArrowLeft` keys.
    */
   onKeyDown(event: KeyboardEvent): void {
     switch (event.code) {

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

@@ -3,47 +3,80 @@ import { Meta, StoryObj } from '@storybook/angular';
 import { ZenTextarea } from './textarea';
 
 interface StoryParams {
-  value: string;
+  content: string;
   placeholder: string;
   required: boolean;
   autoresize: boolean;
   disabled: boolean;
 }
+type Options = ZenTextarea & StoryParams;
 
 export default {
   title: 'Components/Textarea',
   component: ZenTextarea,
-  tags: ['autodocs'],
   args: {
-    value: '',
+    content: '',
     autoresize: false,
     placeholder: 'ZenTextareaComponent',
     required: false,
     disabled: false,
   },
   argTypes: {
-    value: { control: 'text' },
-    autoresize: { control: 'boolean' },
-    placeholder: { control: 'text' },
-    required: { control: 'boolean' },
-    disabled: { control: 'boolean' },
+    content: {
+      control: 'text',
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: 'ng-content',
+        },
+      },
+    },
+    placeholder: {
+      control: 'text',
+      table: {
+        category: 'attributes',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    required: {
+      control: 'boolean',
+      table: {
+        category: 'attributes',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      table: {
+        category: 'attributes',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    autoresize: {
+      table: {
+        category: 'attributes',
+      },
+    },
   },
-} satisfies Meta<ZenTextarea & StoryParams>;
-
-type Story = StoryObj<ZenTextarea & StoryParams>;
-
-export const Default: Story = {
-  render: args => ({
+  render: ({ content, ...args }) => ({
+    props: args,
     template: `
-      <textarea
-      zen-textarea
-      placeholder="${args.placeholder}"
-      ${args.required ? 'required' : ''}
-      ${args.autoresize ? 'autoresize' : ''}
-      ${args.disabled ? 'disabled' : ''}
-      >${args.value}</textarea>`,
+      <textarea zen-textarea placeholder="${args.placeholder}" ${args.required ? 'required' : ''} ${args.autoresize ? 'autoresize' : ''} ${args.disabled ? 'disabled' : ''}>${content}</textarea>`.replace(
+      /\s+/g,
+      ' '
+    ),
   }),
-};
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
+
+export const Default: Story = {};
 
 export const WithLabel: Story = {
   render: () => ({

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

@@ -26,9 +26,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  * @see [GitHub](https://github.com/kstepien3/ng-zen)
  */
 @Component({
+  // @TODO: add support for autoresize for mozilla browsers https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'textarea[zen-textarea], textarea[zen-textarea][autoresize]',
-  standalone: true,
   template: `
     <ng-content />
   `,