ng-comps 1.0.0 → 1.0.1

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

@@ -1,124 +1,124 @@
-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** es el spinner de progreso de la librería ng-comps.
-Usa Angular Material \`mat-progress-spinner\` por debajo y expone una API uniforme con look and feel de marca.
-
-| Modo              | Descripción                                |
-|-------------------|--------------------------------------------|
-| \`indeterminate\`   | Animación continua sin valor conocido      |
-| \`determinate\`     | Muestra el progreso exacto (0–100)         |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    mode: {
-      control: 'select',
-      options: ['indeterminate', 'determinate'],
-      description: 'Modo del spinner',
-    },
-    value: {
-      control: { type: 'range', min: 0, max: 100 },
-      description: 'Valor actual (0–100, solo en determinate)',
-    },
-    diameter: {
-      control: { type: 'range', min: 16, max: 120 },
-      description: 'Diámetro en px',
-    },
-    strokeWidth: {
-      control: { type: 'range', min: 1, max: 12 },
-      description: 'Grosor del trazo',
-    },
-    color: {
-      control: 'select',
-      options: ['brand', 'accent', 'warn'],
-      description: 'Color del spinner',
-    },
-    label: { control: 'text', description: 'Etiqueta visible junto al 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: 'Con etiqueta',
-  args: {
-    mode: 'indeterminate',
-    label: 'Cargando datos...',
-    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: 'Tamaños',
-  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: 'Todas las variantes',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 32px; align-items: center; flex-wrap: wrap;">
-        <mf-progress-spinner mode="indeterminate" label="Cargando..." />
-        <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] },
-  }),
-};
+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 +1,111 @@
-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** es el grupo de radio buttons de la librería ng-comps.
-Envuelve Angular Material \`mat-radio-group\` + \`mat-radio-button\` y expone una API uniforme con look and feel de marca.
-
-Recibe un array de \`MfRadioOption\` y gestiona la selección internamente.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    direction: {
-      control: 'select',
-      options: ['vertical', 'horizontal'],
-      description: 'Dirección del grupo',
-    },
-    disabled: { control: 'boolean' },
-    ariaLabel: { control: 'text', description: 'Etiqueta accesible del grupo' },
-    mfChange: { action: 'mfChange' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfRadioButtonComponent>;
-
-export const Vertical: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    direction: 'vertical',
-    ariaLabel: 'Framework preferido',
-  },
-};
-
-export const Horizontal: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    direction: 'horizontal',
-    ariaLabel: 'Framework preferido',
-  },
-};
-
-export const WithDefault: Story = {
-  name: 'Con valor por defecto',
-  args: {
-    options: SAMPLE_OPTIONS,
-    value: 'angular',
-    ariaLabel: 'Framework preferido',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    options: SAMPLE_OPTIONS,
-    disabled: true,
-    ariaLabel: 'Framework preferido (deshabilitado)',
-  },
-};
-
-export const AllVariants: Story = {
-  name: 'Todas las variantes',
-  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="Opciones vertical"
-          />
-        </div>
-        <div>
-          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">Horizontal</p>
-          <mf-radio-button
-            [options]="options"
-            direction="horizontal"
-            ariaLabel="Opciones horizontal"
-          />
-        </div>
-        <div>
-          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">Deshabilitado</p>
-          <mf-radio-button
-            [options]="options"
-            [disabled]="true"
-            ariaLabel="Opciones deshabilitadas"
-          />
-        </div>
-      </div>
-    `,
-    props: {
-      options: SAMPLE_OPTIONS,
-    },
-    moduleMetadata: { imports: [MfRadioButtonComponent] },
-  }),
-};
+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] },
+  }),
+};