ng-comps 1.0.2 → 2.0.0

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

@@ -1,194 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfAutocompleteComponent } from '../app/components/autocomplete';
-
-const COUNTRIES = [
-  { value: 'es', label: 'Spain' },
-  { value: 'mx', label: 'Mexico' },
-  { value: 'ar', label: 'Argentina' },
-  { value: 'co', label: 'Colombia' },
-  { value: 'cl', label: 'Chile' },
-  { value: 'pe', label: 'Peru' },
-  { value: 'us', label: 'United States' },
-  { value: 'uk', label: 'United Kingdom' },
-  { value: 'de', label: 'Germany' },
-  { value: 'fr', label: 'France' },
-];
-
-const meta: Meta<MfAutocompleteComponent> = {
-  title: 'Atoms/MfAutocomplete',
-  component: MfAutocompleteComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfAutocomplete** is the autocomplete field from the ng-comps library.
-It uses Angular Material \`mat-autocomplete\` under the hood while exposing a consistent branded API.
-
-Options are filtered automatically based on the text typed into the field, matching against the option \`label\` property. You can pass the full option list and let the component handle filtering.
-
-The dropdown panel is styled through the global \`mf-autocomplete-panel\` class. You can inject additional classes with \`panelClass\`.
-
-| 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                                   |
-| \`leadingIcon\`      | Material icon shown at the start                |
-| \`trailingIcon\`     | Material icon shown at the end                  |
-| \`panelWidth\`       | Panel width (\`'auto'\` by default)             |
-| \`panelClass\`       | Extra classes for the dropdown panel            |
-| \`mfInput\`          | Event emitted with the typed text               |
-| \`mfOptionSelected\` | Event emitted with the selected option          |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Floating label' },
-    placeholder: { control: 'text', description: 'Placeholder' },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Field size',
-    },
-    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' },
-    panelWidth: { control: 'text', description: 'Dropdown panel width' },
-    mfInput: { action: 'mfInput' },
-    mfOptionSelected: { action: 'mfOptionSelected' },
-    mfBlur: { action: 'mfBlur' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfAutocompleteComponent>;
-
-export const Default: Story = {
-  args: {
-    options: COUNTRIES,
-    label: 'Country',
-    placeholder: 'Type to search...',
-  },
-};
-
-export const WithHint: Story = {
-  name: 'With helper text',
-  args: {
-    options: COUNTRIES,
-    label: 'Country of origin',
-    hint: 'Start typing to filter the results',
-  },
-};
-
-export const WithError: Story = {
-  name: 'With error',
-  args: {
-    options: COUNTRIES,
-    label: 'Country',
-    error: 'Select a valid country',
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  name: 'With leading icon',
-  args: {
-    options: COUNTRIES,
-    label: 'Country',
-    placeholder: 'Search country...',
-    leadingIcon: 'search',
-  },
-};
-
-export const WithTrailingIcon: Story = {
-  name: 'With trailing icon',
-  args: {
-    options: COUNTRIES,
-    label: 'Country',
-    trailingIcon: 'public',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    options: COUNTRIES,
-    label: 'Country (disabled)',
-    value: 'Spain',
-    disabled: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    options: COUNTRIES,
-    label: 'Small',
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    options: COUNTRIES,
-    label: 'Large',
-    size: 'lg',
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Full width',
-  args: {
-    options: COUNTRIES,
-    label: 'Country',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-export const CustomPanelClass: Story = {
-  name: 'Panel with custom class',
-  args: {
-    options: COUNTRIES,
-    label: 'Country',
-    panelClass: 'my-custom-autocomplete',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Use `panelClass` to add CSS classes to the autocomplete 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-autocomplete [options]="opts" label="Default" placeholder="Type to search..." />
-        <mf-autocomplete [options]="opts" label="With help" hint="Filter by country name" />
-        <mf-autocomplete [options]="opts" label="With error" error="Select a valid country" />
-        <mf-autocomplete [options]="opts" label="With icon" leadingIcon="search" placeholder="Search..." />
-        <mf-autocomplete [options]="opts" label="Disabled" value="Spain" [disabled]="true" />
-      </div>
-    `,
-    props: { opts: COUNTRIES },
-    moduleMetadata: { imports: [MfAutocompleteComponent] },
-  }),
-};

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

