siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/NavigationRailCommercial/NavigationRailCommercial.stories.tsx

@@ -0,0 +1,464 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { NavigationRailCommercial } from './NavigationRailCommercial';
+import type { NavigationRailCommercialProps } from './NavigationRailCommercial.types';
+import {
+  Cog6ToothIcon,
+  ShoppingCartIcon,
+  CubeIcon,
+  DocumentIcon,
+} from './icons';
+
+// Wrapper con estado para las stories interactivas
+const NavigationRailCommercialWithState = (args: NavigationRailCommercialProps) => {
+  const [state, setState] = useState(args.state || 'collapsed');
+
+  return (
+    <NavigationRailCommercial
+      {...args}
+      state={state}
+      onStateChange={(newState) => {
+        setState(newState);
+        args.onStateChange?.(newState);
+      }}
+    />
+  );
+};
+
+const meta = {
+  title: 'Siesa UI Kit/NavigationRailCommercial',
+  component: NavigationRailCommercial,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Componente de navegación lateral especializado para aplicaciones comerciales que combina NavigationRailTypes y NavigationRailPanel. Soporta cuatro estados: collapsed, expanded, hover y searcher.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['collapsed', 'expanded', 'hover', 'searcher'],
+      description: 'Estado visual del componente',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+        defaultValue: { summary: 'collapsed' },
+      },
+    },
+    items: {
+      control: 'object',
+      description: 'Items de menú a mostrar',
+      table: {
+        type: { summary: 'NavigationRailCommercialMenuItem[]' },
+        category: 'Contenido',
+      },
+    },
+    showSearchButton: {
+      control: 'boolean',
+      description: 'Si mostrar el botón de búsqueda en modo collapsed',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Apariencia',
+        defaultValue: { summary: 'true' },
+      },
+    },
+    onStateChange: {
+      action: 'stateChanged',
+      description: 'Callback cuando cambia el estado',
+      table: {
+        category: 'Eventos',
+      },
+    },
+    onItemClick: {
+      action: 'itemClicked',
+      description: 'Callback cuando se hace click en un item',
+      table: {
+        category: 'Eventos',
+      },
+    },
+    onItemHover: {
+      action: 'itemHovered',
+      description: 'Callback cuando se hace hover en un item',
+      table: {
+        category: 'Eventos',
+      },
+    },
+  },
+} satisfies Meta<typeof NavigationRailCommercial>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// DATOS DE EJEMPLO
+// ============================================
+const exampleItems = [
+  {
+    id: 'admin',
+    label: 'Administración',
+    icon: <Cog6ToothIcon className="size-4" />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'users',
+        label: 'Usuarios',
+        icon: <Cog6ToothIcon className="size-4" />,
+        onClick: () => console.log('Usuarios clicked'),
+      },
+      {
+        id: 'roles',
+        label: 'Roles y Permisos',
+        icon: <Cog6ToothIcon className="size-4" />,
+        onClick: () => console.log('Roles clicked'),
+      },
+      {
+        id: 'config',
+        label: 'Configuración',
+        icon: <Cog6ToothIcon className="size-4" />,
+        onClick: () => console.log('Config clicked'),
+      },
+    ],
+  },
+  {
+    id: 'sales',
+    label: 'Ventas',
+    icon: <ShoppingCartIcon className="size-4" />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'orders',
+        label: 'Pedidos',
+        icon: <ShoppingCartIcon className="size-4" />,
+      },
+      {
+        id: 'invoices',
+        label: 'Facturas',
+        icon: <ShoppingCartIcon className="size-4" />,
+      },
+    ],
+  },
+  {
+    id: 'inventory',
+    label: 'Inventario',
+    icon: <CubeIcon className="size-4" />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'products',
+        label: 'Productos',
+        icon: <CubeIcon className="size-4" />,
+      },
+      {
+        id: 'categories',
+        label: 'Categorías',
+        icon: <CubeIcon className="size-4" />,
+      },
+    ],
+  },
+  {
+    id: 'purchases',
+    label: 'Compras',
+    icon: <DocumentIcon className="size-4" />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'orders-purchase',
+        label: 'Órdenes de Compra',
+        icon: <DocumentIcon className="size-4" />,
+      },
+      {
+        id: 'suppliers',
+        label: 'Proveedores',
+        icon: <DocumentIcon className="size-4" />,
+      },
+    ],
+  },
+];
+
+// ============================================
+// 1. INTERACTIVE PLAYGROUND
+// ============================================
+export const Playground: Story = {
+  args: {
+    state: 'collapsed',
+    items: exampleItems,
+    showSearchButton: true,
+  },
+  render: (args) => <NavigationRailCommercialWithState {...args} />,
+};
+
+// ============================================
+// 2. ESTADOS DEL COMPONENTE
+// ============================================
+export const EstadoColapsado: Story = {
+  args: {
+    state: 'collapsed',
+    items: exampleItems,
+  },
+  render: (args) => (
+    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
+      <NavigationRailCommercialWithState {...args} />
+      <div className="flex-1 p-8">
+        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estado Colapsado
+        </h3>
+        <p className="text-sm text-content-secondary dark:text-content-secondary">
+          Barra de navegación compacta de 80px con solo iconos.
+          <br />
+          Pasa el mouse sobre un icono para ver el panel lateral con el submenú.
+          <br />
+          <strong>Prueba el botón de expandir</strong> en el footer.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const EstadoExpandido: Story = {
+  args: {
+    state: 'expanded',
+    items: exampleItems,
+  },
+  render: (args) => (
+    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
+      <NavigationRailCommercialWithState {...args} />
+      <div className="flex-1 p-8">
+        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estado Expandido
+        </h3>
+        <p className="text-sm text-content-secondary dark:text-content-secondary">
+          Barra de navegación de 215px con labels visibles.
+          <br />
+          Los items colapsables se muestran con chevron down y se pueden expandir.
+          <br />
+          <strong>Prueba el botón "Colapsar"</strong> en el footer.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const EstadoHover: Story = {
+  args: {
+    state: 'hover',
+    items: exampleItems,
+  },
+  render: (args) => (
+    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
+      <div className="relative">
+        <NavigationRailCommercial {...args} />
+        <div className="absolute left-[80px] top-0 w-[248px] h-full bg-bg-primary dark:bg-dark-bg-primary border-l border-border-primary dark:border-dark-border-primary p-3 shadow-lg">
+          <div className="mb-3">
+            <h4 className="text-sm font-bold text-content-primary dark:text-dark-content-primary px-4 py-2">
+              Administración
+            </h4>
+          </div>
+          <div className="border-t border-border-primary dark:border-dark-border-primary mb-3" />
+          <div className="space-y-1">
+            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
+              Usuarios
+            </button>
+            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
+              Roles y Permisos
+            </button>
+            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
+              Configuración
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 p-8">
+        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estado Hover
+        </h3>
+        <p className="text-sm text-content-secondary dark:text-content-secondary">
+          Panel lateral se muestra al hacer hover sobre un item con submenú.
+          <br />
+          El panel desaparece cuando el mouse sale de la zona del rail + panel.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const EstadoBusqueda: Story = {
+  args: {
+    state: 'searcher',
+    items: exampleItems,
+  },
+  render: (args) => (
+    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
+      <div className="relative">
+        <NavigationRailCommercial {...args} />
+        <div className="absolute left-[80px] top-0 w-[248px] h-full bg-bg-primary dark:bg-dark-bg-primary border-l border-border-primary dark:border-dark-border-primary shadow-lg">
+          <div className="p-3">
+            <input
+              type="text"
+              placeholder="Buscar módulo"
+              className="w-full px-3 py-2 text-sm border border-border-primary dark:border-dark-border-primary rounded-lg bg-white dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary placeholder-content-tertiary dark:placeholder-content-tertiary"
+            />
+          </div>
+          <div className="border-t border-border-primary dark:border-dark-border-primary mb-3" />
+          <div className="px-3 space-y-3">
+            <div>
+              <p className="text-xs text-content-tertiary dark:text-content-tertiary mb-2">
+                Recientes
+              </p>
+              <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
+                Configuración
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-content-tertiary dark:text-content-tertiary mb-2">
+                Opciones frecuentes
+              </p>
+              <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
+                Item
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 p-8">
+        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estado Búsqueda
+        </h3>
+        <p className="text-sm text-content-secondary dark:text-content-secondary">
+          Panel lateral se muestra al hacer click en el botón de búsqueda (modo collapsed).
+          <br />
+          Incluye input de búsqueda, sección de recientes y opciones frecuentes.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. VARIANTES CON ITEMS ACTIVOS
+// ============================================
+export const ConItemActivo: Story = {
+  args: {
+    state: 'collapsed',
+    items: exampleItems.map((item, index) => ({
+      ...item,
+      active: index === 0,
+    })),
+  },
+  render: (args) => (
+    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
+      <NavigationRailCommercialWithState {...args} />
+      <div className="flex-1 p-8">
+        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Con Item Activo
+        </h3>
+        <p className="text-sm text-content-secondary dark:text-content-secondary">
+          El primer item (Administración) está marcado como activo.
+          <br />
+          Los items activos tienen un fondo de color custom-primary.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const ConBadges: Story = {
+  args: {
+    state: 'collapsed',
+    items: exampleItems.map((item, index) => ({
+      ...item,
+      badge: index === 1 || index === 3,
+      badgeCount: index === 1 ? 5 : index === 3 ? 12 : undefined,
+    })),
+  },
+  render: (args) => (
+    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
+      <NavigationRailCommercialWithState {...args} />
+      <div className="flex-1 p-8">
+        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Con Badges de Notificación
+        </h3>
+        <p className="text-sm text-content-secondary dark:text-content-secondary">
+          Algunos items tienen badges de notificación con contador.
+          <br />
+          Ventas (5) y Compras (12) tienen notificaciones pendientes.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CASOS DE USO REALES
+// ============================================
+export const AplicacionCompleta: Story = {
+  args: {
+    state: 'collapsed',
+    items: exampleItems,
+  },
+  render: (args) => (
+    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
+      <NavigationRailCommercialWithState {...args} />
+      <div className="flex-1 p-8">
+        <div className="max-w-4xl">
+          <h1 className="text-3xl font-bold mb-2 text-content-primary dark:text-dark-content-primary">
+            Panel de Control
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary mb-8">
+            Bienvenido al sistema comercial de Siesa
+          </p>
+
+          <div className="grid grid-cols-3 gap-6 mb-8">
+            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
+              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
+                Ventas del Mes
+              </h3>
+              <p className="text-3xl font-bold text-primary-custom-600">$125,430</p>
+            </div>
+            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
+              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
+                Pedidos Activos
+              </h3>
+              <p className="text-3xl font-bold text-primary-custom-600">48</p>
+            </div>
+            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
+              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
+                Productos en Stock
+              </h3>
+              <p className="text-3xl font-bold text-primary-custom-600">1,234</p>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
+            <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+              Actividad Reciente
+            </h3>
+            <div className="space-y-3">
+              {[1, 2, 3, 4].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between py-3 border-b border-border-primary dark:border-dark-border-primary last:border-0"
+                >
+                  <div>
+                    <p className="font-medium text-content-primary dark:text-dark-content-primary">
+                      Nueva orden #{1000 + i}
+                    </p>
+                    <p className="text-sm text-content-secondary dark:text-content-secondary">
+                      Cliente: Usuario {i}
+                    </p>
+                  </div>
+                  <span className="text-sm text-content-secondary dark:text-content-secondary">
+                    Hace {i} hora{i > 1 ? 's' : ''}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};