siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Badge/Badge.stories.tsx

@@ -1,339 +1,339 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Badge } from './Badge';
-
-// Icon de check simple para los ejemplos
-const CheckIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 12"
-    fill="currentColor"
-    className="w-3 h-3"
-  >
-    <path
-      fillRule="evenodd"
-      d="M9.707 3.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L5 6.586l3.293-3.293a1 1 0 0 1 1.414 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Badge - Componente de badge del sistema de diseño Siesa
- *
- * Sistema completo de badges con soporte para:
- * - **21 variantes de color**: Zinc, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose, Primary, Secondary, Tertiary
- * - **Icono opcional**: A la izquierda del label
- * - **Contador**: Notification badge con número
- * - **Estados hover**: Transiciones suaves
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente para mostrar badges/etiquetas con múltiples variantes de color. Ideal para estados, categorías, tags, notificaciones, etc.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: 'select',
-      options: [
-        'zinc',
-        'red',
-        'orange',
-        'amber',
-        'yellow',
-        'lime',
-        'green',
-        'emerald',
-        'teal',
-        'cyan',
-        'sky',
-        'blue',
-        'indigo',
-        'violet',
-        'purple',
-        'fuchsia',
-        'pink',
-        'rose',
-        'primary',
-        'secondary',
-        'tertiary',
-      ],
-      description: 'Color del badge',
-      table: {
-        type: { summary: 'BadgeColor' },
-        defaultValue: { summary: 'zinc' },
-        category: 'Appearance',
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Texto del badge',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    leftIcon: {
-      control: false,
-      description: 'Icono opcional a la izquierda',
-      table: {
-        type: { summary: 'ReactElement' },
-        category: 'Content',
-      },
-    },
-    count: {
-      control: 'number',
-      description: 'Número para el notification badge',
-      table: {
-        type: { summary: 'number' },
-        category: 'Content',
-      },
-    },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con el Badge en tiempo real.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    color: 'blue',
-    label: 'Etiqueta',
-    leftIcon: <CheckIcon />,
-    count: 3,
-  },
-};
-
-// ============================================
-// 2. TODAS LAS VARIANTES DE COLOR
-// ============================================
-
-/**
- * Todas las Variantes de Color
- *
- * Vista de todas las 21 variantes de color disponibles.
- */
-export const AllColors: Story = {
-  name: 'Todas las Variantes de Color',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Zinc to Rose */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Paleta de Colores</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="zinc" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="red" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="orange" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="amber" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="yellow" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="lime" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="green" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="emerald" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="teal" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="cyan" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="sky" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="indigo" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="violet" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="purple" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="fuchsia" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="pink" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="rose" label="Label" leftIcon={<CheckIcon />} />
-        </div>
-      </div>
-
-      {/* System Colors */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Colores del Sistema</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="primary" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="secondary" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="tertiary" label="Label" leftIcon={<CheckIcon />} />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON Y SIN ICONO
-// ============================================
-
-/**
- * Con y Sin Icono
- *
- * Ejemplos de badges con icono y sin icono.
- */
-export const WithAndWithoutIcon: Story = {
-  name: 'Con y Sin Icono',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Con icono */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Icono</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="green" label="Éxito" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="Info" leftIcon={<CheckIcon />} />
-          <Badge color="red" label="Error" leftIcon={<CheckIcon />} />
-        </div>
-      </div>
-
-      {/* Sin icono */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Icono</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="green" label="Éxito" />
-          <Badge color="blue" label="Info" />
-          <Badge color="red" label="Error" />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON CONTADOR
-// ============================================
-
-/**
- * Con Contador
- *
- * Ejemplos de badges con notification badge mostrando un número.
- */
-export const WithCount: Story = {
-  name: 'Con Contador',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Contador</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="blue" label="Mensajes" leftIcon={<CheckIcon />} count={3} />
-          <Badge color="red" label="Errores" leftIcon={<CheckIcon />} count={12} />
-          <Badge color="green" label="Tareas" leftIcon={<CheckIcon />} count={5} />
-          <Badge color="purple" label="Notificaciones" count={99} />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar badges en situaciones reales.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Estados */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados de Pedidos</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="green" label="Entregado" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="En Tránsito" />
-          <Badge color="yellow" label="Pendiente" />
-          <Badge color="red" label="Cancelado" />
-        </div>
-      </div>
-
-      {/* Categorías */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Categorías de Productos</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="purple" label="Electrónica" />
-          <Badge color="pink" label="Moda" />
-          <Badge color="cyan" label="Hogar" />
-          <Badge color="orange" label="Comida" />
-          <Badge color="lime" label="Deportes" />
-        </div>
-      </div>
-
-      {/* Prioridades */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Prioridades de Tickets</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="red" label="Crítico" count={5} />
-          <Badge color="orange" label="Alto" count={12} />
-          <Badge color="yellow" label="Medio" count={23} />
-          <Badge color="green" label="Bajo" count={8} />
-        </div>
-      </div>
-
-      {/* Roles */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Roles de Usuario</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="primary" label="Administrador" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="Editor" />
-          <Badge color="secondary" label="Visualizador" />
-          <Badge color="tertiary" label="Invitado" />
-        </div>
-      </div>
-
-      {/* Tags */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Tags de Artículos</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="indigo" label="React" />
-          <Badge color="sky" label="TypeScript" />
-          <Badge color="emerald" label="Tailwind" />
-          <Badge color="violet" label="Storybook" />
-        </div>
-      </div>
-
-      {/* Notificaciones */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Notificaciones</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="blue" label="Bandeja" count={24} />
-          <Badge color="green" label="Actualizaciones" count={3} />
-          <Badge color="red" label="Alertas" count={7} />
-          <Badge color="purple" label="Mensajes" count={15} />
-        </div>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from './Badge';
+
+// Icon de check simple para los ejemplos
+const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 12 12"
+    fill="currentColor"
+    className="w-3 h-3"
+  >
+    <path
+      fillRule="evenodd"
+      d="M9.707 3.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L5 6.586l3.293-3.293a1 1 0 0 1 1.414 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Badge - Componente de badge del sistema de diseño Siesa
+ *
+ * Sistema completo de badges con soporte para:
+ * - **21 variantes de color**: Zinc, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose, Primary, Secondary, Tertiary
+ * - **Icono opcional**: A la izquierda del label
+ * - **Contador**: Notification badge con número
+ * - **Estados hover**: Transiciones suaves
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente para mostrar badges/etiquetas con múltiples variantes de color. Ideal para estados, categorías, tags, notificaciones, etc.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: [
+        'zinc',
+        'red',
+        'orange',
+        'amber',
+        'yellow',
+        'lime',
+        'green',
+        'emerald',
+        'teal',
+        'cyan',
+        'sky',
+        'blue',
+        'indigo',
+        'violet',
+        'purple',
+        'fuchsia',
+        'pink',
+        'rose',
+        'primary',
+        'secondary',
+        'tertiary',
+      ],
+      description: 'Color del badge',
+      table: {
+        type: { summary: 'BadgeColor' },
+        defaultValue: { summary: 'zinc' },
+        category: 'Appearance',
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Texto del badge',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    leftIcon: {
+      control: false,
+      description: 'Icono opcional a la izquierda',
+      table: {
+        type: { summary: 'ReactElement' },
+        category: 'Content',
+      },
+    },
+    count: {
+      control: 'number',
+      description: 'Número para el notification badge',
+      table: {
+        type: { summary: 'number' },
+        category: 'Content',
+      },
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con el Badge en tiempo real.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    color: 'blue',
+    label: 'Etiqueta',
+    leftIcon: <CheckIcon />,
+    count: 3,
+  },
+};
+
+// ============================================
+// 2. TODAS LAS VARIANTES DE COLOR
+// ============================================
+
+/**
+ * Todas las Variantes de Color
+ *
+ * Vista de todas las 21 variantes de color disponibles.
+ */
+export const AllColors: Story = {
+  name: 'Todas las Variantes de Color',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Zinc to Rose */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Paleta de Colores</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="zinc" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="red" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="orange" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="amber" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="yellow" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="lime" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="green" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="emerald" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="teal" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="cyan" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="sky" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="blue" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="indigo" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="violet" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="purple" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="fuchsia" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="pink" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="rose" label="Label" leftIcon={<CheckIcon />} />
+        </div>
+      </div>
+
+      {/* System Colors */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Colores del Sistema</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="primary" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="secondary" label="Label" leftIcon={<CheckIcon />} />
+          <Badge color="tertiary" label="Label" leftIcon={<CheckIcon />} />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON Y SIN ICONO
+// ============================================
+
+/**
+ * Con y Sin Icono
+ *
+ * Ejemplos de badges con icono y sin icono.
+ */
+export const WithAndWithoutIcon: Story = {
+  name: 'Con y Sin Icono',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Con icono */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Icono</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="green" label="Éxito" leftIcon={<CheckIcon />} />
+          <Badge color="blue" label="Info" leftIcon={<CheckIcon />} />
+          <Badge color="red" label="Error" leftIcon={<CheckIcon />} />
+        </div>
+      </div>
+
+      {/* Sin icono */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Icono</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="green" label="Éxito" />
+          <Badge color="blue" label="Info" />
+          <Badge color="red" label="Error" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CON CONTADOR
+// ============================================
+
+/**
+ * Con Contador
+ *
+ * Ejemplos de badges con notification badge mostrando un número.
+ */
+export const WithCount: Story = {
+  name: 'Con Contador',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Contador</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="blue" label="Mensajes" leftIcon={<CheckIcon />} count={3} />
+          <Badge color="red" label="Errores" leftIcon={<CheckIcon />} count={12} />
+          <Badge color="green" label="Tareas" leftIcon={<CheckIcon />} count={5} />
+          <Badge color="purple" label="Notificaciones" count={99} />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar badges en situaciones reales.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Estados */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados de Pedidos</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="green" label="Entregado" leftIcon={<CheckIcon />} />
+          <Badge color="blue" label="En Tránsito" />
+          <Badge color="yellow" label="Pendiente" />
+          <Badge color="red" label="Cancelado" />
+        </div>
+      </div>
+
+      {/* Categorías */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Categorías de Productos</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="purple" label="Electrónica" />
+          <Badge color="pink" label="Moda" />
+          <Badge color="cyan" label="Hogar" />
+          <Badge color="orange" label="Comida" />
+          <Badge color="lime" label="Deportes" />
+        </div>
+      </div>
+
+      {/* Prioridades */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Prioridades de Tickets</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="red" label="Crítico" count={5} />
+          <Badge color="orange" label="Alto" count={12} />
+          <Badge color="yellow" label="Medio" count={23} />
+          <Badge color="green" label="Bajo" count={8} />
+        </div>
+      </div>
+
+      {/* Roles */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Roles de Usuario</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="primary" label="Administrador" leftIcon={<CheckIcon />} />
+          <Badge color="blue" label="Editor" />
+          <Badge color="secondary" label="Visualizador" />
+          <Badge color="tertiary" label="Invitado" />
+        </div>
+      </div>
+
+      {/* Tags */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Tags de Artículos</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="indigo" label="React" />
+          <Badge color="sky" label="TypeScript" />
+          <Badge color="emerald" label="Tailwind" />
+          <Badge color="violet" label="Storybook" />
+        </div>
+      </div>
+
+      {/* Notificaciones */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Notificaciones</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge color="blue" label="Bandeja" count={24} />
+          <Badge color="green" label="Actualizaciones" count={3} />
+          <Badge color="red" label="Alertas" count={7} />
+          <Badge color="purple" label="Mensajes" count={15} />
+        </div>
+      </div>
+    </div>
+  ),
+};