ng-comps 1.0.0 → 1.0.1

package/src/stories/mf-grid-list.stories.ts

@@ -1,105 +1,104 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfGridListComponent } from '../app/components/grid-list';
-
-const SAMPLE_TILES = [
-  { title: 'Fotografía', subtitle: '12 elementos', background: 'var(--mf-color-primary-100)' },
-  { title: 'Diseño', subtitle: '8 elementos', background: 'var(--mf-color-secondary-100)' },
-  { title: 'Desarrollo', subtitle: '25 elementos', background: 'var(--mf-color-accent-300)', colspan: 2 },
-  { title: 'Marketing', subtitle: '6 elementos', background: 'var(--mf-color-neutral-100)' },
-  { title: 'Datos', subtitle: '15 elementos', background: 'var(--mf-color-primary-200)' },
-];
-
-const meta: Meta<MfGridListComponent> = {
-  title: 'Organisms/MfGridList',
-  component: MfGridListComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfGridList** es la lista en cuadrícula de la librería ng-comps.
-Envuelve Angular Material \`mat-grid-list\` y expone una API uniforme con look and feel de marca.
-
-Acepta tiles declarativas vía el input \`tiles\` (array de \`MfGridTile\`) o
-content projection de \`mat-grid-tile\` para casos avanzados.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    cols: {
-      control: { type: 'range', min: 1, max: 6 },
-      description: 'Número de columnas',
-    },
-    rowHeight: {
-      control: 'text',
-      description: 'Altura de cada fila (ej: "200px", "1:1", "fit")',
-    },
-    gutterSize: {
-      control: 'text',
-      description: 'Espacio entre tiles',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfGridListComponent>;
-
-export const Default: Story = {
-  args: {
-    cols: 3,
-    rowHeight: '160px',
-    gutterSize: '8px',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-export const TwoColumns: Story = {
-  name: 'Dos columnas',
-  args: {
-    cols: 2,
-    rowHeight: '180px',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-export const FourColumns: Story = {
-  name: 'Cuatro columnas',
-  args: {
-    cols: 4,
-    rowHeight: '120px',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-export const SquareTiles: Story = {
-  name: 'Tiles cuadradas',
-  args: {
-    cols: 3,
-    rowHeight: '1:1',
-    tiles: SAMPLE_TILES,
-  },
-};
-
-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;">3 columnas</p>
-          <mf-grid-list [cols]="3" rowHeight="140px" [tiles]="tiles" />
-        </div>
-        <div>
-          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">4 columnas</p>
-          <mf-grid-list [cols]="4" rowHeight="120px" [tiles]="tiles" />
-        </div>
-      </div>
-    `,
-    props: {
-      tiles: SAMPLE_TILES,
-    },
-    moduleMetadata: { imports: [MfGridListComponent] },
-  }),
-};
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MfGridListComponent } from '../app/components/grid-list';
+
+const SAMPLE_TILES = [
+  { title: 'Photography', subtitle: '12 items', background: 'var(--mf-color-primary-100)' },
+  { title: 'Design', subtitle: '8 items', background: 'var(--mf-color-secondary-100)' },
+  { title: 'Development', subtitle: '25 items', background: 'var(--mf-color-accent-300)', colspan: 2 },
+  { title: 'Marketing', subtitle: '6 items', background: 'var(--mf-color-neutral-100)' },
+  { title: 'Data', subtitle: '15 items', background: 'var(--mf-color-primary-200)' },
+];
+
+const meta: Meta<MfGridListComponent> = {
+  title: 'Organisms/MfGridList',
+  component: MfGridListComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**MfGridList** is the grid list component from the ng-comps library.
+It wraps Angular Material \`mat-grid-list\` and exposes a consistent branded API.
+
+It supports declarative tiles through the \`tiles\` input (an array of \`MfGridTile\`) or \`mat-grid-tile\` content projection for advanced use cases.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    cols: {
+      control: { type: 'range', min: 1, max: 6 },
+      description: 'Number of columns',
+    },
+    rowHeight: {
+      control: 'text',
+      description: 'Height of each row (for example "200px", "1:1", or "fit")',
+    },
+    gutterSize: {
+      control: 'text',
+      description: 'Space between tiles',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MfGridListComponent>;
+
+export const Default: Story = {
+  args: {
+    cols: 3,
+    rowHeight: '160px',
+    gutterSize: '8px',
+    tiles: SAMPLE_TILES,
+  },
+};
+
+export const TwoColumns: Story = {
+  name: 'Two columns',
+  args: {
+    cols: 2,
+    rowHeight: '180px',
+    tiles: SAMPLE_TILES,
+  },
+};
+
+export const FourColumns: Story = {
+  name: 'Four columns',
+  args: {
+    cols: 4,
+    rowHeight: '120px',
+    tiles: SAMPLE_TILES,
+  },
+};
+
+export const SquareTiles: Story = {
+  name: 'Square tiles',
+  args: {
+    cols: 3,
+    rowHeight: '1:1',
+    tiles: SAMPLE_TILES,
+  },
+};
+
+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;">3 columns</p>
+          <mf-grid-list [cols]="3" rowHeight="140px" [tiles]="tiles" />
+        </div>
+        <div>
+          <p style="font-size: 0.875rem; color: #475569; margin-bottom: 8px;">4 columns</p>
+          <mf-grid-list [cols]="4" rowHeight="120px" [tiles]="tiles" />
+        </div>
+      </div>
+    `,
+    props: {
+      tiles: SAMPLE_TILES,
+    },
+    moduleMetadata: { imports: [MfGridListComponent] },
+  }),
+};

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

