siesa-ui-kit 1.0.2 → 1.0.4

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

@@ -1,462 +1,462 @@
-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,
-      },
-    ],
-  },
-};
+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,
+      },
+    ],
+  },
+};