siesa-ui-kit 1.0.2 → 1.0.3

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

@@ -1,580 +0,0 @@
-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>
-    );
-  },
-};