siesa-ui-kit 1.0.3 → 1.0.4

package/src/components/NavigationRailTypes/NavigationRailTypes.stories.tsx

@@ -0,0 +1,682 @@
+import type { StoryObj } from '@storybook/react';
+import { NavigationRailTypes } from './NavigationRailTypes';
+import {
+  HomeIcon,
+  UsersIcon,
+  SettingsIcon,
+  ClockIcon,
+} from './icons';
+
+const meta = {
+  title: 'Navigation/NavigationRailTypes',
+  component: NavigationRailTypes,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Barra de navegación lateral que permite dos modos visuales: collapsed (solo iconos) y expanded (con labels). Soporta items con badges, colapsables y búsqueda integrada.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NavigationRailTypes>;
+
+/**
+ * Estado por defecto: NavigationRailTypes en modo collapsed
+ * Muestra solo iconos de navegación con botón de búsqueda
+ */
+export const Collapsed: Story = {
+  args: {
+    collapsed: true,
+    showRecentButton: true,
+    items: [
+      {
+        id: 'home',
+        label: 'Home',
+        icon: <HomeIcon className="size-4" />,
+        active: true,
+      },
+      {
+        id: 'users',
+        label: 'Users',
+        icon: <UsersIcon className="size-4" />,
+        badge: true,
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        icon: <SettingsIcon className="size-4" />,
+      },
+      {
+        id: 'analytics',
+        label: 'Analytics',
+        icon: <HomeIcon className="size-4" />,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - Collapsed Mode
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary">
+            Modo collapsed: Ancho 80px, solo iconos. Haz click en el botón de chevron para expandir.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Estado expandido: NavigationRailTypes en modo expanded
+ * Muestra labels y búsqueda integrada
+ */
+export const Expanded: Story = {
+  args: {
+    collapsed: false,
+    showRecentButton: true,
+    items: [
+      {
+        id: 'home',
+        label: 'Home',
+        icon: <HomeIcon className="size-4" />,
+        active: true,
+      },
+      {
+        id: 'users',
+        label: 'Users',
+        icon: <UsersIcon className="size-4" />,
+        badgeCount: 5,
+        badgeColor: 'red',
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        icon: <SettingsIcon className="size-4" />,
+      },
+      {
+        id: 'analytics',
+        label: 'Analytics',
+        icon: <HomeIcon className="size-4" />,
+        badge: true,
+      },
+      {
+        id: 'reports',
+        label: 'Reports',
+        icon: <UsersIcon className="size-4" />,
+      },
+      {
+        id: 'dashboard',
+        label: 'Dashboard',
+        icon: <SettingsIcon className="size-4" />,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - Expanded Mode
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary">
+            Modo expandido: Ancho 215px, con labels y búsqueda. Haz click en el botón "Colapsar" para contraer.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Items con badges de notificación
+ * Muestra el dot rojo de notificación en items
+ */
+export const WithBadges: Story = {
+  args: {
+    collapsed: true,
+    showRecentButton: true,
+    items: [
+      {
+        id: 'messages',
+        label: 'Messages',
+        icon: <HomeIcon className="size-4" />,
+        badge: true,
+      },
+      {
+        id: 'notifications',
+        label: 'Notifications',
+        icon: <UsersIcon className="size-4" />,
+        badgeCount: 12,
+        badgeColor: 'red',
+      },
+      {
+        id: 'alerts',
+        label: 'Alerts',
+        icon: <SettingsIcon className="size-4" />,
+        badgeCount: 99,
+        badgeColor: 'blue',
+      },
+      {
+        id: 'clean',
+        label: 'Clean',
+        icon: <ClockIcon className="size-4" />,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - With Badges
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary">
+            Items con badges de notificación: dot rojo para badge simple, número para contador (máximo 99+)
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Sin botón "Recientes"
+ * Muestra NavigationRailTypes sin el botón de recientes en footer
+ */
+export const WithoutRecentButton: Story = {
+  args: {
+    collapsed: true,
+    showRecentButton: false,
+    items: [
+      {
+        id: 'home',
+        label: 'Home',
+        icon: <HomeIcon className="size-4" />,
+      },
+      {
+        id: 'users',
+        label: 'Users',
+        icon: <UsersIcon className="size-4" />,
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        icon: <SettingsIcon className="size-4" />,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - Without Recent Button
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary">
+            Sin el botón "Recientes" en el footer
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Items deshabilitados
+ * Muestra items en estado disabled
+ */
+export const WithDisabledItems: Story = {
+  args: {
+    collapsed: true,
+    showRecentButton: true,
+    items: [
+      {
+        id: 'home',
+        label: 'Home',
+        icon: <HomeIcon className="size-4" />,
+        active: true,
+      },
+      {
+        id: 'users',
+        label: 'Users',
+        icon: <UsersIcon className="size-4" />,
+        disabled: true,
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        icon: <SettingsIcon className="size-4" />,
+      },
+      {
+        id: 'analytics',
+        label: 'Analytics (Disabled)',
+        icon: <HomeIcon className="size-4" />,
+        disabled: true,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - With Disabled Items
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary">
+            Items deshabilitados con opacidad 50% sin interacción
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Muchos items (scroll)
+ * Muestra NavigationRailTypes con muchos items para demostrar scroll
+ */
+export const ManyItems: Story = {
+  args: {
+    collapsed: false,
+    showRecentButton: true,
+    items: Array.from({ length: 16 }, (_, i) => ({
+      id: `item-${i}`,
+      label: `Item ${i + 1}`,
+      icon: i % 3 === 0 ? <HomeIcon className="size-4" /> : i % 3 === 1 ? <UsersIcon className="size-4" /> : <SettingsIcon className="size-4" />,
+      active: i === 0,
+    })),
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - Many Items (Scrollable)
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary">
+            Con muchos items, el rail es scrollable para mantener la altura consistente (900px)
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Con callbacks
+ * Muestra NavigationRailTypes con manejo de eventos
+ */
+export const WithCallbacks: Story = {
+  args: {
+    collapsed: true,
+    showRecentButton: true,
+    items: [
+      {
+        id: 'home',
+        label: 'Home',
+        icon: <HomeIcon className="size-4" />,
+      },
+      {
+        id: 'users',
+        label: 'Users',
+        icon: <UsersIcon className="size-4" />,
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        icon: <SettingsIcon className="size-4" />,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+    const [selectedItem, setSelectedItem] = React.useState<string | null>(null);
+
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={(newCollapsed) => {
+            setCollapsed(newCollapsed);
+            console.log('Collapsed changed to:', newCollapsed);
+          }}
+          onItemClick={(_, item) => {
+            setSelectedItem(item.id);
+            console.log('Item clicked:', item.id, item.label);
+          }}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - With Callbacks
+          </h1>
+          <div className="space-y-4">
+            <div className="p-4 bg-background-secondary dark:bg-background-secondary rounded-lg border border-border-primary dark:border-border-primary">
+              <p className="text-sm font-semibold text-content-primary dark:text-content-primary">
+                Estado:
+              </p>
+              <p className="text-content-secondary dark:text-content-secondary">
+                Collapsed: {collapsed ? 'Sí' : 'No'}
+              </p>
+              <p className="text-content-secondary dark:text-content-secondary">
+                Item seleccionado: {selectedItem || 'Ninguno'}
+              </p>
+            </div>
+            <p className="text-xs text-content-tertiary dark:text-content-tertiary">
+              Abre la consola (F12) para ver los logs de los eventos
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// Importar React para las historias
+import React from 'react';
+
+/**
+ * Ejemplo con muchos items para vista expandida
+ * Demuestra cómo se vería con una navegación completa
+ */
+export const ExpandedWithManyItems: Story = {
+  args: {
+    collapsed: false,
+    showRecentButton: true,
+    items: [
+      {
+        id: 'dashboard',
+        label: 'Dashboard',
+        icon: <HomeIcon className="size-4" />,
+        active: true,
+      },
+      {
+        id: 'users',
+        label: 'Usuarios',
+        icon: <UsersIcon className="size-4" />,
+        badgeCount: 3,
+        badgeColor: 'blue',
+      },
+      {
+        id: 'products',
+        label: 'Productos',
+        icon: <HomeIcon className="size-4" />,
+      },
+      {
+        id: 'orders',
+        label: 'Pedidos',
+        icon: <UsersIcon className="size-4" />,
+        badge: true,
+      },
+      {
+        id: 'analytics',
+        label: 'Analítica',
+        icon: <SettingsIcon className="size-4" />,
+      },
+      {
+        id: 'reports',
+        label: 'Reportes',
+        icon: <HomeIcon className="size-4" />,
+      },
+      {
+        id: 'settings',
+        label: 'Configuración',
+        icon: <SettingsIcon className="size-4" />,
+      },
+      {
+        id: 'team',
+        label: 'Equipo',
+        icon: <UsersIcon className="size-4" />,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - Expanded with Many Items
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary mb-6">
+            Vista expandida (215px) con múltiples items de navegación. Los items se scrollean manteniéndose dentro de los 900px de altura total.
+          </p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="p-4 bg-background-secondary dark:bg-background-secondary rounded-lg border border-border-primary dark:border-border-primary">
+              <h3 className="font-semibold text-content-primary dark:text-content-primary mb-2">
+                Características
+              </h3>
+              <ul className="space-y-2 text-sm text-content-secondary dark:text-content-secondary">
+                <li>✓ Items con etiquetas completas</li>
+                <li>✓ Búsqueda integrada en header</li>
+                <li>✓ Botón "Recientes" full-width</li>
+                <li>✓ Botón "Colapsar" con chevron</li>
+                <li>✓ Scroll para muchos items</li>
+                <li>✓ Badges de notificación</li>
+              </ul>
+            </div>
+
+            <div className="p-4 bg-background-secondary dark:bg-background-secondary rounded-lg border border-border-primary dark:border-border-primary">
+              <h3 className="font-semibold text-content-primary dark:text-content-primary mb-2">
+                Dimensiones
+              </h3>
+              <ul className="space-y-2 text-sm text-content-secondary dark:text-content-secondary font-mono">
+                <li>Ancho: <span className="text-content-primary dark:text-content-primary">215px</span></li>
+                <li>Alto: <span className="text-content-primary dark:text-content-primary">900px</span></li>
+                <li>Padding items: <span className="text-content-primary dark:text-content-primary">12px</span></li>
+                <li>Gap items: <span className="text-content-primary dark:text-content-primary">2px</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Items normales y colapsables mezclados
+ * Demuestra cómo se ven items simples y colapsables juntos
+ */
+export const MixedItemsExpanded: Story = {
+  args: {
+    collapsed: false,
+    showRecentButton: true,
+    items: [
+      {
+        id: 'dashboard',
+        label: 'Dashboard',
+        icon: <HomeIcon className="size-4" />,
+        active: true,
+      },
+      {
+        id: 'users',
+        label: 'Usuarios',
+        icon: <UsersIcon className="size-4" />,
+        badgeCount: 3,
+        badgeColor: 'blue',
+        children: [
+          {
+            label: 'Activos',
+            icon: <HomeIcon className="size-4" />,
+          },
+          {
+            label: 'Inactivos',
+            icon: <UsersIcon className="size-4" />,
+          },
+          {
+            label: 'Pendientes',
+            icon: <SettingsIcon className="size-4" />,
+          },
+        ],
+      },
+      {
+        id: 'products',
+        label: 'Productos',
+        icon: <HomeIcon className="size-4" />,
+      },
+      {
+        id: 'orders',
+        label: 'Pedidos',
+        icon: <UsersIcon className="size-4" />,
+        badge: true,
+        children: [
+          {
+            label: 'Pendientes',
+            icon: <ClockIcon className="size-4" />,
+          },
+          {
+            label: 'Completados',
+            icon: <HomeIcon className="size-4" />,
+          },
+          {
+            label: 'Cancelados',
+            icon: <UsersIcon className="size-4" />,
+          },
+        ],
+      },
+      {
+        id: 'analytics',
+        label: 'Analítica',
+        icon: <SettingsIcon className="size-4" />,
+      },
+      {
+        id: 'reports',
+        label: 'Reportes',
+        icon: <HomeIcon className="size-4" />,
+        children: [
+          {
+            label: 'Ventas',
+            icon: <HomeIcon className="size-4" />,
+          },
+          {
+            label: 'Inventario',
+            icon: <UsersIcon className="size-4" />,
+          },
+          {
+            label: 'Clientes',
+            icon: <SettingsIcon className="size-4" />,
+          },
+        ],
+      },
+      {
+        id: 'settings',
+        label: 'Configuración',
+        icon: <SettingsIcon className="size-4" />,
+      },
+    ],
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(args.collapsed);
+
+    return (
+      <div className="flex h-screen bg-background-primary dark:bg-background-primary">
+        <NavigationRailTypes
+          {...args}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+        />
+        <div className="flex-1 p-6 overflow-auto">
+          <h1 className="text-2xl font-bold text-content-primary dark:text-content-primary mb-4">
+            NavigationRailTypes - Mixed Items
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary mb-6">
+            Vista expandida con items normales y items colapsables. Los items colapsables pueden expandirse para mostrar subitems.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="p-4 bg-background-secondary dark:bg-background-secondary rounded-lg border border-border-primary dark:border-border-primary">
+              <h3 className="font-semibold text-content-primary dark:text-content-primary mb-2">
+                Items Normales
+              </h3>
+              <ul className="space-y-2 text-sm text-content-secondary dark:text-content-secondary">
+                <li>✓ Dashboard (activo)</li>
+                <li>✓ Productos</li>
+                <li>✓ Analítica</li>
+                <li>✓ Configuración</li>
+              </ul>
+            </div>
+
+            <div className="p-4 bg-background-secondary dark:bg-background-secondary rounded-lg border border-border-primary dark:border-border-primary">
+              <h3 className="font-semibold text-content-primary dark:text-content-primary mb-2">
+                Items Colapsables
+              </h3>
+              <ul className="space-y-2 text-sm text-content-secondary dark:text-content-secondary">
+                <li>✓ Usuarios (con 3 subitems)</li>
+                <li>✓ Pedidos (con 3 subitems)</li>
+                <li>✓ Reportes (con 3 subitems)</li>
+              </ul>
+            </div>
+
+            <div className="p-4 bg-background-secondary dark:bg-background-secondary rounded-lg border border-border-primary dark:border-border-primary md:col-span-2">
+              <h3 className="font-semibold text-content-primary dark:text-content-primary mb-2">
+                Características
+              </h3>
+              <ul className="space-y-2 text-sm text-content-secondary dark:text-content-secondary">
+                <li>✓ Items normales sin interacción de expansión</li>
+                <li>✓ Items colapsables con chevron que se expande</li>
+                <li>✓ Subitems indentados cuando se expanden</li>
+                <li>✓ Badges en items (simple y contador)</li>
+                <li>✓ Estado activo visible</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+