@gob-ds/gob-ds 1.0.0

package/src/stories/components/button.stories.ts

@@ -0,0 +1,329 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { ArrowRight, Trash2, Plus, GitBranch } from 'lucide-angular';
+import { ButtonComponent } from '../../app/lib/button/button.component';
+
+const meta: Meta<ButtonComponent> = {
+    title: 'Components/Button',
+    component: ButtonComponent,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Componente base de acción del design system.
+
+| Prop | Tipo | Valores |
+|------|------|---------|
+| \`variant\` | enum | \`primary\` \`secondary\` \`outline\` \`ghost\` \`destructive\` \`link\` |
+| \`size\` | enum | \`sm\` \`md\` \`lg\` |
+| \`disabled\` | boolean | — |
+| \`loading\` | boolean | — |
+| \`fullWidth\` | boolean | — |
+| \`iconPosition\` | enum | \`left\` \`right\` \`only\` |
+| \`asTag\` | element | \`button\` \`a\` |
+        `,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'outline', 'ghost', 'destructive', 'link'],
+        },
+        size: {
+            control: 'radio',
+            options: ['sm', 'md', 'lg'],
+        },
+        iconPosition: {
+            control: 'radio',
+            options: [null, 'left', 'right', 'only'],
+        },
+        asTag: {
+            control: 'radio',
+            options: ['button', 'a'],
+        },
+        disabled: { control: 'boolean' },
+        loading: { control: 'boolean' },
+        fullWidth: { control: 'boolean' },
+    },
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+// ── Playground ─────────────────────────────────────────────────
+export const Playground: Story = {
+    args: { variant: 'primary', size: 'md', disabled: false, loading: false },
+    render: (args) => ({
+        props: args,
+        template: `<ds-button [variant]="variant" [size]="size" [disabled]="disabled" [loading]="loading">Guardar cambios</ds-button>`,
+    }),
+};
+
+// ── Variants ───────────────────────────────────────────────────
+export const Variants: Story = {
+    render: () => ({
+        template: `
+      <div style="display:flex; flex-wrap:wrap; align-items:center; gap:12px;">
+        <ds-button variant="primary">Primary</ds-button>
+        <ds-button variant="secondary">Secondary</ds-button>
+        <ds-button variant="outline">Outline</ds-button>
+        <ds-button variant="ghost">Ghost</ds-button>
+        <ds-button variant="destructive">Destructive</ds-button>
+        <ds-button variant="link">Link</ds-button>
+      </div>
+    `,
+    }),
+};
+
+// ── Sizes ──────────────────────────────────────────────────────
+export const Sizes: Story = {
+    render: () => ({
+        template: `
+      <div style="display:flex; align-items:center; gap:12px;">
+        <ds-button size="sm">Small</ds-button>
+        <ds-button size="md">Default</ds-button>
+        <ds-button size="lg">Large</ds-button>
+      </div>
+    `,
+    }),
+};
+
+// ── With Icons ───────────────────────────────────────────────
+export const WithIcons: Story = {
+    render: () => ({
+        props: { ArrowRight, Plus, Trash2, GitBranch },
+        template: `
+      <div style="display:flex; flex-wrap:wrap; align-items:center; gap:12px;">
+        <ds-button variant="primary"      [icon]="Plus"      iconPosition="left">Nuevo</ds-button>
+        <ds-button variant="outline"      [icon]="ArrowRight" iconPosition="right">Continuar</ds-button>
+        <ds-button variant="destructive"  [icon]="Trash2"    iconPosition="left">Eliminar</ds-button>
+        <ds-button variant="secondary"    [icon]="GitBranch" iconPosition="left">New Branch</ds-button>
+      </div>
+    `,
+    }),
+};
+
+// ── Icon only ──────────────────────────────────────────────────
+export const IconOnly: Story = {
+    render: () => ({
+        props: { Plus, Trash2, ArrowRight },
+        template: `
+      <div style="display:flex; align-items:center; gap:12px;">
+        <ds-button variant="primary"     [icon]="Plus"      iconPosition="only" size="sm" />
+        <ds-button variant="outline"     [icon]="ArrowRight" iconPosition="only" size="md" />
+        <ds-button variant="destructive" [icon]="Trash2"    iconPosition="only" size="lg" />
+      </div>
+    `,
+    }),
+};
+
+export const Status: Story = {
+  parameters: { layout: 'padded' },
+  render: () => ({
+    props: { Plus, ArrowRight, Trash2 },
+    template: `
+      <div style="display:grid; gap:18px; min-width: 760px;">
+        
+        <!-- Default / Disabled / Loading (Primary) -->
+        <div>
+          <div style="margin-bottom:8px; font-size:13px; color: var(--color-text-secondary); font-weight: 500;">
+            Primary states
+          </div>
+          <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
+            <ds-button variant="primary">Default</ds-button>
+            <ds-button variant="primary" [disabled]="true">Disabled</ds-button>
+            <ds-button variant="primary" [loading]="true">Loading</ds-button>
+            <ds-button variant="primary" [icon]="Plus" iconPosition="left">With icon</ds-button>
+            <ds-button variant="primary" [icon]="Plus" iconPosition="left" [loading]="true">Loading + icon</ds-button>
+          </div>
+        </div>
+
+        <!-- Outline / Ghost / Secondary disabled + loading -->
+        <div>
+          <div style="margin-bottom:8px; font-size:13px; color: var(--color-text-secondary); font-weight: 500;">
+            Other variants states
+          </div>
+          <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
+            <ds-button variant="secondary">Secondary</ds-button>
+            <ds-button variant="secondary" [disabled]="true">Secondary disabled</ds-button>
+            <ds-button variant="secondary" [loading]="true">Secondary loading</ds-button>
+
+            <ds-button variant="outline">Outline</ds-button>
+            <ds-button variant="outline" [disabled]="true">Outline disabled</ds-button>
+            <ds-button variant="outline" [loading]="true">Outline loading</ds-button>
+
+            <ds-button variant="ghost">Ghost</ds-button>
+            <ds-button variant="ghost" [disabled]="true">Ghost disabled</ds-button>
+            <ds-button variant="ghost" [loading]="true">Ghost loading</ds-button>
+          </div>
+        </div>
+
+        <!-- Destructive -->
+        <div>
+          <div style="margin-bottom:8px; font-size:13px; color: var(--color-text-secondary); font-weight: 500;">
+            Destructive states
+          </div>
+          <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
+            <ds-button variant="destructive">Delete</ds-button>
+            <ds-button variant="destructive" [disabled]="true">Disabled</ds-button>
+            <ds-button variant="destructive" [loading]="true">Deleting...</ds-button>
+            <ds-button variant="destructive" [icon]="Trash2" iconPosition="left">With icon</ds-button>
+            <ds-button variant="destructive" [icon]="Trash2" iconPosition="left" [loading]="true">Loading + icon</ds-button>
+          </div>
+        </div>
+
+        <!-- Link (special case) -->
+        <div>
+          <div style="margin-bottom:8px; font-size:13px; color: var(--color-text-secondary); font-weight: 500;">
+            Link states (special)
+          </div>
+          <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
+            <ds-button variant="link">Link</ds-button>
+            <ds-button variant="link" [disabled]="true">Link disabled</ds-button>
+            <ds-button variant="link" [loading]="true">Link loading</ds-button>
+            <ds-button variant="link" [icon]="ArrowRight" iconPosition="right">Link + icon</ds-button>
+          </div>
+        </div>
+
+        <!-- Icon-only edge cases -->
+        <div>
+          <div style="margin-bottom:8px; font-size:13px; color: var(--color-text-secondary); font-weight: 500;">
+            Icon-only edge cases
+          </div>
+          <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
+            <ds-button variant="primary" [icon]="Plus" iconPosition="only" size="sm" />
+            <ds-button variant="primary" [icon]="Plus" iconPosition="only" size="sm" [disabled]="true" />
+            <ds-button variant="primary" [icon]="Plus" iconPosition="only" size="sm" [loading]="true" />
+
+            <ds-button variant="outline" [icon]="ArrowRight" iconPosition="only" size="md" />
+            <ds-button variant="outline" [icon]="ArrowRight" iconPosition="only" size="md" [disabled]="true" />
+            <ds-button variant="outline" [icon]="ArrowRight" iconPosition="only" size="md" [loading]="true" />
+          </div>
+        </div>
+
+        <!-- Full width states -->
+        <div style="max-width: 320px;">
+          <div style="margin-bottom:8px; font-size:13px; color: var(--color-text-secondary); font-weight: 500;">
+            Full width states
+          </div>
+          <div style="display:flex; flex-direction:column; gap:10px;">
+            <ds-button variant="primary" [fullWidth]="true" size="lg">Continue</ds-button>
+            <ds-button variant="primary" [fullWidth]="true" size="lg" [loading]="true">Continue</ds-button>
+            <ds-button variant="outline" [fullWidth]="true" size="lg" [disabled]="true">Cancel</ds-button>
+          </div>
+        </div>
+
+      </div>
+    `,
+  }),
+};
+
+// ── Full Width ─────────────────────────────────────────────────
+export const FullWidth: Story = {
+    parameters: { layout: 'padded' },
+    render: () => ({
+        template: `
+      <div style="display:flex; flex-direction:column; gap:10px; width:320px;">
+        <ds-button variant="primary"  [fullWidth]="true">Iniciar sesión</ds-button>
+        <ds-button variant="outline"  [fullWidth]="true">Crear cuenta</ds-button>
+      </div>
+    `,
+    }),
+};
+
+// ── Toolbar ────────────────────────────────────────────────────
+export const Toolbar: Story = {
+    render: () => ({
+        template: `
+      <div style="display:flex; gap:0;">
+        <ds-button variant="outline" size="sm"
+          style="border-radius: 6px 0 0 6px; border-right: none;">Archive</ds-button>
+        <ds-button variant="outline" size="sm"
+          style="border-radius: 0; border-right: none;">Report</ds-button>
+        <ds-button variant="outline" size="sm"
+          style="border-radius: 0; border-right: none;">Snooze</ds-button>
+        <ds-button variant="outline" size="sm"
+          style="border-radius: 0 6px 6px 0;">···</ds-button>
+      </div>
+    `,
+    }),
+};
+
+export const StateMatrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => ({
+    template: `
+      <div style="display:grid; gap:12px;">
+        <div style="display:grid; grid-template-columns: 140px repeat(5, 160px); gap:12px; align-items:center; font-size: 13px;">
+          <div></div>
+          <div style="color: var(--color-text-secondary); font-weight: 500;">Default</div>
+          <div style="color: var(--color-text-secondary); font-weight: 500;">Hover</div>
+          <div style="color: var(--color-text-secondary); font-weight: 500;">Active</div>
+          <div style="color: var(--color-text-secondary); font-weight: 500;">Focus</div>
+          <div style="color: var(--color-text-secondary); font-weight: 500;">Disabled</div>
+        </div>
+
+        ${['primary','secondary','outline','ghost','destructive','link'].map((variant) => `
+          <div style="display:grid; grid-template-columns: 140px repeat(5, 160px); gap:12px; align-items:center;">
+            <div style="color: var(--color-text-secondary); font-size: 13px;">${variant}</div>
+
+            <ds-button variant="${variant}">Label</ds-button>
+            <ds-button variant="${variant}" class="is-hover">Label</ds-button>
+            <ds-button variant="${variant}" class="is-active">Label</ds-button>
+            <ds-button variant="${variant}" class="is-focus">Label</ds-button>
+            <ds-button variant="${variant}" disabled>Label</ds-button>
+          </div>
+        `).join('')}
+      </div>
+    `,
+  }),
+};
+
+export const LoadingMatrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => ({
+    template: `
+      <div style="display:grid; gap:12px;">
+        <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
+          <ds-button variant="primary" [loading]="true">Primary</ds-button>
+          <ds-button variant="secondary" [loading]="true">Secondary</ds-button>
+          <ds-button variant="outline" [loading]="true">Outline</ds-button>
+          <ds-button variant="ghost" [loading]="true">Ghost</ds-button>
+          <ds-button variant="destructive" [loading]="true">Destructive</ds-button>
+          <ds-button variant="link" [loading]="true">Link</ds-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// ── Disabled ───────────────────────────────────────────────────
+export const DisabledPerVariant: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex; flex-wrap:wrap; gap:12px;">
+        <ds-button variant="primary" [disabled]="true">Primary</ds-button>
+        <ds-button variant="secondary" [disabled]="true">Secondary</ds-button>
+        <ds-button variant="outline" [disabled]="true">Outline</ds-button>
+        <ds-button variant="ghost" [disabled]="true">Ghost</ds-button>
+        <ds-button variant="destructive" [disabled]="true">Destructive</ds-button>
+        <ds-button variant="link" [disabled]="true">Link</ds-button>
+      </div>
+    `,
+  }),
+};
+
+// ── As Link ───────────────────────────────────────────────────
+export const AsLink: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
+        <ds-button asTag="a" variant="primary">Anchor Primary</ds-button>
+        <ds-button asTag="a" variant="outline">Anchor Outline</ds-button>
+        <ds-button asTag="a" variant="link">Anchor Link</ds-button>
+      </div>
+    `,
+  }),
+};

package/src/stories/components/checkbox.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { CheckboxComponent } from '../../app/lib/checkbox/checkbox.component';
+
+const meta: Meta<CheckboxComponent> = {
+  title: 'Components/Checkbox',
+  component: CheckboxComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Checkbox accesible con soporte para estado indeterminado y ReactiveForms.',
+      },
+    },
+  },
+  argTypes: {
+    disabled:      { control: 'boolean' },
+    indeterminate: { control: 'boolean' },
+    label:         { control: 'text' },
+    hint:          { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CheckboxComponent>;
+
+// ── Playground ─────────────────────────────────────────────────
+export const Playground: Story = {
+  args: { label: 'Mantener sesión iniciada' },
+  render: (args) => ({
+    props: args,
+    template: `
+      <ds-checkbox
+        [label]="label"
+        [hint]="hint"
+        [disabled]="disabled"
+        [indeterminate]="indeterminate"
+      />
+    `,
+  }),
+};
+
+// ── Estados ────────────────────────────────────────────────────
+export const Estados: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex; flex-direction:column; gap:16px;">
+        <ds-checkbox label="Sin marcar" />
+        <ds-checkbox label="Marcado" [checked]="true" />
+        <ds-checkbox label="Indeterminado" [indeterminate]="true" />
+        <ds-checkbox label="Deshabilitado sin marcar" [disabled]="true" />
+        <ds-checkbox label="Deshabilitado marcado"    [disabled]="true" [checked]="true" />
+      </div>
+    `,
+  }),
+};
+
+// ── Con hint ───────────────────────────────────────────────────
+export const ConHint: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex; flex-direction:column; gap:16px; max-width:280px;">
+        <ds-checkbox
+          label="Mantener sesión iniciada"
+          hint="Tu sesión no cerrará al salir del navegador."
+        />
+        <ds-checkbox
+          label="Recibir notificaciones"
+          hint="Te avisaremos sobre cambios importantes en tu cuenta."
+          [checked]="true"
+        />
+      </div>
+    `,
+  }),
+};
+
+// ── Grupo (lista de opciones) ──────────────────────────────────
+export const Grupo: Story = {
+  parameters: { layout: 'padded' },
+  render: () => ({
+    template: `
+      <fieldset style="border:1px solid var(--color-border); border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:14px; min-width:280px;">
+        <legend style="font-size:13px; font-weight:600; color:var(--color-text-secondary); padding:0 6px;">
+          Permisos de acceso
+        </legend>
+        <ds-checkbox label="Ver reportes"         hint="Acceso de solo lectura a todos los reportes." [checked]="true" />
+        <ds-checkbox label="Editar registros"     hint="Puede modificar datos existentes." />
+        <ds-checkbox label="Eliminar registros"   hint="Acción irreversible." [disabled]="true" />
+        <ds-checkbox label="Administrar usuarios" hint="Requiere aprobación del administrador." [indeterminate]="true" />
+      </fieldset>
+    `,
+  }),
+};
+
+// ── En contexto (como en tu imagen de login) ───────────────────
+export const EnLogin: Story = {
+  render: () => ({
+    template: `
+      <ds-checkbox label="Mantener sesión iniciada" [checked]="true" />
+    `,
+  }),
+};

package/src/stories/components/input.stories.ts

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Search, Mail } from 'lucide-angular';
+import { InputComponent } from '../../app/lib/input/input.component';
+
+const meta: Meta<InputComponent> = {
+  title: 'Components/Input',
+  component: InputComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Campo de texto base del design system. Compatible con ReactiveForms y ngModel.',
+      },
+    },
+  },
+  argTypes: {
+    type:     { control: 'select', options: ['text', 'password', 'email', 'number'] },
+    disabled: { control: 'boolean' },
+    label:    { control: 'text' },
+    placeholder: { control: 'text' },
+    hint:     { control: 'text' },
+    error:    { control: 'text' },
+    required: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<InputComponent>;
+
+// ── Playground ─────────────────────────────────────────────────
+export const Playground: Story = {
+  args: {
+    label: 'RFC',
+    placeholder: 'VECJ880326XXX',
+    required: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 320px;">
+        <ds-input
+          [label]="label"
+          [placeholder]="placeholder"
+          [hint]="hint"
+          [error]="error"
+          [disabled]="disabled"
+          [type]="type"
+          [required]="required"
+        />
+      </div>
+    `,
+  }),
+};
+
+// ── Login form (como en la imagen) ────────────────────────────
+export const LoginForm: Story = {
+  render: () => ({
+    template: `
+      <div style="width: 360px; display: flex; flex-direction: column; gap: 16px;">
+        <ds-input label="RFC"        placeholder="VECJ880326XXX" />
+        <ds-input label="Contraseña" type="password" placeholder="" />
+      </div>
+    `,
+  }),
+  parameters: { layout: 'centered' },
+};
+
+// ── Estados ────────────────────────────────────────────────────
+export const Estados: Story = {
+  render: () => ({
+    template: `
+      <div style="width: 320px; display: flex; flex-direction: column; gap: 16px;">
+        <ds-input label="Default"   placeholder="Escribe algo..." />
+        <ds-input label="Con hint"  placeholder="usuario@empresa.com"
+                  hint="Usaremos este correo para notificaciones." />
+        <ds-input label="Con error" placeholder="RFC"
+                  error="El RFC ingresado no es válido." />
+        <ds-input label="Disabled"  placeholder="No editable" [disabled]="true" />
+      </div>
+    `,
+  }),
+  parameters: { layout: 'padded' },
+};
+
+// ── Con íconos ─────────────────────────────────────────────────
+export const ConIconos: Story = {
+  render: () => ({
+    props: { Search, Mail },
+    template: `
+      <div style="width: 320px; display: flex; flex-direction: column; gap: 16px;">
+        <ds-input label="Buscar"  placeholder="Buscar..." [prefixIcon]="Search" />
+        <ds-input label="Correo"  placeholder="usuario@empresa.com" [prefixIcon]="Mail" />
+        <ds-input label="Contraseña" type="password" />
+      </div>
+    `,
+  }),
+  parameters: { layout: 'padded' },
+};
+

