ng-comps 1.0.2 → 2.0.0

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

@@ -1,159 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { Component, inject } from '@angular/core';
-import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-
-import { MfDialogComponent } from '../app/components/dialog';
-import { MfButtonComponent } from '../app/components/button';
-
-@Component({
-  selector: 'mf-dialog-content-demo',
-  imports: [MfDialogComponent, MfButtonComponent],
-  template: `
-    <mf-dialog
-      title="Confirm action"
-      message="Are you sure you want to continue? This action cannot be undone."
-      [showClose]="true"
-      [showActions]="true"
-      (mfClose)="dialogRef.close()"
-    >
-      <div mfDialogActions>
-        <mf-button label="Cancel" variant="outlined" size="sm" (mfClick)="dialogRef.close()" />
-        <mf-button label="Confirm" variant="filled" size="sm" (mfClick)="dialogRef.close()" />
-      </div>
-    </mf-dialog>
-  `,
-})
-class MfDialogContentDemoComponent {
-  readonly dialogRef = inject(MatDialogRef<MfDialogContentDemoComponent>);
-}
-
-@Component({
-  selector: 'mf-dialog-demo',
-  imports: [MfButtonComponent, MatDialogModule],
-  template: `
-    <mf-button
-      label="Open dialog"
-      variant="filled"
-      (mfClick)="openDialog()"
-    />
-  `,
-})
-class MfDialogDemoComponent {
-  private readonly dialog = inject(MatDialog);
-
-  openDialog(): void {
-    this.dialog.open(MfDialogContentDemoComponent, {
-      panelClass: 'mf-dialog-panel',
-      autoFocus: true,
-    });
-  }
-}
-
-const meta: Meta<MfDialogComponent> = {
-  title: 'Organisms/MfDialog',
-  component: MfDialogComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfDialog** is the dialog component from the ng-comps library.
-It uses Angular Material \`MatDialog\` under the hood with a clean, minimal presentation.
-
-It can be used in two ways:
-1. **Inline** as part of a template for conditional content
-2. **Programmatically** with \`MatDialog.open()\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    title: { control: 'text', description: 'Dialog title' },
-    message: { control: 'text', description: 'Descriptive message' },
-    showClose: { control: 'boolean', description: 'Show close button' },
-    showActions: {
-      control: 'boolean',
-      description: 'Show actions area',
-    },
-    mfClose: { action: 'mfClose' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfDialogComponent>;
-
-export const Default: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <div style="border: 1px solid var(--mf-color-border); border-radius: var(--mf-radius-xl, 20px); box-shadow: var(--mf-shadow-lg); max-width: 480px;">
-        <mf-dialog [title]="title" [message]="message" [showClose]="showClose" [showActions]="showActions">
-          <div mfDialogActions>
-            <mf-button label="Cancel" variant="outlined" size="sm" />
-            <mf-button label="Confirm" variant="filled" size="sm" />
-          </div>
-        </mf-dialog>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfDialogComponent, MfButtonComponent] },
-  }),
-  args: {
-    title: 'Confirm action',
-    message: 'Are you sure you want to continue? This action cannot be undone.',
-    showClose: true,
-    showActions: true,
-  },
-};
-
-export const WithoutMessage: Story = {
-  name: 'Title only',
-  render: () => ({
-    template: `
-      <div style="border: 1px solid var(--mf-color-border); border-radius: var(--mf-radius-xl, 20px); box-shadow: var(--mf-shadow-lg); max-width: 480px;">
-        <mf-dialog title="Settings" [showClose]="true" [showActions]="true">
-          <p style="margin: 0; color: var(--mf-color-neutral-600); font-size: var(--mf-text-sm);">
-            Here you can customize your account settings.
-          </p>
-          <div mfDialogActions>
-            <mf-button label="Cancel" variant="text" size="sm" />
-            <mf-button label="Save" variant="filled" size="sm" />
-          </div>
-        </mf-dialog>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfDialogComponent, MfButtonComponent] },
-  }),
-};
-
-export const Danger: Story = {
-  name: 'Destructive',
-  render: () => ({
-    template: `
-      <div style="border: 1px solid var(--mf-color-border); border-radius: var(--mf-radius-xl, 20px); box-shadow: var(--mf-shadow-lg); max-width: 480px;">
-        <mf-dialog title="Delete project" message="The project and all its data will be permanently deleted. This action cannot be undone." [showClose]="true" [showActions]="true">
-          <div mfDialogActions>
-            <mf-button label="Cancel" variant="outlined" size="sm" />
-            <mf-button label="Delete" variant="filled" size="sm" />
-          </div>
-        </mf-dialog>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfDialogComponent, MfButtonComponent] },
-  }),
-};
-
-export const OpenDialog: Story = {
-  name: 'Open with MatDialog',
-  render: () => ({
-    template: `<mf-dialog-demo />`,
-    moduleMetadata: { imports: [MfDialogDemoComponent] },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Click the button to open the dialog using `MatDialog.open()`.',
-      },
-    },
-  },
-};

package/src/stories/mf-form-field.stories.ts

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfFormFieldComponent } from '../app/components/form-field';
-import { MfInputComponent } from '../app/components/input';
-import { MfCheckboxComponent } from '../app/components/checkbox';
-
-const meta: Meta<MfFormFieldComponent> = {
-  title: 'Molecules/MfFormField',
-  component: MfFormFieldComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfFormField** is the form field wrapper from the ng-comps library.
-It provides a consistent layout with label, projected content, and optional helper or error messages.
-
-Use it as a wrapper for \`mf-input\`, \`mf-checkbox\`, or other controls when you want a uniform structure.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Field label' },
-    fieldId: { control: 'text', description: 'Accessibility id' },
-    hint: { control: 'text', description: 'Helper text' },
-    error: { control: 'text', description: 'Error message' },
-    required: { control: 'boolean', description: 'Required field' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfFormFieldComponent>;
-
-export const WithInput: Story = {
-  name: 'With input',
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-form-field [label]="label" [hint]="hint" [required]="required">
-        <mf-input placeholder="Type your name..." [fullWidth]="true" />
-      </mf-form-field>
-    `,
-    moduleMetadata: { imports: [MfFormFieldComponent, MfInputComponent] },
-  }),
-  args: {
-    label: 'Full name',
-    hint: 'First and last name',
-    required: true,
-  },
-};
-
-export const WithError: Story = {
-  name: 'With error',
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-form-field [label]="label" [error]="error" [required]="required">
-        <mf-input placeholder="name@example.com" [fullWidth]="true" />
-      </mf-form-field>
-    `,
-    moduleMetadata: { imports: [MfFormFieldComponent, MfInputComponent] },
-  }),
-  args: {
-    label: 'Email address',
-    error: 'This field is required',
-    required: true,
-  },
-};
-
-export const WithCheckbox: Story = {
-  name: 'With checkbox',
-  render: () => ({
-    template: `
-      <mf-form-field label="Notification preferences" hint="Choose the ones you want">
-        <div style="display: flex; flex-direction: column; gap: 8px; padding-top: 4px;">
-          <mf-checkbox label="Email notifications" />
-          <mf-checkbox label="Push notifications" />
-          <mf-checkbox label="SMS" />
-        </div>
-      </mf-form-field>
-    `,
-    moduleMetadata: { imports: [MfFormFieldComponent, MfCheckboxComponent] },
-  }),
-};
-
-export const FormExample: Story = {
-  name: 'Form example',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px; max-width: 400px;">
-        <mf-form-field label="Name" [required]="true">
-          <mf-input placeholder="Your name..." [fullWidth]="true" />
-        </mf-form-field>
-        <mf-form-field label="Email" [required]="true" hint="We will use this email to contact you">
-          <mf-input placeholder="name@example.com" type="email" [fullWidth]="true" />
-        </mf-form-field>
-        <mf-form-field label="Password" [required]="true" hint="Minimum 8 characters">
-          <mf-input type="password" [fullWidth]="true" />
-        </mf-form-field>
-        <mf-form-field>
-          <mf-checkbox label="I accept the terms and conditions" />
-        </mf-form-field>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfFormFieldComponent, MfInputComponent, MfCheckboxComponent] },
-  }),
-};

package/src/stories/mf-grid-list.stories.ts

@@ -1,104 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfGridListComponent } from '../app/components/grid-list';
-
-const SAMPLE_TILES = [
-  { title: 'Photography', subtitle: '12 items', background: 'var(--mf-color-primary-100)' },
-  { title: 'Design', subtitle: '8 items', background: 'var(--mf-color-secondary-100)' },
-  { title: 'Development', subtitle: '25 items', background: 'var(--mf-color-accent-300)', colspan: 2 },
-  { title: 'Marketing', subtitle: '6 items', background: 'var(--mf-color-neutral-100)' },
-  { title: 'Data', subtitle: '15 items', background: 'var(--mf-color-primary-200)' },
-];
-
-const meta: Meta<MfGridListComponent> = {
-  title: 'Organisms/MfGridList',
-  component: MfGridListComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfGridList** is the grid list component from the ng-comps library.
-It wraps Angular Material \`mat-grid-list\` and exposes a consistent branded API.
-
-It supports declarative tiles through the \`tiles\` input (an array of \`MfGridTile\`) or \`mat-grid-tile\` content projection for advanced use cases.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    cols: {
-      control: { type: 'range', min: 1, max: 6 },
-      description: 'Number of columns',
-    },
-    rowHeight: {
-      control: 'text',
-      description: 'Height of each row (for example "200px", "1:1", or "fit")',
-    },
-    gutterSize: {
-      control: 'text',
-      description: 'Space between tiles',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfGridListComponent>;
-
-export const Default: Story = {
-  args: {
-    cols: 3,
-    rowHeight: '160px',
-    gutterSize: '8px',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-export const TwoColumns: Story = {
-  name: 'Two columns',
-  args: {
-    cols: 2,
-    rowHeight: '180px',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-export const FourColumns: Story = {
-  name: 'Four columns',
-  args: {
-    cols: 4,
-    rowHeight: '120px',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-export const SquareTiles: Story = {
-  name: 'Square tiles',
-  args: {
-    cols: 3,
-    rowHeight: '1:1',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-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;">3 columns</p>
-          <mf-grid-list [cols]="3" rowHeight="140px" [tiles]="tiles" />
-        </div>
-        <div>
-          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">4 columns</p>
-          <mf-grid-list [cols]="4" rowHeight="120px" [tiles]="tiles" />
-        </div>
-      </div>
-    `,
-    props: {
-      tiles: SAMPLE_TILES,
-    },
-    moduleMetadata: { imports: [MfGridListComponent] },
-  }),
-};

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

