ng-comps 1.0.0 → 1.0.2

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

@@ -1,158 +1,158 @@
-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** es el campo de texto de la librería ng-comps.
-Usa Angular Material \`mat-form-field\` 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                         |
-| \`leadingIcon\` | Icono al inicio del campo                |
-| \`trailingIcon\`| Icono al final del campo                 |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Etiqueta flotante' },
-    placeholder: { control: 'text', description: 'Placeholder' },
-    type: {
-      control: 'select',
-      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Tamaño del campo',
-    },
-    value: { control: 'text' },
-    disabled: { control: 'boolean' },
-    readonly: { control: 'boolean' },
-    hint: { control: 'text', description: 'Texto de ayuda' },
-    error: { control: 'text', description: 'Mensaje de error' },
-    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: 'Correo electrónico',
-    placeholder: 'nombre@ejemplo.com',
-  },
-};
-
-export const WithHint: Story = {
-  name: 'Con texto de ayuda',
-  args: {
-    label: 'Contraseña',
-    type: 'password',
-    hint: 'Mínimo 8 caracteres',
-  },
-};
-
-export const WithError: Story = {
-  name: 'Con error',
-  args: {
-    label: 'Email',
-    value: 'correo-invalido',
-    error: 'Introduce un email válido',
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  name: 'Con icono al inicio',
-  args: {
-    label: 'Buscar',
-    placeholder: 'Buscar...',
-    leadingIcon: 'search',
-  },
-};
-
-export const WithTrailingIcon: Story = {
-  name: 'Con icono al final',
-  args: {
-    label: 'Correo',
-    placeholder: 'nombre@ejemplo.com',
-    trailingIcon: 'mail',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Campo deshabilitado',
-    value: 'No editable',
-    disabled: true,
-  },
-};
-
-export const Readonly: Story = {
-  name: 'Solo lectura',
-  args: {
-    label: 'Solo lectura',
-    value: 'Valor fijo',
-    readonly: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    label: 'Pequeño',
-    placeholder: 'Texto...',
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Grande',
-    placeholder: 'Texto...',
-    size: 'lg',
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Ancho completo',
-  args: {
-    label: 'Nombre completo',
-    placeholder: 'Juan Pérez',
-    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-input label="Normal" placeholder="Escribe aquí..." />
-        <mf-input label="Con ayuda" hint="Este es un texto de ayuda" />
-        <mf-input label="Con error" value="mal" error="Este campo es obligatorio" />
-        <mf-input label="Búsqueda" leadingIcon="search" placeholder="Buscar..." />
-        <mf-input label="Deshabilitado" value="No editable" [disabled]="true" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfInputComponent] },
-  }),
-};
+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] },
+  }),
+};

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

@@ -3,10 +3,10 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { MfMenuComponent } from '../app/components/menu';
 
 const MENU_ITEMS = [
-  { value: 'edit', label: 'Editar', icon: 'edit' },
-  { value: 'duplicate', label: 'Duplicar', icon: 'content_copy' },
-  { value: 'archive', label: 'Archivar', icon: 'archive' },
-  { value: 'delete', label: 'Eliminar', icon: 'delete' },
+  { 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> = {
@@ -41,7 +41,7 @@ type Story = StoryObj<MfMenuComponent>;
 export const Default: Story = {
   args: {
     items: MENU_ITEMS,
-    triggerLabel: 'Abrir acciones del registro',
+    triggerLabel: 'Open record actions',
   },
 };
 
@@ -49,7 +49,7 @@ export const CorrectUsage: Story = {
   name: 'Correct Usage',
   args: {
     items: MENU_ITEMS,
-    triggerLabel: 'Abrir acciones del proyecto',
+    triggerLabel: 'Open project actions',
   },
 };
 
@@ -58,11 +58,11 @@ export const IncorrectUsage: Story = {
   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-patrones</h2>
+        <h2 style="margin: 0 0 12px; font-size: 1rem;">Anti-patterns</h2>
         <ul style="margin: 0 0 16px; padding-left: 18px;">
-          <li>Trigger icon-only sin nombre accesible.</li>
-          <li>Usar elementos del menu como navegacion visual sin accion real.</li>
-          <li>Bloquear Escape o el retorno de foco al trigger.</li>
+          <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 +1,119 @@
-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** es la barra de progreso de la librería ng-comps.
-Usa Angular Material \`mat-progress-bar\` por debajo pero expone una API uniforme con look and feel de marca.
-
-| Modo             | Descripción                                        |
-|------------------|----------------------------------------------------|
-| \`determinate\`    | Muestra el progreso exacto (0–100)                 |
-| \`indeterminate\`  | Animación continua sin valor conocido              |
-| \`buffer\`         | Muestra progreso + buffer                          |
-| \`query\`          | Animación inversa para operaciones de consulta     |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    mode: {
-      control: 'select',
-      options: ['determinate', 'indeterminate', 'buffer', 'query'],
-      description: 'Modo de la barra',
-    },
-    value: {
-      control: { type: 'range', min: 0, max: 100 },
-      description: 'Valor actual (0–100)',
-    },
-    bufferValue: {
-      control: { type: 'range', min: 0, max: 100 },
-      description: 'Valor del buffer (solo en modo buffer)',
-    },
-    color: {
-      control: 'select',
-      options: ['brand', 'accent', 'warn'],
-      description: 'Color de la barra',
-    },
-    label: { control: 'text', description: 'Etiqueta accesible' },
-    showValue: { control: 'boolean', description: 'Muestra el porcentaje' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfProgressBarComponent>;
-
-export const Determinate: Story = {
-  args: {
-    mode: 'determinate',
-    value: 65,
-    label: 'Progreso de carga',
-    showValue: true,
-  },
-};
-
-export const Indeterminate: Story = {
-  args: {
-    mode: 'indeterminate',
-    label: 'Cargando...',
-  },
-};
-
-export const Buffer: Story = {
-  args: {
-    mode: 'buffer',
-    value: 40,
-    bufferValue: 70,
-    label: 'Descargando...',
-  },
-};
-
-export const Query: Story = {
-  args: {
-    mode: 'query',
-    label: 'Consultando...',
-  },
-};
-
-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: 'Todas las variantes',
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-        <mf-progress-bar mode="determinate" [value]="75" label="Completado" [showValue]="true" />
-        <mf-progress-bar mode="indeterminate" label="Cargando..." />
-        <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="Descargando..." />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfProgressBarComponent] },
-  }),
-};
+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] },
+  }),
+};