siesa-ui-kit 1.0.4 → 1.0.5

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

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