siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,580 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState, useEffect } from 'react';
+import { Tabs, Tab } from './Tabs';
+import { HomeIcon, UserIcon, CogIcon, BellIcon, DocumentIcon, ChartIcon, CheckIcon } from './icons';
+
+/**
+ * Tabs - Componente de navegación por pestañas del sistema de diseño Siesa
+ *
+ * Sistema de navegación horizontal que permite cambiar entre diferentes vistas o
+ * secciones de contenido. Implementado con React, TypeScript y Tailwind CSS
+ * siguiendo pixel-perfect las especificaciones de Figma.
+ *
+ * **Características:**
+ * - Estados: Default, Hover, Focus, Active, Disabled
+ * - Soporte para iconos
+ * - Badge de notificación con contador
+ * - Dark mode completo
+ * - Modo controlado y no controlado
+ */
+const meta = {
+  title: 'Siesa UI Kit/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Navegación por pestañas con soporte para iconos, badges de notificación y dark mode completo.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      description: 'Lista de tabs a mostrar',
+      table: {
+        type: { summary: 'TabItem[]' },
+        category: 'Contenido',
+      },
+    },
+    activeId: {
+      control: 'text',
+      description: 'ID del tab actualmente seleccionado (modo controlado)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Estado',
+      },
+    },
+    defaultActiveId: {
+      control: 'text',
+      description: 'ID del tab seleccionado por defecto (modo no controlado)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Estado',
+      },
+    },
+    onChange: {
+      description: 'Callback ejecutado cuando cambia el tab seleccionado',
+      table: {
+        type: { summary: '(id: string) => void' },
+        category: 'Eventos',
+      },
+      action: 'changed',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si los tabs ocupan todo el ancho disponible',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Diseño',
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'base', 'lg'],
+      description: 'Tamaño de los tabs (espaciado entre ellos)',
+      table: {
+        type: { summary: "'sm' | 'base' | 'lg'" },
+        defaultValue: { summary: 'base' },
+        category: 'Apariencia',
+      },
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Muestra la línea inferior del contenedor',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Apariencia',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Clases CSS adicionales',
+      table: {
+        type: { summary: 'string' },
+        category: 'Estilo',
+      },
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Items básicos para ejemplos
+const basicItems = [
+  { id: 'inicio', label: 'Inicio' },
+  { id: 'perfil', label: 'Perfil' },
+  { id: 'configuracion', label: 'Configuración' },
+];
+
+// Items con iconos
+const itemsWithIcons = [
+  { id: 'inicio', label: 'Inicio', icon: <HomeIcon className="w-3 h-3" /> },
+  { id: 'perfil', label: 'Perfil', icon: <UserIcon className="w-3 h-3" /> },
+  { id: 'configuracion', label: 'Configuración', icon: <CogIcon className="w-3 h-3" /> },
+];
+
+// Items con badges
+const itemsWithBadges = [
+  { id: 'inicio', label: 'Inicio', icon: <HomeIcon className="w-3 h-3" /> },
+  { id: 'notificaciones', label: 'Notificaciones', icon: <BellIcon className="w-3 h-3" />, badge: 3 },
+  { id: 'documentos', label: 'Documentos', icon: <DocumentIcon className="w-3 h-3" />, badge: 12 },
+];
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props de Tabs en tiempo real.
+ */
+export const Playground: Story = {
+  args: {
+    items: [
+      { id: 'tab1', label: 'Pestaña 1', icon: <CheckIcon className="w-3 h-3" />, badge: 3 },
+      { id: 'tab2', label: 'Pestaña 2' },
+      { id: 'tab3', label: 'Pestaña 3', badge: 5 },
+    ],
+    defaultActiveId: 'tab1',
+    fullWidth: false,
+    size: 'base',
+    showBorder: true,
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = useState(args.defaultActiveId || args.items[0]?.id);
+
+    useEffect(() => {
+      if (args.activeId) {
+        setActiveId(args.activeId);
+      }
+    }, [args.activeId]);
+
+    return (
+      <div className="w-[400px]">
+        <Tabs
+          {...args}
+          activeId={activeId}
+          onChange={(id) => {
+            setActiveId(id);
+            args.onChange?.(id);
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 2. TABS BÁSICOS
+// ============================================
+
+/**
+ * Tabs Básicos
+ *
+ * Implementación simple de tabs sin iconos ni badges.
+ */
+export const TabsBasicos: Story = {
+  args: {
+    items: basicItems,
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = useState('inicio');
+
+    return (
+      <div className="space-y-8 p-6">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabs Básicos
+          </h3>
+          <Tabs
+            {...args}
+            activeId={activeId}
+            onChange={setActiveId}
+          />
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>Tab activo:</strong> {activeId}
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 3. TABS CON ICONOS
+// ============================================
+
+/**
+ * Tabs con Íconos
+ *
+ * Tabs que incluyen iconos a la izquierda del texto para mejor identificación visual.
+ */
+export const TabsConIconos: Story = {
+  args: {
+    items: itemsWithIcons,
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = useState('inicio');
+
+    return (
+      <div className="space-y-8 p-6">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabs con Íconos
+          </h3>
+          <Tabs
+            {...args}
+            activeId={activeId}
+            onChange={setActiveId}
+          />
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Consejo:</strong> Los iconos ayudan a identificar rápidamente cada sección.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 4. TABS CON BADGES
+// ============================================
+
+/**
+ * Tabs con Badges
+ *
+ * Tabs que muestran badges de notificación con contadores.
+ */
+export const TabsConBadges: Story = {
+  args: {
+    items: itemsWithBadges,
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = useState('inicio');
+
+    return (
+      <div className="space-y-8 p-6">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabs con Badges de Notificación
+          </h3>
+          <Tabs
+            {...args}
+            activeId={activeId}
+            onChange={setActiveId}
+          />
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Consejo:</strong> Los badges muestran contadores de notificaciones o elementos pendientes.
+            <br />• Los números mayores a 99 se muestran como &quot;99+&quot;
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. ESTADOS DE TAB INDIVIDUAL
+// ============================================
+
+/**
+ * Estados de Tab Individual
+ *
+ * Muestra todos los estados posibles de un tab: Default, Hover, Focus, Active, Disabled.
+ */
+export const EstadosDeTab: Story = {
+  args: {
+    items: [],
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Estados del Tab
+        </h3>
+
+        {/* Estado Inactivo */}
+        <div className="mb-6">
+          <p className="text-xs text-gray-500 dark:text-gray-300 mb-2">Inactivo (Default)</p>
+          <div className="flex gap-4 border-b border-border-primary dark:border-dark-border-primary pb-1">
+            <Tab label="Tab Inactivo" active={false} />
+            <Tab label="Con Ícono" active={false} icon={<HomeIcon className="w-3 h-3" />} />
+            <Tab label="Con Badge" active={false} badge={3} icon={<CheckIcon className="w-3 h-3" />} />
+          </div>
+        </div>
+
+        {/* Estado Activo */}
+        <div className="mb-6">
+          <p className="text-xs text-gray-500 dark:text-gray-300 mb-2">Activo</p>
+          <div className="flex gap-4 border-b border-border-primary dark:border-dark-border-primary pb-1">
+            <Tab label="Tab Activo" active={true} />
+            <Tab label="Con Ícono" active={true} icon={<HomeIcon className="w-3 h-3" />} />
+            <Tab label="Con Badge" active={true} badge={3} icon={<CheckIcon className="w-3 h-3" />} />
+          </div>
+        </div>
+
+        {/* Estado Deshabilitado */}
+        <div className="mb-6">
+          <p className="text-xs text-gray-500 dark:text-gray-300 mb-2">Deshabilitado</p>
+          <div className="flex gap-4 border-b border-border-primary dark:border-dark-border-primary pb-1">
+            <Tab label="Deshabilitado" disabled={true} />
+            <Tab label="Con Ícono" disabled={true} icon={<HomeIcon className="w-3 h-3" />} />
+            <Tab label="Con Badge" disabled={true} badge={3} icon={<CheckIcon className="w-3 h-3" />} />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-gray-600 dark:text-gray-300">
+          <strong>💡 Interacción:</strong>
+          <br />• Pasa el mouse sobre los tabs para ver el efecto hover
+          <br />• Presiona Tab para navegar y ver el anillo de foco
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. TABS FULL WIDTH
+// ============================================
+
+/**
+ * Tabs Full Width
+ *
+ * Tabs que ocupan todo el ancho disponible del contenedor.
+ */
+export const TabsFullWidth: Story = {
+  args: {
+    items: itemsWithIcons,
+    fullWidth: true,
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = useState('inicio');
+
+    return (
+      <div className="space-y-8 p-6 w-[500px]">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabs Full Width
+          </h3>
+          <Tabs
+            {...args}
+            activeId={activeId}
+            onChange={setActiveId}
+          />
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Uso:</strong> Ideal cuando necesitas que los tabs ocupen todo el ancho de una sección o card.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 7. TABS SIN BORDE
+// ============================================
+
+/**
+ * Tabs sin Borde Inferior
+ *
+ * Tabs sin la línea separadora inferior.
+ */
+export const TabsSinBorde: Story = {
+  args: {
+    items: itemsWithIcons,
+    showBorder: false,
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = useState('inicio');
+
+    return (
+      <div className="space-y-8 p-6">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabs sin Borde Inferior
+          </h3>
+          <Tabs
+            {...args}
+            activeId={activeId}
+            onChange={setActiveId}
+          />
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Uso:</strong> Útil cuando los tabs están dentro de un contenedor con su propio borde.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 8. CASOS DE USO
+// ============================================
+
+/**
+ * Casos de Uso
+ *
+ * Ejemplos prácticos de cómo usar los tabs en situaciones reales.
+ */
+export const CasosDeUso: Story = {
+  args: {
+    items: [],
+  },
+  render: () => {
+    const [activeTab1, setActiveTab1] = useState('general');
+    const [activeTab2, setActiveTab2] = useState('resumen');
+    const [activeTab3, setActiveTab3] = useState('todo');
+
+    return (
+      <div className="space-y-12 p-6">
+        {/* Configuración de Usuario */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Panel de Configuración
+          </h3>
+          <div className="bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
+            <Tabs
+              items={[
+                { id: 'general', label: 'General', icon: <CogIcon className="w-3 h-3" /> },
+                { id: 'seguridad', label: 'Seguridad', icon: <UserIcon className="w-3 h-3" /> },
+                { id: 'notificaciones', label: 'Notificaciones', icon: <BellIcon className="w-3 h-3" />, badge: 2 },
+              ]}
+              activeId={activeTab1}
+              onChange={setActiveTab1}
+              className="px-4 pt-4"
+            />
+            <div className="p-4 border-t border-border-primary dark:border-dark-border-primary">
+              <p className="text-sm text-content-secondary dark:text-content-secondary">
+                Contenido de: <strong>{activeTab1}</strong>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Dashboard */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Dashboard de Datos
+          </h3>
+          <div className="bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
+            <Tabs
+              items={[
+                { id: 'resumen', label: 'Resumen', icon: <ChartIcon className="w-3 h-3" /> },
+                { id: 'ventas', label: 'Ventas', badge: 15 },
+                { id: 'clientes', label: 'Clientes' },
+                { id: 'reportes', label: 'Reportes', icon: <DocumentIcon className="w-3 h-3" /> },
+              ]}
+              activeId={activeTab2}
+              onChange={setActiveTab2}
+              fullWidth
+              className="px-4 pt-4"
+            />
+            <div className="p-4 border-t border-border-primary dark:border-dark-border-primary">
+              <p className="text-sm text-content-secondary dark:text-content-secondary">
+                Vista de: <strong>{activeTab2}</strong>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Lista de Tareas */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Lista de Tareas con Filtros
+          </h3>
+          <Tabs
+            items={[
+              { id: 'todo', label: 'Todas', badge: 24 },
+              { id: 'pendientes', label: 'Pendientes', badge: 8 },
+              { id: 'completadas', label: 'Completadas', icon: <CheckIcon className="w-3 h-3" /> },
+              { id: 'archivadas', label: 'Archivadas', disabled: true },
+            ]}
+            activeId={activeTab3}
+            onChange={setActiveTab3}
+          />
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Mejores Prácticas:</strong>
+            <br />• Usa iconos para mejorar el reconocimiento visual
+            <br />• Los badges indican elementos pendientes o nuevos
+            <br />• Deshabilita tabs que no están disponibles
+            <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">fullWidth</code> cuando los tabs están dentro de cards
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 9. TABS CON MUCHOS ELEMENTOS
+// ============================================
+
+/**
+ * Tabs con Muchos Elementos
+ *
+ * Ejemplo de cómo se ven los tabs cuando hay muchos elementos.
+ */
+export const TabsConMuchosElementos: Story = {
+  args: {
+    items: [
+      { id: 'inicio', label: 'Inicio', icon: <HomeIcon className="w-3 h-3" /> },
+      { id: 'perfil', label: 'Perfil', icon: <UserIcon className="w-3 h-3" /> },
+      { id: 'mensajes', label: 'Mensajes', badge: 5 },
+      { id: 'notificaciones', label: 'Notificaciones', icon: <BellIcon className="w-3 h-3" />, badge: 12 },
+      { id: 'documentos', label: 'Documentos', icon: <DocumentIcon className="w-3 h-3" /> },
+      { id: 'estadisticas', label: 'Estadísticas', icon: <ChartIcon className="w-3 h-3" /> },
+      { id: 'configuracion', label: 'Configuración', icon: <CogIcon className="w-3 h-3" /> },
+    ],
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = useState('inicio');
+
+    return (
+      <div className="space-y-8 p-6">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabs con Múltiples Elementos
+          </h3>
+          <div className="overflow-x-auto">
+            <Tabs
+              {...args}
+              activeId={activeId}
+              onChange={setActiveId}
+            />
+          </div>
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Nota:</strong> Cuando hay muchos tabs, considera usar scroll horizontal o un componente de navegación diferente.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};