ng-comps 1.0.2 → 2.0.0

package/src/stories/mf-menu.stories.ts

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfMenuComponent } from '../app/components/menu';
-
-const MENU_ITEMS = [
-  { value: 'edit', label: 'Edit', icon: 'edit' },
-  { value: 'duplicate', label: 'Duplicate', icon: 'content_copy' },
-  { value: 'archive', label: 'Archive', icon: 'archive' },
-  { value: 'delete', label: 'Delete', icon: 'delete' },
-];
-
-const meta: Meta<MfMenuComponent> = {
-  title: 'Atoms/MfMenu',
-  component: MfMenuComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfMenu** exposes an accessible menu trigger over Angular Material \`mat-menu\`.
-
-Use this component when:
-
-- the trigger has an explicit accessible label
-- menu items are actions, not layout containers
-- keyboard users must be able to open with Enter or Space and close with Escape
-        `,
-      },
-    },
-  },
-  argTypes: {
-    triggerIcon: { control: 'text', description: 'Material icon used in the trigger' },
-    triggerLabel: { control: 'text', description: 'Accessible name of the trigger button' },
-    mfItemClick: { action: 'mfItemClick' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfMenuComponent>;
-
-export const Default: Story = {
-  args: {
-    items: MENU_ITEMS,
-    triggerLabel: 'Open record actions',
-  },
-};
-
-export const CorrectUsage: Story = {
-  name: 'Correct Usage',
-  args: {
-    items: MENU_ITEMS,
-    triggerLabel: 'Open project actions',
-  },
-};
-
-export const IncorrectUsage: Story = {
-  name: 'Incorrect Usage',
-  render: () => ({
-    template: `
-      <section style="max-width: 720px; border: 1px solid var(--mf-color-border); border-radius: 16px; padding: 20px; background: var(--mf-color-surface);">
-        <h2 style="margin: 0 0 12px; font-size: 1rem;">Anti-patterns</h2>
-        <ul style="margin: 0 0 16px; padding-left: 18px;">
-          <li>Icon-only trigger with no accessible name.</li>
-          <li>Using menu items as visual navigation with no real action.</li>
-          <li>Blocking Escape or preventing focus from returning to the trigger.</li>
-        </ul>
-        <pre style="margin: 0; padding: 16px; border-radius: 12px; background: #111827; color: #f9fafb; overflow: auto;"><code>&lt;mf-menu [items]="items" triggerLabel="" /&gt;</code></pre>
-      </section>
-    `,
-  }),
-};

package/src/stories/mf-progress-bar.stories.ts

@@ -1,119 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfProgressBarComponent } from '../app/components/progress-bar';
-
-const meta: Meta<MfProgressBarComponent> = {
-  title: 'Atoms/MfProgressBar',
-  component: MfProgressBarComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfProgressBar** is the progress bar component from the ng-comps library.
-It uses Angular Material \`mat-progress-bar\` under the hood while exposing a consistent branded API.
-
-| Mode             | Description                           |
-|------------------|---------------------------------------|
-| \`determinate\`    | Shows exact progress (0-100)          |
-| \`indeterminate\`  | Continuous animation, no known value  |
-| \`buffer\`         | Shows progress plus buffer            |
-| \`query\`          | Reverse animation for query states    |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    mode: {
-      control: 'select',
-      options: ['determinate', 'indeterminate', 'buffer', 'query'],
-      description: 'Bar mode',
-    },
-    value: {
-      control: { type: 'range', min: 0, max: 100 },
-      description: 'Current value (0-100)',
-    },
-    bufferValue: {
-      control: { type: 'range', min: 0, max: 100 },
-      description: 'Buffer value (buffer mode only)',
-    },
-    color: {
-      control: 'select',
-      options: ['brand', 'accent', 'warn'],
-      description: 'Bar color',
-    },
-    label: { control: 'text', description: 'Accessible label' },
-    showValue: { control: 'boolean', description: 'Show percentage' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfProgressBarComponent>;
-
-export const Determinate: Story = {
-  args: {
-    mode: 'determinate',
-    value: 65,
-    label: 'Loading progress',
-    showValue: true,
-  },
-};
-
-export const Indeterminate: Story = {
-  args: {
-    mode: 'indeterminate',
-    label: 'Loading...',
-  },
-};
-
-export const Buffer: Story = {
-  args: {
-    mode: 'buffer',
-    value: 40,
-    bufferValue: 70,
-    label: 'Downloading...',
-  },
-};
-
-export const Query: Story = {
-  args: {
-    mode: 'query',
-    label: 'Querying...',
-  },
-};
-
-export const ColorAccent: Story = {
-  name: 'Color accent',
-  args: {
-    mode: 'determinate',
-    value: 50,
-    color: 'accent',
-    showValue: true,
-  },
-};
-
-export const ColorWarn: Story = {
-  name: 'Color warn',
-  args: {
-    mode: 'determinate',
-    value: 80,
-    color: 'warn',
-    showValue: true,
-  },
-};
-
-export const AllVariants: Story = {
-  name: 'All variants',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-        <mf-progress-bar mode="determinate" [value]="75" label="Completed" [showValue]="true" />
-        <mf-progress-bar mode="indeterminate" label="Loading..." />
-        <mf-progress-bar mode="determinate" [value]="50" color="accent" [showValue]="true" />
-        <mf-progress-bar mode="determinate" [value]="90" color="warn" [showValue]="true" />
-        <mf-progress-bar mode="buffer" [value]="40" [bufferValue]="70" label="Downloading..." />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfProgressBarComponent] },
-  }),
-};

package/src/stories/mf-progress-spinner.stories.ts

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfProgressSpinnerComponent } from '../app/components/progress-spinner';
-
-const meta: Meta<MfProgressSpinnerComponent> = {
-  title: 'Atoms/MfProgressSpinner',
-  component: MfProgressSpinnerComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfProgressSpinner** is the progress spinner component from the ng-comps library.
-It uses Angular Material \`mat-progress-spinner\` under the hood while exposing a consistent branded API.
-
-| Mode              | Description                          |
-|-------------------|--------------------------------------|
-| \`indeterminate\`   | Continuous animation, no known value |
-| \`determinate\`     | Shows exact progress (0-100)         |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    mode: {
-      control: 'select',
-      options: ['indeterminate', 'determinate'],
-      description: 'Spinner mode',
-    },
-    value: {
-      control: { type: 'range', min: 0, max: 100 },
-      description: 'Current value (0-100, determinate only)',
-    },
-    diameter: {
-      control: { type: 'range', min: 16, max: 120 },
-      description: 'Diameter in px',
-    },
-    strokeWidth: {
-      control: { type: 'range', min: 1, max: 12 },
-      description: 'Stroke width',
-    },
-    color: {
-      control: 'select',
-      options: ['brand', 'accent', 'warn'],
-      description: 'Spinner color',
-    },
-    label: { control: 'text', description: 'Visible label next to the spinner' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfProgressSpinnerComponent>;
-
-export const Indeterminate: Story = {
-  args: {
-    mode: 'indeterminate',
-    diameter: 40,
-  },
-};
-
-export const Determinate: Story = {
-  args: {
-    mode: 'determinate',
-    value: 70,
-    diameter: 60,
-  },
-};
-
-export const WithLabel: Story = {
-  name: 'With label',
-  args: {
-    mode: 'indeterminate',
-    label: 'Loading data...',
-    diameter: 32,
-  },
-};
-
-export const ColorAccent: Story = {
-  name: 'Color accent',
-  args: {
-    mode: 'indeterminate',
-    color: 'accent',
-    diameter: 40,
-  },
-};
-
-export const ColorWarn: Story = {
-  name: 'Color warn',
-  args: {
-    mode: 'indeterminate',
-    color: 'warn',
-    diameter: 40,
-  },
-};
-
-export const Sizes: Story = {
-  name: 'Sizes',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 24px; align-items: center;">
-        <mf-progress-spinner mode="indeterminate" [diameter]="24" />
-        <mf-progress-spinner mode="indeterminate" [diameter]="40" />
-        <mf-progress-spinner mode="indeterminate" [diameter]="64" />
-        <mf-progress-spinner mode="indeterminate" [diameter]="80" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfProgressSpinnerComponent] },
-  }),
-};
-
-export const AllVariants: Story = {
-  name: 'All variants',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 32px; align-items: center; flex-wrap: wrap;">
-        <mf-progress-spinner mode="indeterminate" label="Loading..." />
-        <mf-progress-spinner mode="determinate" [value]="60" label="60%" />
-        <mf-progress-spinner mode="indeterminate" color="accent" label="Accent" />
-        <mf-progress-spinner mode="indeterminate" color="warn" label="Warn" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfProgressSpinnerComponent] },
-  }),
-};

package/src/stories/mf-radio-button.stories.ts

@@ -1,111 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfRadioButtonComponent } from '../app/components/radio-button';
-
-const SAMPLE_OPTIONS = [
-  { value: 'angular', label: 'Angular' },
-  { value: 'react', label: 'React' },
-  { value: 'vue', label: 'Vue' },
-  { value: 'svelte', label: 'Svelte', disabled: true },
-];
-
-const meta: Meta<MfRadioButtonComponent> = {
-  title: 'Atoms/MfRadioButton',
-  component: MfRadioButtonComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfRadioButton** is the radio button group from the ng-comps library.
-It wraps Angular Material \`mat-radio-group\` and \`mat-radio-button\` while exposing a consistent branded API.
-
-It receives an array of \`MfRadioOption\` objects and manages the selection internally.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    direction: {
-      control: 'select',
-      options: ['vertical', 'horizontal'],
-      description: 'Group direction',
-    },
-    disabled: { control: 'boolean' },
-    ariaLabel: { control: 'text', description: 'Accessible group label' },
-    mfChange: { action: 'mfChange' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfRadioButtonComponent>;
-
-export const Vertical: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    direction: 'vertical',
-    ariaLabel: 'Preferred framework',
-  },
-};
-
-export const Horizontal: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    direction: 'horizontal',
-    ariaLabel: 'Preferred framework',
-  },
-};
-
-export const WithDefault: Story = {
-  name: 'With default value',
-  args: {
-    options: SAMPLE_OPTIONS,
-    value: 'angular',
-    ariaLabel: 'Preferred framework',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    disabled: true,
-    ariaLabel: 'Preferred framework (disabled)',
-  },
-};
-
-export const AllVariants: Story = {
-  name: 'All variants',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px;">
-        <div>
-          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">Vertical</p>
-          <mf-radio-button
-            [options]="options"
-            ariaLabel="Vertical options"
-          />
-        </div>
-        <div>
-          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">Horizontal</p>
-          <mf-radio-button
-            [options]="options"
-            direction="horizontal"
-            ariaLabel="Horizontal options"
-          />
-        </div>
-        <div>
-          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">Disabled</p>
-          <mf-radio-button
-            [options]="options"
-            [disabled]="true"
-            ariaLabel="Disabled options"
-          />
-        </div>
-      </div>
-    `,
-    props: {
-      options: SAMPLE_OPTIONS,
-    },
-    moduleMetadata: { imports: [MfRadioButtonComponent] },
-  }),
-};