@@ -1,130 +1,133 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfIconComponent } from '../app/components/icon';
-
-const meta: Meta<MfIconComponent> = {
-  title: 'Atoms/MfIcon',
-  component: MfIconComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfIcon** es el componente de iconos de la librería ng-comps.
-Usa Material Icons por debajo y expone una API consistente con tamaños y colores de marca.
-
-| Tamaño | Pixeles | Cuándo usarlo                           |
-|--------|---------|------------------------------------------|
-| \`sm\`   | 16px    | Dentro de botones, chips o acciones      |
-| \`md\`   | 20px    | Uso general, listas, formularios         |
-| \`lg\`   | 24px    | Headers, navegación                      |
-| \`xl\`   | 32px    | Ilustraciones, estados vacíos            |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    name: { control: 'text', description: 'Nombre del icono Material' },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'xl'],
-      description: 'Tamaño del icono',
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'brand', 'muted', 'error', 'inherit'],
-      description: 'Color semántico del icono',
-    },
-    label: { control: 'text', description: 'Etiqueta accesible (si es decorativo, dejar vacío)' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfIconComponent>;
-
-export const Default: Story = {
-  args: {
-    name: 'home',
-    size: 'md',
-    color: 'default',
-  },
-};
-
-export const Brand: Story = {
-  args: {
-    name: 'favorite',
-    size: 'md',
-    color: 'brand',
-  },
-};
-
-export const Muted: Story = {
-  args: {
-    name: 'info',
-    size: 'md',
-    color: 'muted',
-  },
-};
-
-export const ErrorColor: Story = {
-  name: 'Error',
-  args: {
-    name: 'error',
-    size: 'md',
-    color: 'error',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    name: 'check_circle',
-    size: 'sm',
-    color: 'brand',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    name: 'star',
-    size: 'lg',
-    color: 'default',
-  },
-};
-
-export const ExtraLarge: Story = {
-  args: {
-    name: 'rocket_launch',
-    size: 'xl',
-    color: 'brand',
-  },
-};
-
-export const AllSizes: Story = {
-  name: 'Todos los tamaños',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center;">
-        <mf-icon name="settings" size="sm" />
-        <mf-icon name="settings" size="md" />
-        <mf-icon name="settings" size="lg" />
-        <mf-icon name="settings" size="xl" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfIconComponent] },
-  }),
-};
-
-export const AllColors: Story = {
-  name: 'Todos los colores',
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center;">
-        <mf-icon name="circle" size="lg" color="default" />
-        <mf-icon name="circle" size="lg" color="brand" />
-        <mf-icon name="circle" size="lg" color="muted" />
-        <mf-icon name="circle" size="lg" color="error" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfIconComponent] },
-  }),
-};
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MfIconComponent } from '../app/components/icon';
+
+const meta: Meta<MfIconComponent> = {
+  title: 'Atoms/MfIcon',
+  component: MfIconComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**MfIcon** is the icon component from the ng-comps library.
+It uses Material Icons under the hood and exposes a consistent API with branded sizes and colors.
+
+| Size   | Pixels | When to use it                  |
+|--------|--------|---------------------------------|
+| \`sm\`   | 16px   | Inside buttons, chips, or actions |
+| \`md\`   | 20px   | General use, lists, forms       |
+| \`lg\`   | 24px   | Headers and navigation          |
+| \`xl\`   | 32px   | Illustrations and empty states  |
+        `,
+      },
+    },
+  },
+  argTypes: {
+    name: { control: 'text', description: 'Material icon name' },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description: 'Icon size',
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'brand', 'muted', 'error', 'inherit'],
+      description: 'Semantic icon color',
+    },
+    label: {
+      control: 'text',
+      description: 'Accessible label (leave empty when decorative)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MfIconComponent>;
+
+export const Default: Story = {
+  args: {
+    name: 'home',
+    size: 'md',
+    color: 'default',
+  },
+};
+
+export const Brand: Story = {
+  args: {
+    name: 'favorite',
+    size: 'md',
+    color: 'brand',
+  },
+};
+
+export const Muted: Story = {
+  args: {
+    name: 'info',
+    size: 'md',
+    color: 'muted',
+  },
+};
+
+export const ErrorColor: Story = {
+  name: 'Error',
+  args: {
+    name: 'error',
+    size: 'md',
+    color: 'error',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    name: 'check_circle',
+    size: 'sm',
+    color: 'brand',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    name: 'star',
+    size: 'lg',
+    color: 'default',
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    name: 'rocket_launch',
+    size: 'xl',
+    color: 'brand',
+  },
+};
+
+export const AllSizes: Story = {
+  name: 'All sizes',
+  render: () => ({
+    template: `
+      <div style="display: flex; gap: 16px; align-items: center;">
+        <mf-icon name="settings" size="sm" />
+        <mf-icon name="settings" size="md" />
+        <mf-icon name="settings" size="lg" />
+        <mf-icon name="settings" size="xl" />
+      </div>
+    `,
+    moduleMetadata: { imports: [MfIconComponent] },
+  }),
+};
+
+export const AllColors: Story = {
+  name: 'All colors',
+  render: () => ({
+    template: `
+      <div style="display: flex; gap: 16px; align-items: center;">
+        <mf-icon name="circle" size="lg" color="default" />
+        <mf-icon name="circle" size="lg" color="brand" />
+        <mf-icon name="circle" size="lg" color="muted" />
+        <mf-icon name="circle" size="lg" color="error" />
+      </div>
+    `,
+    moduleMetadata: { imports: [MfIconComponent] },
+  }),
+};