siesa-ui-kit 1.0.3 → 1.0.5

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

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