package/src/stories/components/search.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { SearchComponent } from '../../app/lib/search/search.component';
+
+const meta: Meta<SearchComponent> = {
+  title: 'Components/Search',
+  component: SearchComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Input de búsqueda con ícono prefix, botón de limpiar y eventos `search` y `cleared`.',
+      },
+    },
+  },
+  argTypes: {
+    disabled:    { control: 'boolean' },
+    placeholder: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SearchComponent>;
+
+// ── Playground ─────────────────────────────────────────────────
+export const Playground: Story = {
+  args: {
+    placeholder: 'Buscar por nombre o RFC...',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 340px;">
+        <ds-search
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+        />
+      </div>
+    `,
+  }),
+};
+
+// ── Estados ────────────────────────────────────────────────────
+export const Estados: Story = {
+  render: () => ({
+    template: `
+      <div style="width:320px; display:flex; flex-direction:column; gap:12px;">
+        <ds-search placeholder="Sin texto (default)" />
+        <ds-search placeholder="Disabled" [disabled]="true" />
+      </div>
+    `,
+  }),
+  parameters: { layout: 'padded' },
+};
+
+// ── En contexto (toolbar de tabla) ────────────────────────────
+export const EnToolbar: Story = {
+  parameters: { layout: 'padded' },
+  render: () => ({
+    template: `
+      <div style="
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px;
+        border: 1px solid var(--color-border);
+        border-radius: 12px;
+        background: var(--color-bg-default);
+        gap: 12px;
+        min-width: 560px;
+      ">
+        <div style="flex:1; max-width:320px;">
+          <ds-search placeholder="Buscar por nombre o RFC..." />
+        </div>
+        <span style="font-size:13px; color:var(--color-text-tertiary);">
+          52 resultados
+        </span>
+      </div>
+    `,
+  }),
+};

package/src/stories/user.ts

@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}

package/src/styles.scss

@@ -0,0 +1,14 @@
+@use 'tokens/styles/tokens';
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  background: var(--color-bg-default);
+  line-height: var(--line-height-normal);
+}