ng-comps 1.0.0 → 1.0.2

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

@@ -1,88 +1,88 @@
-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** es el checkbox de la librería ng-comps.
-Usa Angular Material \`mat-checkbox\` por debajo pero expone una API uniforme con look and feel de marca.
-
-| Estado          | Descripción                                |
-|-----------------|--------------------------------------------|
-| \`checked\`       | Marcado                                    |
-| \`indeterminate\` | Estado intermedio (selección parcial)      |
-| \`disabled\`      | No interactivo                             |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Texto del checkbox' },
-    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: 'Acepto los términos y condiciones',
-    checked: false,
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: 'Opción seleccionada',
-    checked: true,
-  },
-};
-
-export const Indeterminate: Story = {
-  args: {
-    label: 'Selección parcial',
-    indeterminate: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Opción deshabilitada',
-    disabled: true,
-  },
-};
-
-export const DisabledChecked: Story = {
-  name: 'Deshabilitado y marcado',
-  args: {
-    label: 'Marcado y deshabilitado',
-    checked: true,
-    disabled: true,
-  },
-};
-
-export const AllStates: Story = {
-  name: 'Todos los estados',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 12px;">
-        <mf-checkbox label="Sin marcar" />
-        <mf-checkbox label="Marcado" [checked]="true" />
-        <mf-checkbox label="Indeterminado" [indeterminate]="true" />
-        <mf-checkbox label="Deshabilitado" [disabled]="true" />
-        <mf-checkbox label="Marcado y deshabilitado" [checked]="true" [disabled]="true" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfCheckboxComponent] },
-  }),
-};
+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 +1,118 @@
-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** es el selector de fecha de la librería ng-comps.
-Usa Angular Material \`mat-datepicker\` por debajo pero expone una API uniforme con look and feel de marca.
-
-| Propiedad   | Descripción                              |
-|-------------|------------------------------------------|
-| \`label\`     | Etiqueta flotante del campo              |
-| \`placeholder\` | Texto de placeholder                   |
-| \`hint\`      | Texto de ayuda debajo del campo          |
-| \`error\`     | Mensaje de error                         |
-| \`min\`       | Fecha mínima seleccionable               |
-| \`max\`       | Fecha máxima seleccionable               |
-| \`disabled\`  | Deshabilita el campo                     |
-| \`fullWidth\` | Ocupa el ancho del contenedor            |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Etiqueta flotante' },
-    placeholder: { control: 'text', description: 'Placeholder' },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Tamaño del campo',
-    },
-    disabled: { control: 'boolean' },
-    hint: { control: 'text', description: 'Texto de ayuda' },
-    error: { control: 'text', description: 'Mensaje de error' },
-    fullWidth: { control: 'boolean' },
-    mfChange: { action: 'mfChange' },
-    mfBlur: { action: 'mfBlur' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfDatepickerComponent>;
-
-export const Default: Story = {
-  args: {
-    label: 'Fecha de nacimiento',
-    placeholder: 'DD/MM/YYYY',
-  },
-};
-
-export const WithHint: Story = {
-  name: 'Con texto de ayuda',
-  args: {
-    label: 'Fecha de inicio',
-    hint: 'Selecciona una fecha posterior a hoy',
-  },
-};
-
-export const WithError: Story = {
-  name: 'Con error',
-  args: {
-    label: 'Fecha de vencimiento',
-    error: 'La fecha es obligatoria',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Fecha (deshabilitada)',
-    disabled: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    label: 'Pequeño',
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Grande',
-    size: 'lg',
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Ancho completo',
-  args: {
-    label: 'Fecha de entrega',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-export const AllVariants: Story = {
-  name: 'Todas las variantes',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 360px;">
-        <mf-datepicker label="Normal" />
-        <mf-datepicker label="Con ayuda" hint="Selecciona una fecha" />
-        <mf-datepicker label="Con error" error="Fecha requerida" />
-        <mf-datepicker label="Deshabilitado" [disabled]="true" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfDatepickerComponent] },
-  }),
-};
+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] },
+  }),
+};