siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/DropdownItemCollapsible/DropdownItemCollapsible.stories.tsx

@@ -1,317 +1,317 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DropdownItemCollapsible } from './DropdownItemCollapsible';
-import { UserIcon } from './icons';
-
-const meta = {
-  title: 'Components/DropdownItemCollapsible',
-  component: DropdownItemCollapsible,
-  parameters: {
-    layout: 'padded',
-    backgrounds: {
-      default: 'light',
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof DropdownItemCollapsible>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Item colapsable básico sin encabezado ni divisor
- * Muestra estructura simple con header colapsable
- */
-export const Basic: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="Users"
-      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-      children={[
-        {
-          label: 'Active Users',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-        {
-          label: 'Inactive Users',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-      ]}
-    />
-  ),
-  args: {
-    label: 'Users',
-  },
-};
-
-/**
- * Item colapsable con encabezado de sección
- * Útil para agrupar items relacionados
- */
-export const WithHeading: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="Customers"
-      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-      showHeading={true}
-      headingLabel="SECTION 1"
-      children={[
-        {
-          label: 'Enterprise',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-        {
-          label: 'SMB',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-        {
-          label: 'Startup',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-      ]}
-      showDivider={true}
-    />
-  ),
-  args: {
-    label: 'Customers',
-  },
-};
-
-/**
- * Item colapsable expandido por defecto
- */
-export const DefaultOpen: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="Departments"
-      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-      defaultOpen={true}
-      children={[
-        {
-          label: 'Sales',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-        {
-          label: 'Marketing',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-        {
-          label: 'Engineering',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-        {
-          label: 'Operations',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-      ]}
-    />
-  ),
-  args: {
-    label: 'Departments',
-  },
-};
-
-/**
- * Item deshabilitado
- * No se puede expandir ni interactuar
- */
-export const Disabled: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="Archived"
-      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-      disabled={true}
-      children={[
-        {
-          label: 'Old Item 1',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-        {
-          label: 'Old Item 2',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-      ]}
-    />
-  ),
-  args: {
-    label: 'Archived',
-  },
-};
-
-/**
- * Item simple sin items anidados (no colapsable)
- * Actúa como un botón normal
- */
-export const Simple: Story = {
-  args: {
-    label: 'Single Item',
-    icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-    isCollapsible: false,
-  },
-};
-
-/**
- * Item sin icono
- */
-export const WithoutIcon: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="No Icon Item"
-      children={[
-        {
-          label: 'Child 1',
-        },
-        {
-          label: 'Child 2',
-        },
-        {
-          label: 'Child 3',
-        },
-      ]}
-    />
-  ),
-  args: {
-    label: 'No Icon Item',
-  },
-};
-
-/**
- * Items anidados sin iconos
- */
-export const ChildrenWithoutIcons: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="Groups"
-      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-      children={[
-        {
-          label: 'Admins',
-        },
-        {
-          label: 'Users',
-        },
-        {
-          label: 'Guests',
-        },
-      ]}
-    />
-  ),
-  args: {
-    label: 'Groups',
-  },
-};
-
-/**
- * Múltiples items colapsables para simular dropdown completo
- */
-export const MultipleItems: Story = {
-  args: {
-    label: 'Multi Demo',
-  },
-  render: () => (
-    <div className="flex flex-col gap-0 w-56 bg-bg-primary dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary p-2">
-      <DropdownItemCollapsible
-        label="Users"
-        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-        showHeading={true}
-        headingLabel="RESOURCES"
-        showDivider={true}
-        children={[
-          {
-            label: 'Active Users',
-            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-          },
-          {
-            label: 'Inactive Users',
-            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-          },
-        ]}
-      />
-
-      <DropdownItemCollapsible
-        label="Departments"
-        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-        showDivider={true}
-        children={[
-          {
-            label: 'Sales',
-            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-          },
-          {
-            label: 'Marketing',
-            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-          },
-          {
-            label: 'Engineering',
-            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-          },
-        ]}
-      />
-
-      <DropdownItemCollapsible
-        label="Settings"
-        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-        showDivider={false}
-        isCollapsible={false}
-      />
-    </div>
-  ),
-};
-
-/**
- * Ejemplo con callbacks
- */
-export const WithCallbacks: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="Actions"
-      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-      defaultOpen={false}
-      children={[
-        {
-          label: 'Edit',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-          onClick: () => console.log('Edit clicked'),
-        },
-        {
-          label: 'Delete',
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-          onClick: () => console.log('Delete clicked'),
-        },
-        {
-          label: 'Archive',
-          disabled: true,
-          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
-        },
-      ]}
-      onOpenChange={(open) => console.log('Toggle state:', open)}
-    />
-  ),
-  args: {
-    label: 'Actions',
-  },
-};
-
-/**
- * Item con muchos items anidados
- */
-export const ManyChildren: Story = {
-  render: () => (
-    <DropdownItemCollapsible
-      label="Countries"
-      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
-      children={[
-        { label: 'United States' },
-        { label: 'Canada' },
-        { label: 'Mexico' },
-        { label: 'Brazil' },
-        { label: 'Argentina' },
-        { label: 'Chile' },
-        { label: 'Colombia' },
-        { label: 'Peru' },
-      ]}
-    />
-  ),
-  args: {
-    label: 'Countries',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownItemCollapsible } from './DropdownItemCollapsible';
+import { UserIcon } from './icons';
+
+const meta = {
+  title: 'Components/DropdownItemCollapsible',
+  component: DropdownItemCollapsible,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'light',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownItemCollapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Item colapsable básico sin encabezado ni divisor
+ * Muestra estructura simple con header colapsable
+ */
+export const Basic: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Users"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        {
+          label: 'Active Users',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Inactive Users',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Users',
+  },
+};
+
+/**
+ * Item colapsable con encabezado de sección
+ * Útil para agrupar items relacionados
+ */
+export const WithHeading: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Customers"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      showHeading={true}
+      headingLabel="SECTION 1"
+      children={[
+        {
+          label: 'Enterprise',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'SMB',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Startup',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+      showDivider={true}
+    />
+  ),
+  args: {
+    label: 'Customers',
+  },
+};
+
+/**
+ * Item colapsable expandido por defecto
+ */
+export const DefaultOpen: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Departments"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      defaultOpen={true}
+      children={[
+        {
+          label: 'Sales',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Marketing',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Engineering',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Operations',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Departments',
+  },
+};
+
+/**
+ * Item deshabilitado
+ * No se puede expandir ni interactuar
+ */
+export const Disabled: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Archived"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      disabled={true}
+      children={[
+        {
+          label: 'Old Item 1',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Old Item 2',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Archived',
+  },
+};
+
+/**
+ * Item simple sin items anidados (no colapsable)
+ * Actúa como un botón normal
+ */
+export const Simple: Story = {
+  args: {
+    label: 'Single Item',
+    icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+    isCollapsible: false,
+  },
+};
+
+/**
+ * Item sin icono
+ */
+export const WithoutIcon: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="No Icon Item"
+      children={[
+        {
+          label: 'Child 1',
+        },
+        {
+          label: 'Child 2',
+        },
+        {
+          label: 'Child 3',
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'No Icon Item',
+  },
+};
+
+/**
+ * Items anidados sin iconos
+ */
+export const ChildrenWithoutIcons: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Groups"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        {
+          label: 'Admins',
+        },
+        {
+          label: 'Users',
+        },
+        {
+          label: 'Guests',
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Groups',
+  },
+};
+
+/**
+ * Múltiples items colapsables para simular dropdown completo
+ */
+export const MultipleItems: Story = {
+  args: {
+    label: 'Multi Demo',
+  },
+  render: () => (
+    <div className="flex flex-col gap-0 w-56 bg-bg-primary dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary p-2">
+      <DropdownItemCollapsible
+        label="Users"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showHeading={true}
+        headingLabel="RESOURCES"
+        showDivider={true}
+        children={[
+          {
+            label: 'Active Users',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Inactive Users',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+        ]}
+      />
+
+      <DropdownItemCollapsible
+        label="Departments"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showDivider={true}
+        children={[
+          {
+            label: 'Sales',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Marketing',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Engineering',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+        ]}
+      />
+
+      <DropdownItemCollapsible
+        label="Settings"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showDivider={false}
+        isCollapsible={false}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Ejemplo con callbacks
+ */
+export const WithCallbacks: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Actions"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      defaultOpen={false}
+      children={[
+        {
+          label: 'Edit',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          onClick: () => console.log('Edit clicked'),
+        },
+        {
+          label: 'Delete',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          onClick: () => console.log('Delete clicked'),
+        },
+        {
+          label: 'Archive',
+          disabled: true,
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+      onOpenChange={(open) => console.log('Toggle state:', open)}
+    />
+  ),
+  args: {
+    label: 'Actions',
+  },
+};
+
+/**
+ * Item con muchos items anidados
+ */
+export const ManyChildren: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Countries"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        { label: 'United States' },
+        { label: 'Canada' },
+        { label: 'Mexico' },
+        { label: 'Brazil' },
+        { label: 'Argentina' },
+        { label: 'Chile' },
+        { label: 'Colombia' },
+        { label: 'Peru' },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Countries',
+  },
+};