@@ -1,133 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfIconComponent } from '../app/components/icon';
-
-const meta: Meta<MfIconComponent> = {
-  title: 'Atoms/MfIcon',
-  component: MfIconComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfIcon** is the icon component from the ng-comps library.
-It uses Material Icons under the hood and exposes a consistent API with branded sizes and colors.
-
-| Size   | Pixels | When to use it                  |
-|--------|--------|---------------------------------|
-| \`sm\`   | 16px   | Inside buttons, chips, or actions |
-| \`md\`   | 20px   | General use, lists, forms       |
-| \`lg\`   | 24px   | Headers and navigation          |
-| \`xl\`   | 32px   | Illustrations and empty states  |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    name: { control: 'text', description: 'Material icon name' },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'xl'],
-      description: 'Icon size',
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'brand', 'muted', 'error', 'inherit'],
-      description: 'Semantic icon color',
-    },
-    label: {
-      control: 'text',
-      description: 'Accessible label (leave empty when decorative)',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfIconComponent>;
-
-export const Default: Story = {
-  args: {
-    name: 'home',
-    size: 'md',
-    color: 'default',
-  },
-};
-
-export const Brand: Story = {
-  args: {
-    name: 'favorite',
-    size: 'md',
-    color: 'brand',
-  },
-};
-
-export const Muted: Story = {
-  args: {
-    name: 'info',
-    size: 'md',
-    color: 'muted',
-  },
-};
-
-export const ErrorColor: Story = {
-  name: 'Error',
-  args: {
-    name: 'error',
-    size: 'md',
-    color: 'error',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    name: 'check_circle',
-    size: 'sm',
-    color: 'brand',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    name: 'star',
-    size: 'lg',
-    color: 'default',
-  },
-};
-
-export const ExtraLarge: Story = {
-  args: {
-    name: 'rocket_launch',
-    size: 'xl',
-    color: 'brand',
-  },
-};
-
-export const AllSizes: Story = {
-  name: 'All sizes',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center;">
-        <mf-icon name="settings" size="sm" />
-        <mf-icon name="settings" size="md" />
-        <mf-icon name="settings" size="lg" />
-        <mf-icon name="settings" size="xl" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfIconComponent] },
-  }),
-};
-
-export const AllColors: Story = {
-  name: 'All colors',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center;">
-        <mf-icon name="circle" size="lg" color="default" />
-        <mf-icon name="circle" size="lg" color="brand" />
-        <mf-icon name="circle" size="lg" color="muted" />
-        <mf-icon name="circle" size="lg" color="error" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfIconComponent] },
-  }),
-};

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

@@ -1,158 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfInputComponent } from '../app/components/input';
-
-const meta: Meta<MfInputComponent> = {
-  title: 'Atoms/MfInput',
-  component: MfInputComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfInput** is the text field component from the ng-comps library.
-It uses Angular Material \`mat-form-field\` under the hood while exposing a consistent branded API.
-
-| Property       | Description                   |
-|----------------|-------------------------------|
-| \`label\`        | Floating field label          |
-| \`placeholder\`  | Placeholder text              |
-| \`hint\`         | Helper text below the field   |
-| \`error\`        | Error message                 |
-| \`leadingIcon\`  | Icon shown at the start       |
-| \`trailingIcon\` | Icon shown at the end         |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Floating label' },
-    placeholder: { control: 'text', description: 'Placeholder' },
-    type: {
-      control: 'select',
-      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Field size',
-    },
-    value: { control: 'text' },
-    disabled: { control: 'boolean' },
-    readonly: { control: 'boolean' },
-    hint: { control: 'text', description: 'Helper text' },
-    error: { control: 'text', description: 'Error message' },
-    leadingIcon: { control: 'text' },
-    trailingIcon: { control: 'text' },
-    fullWidth: { control: 'boolean' },
-    mfInput: { action: 'mfInput' },
-    mfBlur: { action: 'mfBlur' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfInputComponent>;
-
-export const Default: Story = {
-  args: {
-    label: 'Email address',
-    placeholder: 'name@example.com',
-  },
-};
-
-export const WithHint: Story = {
-  name: 'With helper text',
-  args: {
-    label: 'Password',
-    type: 'password',
-    hint: 'Minimum 8 characters',
-  },
-};
-
-export const WithError: Story = {
-  name: 'With error',
-  args: {
-    label: 'Email',
-    value: 'invalid-email',
-    error: 'Enter a valid email address',
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  name: 'With leading icon',
-  args: {
-    label: 'Search',
-    placeholder: 'Search...',
-    leadingIcon: 'search',
-  },
-};
-
-export const WithTrailingIcon: Story = {
-  name: 'With trailing icon',
-  args: {
-    label: 'Email',
-    placeholder: 'name@example.com',
-    trailingIcon: 'mail',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled field',
-    value: 'Not editable',
-    disabled: true,
-  },
-};
-
-export const Readonly: Story = {
-  name: 'Read only',
-  args: {
-    label: 'Read only',
-    value: 'Fixed value',
-    readonly: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    label: 'Small',
-    placeholder: 'Text...',
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Large',
-    placeholder: 'Text...',
-    size: 'lg',
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Full width',
-  args: {
-    label: 'Full name',
-    placeholder: 'Jane Doe',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-export const AllVariants: Story = {
-  name: 'All variants',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 360px;">
-        <mf-input label="Default" placeholder="Type here..." />
-        <mf-input label="With help" hint="This is helper text" />
-        <mf-input label="With error" value="bad" error="This field is required" />
-        <mf-input label="Search" leadingIcon="search" placeholder="Search..." />
-        <mf-input label="Disabled" value="Not editable" [disabled]="true" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfInputComponent] },
-  }),
-};