siesa-ui-kit 1.0.4 → 1.0.6

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,552 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Dropdown } from './Dropdown';
-import { UserIcon, CogIcon, BellIcon, CreditCardIcon } from './icons';
-
-/**
- * Dropdown - Componente de menú desplegable del sistema de diseño Siesa
- *
- * Componente dropdown completo con menú desplegable, items, headings y dividers.
- * Implementado con React, TypeScript y Tailwind CSS siguiendo pixel-perfect las
- * especificaciones de Figma.
- *
- * **Características:**
- * - Múltiples tipos de items (con iconos, descripciones, shortcuts)
- * - Headings y dividers para organizar el menú
- * - Estados: Default, Hover, Focus, Disabled
- * - Cierre automático al hacer click fuera
- * - Soporte para teclado (Escape para cerrar)
- * - Dark mode completo
- */
-const meta = {
-  title: 'Siesa UI Kit/Dropdown',
-  component: Dropdown,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Menú desplegable con soporte para items, headings, dividers y múltiples estados. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'icon-only'],
-      description: 'Variante visual del dropdown',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'default' },
-        category: 'Apariencia',
-      },
-    },
-    children: {
-      control: 'text',
-      description: 'Texto del botón trigger',
-      table: {
-        type: { summary: 'ReactNode' },
-        category: 'Contenido',
-      },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder cuando no hay children',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Options' },
-        category: 'Contenido',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el dropdown',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    items: {
-      description: 'Array de items del menú',
-      table: {
-        type: { summary: 'DropdownItemProps[]' },
-        category: 'Contenido',
-      },
-    },
-  },
-} satisfies Meta<typeof Dropdown>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    variant: 'default',
-    placeholder: 'Opciones',
-    items: [
-      { children: 'Cuenta', icon: <UserIcon /> },
-      { children: 'Notificaciones', icon: <BellIcon /> },
-      { children: 'Facturación', icon: <CreditCardIcon /> },
-      { isDivider: true },
-      { isHeading: true, children: 'Mis eventos' },
-      { children: 'Próximos eventos' },
-      { children: 'Eventos pasados' },
-    ],
-  },
-};
-
-// ============================================
-// 2. VARIANTES
-// ============================================
-export const Variantes: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Default Variant */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Por Defecto (con texto)
-        </h3>
-        <Dropdown
-          variant="default"
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Botón con texto + ícono de chevron
-        </p>
-      </div>
-
-      {/* Icon Only Variant */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Solo Ícono
-        </h3>
-        <Dropdown
-          variant="icon-only"
-          items={[
-            { children: 'Cuenta', icon: <UserIcon /> },
-            { children: 'Configuración', icon: <CogIcon /> },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Solo ícono de chevron (36x36px) - ideal para espacios reducidos
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. TIPOS DE MENÚ
-// ============================================
-export const TodosLosTiposDeMenu: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Basic */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Básico
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Notificaciones' },
-            { children: 'Facturación' },
-            { isDivider: true },
-            { isHeading: true, children: 'Mis eventos' },
-            { children: 'Próximos eventos' },
-            { children: 'Eventos pasados' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Menú básico con items, dividers y headings
-        </p>
-      </div>
-
-      {/* With Icons */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Iconos
-        </h3>
-        <Dropdown
-          placeholder="Acciones"
-          items={[
-            { children: 'Cuenta', icon: <UserIcon /> },
-            { children: 'Configuración', icon: <CogIcon /> },
-            { children: 'Notificaciones', icon: <BellIcon /> },
-            { isDivider: true },
-            { children: 'Facturación', icon: <CreditCardIcon /> },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Items con iconos a la izquierda
-        </p>
-      </div>
-
-      {/* With Shortcuts */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Atajos de Teclado
-        </h3>
-        <Dropdown
-          placeholder="Editar"
-          items={[
-            { children: 'Deshacer', shortcut: '⌘ Z' },
-            { children: 'Rehacer', shortcut: '⌘ ⇧ Z' },
-            { isDivider: true },
-            { children: 'Cortar', shortcut: '⌘ X' },
-            { children: 'Copiar', shortcut: '⌘ C' },
-            { children: 'Pegar', shortcut: '⌘ V' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Items con shortcuts de teclado
-        </p>
-      </div>
-
-      {/* With Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Descripción
-        </h3>
-        <Dropdown
-          placeholder="Configuración"
-          items={[
-            {
-              children: 'Perfil',
-              icon: <UserIcon />,
-              description: 'Administra tu perfil público',
-            },
-            {
-              children: 'Configuración',
-              icon: <CogIcon />,
-              description: 'Configura las preferencias de la app',
-            },
-            {
-              children: 'Facturación',
-              icon: <CreditCardIcon />,
-              description: 'Métodos de pago y facturas',
-            },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Items con descripciones secundarias
-        </p>
-      </div>
-
-      {/* With Menu Header */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Encabezados de Menú
-        </h3>
-        <Dropdown
-          placeholder="Cuenta"
-          items={[
-            { isHeading: true, children: 'Cuenta' },
-            { children: 'Perfil', icon: <UserIcon /> },
-            { children: 'Configuración', icon: <CogIcon /> },
-            { isDivider: true },
-            { isHeading: true, children: 'Preferencias' },
-            { children: 'Notificaciones', icon: <BellIcon /> },
-            { children: 'Facturación', icon: <CreditCardIcon /> },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Menú con múltiples secciones y headers
-        </p>
-      </div>
-
-      {/* Tips */}
-      <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>💡 Consejos:</strong>
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">isDivider: true</code> para
-          separadores
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">isHeading: true</code> para
-          encabezados
-          <br />• Agrega <code className="px-1 bg-white dark:bg-gray-700">description</code> para
-          texto secundario
-          <br />• Agrega <code className="px-1 bg-white dark:bg-gray-700">shortcut</code> para
-          atajos de teclado
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADOS
-// ============================================
-export const Estados: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Default */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Por Defecto
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Estado normal del dropdown
-        </p>
-      </div>
-
-      {/* Hover */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Hover
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Pasa el mouse sobre el botón para ver el efecto hover
-        </p>
-      </div>
-
-      {/* Focus */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Focus
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Haz click en el botón para ver el focus ring
-        </p>
-      </div>
-
-      {/* Disabled */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Deshabilitado
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          disabled
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Dropdown deshabilitado (no interactivo)
-        </p>
-      </div>
-
-      {/* Item Disabled */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Item Deshabilitado
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración', disabled: true },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Item individual deshabilitado
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. EJEMPLOS DE USO
-// ============================================
-export const EjemplosDeUso: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* User Menu */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Menú de Usuario
-        </h3>
-        <Dropdown
-          placeholder="Juan Pérez"
-          items={[
-            { children: 'Perfil', icon: <UserIcon />, description: 'Ver tu perfil' },
-            {
-              children: 'Configuración',
-              icon: <CogIcon />,
-              description: 'Administra tu cuenta',
-              shortcut: '⌘ ,',
-            },
-            { isDivider: true },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-      </div>
-
-      {/* Edit Menu */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Menú de Edición
-        </h3>
-        <Dropdown
-          placeholder="Editar"
-          items={[
-            { children: 'Deshacer', shortcut: '⌘ Z' },
-            { children: 'Rehacer', shortcut: '⌘ ⇧ Z' },
-            { isDivider: true },
-            { children: 'Cortar', shortcut: '⌘ X' },
-            { children: 'Copiar', shortcut: '⌘ C' },
-            { children: 'Pegar', shortcut: '⌘ V' },
-            { isDivider: true },
-            { children: 'Seleccionar todo', shortcut: '⌘ A' },
-          ]}
-        />
-      </div>
-
-      {/* View Menu */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Menú de Vista
-        </h3>
-        <Dropdown
-          placeholder="Vista"
-          items={[
-            { isHeading: true, children: 'Diseño' },
-            { children: 'Mostrar barra lateral', shortcut: '⌘ B' },
-            { children: 'Mostrar barra de herramientas', shortcut: '⌘ T' },
-            { isDivider: true },
-            { isHeading: true, children: 'Apariencia' },
-            { children: 'Modo claro' },
-            { children: 'Modo oscuro' },
-            { children: 'Automático' },
-          ]}
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. CONTROLLED VS UNCONTROLLED
-// ============================================
-export const Controlado: Story = {
-  args: {
-    items: [],
-  },
-  render: () => {
-    const [open, setOpen] = React.useState(false);
-
-    return (
-      <div className="space-y-4 p-6">
-        <h3 className="text-sm font-bold text-gray-700 dark:text-white">
-          Dropdown Controlado
-        </h3>
-        <div className="flex items-center gap-4">
-          <Dropdown
-            placeholder="Controlado"
-            open={open}
-            onOpenChange={setOpen}
-            items={[
-              { children: 'Cuenta' },
-              { children: 'Configuración' },
-              { children: 'Cerrar sesión' },
-            ]}
-          />
-          <button
-            onClick={() => setOpen(!open)}
-            className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-white rounded-md text-sm font-bold"
-          >
-            Alternar Dropdown
-          </button>
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300">
-          Estado: {open ? 'Abierto' : 'Cerrado'}
-        </p>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 7. WITH CALLBACKS
-// ============================================
-export const ConCallbacks: Story = {
-  args: {
-    items: [],
-  },
-  render: () => {
-    const [lastAction, setLastAction] = React.useState('Ninguna');
-
-    return (
-      <div className="space-y-4 p-6">
-        <h3 className="text-sm font-bold text-gray-700 dark:text-white">
-          Con Callbacks
-        </h3>
-        <Dropdown
-          placeholder="Acciones"
-          onOpenChange={(open) => setLastAction(open ? 'Abierto' : 'Cerrado')}
-          items={[
-            {
-              children: 'Editar',
-              onClick: () => setLastAction('Editar clickeado'),
-            },
-            {
-              children: 'Duplicar',
-              onClick: () => setLastAction('Duplicar clickeado'),
-            },
-            {
-              children: 'Eliminar',
-              onClick: () => setLastAction('Eliminar clickeado'),
-            },
-          ]}
-        />
-        <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
-          <p className="text-sm text-gray-700 dark:text-white">
-            Última acción: <strong>{lastAction}</strong>
-          </p>
-        </div>
-      </div>
-    );
-  },
-};