ng-comps 1.0.0 → 1.0.1

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

@@ -1,156 +1,152 @@
-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** es el botón de la librería ng-comps.
-Usa Angular Material por debajo pero expone una API uniforme con el look and feel de marca.
-
-| Variante   | Cuándo usarla                                       |
-|------------|-----------------------------------------------------|
-| \`filled\`   | Acción principal — una sola por sección              |
-| \`outlined\` | Acción secundaria o destructiva suave                |
-| \`text\`     | Acción terciaria, navegación interna o links         |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['filled', 'outlined', 'text'],
-      description: 'Variante visual del botón',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Tamaño del botón',
-    },
-    type: {
-      control: 'select',
-      options: ['button', 'submit', 'reset'],
-    },
-    disabled: { control: 'boolean' },
-    fullWidth: { control: 'boolean' },
-    leadingIcon: { control: 'text', description: 'Nombre de icono Material antes del texto' },
-    trailingIcon: { control: 'text', description: 'Nombre de icono Material después del texto' },
-    mfClick: { action: 'mfClick' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfButtonComponent>;
-
-// ── Stories básicas ───────────────────────────────────────────────────────────
-
-export const Filled: Story = {
-  args: {
-    label: 'Guardar cambios',
-    variant: 'filled',
-  },
-};
-
-export const Outlined: Story = {
-  args: {
-    label: 'Cancelar',
-    variant: 'outlined',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    label: 'Ver más detalles',
-    variant: 'text',
-  },
-};
-
-// ── Tamaños ───────────────────────────────────────────────────────────────────
-
-export const Small: Story = {
-  args: {
-    label: 'Pequeño',
-    variant: 'filled',
-    size: 'sm',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    label: 'Mediano',
-    variant: 'filled',
-    size: 'md',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Grande',
-    variant: 'filled',
-    size: 'lg',
-  },
-};
-
-// ── Con iconos ────────────────────────────────────────────────────────────────
-
-export const WithLeadingIcon: Story = {
-  name: 'Con icono al inicio',
-  args: {
-    label: 'Crear nuevo',
-    variant: 'filled',
-    leadingIcon: 'add',
-  },
-};
-
-export const WithTrailingIcon: Story = {
-  name: 'Con icono al final',
-  args: {
-    label: 'Siguiente',
-    variant: 'filled',
-    trailingIcon: 'arrow_forward',
-  },
-};
-
-// ── Estados ───────────────────────────────────────────────────────────────────
-
-export const Disabled: Story = {
-  args: {
-    label: 'Deshabilitado',
-    variant: 'filled',
-    disabled: true,
-  },
-};
-
-export const FullWidth: Story = {
-  name: 'Ancho completo',
-  args: {
-    label: 'Iniciar sesión',
-    variant: 'filled',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-// ── Comparativa de variantes ──────────────────────────────────────────────────
-
-export const AllVariants: Story = {
-  name: 'Todas las variantes',
-  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] },
-  }),
-};
+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,148 +1,147 @@
-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** es el componente de card de la librería ng-comps.
-Usa Angular Material \`mat-card\` por debajo pero con un estilo propio: minimalista, elegante y moderno.
-
-| Variante    | Cuándo usarla                                   |
-|-------------|--------------------------------------------------|
-| \`elevated\`  | Contenido principal, destacado con sombra        |
-| \`outlined\`  | Contenido secundario, con borde sutil            |
-| \`flat\`      | Contenido de fondo, sin elevación ni borde       |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    title: { control: 'text', description: 'Título de la card' },
-    subtitle: { control: 'text', description: 'Subtítulo de la card' },
-    variant: {
-      control: 'select',
-      options: ['elevated', 'outlined', 'flat'],
-      description: 'Variante visual',
-    },
-    padding: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg'],
-      description: 'Padding interno',
-    },
-    interactive: { control: 'boolean', description: 'Efecto hover interactivo' },
-  },
-};
-
-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);">
-          Este es el contenido de la card. Puede incluir texto, formularios, listas u otros componentes.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {
-    title: 'Título de la card',
-    subtitle: 'Subtítulo descriptivo',
-    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);">
-          Card con borde sutil, ideal para contenido secundario.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {
-    title: 'Card con borde',
-    subtitle: 'Variante outlined',
-  },
-};
-
-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);">
-          Card plana con fondo sutil, sin elevación ni borde.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {
-    title: 'Card plana',
-  },
-};
-
-export const Interactive: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-card title="Card interactiva" subtitle="Haz hover para ver el efecto" variant="elevated" [interactive]="true">
-        <p style="margin: 0; color: var(--mf-color-neutral-600);">
-          Esta card responde al hover con elevación y movimiento sutil.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-  args: {},
-};
-
-export const NoHeader: Story = {
-  name: 'Sin 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 sin header, solo contenido proyectado.
-        </p>
-      </mf-card>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-};
-
-export const AllVariants: Story = {
-  name: 'Todas las variantes',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 20px; flex-wrap: wrap;">
-        <mf-card title="Elevated" subtitle="Con sombra" variant="elevated" style="width: 280px;">
-          <p style="margin: 0; color: var(--mf-color-neutral-600);">Contenido de ejemplo.</p>
-        </mf-card>
-        <mf-card title="Outlined" subtitle="Con borde" variant="outlined" style="width: 280px;">
-          <p style="margin: 0; color: var(--mf-color-neutral-600);">Contenido de ejemplo.</p>
-        </mf-card>
-        <mf-card title="Flat" subtitle="Sin elevación" variant="flat" style="width: 280px;">
-          <p style="margin: 0; color: var(--mf-color-neutral-600);">Contenido de ejemplo.</p>
-        </mf-card>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfCardComponent] },
-  }),
-};
+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] },
+  }),
+};