package/src/stories/mf-select.stories.ts

@@ -1,184 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfSelectComponent } from '../app/components/select';
-
-const SAMPLE_OPTIONS = [
-  { value: 'angular', label: 'Angular' },
-  { value: 'react', label: 'React' },
-  { value: 'vue', label: 'Vue' },
-  { value: 'svelte', label: 'Svelte' },
-  { value: 'solid', label: 'SolidJS', disabled: true },
-];
-
-const meta: Meta<MfSelectComponent> = {
-  title: 'Atoms/MfSelect',
-  component: MfSelectComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfSelect** is the dropdown select component from the ng-comps library.
-It uses Angular Material \`mat-select\` under the hood while exposing a consistent branded API.
-
-The dropdown panel is styled through the global \`mf-select-panel\` class. You can inject additional classes with the \`panelClass\` property to customize the panel at the story or component level.
-
-| Property        | Description                                     |
-|-----------------|-------------------------------------------------|
-| \`options\`       | Array of options \`{ value, label, disabled? }\` |
-| \`label\`         | Floating field label                            |
-| \`placeholder\`   | Placeholder text                                |
-| \`hint\`          | Helper text shown below the field               |
-| \`error\`         | Error message                                   |
-| \`multiple\`      | Multiple selection                              |
-| \`leadingIcon\`   | Material icon shown at the start                |
-| \`trailingIcon\`  | Material icon shown at the end                  |
-| \`panelClass\`    | Extra classes for the dropdown panel            |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Floating label' },
-    placeholder: { control: 'text', description: 'Placeholder' },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Field size',
-    },
-    multiple: { control: 'boolean', description: 'Multiple selection' },
-    disabled: { control: 'boolean' },
-    hint: { control: 'text', description: 'Helper text' },
-    error: { control: 'text', description: 'Error message' },
-    leadingIcon: {
-      control: 'text',
-      description: 'Leading icon (Material icon name)',
-    },
-    trailingIcon: {
-      control: 'text',
-      description: 'Trailing icon (Material icon name)',
-    },
-    fullWidth: { control: 'boolean', description: 'Full width' },
-    mfSelectionChange: { action: 'mfSelectionChange' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfSelectComponent>;
-
-export const Default: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Framework',
-    placeholder: 'Select a framework',
-  },
-};
-
-export const WithHint: Story = {
-  name: 'With helper text',
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Framework',
-    hint: 'Choose the main framework for your project',
-  },
-};
-
-export const WithError: Story = {
-  name: 'With error',
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Framework',
-    error: 'This field is required',
-  },
-};
-
-export const Multiple: Story = {
-  name: 'Multiple selection',
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Frameworks',
-    multiple: true,
-    placeholder: 'Select one or more',
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  name: 'With leading icon',
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Framework',
-    leadingIcon: 'code',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Framework (disabled)',
-    value: 'angular',
-    disabled: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Small',
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Large',
-    size: 'lg',
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Full width',
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Framework',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-export const CustomPanelClass: Story = {
-  name: 'Panel with custom class',
-  args: {
-    options: SAMPLE_OPTIONS,
-    label: 'Framework',
-    panelClass: 'my-custom-panel',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Use `panelClass` to add CSS classes to the dropdown panel and apply custom styling.',
-      },
-    },
-  },
-};
-
-export const AllVariants: Story = {
-  name: 'All variants',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 360px;">
-        <mf-select [options]="opts" label="Default" placeholder="Select..." />
-        <mf-select [options]="opts" label="With help" hint="Choose your favorite framework" />
-        <mf-select [options]="opts" label="With error" error="This field is required" />
-        <mf-select [options]="opts" label="With icon" leadingIcon="code" />
-        <mf-select [options]="opts" label="Disabled" value="angular" [disabled]="true" />
-        <mf-select [options]="opts" label="Multiple" [multiple]="true" />
-      </div>
-    `,
-    props: { opts: SAMPLE_OPTIONS },
-    moduleMetadata: { imports: [MfSelectComponent] },
-  }),
-};