siesa-ui-kit 1.0.0 → 1.0.2

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

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