siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/NavigationRailPanel/NavigationRailPanel.stories.tsx

@@ -1,462 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NavigationRailPanel } from './NavigationRailPanel';
-
-const meta: Meta<typeof NavigationRailPanel> = {
-  title: 'Components/NavigationRailPanel',
-  component: NavigationRailPanel,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Panel de navegación vertical (rail) que puede contener múltiples secciones de items, búsqueda y encabezados.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof NavigationRailPanel>;
-
-/**
- * Ejemplo completo con todas las características:
- * - Encabezado (DropdownItemHeading)
- * - Input de búsqueda
- * - Múltiples secciones con items colapsables y simples
- */
-export const Default: Story = {
-  args: {
-    height: 900,
-    width: 248,
-    showHeading: true,
-    heading: {
-      label: 'Settings',
-      description: 'Configure your preferences',
-      iconName: 'cog-6-tooth',
-      actionLabel: 'Clear',
-      showAction: true,
-      onActionClick: () => console.log('Clear action clicked'),
-    },
-    showSearch: true,
-    search: {
-      placeholder: 'Buscar módulo',
-      onChange: (value) => console.log('Search value:', value),
-    },
-    sections: [
-      {
-        heading: 'Section 1',
-        showDivider: true,
-        items: [
-          {
-            label: 'Collapsible Item 1',
-            isCollapsible: true,
-            children: [
-              { label: 'Sub Item 1' },
-              { label: 'Sub Item 2' },
-              { label: 'Sub Item 3' },
-            ],
-          },
-          {
-            label: 'Simple Item 1',
-            isCollapsible: false,
-          },
-          {
-            label: 'Simple Item 2',
-            isCollapsible: false,
-          },
-        ],
-      },
-      {
-        heading: 'Section 2',
-        showDivider: true,
-        items: [
-          {
-            label: 'Collapsible Item 2',
-            isCollapsible: true,
-            children: [
-              { label: 'Sub Item A' },
-              { label: 'Sub Item B' },
-            ],
-          },
-          {
-            label: 'Simple Item 3',
-            isCollapsible: false,
-          },
-        ],
-      },
-      {
-        heading: 'Section 3',
-        showDivider: false,
-        items: [
-          {
-            label: 'Simple Item 4',
-            isCollapsible: false,
-          },
-          {
-            label: 'Simple Item 5',
-            isCollapsible: false,
-          },
-          {
-            label: 'Simple Item 6',
-            isCollapsible: false,
-          },
-        ],
-      },
-    ],
-  },
-  render: (args) => (
-    <div className="flex h-screen w-screen bg-gray-100">
-      <NavigationRailPanel {...args} />
-      <div className="flex-1 p-8 bg-white">
-        <h1 className="text-3xl font-bold mb-4">Main Content</h1>
-        <p className="text-gray-600">
-          Click on items in the NavigationRailPanel to see the interaction.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-/**
- * Ejemplo simplificado sin encabezado ni búsqueda
- */
-export const Minimal: Story = {
-  args: {
-    height: 600,
-    width: 248,
-    showHeading: false,
-    showSearch: false,
-    items: [
-      {
-        label: 'Dashboard',
-        isCollapsible: false,
-      },
-      {
-        label: 'Users',
-        isCollapsible: false,
-      },
-      {
-        label: 'Settings',
-        isCollapsible: false,
-      },
-      {
-        label: 'Help',
-        isCollapsible: false,
-      },
-    ],
-  },
-};
-
-/**
- * Ejemplo con solo items colapsables
- */
-export const OnlyCollapsible: Story = {
-  args: {
-    height: 700,
-    width: 248,
-    showHeading: true,
-    heading: {
-      label: 'Menu',
-      description: 'Select a category',
-      iconName: 'bars-3',
-    },
-    showSearch: true,
-    items: [
-      {
-        label: 'Category 1',
-        isCollapsible: true,
-        children: [
-          { label: 'Option 1' },
-          { label: 'Option 2' },
-          { label: 'Option 3' },
-        ],
-      },
-      {
-        label: 'Category 2',
-        isCollapsible: true,
-        children: [
-          { label: 'Option A' },
-          { label: 'Option B' },
-        ],
-      },
-      {
-        label: 'Category 3',
-        isCollapsible: true,
-        children: [
-          { label: 'Opción X' },
-          { label: 'Opción Y' },
-          { label: 'Opción Z' },
-        ],
-      },
-    ],
-  },
-};
-
-/**
- * Ejemplo con items deshabilitados
- */
-export const WithDisabledItems: Story = {
-  args: {
-    height: 600,
-    width: 248,
-    showHeading: false,
-    showSearch: true,
-    items: [
-      {
-        label: 'Active Item 1',
-        isCollapsible: false,
-      },
-      {
-        label: 'Disabled Item',
-        isCollapsible: false,
-        disabled: true,
-      },
-      {
-        label: 'Active Item 2',
-        isCollapsible: true,
-        children: [
-          { label: 'Sub Item 1' },
-          { label: 'Sub Item 2 (disabled)', disabled: true },
-          { label: 'Sub Item 3' },
-        ],
-      },
-      {
-        label: 'Disabled Collapsible',
-        isCollapsible: true,
-        disabled: true,
-        children: [
-          { label: 'Sub Item A' },
-          { label: 'Sub Item B' },
-        ],
-      },
-    ],
-  },
-};
-
-/**
- * Ejemplo con mucho contenido para probar scroll
- */
-export const WithScroll: Story = {
-  args: {
-    height: 600,
-    width: 248,
-    showHeading: true,
-    heading: {
-      label: 'Large Menu',
-      description: 'Scroll to see more items',
-      iconName: 'list-bullet',
-    },
-    showSearch: true,
-    sections: [
-      {
-        heading: 'Group 1',
-        items: Array.from({ length: 5 }, (_, i) => ({
-          label: `Item ${i + 1}`,
-          isCollapsible: false,
-        })),
-      },
-      {
-        heading: 'Group 2',
-        items: Array.from({ length: 5 }, (_, i) => ({
-          label: `Item ${i + 6}`,
-          isCollapsible: true,
-          children: [
-            { label: 'Sub 1' },
-            { label: 'Sub 2' },
-          ],
-        })),
-      },
-      {
-        heading: 'Group 3',
-        items: Array.from({ length: 5 }, (_, i) => ({
-          label: `Item ${i + 11}`,
-          isCollapsible: false,
-        })),
-      },
-      {
-        heading: 'Group 4',
-        items: Array.from({ length: 5 }, (_, i) => ({
-          label: `Item ${i + 16}`,
-          isCollapsible: false,
-        })),
-      },
-    ],
-  },
-};
-
-/**
- * Ejemplo con diferentes alturas
- */
-export const SmallHeight: Story = {
-  args: {
-    height: 400,
-    width: 248,
-    showHeading: false,
-    showSearch: true,
-    items: [
-      {
-        label: 'Item 1',
-        isCollapsible: false,
-      },
-      {
-        label: 'Item 2',
-        isCollapsible: false,
-      },
-      {
-        label: 'Item 3',
-        isCollapsible: false,
-      },
-    ],
-  },
-};
-
-/**
- * Ejemplo con callbacks de interacción
- */
-export const WithCallbacks: Story = {
-  args: {
-    height: 700,
-    width: 248,
-    showHeading: true,
-    heading: {
-      label: 'Interactive Panel',
-      description: 'Check console for events',
-      iconName: 'cursor-arrow-rays',
-      actionLabel: 'Reset',
-      showAction: true,
-      onActionClick: () => console.log('Reset clicked'),
-    },
-    showSearch: true,
-    search: {
-      placeholder: 'Search...',
-      onChange: (value) => console.log('Search:', value),
-    },
-    items: [
-      {
-        label: 'Item with Click',
-        isCollapsible: false,
-        onClick: () => console.log('Item 1 clicked'),
-      },
-      {
-        label: 'Collapsible with Change',
-        isCollapsible: true,
-        children: [
-          {
-            label: 'Sub Item',
-            onClick: (e) => {
-              e.stopPropagation();
-              console.log('Sub Item clicked');
-            },
-          },
-        ],
-        onOpenChange: (open) => console.log('Collapsible toggled:', open),
-      },
-      {
-        label: 'Another Item',
-        isCollapsible: false,
-        onClick: () => console.log('Item 3 clicked'),
-      },
-    ],
-  },
-};
-
-/**
- * Ejemplo con panel sin heading ni búsqueda, solo items
- */
-export const CleanLayout: Story = {
-  args: {
-    height: 800,
-    width: 248,
-    showHeading: false,
-    showSearch: false,
-    sections: [
-      {
-        heading: 'NAVIGATION',
-        items: [
-          {
-            label: 'Dashboard',
-            isCollapsible: false,
-          },
-          {
-            label: 'Analytics',
-            isCollapsible: false,
-          },
-        ],
-      },
-      {
-        heading: 'MANAGEMENT',
-        items: [
-          {
-            label: 'Users',
-            isCollapsible: true,
-            children: [
-              { label: 'Active Users' },
-              { label: 'Inactive Users' },
-              { label: 'Pending Users' },
-            ],
-          },
-          {
-            label: 'Roles',
-            isCollapsible: true,
-            children: [
-              { label: 'Admin' },
-              { label: 'User' },
-              { label: 'Guest' },
-            ],
-          },
-        ],
-      },
-      {
-        heading: 'SETTINGS',
-        items: [
-          {
-            label: 'Preferences',
-            isCollapsible: false,
-          },
-          {
-            label: 'Integrations',
-            isCollapsible: false,
-          },
-          {
-            label: 'Advanced',
-            isCollapsible: false,
-          },
-        ],
-      },
-    ],
-  },
-};
-
-/**
- * Ejemplo con solo búsqueda, sin encabezado
- */
-export const SearchOnly: Story = {
-  args: {
-    height: 600,
-    width: 248,
-    showHeading: false,
-    showSearch: true,
-    search: {
-      placeholder: 'Search items...',
-    },
-    items: [
-      {
-        label: 'Item 1',
-        isCollapsible: false,
-      },
-      {
-        label: 'Item 2',
-        isCollapsible: false,
-      },
-      {
-        label: 'Item 3',
-        isCollapsible: false,
-      },
-      {
-        label: 'Item 4',
-        isCollapsible: false,
-      },
-    ],
-  },
-};