@@ -1,152 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfButtonComponent } from '../app/components/button';
-
-const meta: Meta<MfButtonComponent> = {
-  title: 'Components/MfButton',
-  component: MfButtonComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfButton** is the button component from the ng-comps library.
-It uses Angular Material under the hood while exposing a consistent branded API.
-
-| Variant    | When to use it                                |
-|------------|-----------------------------------------------|
-| \`filled\`   | Primary action, usually one per section       |
-| \`outlined\` | Secondary action or soft destructive action   |
-| \`text\`     | Tertiary action, internal navigation, or link |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['filled', 'outlined', 'text'],
-      description: 'Visual button variant',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Button size',
-    },
-    type: {
-      control: 'select',
-      options: ['button', 'submit', 'reset'],
-    },
-    disabled: { control: 'boolean' },
-    fullWidth: { control: 'boolean' },
-    leadingIcon: {
-      control: 'text',
-      description: 'Material icon name shown before the label',
-    },
-    trailingIcon: {
-      control: 'text',
-      description: 'Material icon name shown after the label',
-    },
-    mfClick: { action: 'mfClick' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfButtonComponent>;
-
-export const Filled: Story = {
-  args: {
-    label: 'Save changes',
-    variant: 'filled',
-  },
-};
-
-export const Outlined: Story = {
-  args: {
-    label: 'Cancel',
-    variant: 'outlined',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    label: 'View details',
-    variant: 'text',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    label: 'Small',
-    variant: 'filled',
-    size: 'sm',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    label: 'Medium',
-    variant: 'filled',
-    size: 'md',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Large',
-    variant: 'filled',
-    size: 'lg',
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  name: 'With leading icon',
-  args: {
-    label: 'Create new',
-    variant: 'filled',
-    leadingIcon: 'add',
-  },
-};
-
-export const WithTrailingIcon: Story = {
-  name: 'With trailing icon',
-  args: {
-    label: 'Next',
-    variant: 'filled',
-    trailingIcon: 'arrow_forward',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled',
-    variant: 'filled',
-    disabled: true,
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Full width',
-  args: {
-    label: 'Sign in',
-    variant: 'filled',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-export const AllVariants: Story = {
-  name: 'All variants',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-        <mf-button label="Filled" variant="filled" />
-        <mf-button label="Outlined" variant="outlined" />
-        <mf-button label="Text" variant="text" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfButtonComponent] },
-  }),
-};

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

@@ -1,147 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfCardComponent } from '../app/components/card';
-
-const meta: Meta<MfCardComponent> = {
-  title: 'Molecules/MfCard',
-  component: MfCardComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfCard** is the card component from the ng-comps library.
-It uses Angular Material \`mat-card\` under the hood with a custom visual style that feels clean, elegant, and modern.
-
-| Variant     | When to use it                              |
-|-------------|---------------------------------------------|
-| \`elevated\`  | Primary content highlighted with a shadow   |
-| \`outlined\`  | Secondary content with a subtle border      |
-| \`flat\`      | Background content with no border or shadow |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    title: { control: 'text', description: 'Card title' },
-    subtitle: { control: 'text', description: 'Card subtitle' },
-    variant: {
-      control: 'select',
-      options: ['elevated', 'outlined', 'flat'],
-      description: 'Visual variant',
-    },
-    padding: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg'],
-      description: 'Internal padding',
-    },
-    interactive: { control: 'boolean', description: 'Interactive hover effect' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfCardComponent>;
-
-export const Elevated: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-card [title]="title" [subtitle]="subtitle" [variant]="variant" [padding]="padding" [interactive]="interactive">
-        <p style="margin: 0; color: var(--mf-color-neutral-600);">
-          This is the card content. It can include text, forms, lists, or other components.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {
-    title: 'Card title',
-    subtitle: 'Descriptive subtitle',
-    variant: 'elevated',
-    padding: 'md',
-    interactive: false,
-  },
-};
-
-export const Outlined: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-card [title]="title" [subtitle]="subtitle" variant="outlined">
-        <p style="margin: 0; color: var(--mf-color-neutral-600);">
-          A subtle bordered card, ideal for secondary content.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {
-    title: 'Outlined card',
-    subtitle: 'Outlined variant',
-  },
-};
-
-export const Flat: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-card [title]="title" variant="flat">
-        <p style="margin: 0; color: var(--mf-color-neutral-600);">
-          A flat card with a subtle background and no border or shadow.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {
-    title: 'Flat card',
-  },
-};
-
-export const Interactive: Story = {
-  render: () => ({
-    template: `
-      <mf-card title="Interactive card" subtitle="Hover to see the effect" variant="elevated" [interactive]="true">
-        <p style="margin: 0; color: var(--mf-color-neutral-600);">
-          This card responds to hover with subtle elevation and motion.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {},
-};
-
-export const NoHeader: Story = {
-  name: 'No header',
-  render: () => ({
-    template: `
-      <mf-card variant="outlined" padding="lg">
-        <p style="margin: 0; color: var(--mf-color-neutral-600); font-size: var(--mf-text-lg);">
-          Card without a header, using only projected content.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-};
-
-export const AllVariants: Story = {
-  name: 'All variants',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 20px; flex-wrap: wrap;">
-        <mf-card title="Elevated" subtitle="With shadow" variant="elevated" style="width: 280px;">
-          <p style="margin: 0; color: var(--mf-color-neutral-600);">Sample content.</p>
-        </mf-card>
-        <mf-card title="Outlined" subtitle="With border" variant="outlined" style="width: 280px;">
-          <p style="margin: 0; color: var(--mf-color-neutral-600);">Sample content.</p>
-        </mf-card>
-        <mf-card title="Flat" subtitle="No elevation" variant="flat" style="width: 280px;">
-          <p style="margin: 0; color: var(--mf-color-neutral-600);">Sample content.</p>
-        </mf-card>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-};

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

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfCheckboxComponent } from '../app/components/checkbox';
-
-const meta: Meta<MfCheckboxComponent> = {
-  title: 'Atoms/MfCheckbox',
-  component: MfCheckboxComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfCheckbox** is the checkbox component from the ng-comps library.
-It uses Angular Material \`mat-checkbox\` under the hood while exposing a consistent branded API.
-
-| State           | Description             |
-|-----------------|-------------------------|
-| \`checked\`       | Selected                |
-| \`indeterminate\` | Partial selection state |
-| \`disabled\`      | Not interactive         |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Checkbox label text' },
-    checked: { control: 'boolean' },
-    indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    mfChange: { action: 'mfChange' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfCheckboxComponent>;
-
-export const Default: Story = {
-  args: {
-    label: 'I accept the terms and conditions',
-    checked: false,
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: 'Selected option',
-    checked: true,
-  },
-};
-
-export const Indeterminate: Story = {
-  args: {
-    label: 'Partial selection',
-    indeterminate: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled option',
-    disabled: true,
-  },
-};
-
-export const DisabledChecked: Story = {
-  name: 'Disabled and checked',
-  args: {
-    label: 'Checked and disabled',
-    checked: true,
-    disabled: true,
-  },
-};
-
-export const AllStates: Story = {
-  name: 'All states',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 12px;">
-        <mf-checkbox label="Unchecked" />
-        <mf-checkbox label="Checked" [checked]="true" />
-        <mf-checkbox label="Indeterminate" [indeterminate]="true" />
-        <mf-checkbox label="Disabled" [disabled]="true" />
-        <mf-checkbox label="Checked and disabled" [checked]="true" [disabled]="true" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfCheckboxComponent] },
-  }),
-};

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

@@ -1,118 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfDatepickerComponent } from '../app/components/datepicker';
-
-const meta: Meta<MfDatepickerComponent> = {
-  title: 'Atoms/MfDatepicker',
-  component: MfDatepickerComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfDatepicker** is the date picker component from the ng-comps library.
-It uses Angular Material \`mat-datepicker\` 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                      |
-| \`min\`         | Minimum selectable date            |
-| \`max\`         | Maximum selectable date            |
-| \`disabled\`    | Disables the field                 |
-| \`fullWidth\`   | Makes the field fill its container |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Floating label' },
-    placeholder: { control: 'text', description: 'Placeholder' },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Field size',
-    },
-    disabled: { control: 'boolean' },
-    hint: { control: 'text', description: 'Helper text' },
-    error: { control: 'text', description: 'Error message' },
-    fullWidth: { control: 'boolean' },
-    mfChange: { action: 'mfChange' },
-    mfBlur: { action: 'mfBlur' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfDatepickerComponent>;
-
-export const Default: Story = {
-  args: {
-    label: 'Birth date',
-    placeholder: 'DD/MM/YYYY',
-  },
-};
-
-export const WithHint: Story = {
-  name: 'With helper text',
-  args: {
-    label: 'Start date',
-    hint: 'Select a date after today',
-  },
-};
-
-export const WithError: Story = {
-  name: 'With error',
-  args: {
-    label: 'Due date',
-    error: 'Date is required',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Date (disabled)',
-    disabled: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    label: 'Small',
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Large',
-    size: 'lg',
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Full width',
-  args: {
-    label: 'Delivery date',
-    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-datepicker label="Default" />
-        <mf-datepicker label="With help" hint="Select a date" />
-        <mf-datepicker label="With error" error="Date required" />
-        <mf-datepicker label="Disabled" [disabled]="true" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfDatepickerComponent] },
-  }),
-};