@yuno-payments/dashboard-design-system 0.0.1

package/src/components/organisms/dropdown/dropdown.stories.tsx

@@ -0,0 +1,529 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Dropdown } from './index'
+
+const mockNone = [
+  {
+    header: 'Options',
+    options: [
+      { label: 'Juan', value: 'JuanValue' },
+      { label: 'Rodrigo', value: 'Rodrigo' },
+      { label: 'Pepe', value: 'Pepe' },
+      { label: 'Martin', value: 'Martin' },
+      { label: 'Bruno', value: 'Bruno' },
+      { label: 'Federico', value: 'Federico' },
+      { label: 'Miriam', value: 'MiriamValue' },
+      { label: 'Mariano', value: 'Mariano', disabled: true },
+      { label: 'Matias', value: 'Matias' },
+      { label: 'Marcelo', value: 'Marcelo' },
+      { label: 'Ronaldo', value: 'Ronaldo' },
+    ],
+  },
+]
+
+const mockCheckbox = [
+  {
+    header: 'Checkbox Options',
+    type: 'checkbox' as const,
+    options: [
+      { label: 'Juan', value: 'JuanValue' },
+      { label: 'Rodrigo', value: 'Rodrigo' },
+      { label: 'Federico', value: 'Federico', disabled: true },
+      { label: 'Nahuel', value: 'Nahuel' },
+      { label: 'Matias', value: 'Matias' },
+      { label: 'Pepe', value: 'Pepe', disabled: true },
+      { label: 'Klaus', value: 'Klaus' },
+      { label: 'Miriam', value: 'MiriamValue' },
+    ],
+  },
+]
+
+const mockRadioButton = [
+  {
+    header: 'Radio Options',
+    type: 'radiobutton' as const,
+    options: [
+      { label: 'Juan', value: 'Juan' },
+      { label: 'Rodrigo', value: 'Rodrigo' },
+      { label: 'Federico', value: 'Federico', disabled: true },
+      { label: 'Nahuel', value: 'Nahuel' },
+    ],
+  },
+]
+
+const mockCheckboxOneLevel = [
+  {
+    header: 'Nested Options',
+    options: [
+      {
+        label: 'Cuentas test',
+        value: 'cuentas-test',
+        options: [
+          { label: 'Juan', value: 'Juan' },
+          { label: 'Rodrigo', value: 'Rodrigo' },
+        ],
+      },
+      {
+        label: 'Cuentas Yuno',
+        value: 'cuentas-yuno',
+        options: [
+          { label: 'Omelia', value: 'Omelia' },
+          { label: 'Federico', value: 'Federico', disabled: true },
+        ],
+      },
+      {
+        label: 'Cuentas Avianca',
+        value: 'cuentas-avianca',
+        options: [
+          { label: 'Tom', value: 'Tom' },
+          { label: 'Zac', value: 'Zac' },
+        ],
+      },
+    ],
+  },
+]
+
+const mockCheckboxTwoLevels = [
+  {
+    header: 'Two Level Nested',
+    options: [
+      {
+        label: 'Cuentas test',
+        value: 'cuentas-test',
+        options: [
+          {
+            label: 'Cuentas Yuno',
+            value: 'cuentas-yuno',
+            options: [
+              { label: 'Omelia', value: 'Omelia' },
+              { label: 'Federico', value: 'Federico' },
+            ],
+          },
+          {
+            label: 'Cuentas Avianca',
+            value: 'cuentas-avianca',
+            options: [
+              { label: 'Tom', value: 'Tom' },
+              { label: 'Bruno', value: 'Bruno', disabled: true },
+              { label: 'Zac', value: 'Zac' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const mockRadioButtonOneLevel = [
+  {
+    header: 'Options',
+    options: [
+      {
+        label: 'Select team',
+        value: 'select-team',
+        options: [
+          { label: 'Dashboard', value: 'Dashboard' },
+          { label: 'Core', value: 'Core' },
+          { label: 'Secops', value: 'Secops', disabled: true },
+          { label: 'Integrations', value: 'Integrations' },
+        ],
+      },
+      {
+        label: 'Select genre',
+        value: 'select-genre',
+        options: [
+          { label: 'Male', value: 'Male' },
+          { label: 'Female', value: 'Female' },
+        ],
+      },
+      {
+        label: 'Select rol',
+        value: 'select-rol',
+        options: [
+          { label: 'QA', value: 'QA' },
+          { label: 'Frontend', value: 'Frontend' },
+          { label: 'Backend', value: 'Backend' },
+        ],
+      },
+    ],
+  },
+]
+
+const mockNoneOneLevel = [
+  {
+    header: 'Simple Nested',
+    options: [
+      {
+        label: 'Cuentas test',
+        value: 'cuentas-test',
+        options: [
+          { label: 'Juan', value: 'Juan' },
+          { label: 'Rodrigo', value: 'Rodrigo' },
+        ],
+      },
+      {
+        label: 'Cuentas Yuno',
+        value: 'cuentas-yuno',
+        options: [
+          { label: 'Omelia', value: 'Omelia' },
+          { label: 'Federico', value: 'Federico', disabled: true },
+        ],
+      },
+      {
+        label: 'Cuentas Avianca',
+        value: 'cuentas-avianca',
+        options: [
+          { label: 'Tom', value: 'Tom' },
+          { label: 'Zac', value: 'Zac' },
+        ],
+      },
+    ],
+  },
+]
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Organisms/Dropdown',
+  component: Dropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default'],
+      description: 'The visual variant of the dropdown',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+      description: 'The size of the dropdown',
+    },
+    onlyOneValue: {
+      control: 'boolean',
+      description: 'Whether to allow only single selection',
+    },
+    showSearchBar: {
+      control: 'boolean',
+      description: 'Whether to show the search bar',
+    },
+    showLabelOrValue: {
+      control: 'select',
+      options: ['label', 'value'],
+      description: 'Whether to show label or value in display',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the dropdown is disabled',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when no option is selected',
+    },
+    label: {
+      control: 'text',
+      description: 'Label for the dropdown',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below the dropdown',
+    },
+    width: {
+      control: 'number',
+      description: 'Fixed width for the dropdown',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    initialData: mockNone,
+    showSearchBar: true,
+    width: 400,
+    showLabelOrValue: 'value',
+    placeholder: 'Select an option',
+  },
+}
+
+export const Checkbox: Story = {
+  args: {
+    initialData: mockCheckbox,
+    initialDataSelected: ['JuanValue'],
+    width: 400,
+    onlyOneValue: false,
+    showSearchBar: true,
+    showLabelOrValue: 'value',
+    placeholder: 'Select options',
+  },
+}
+
+export const Checkbox1Level: Story = {
+  args: {
+    initialData: mockCheckboxOneLevel,
+    width: 400,
+    onlyOneValue: false,
+    showSearchBar: true,
+    placeholder: 'Select options',
+  },
+}
+
+export const Checkbox2Levels: Story = {
+  args: {
+    initialData: mockCheckboxTwoLevels,
+    width: 400,
+    onlyOneValue: false,
+    placeholder: 'Select options',
+  },
+}
+
+export const RadioButton: Story = {
+  args: {
+    initialData: mockRadioButton,
+    width: 400,
+    placeholder: 'Select an option',
+  },
+}
+
+export const RadioButton1Level: Story = {
+  args: {
+    initialData: mockRadioButtonOneLevel,
+    width: 400,
+    onlyOneValue: false,
+    placeholder: 'Select an option',
+  },
+}
+
+export const SimpleOneLevel: Story = {
+  args: {
+    initialData: mockNoneOneLevel,
+    width: 400,
+    placeholder: 'Select an option',
+  },
+}
+
+export const WithSearch: Story = {
+  args: {
+    initialData: mockNone,
+    showSearchBar: true,
+    searchPlaceholder: 'Search options...',
+    width: 400,
+    placeholder: 'Select an option',
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    initialData: mockNone,
+    label: 'Choose an option',
+    helperText: 'This is a helper text',
+    width: 400,
+    placeholder: 'Select an option',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    initialData: mockNone,
+    disabled: true,
+    width: 400,
+    placeholder: 'Select an option',
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-2">Small</h3>
+        <Dropdown
+          size="sm"
+          initialData={mockNone}
+          width={300}
+          placeholder="Small dropdown"
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Default</h3>
+        <Dropdown
+          size="default"
+          initialData={mockNone}
+          width={300}
+          placeholder="Default dropdown"
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Large</h3>
+        <Dropdown
+          size="lg"
+          initialData={mockNone}
+          width={300}
+          placeholder="Large dropdown"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedValues, setSelectedValues] = React.useState<string[]>([])
+    
+    return (
+      <div className="space-y-4">
+        <Dropdown
+          initialData={mockCheckbox}
+          onlyOneValue={false}
+          showSearchBar={true}
+          width={400}
+          placeholder="Select multiple options"
+          onChangeSelected={setSelectedValues}
+          label="Interactive Dropdown"
+          helperText="Try selecting multiple options and searching"
+        />
+        <div className="text-sm text-muted-foreground">
+          Selected: {selectedValues.length > 0 ? selectedValues.join(', ') : 'None'}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Docs: Story = {
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6 space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold mb-4">Dropdown Component</h1>
+        <p className="text-lg text-muted-foreground mb-6">
+          A flexible dropdown component that supports single and multiple selection, 
+          nested options, search functionality, and different item types (checkbox, radiobutton, none).
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold mb-3">Basic Usage</h2>
+          <div className="space-y-4">
+            <Dropdown
+              initialData={mockNone}
+              width={400}
+              placeholder="Select an option"
+              label="Basic Dropdown"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-xl font-semibold mb-3">Multiple Selection</h2>
+          <div className="space-y-4">
+            <Dropdown
+              initialData={mockCheckbox}
+              onlyOneValue={false}
+              width={400}
+              placeholder="Select multiple options"
+              label="Multiple Selection"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-xl font-semibold mb-3">With Search</h2>
+          <div className="space-y-4">
+            <Dropdown
+              initialData={mockNone}
+              showSearchBar={true}
+              width={400}
+              placeholder="Select an option"
+              label="Searchable Dropdown"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-xl font-semibold mb-3">Nested Options</h2>
+          <div className="space-y-4">
+            <Dropdown
+              initialData={mockCheckboxOneLevel}
+              onlyOneValue={false}
+              width={400}
+              placeholder="Select options"
+              label="Nested Options"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-xl font-semibold mb-3">Radio Button Type</h2>
+          <div className="space-y-4">
+            <Dropdown
+              initialData={mockRadioButton}
+              width={400}
+              placeholder="Select an option"
+              label="Radio Button Selection"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t pt-8">
+        <h2 className="text-xl font-semibold mb-4">Usage Guidelines</h2>
+        <div className="grid md:grid-cols-2 gap-6">
+          <div>
+            <h3 className="text-base font-medium mb-2">When to Use</h3>
+            <div className="space-y-2">
+              <p className="text-sm text-muted-foreground">
+                • Use for selecting from a list of options when space is limited
+              </p>
+              <p className="text-sm text-muted-foreground">
+                • Use multiple selection for filtering or categorization
+              </p>
+              <p className="text-sm text-muted-foreground">
+                • Use nested options for hierarchical data structures
+              </p>
+              <p className="text-sm text-muted-foreground">
+                • Use search functionality for large lists of options
+              </p>
+            </div>
+          </div>
+          <div>
+            <h3 className="text-base font-medium mb-2">Best Practices</h3>
+            <div className="space-y-2">
+              <p className="text-sm text-muted-foreground">
+                • Keep option labels clear and concise
+              </p>
+              <p className="text-sm text-muted-foreground">
+                • Use appropriate selection type (single vs multiple)
+              </p>
+              <p className="text-sm text-muted-foreground">
+                • Provide helpful placeholder text
+              </p>
+              <p className="text-sm text-muted-foreground">
+                • Consider using search for lists with more than 10 options
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t pt-8">
+        <h2 className="text-xl font-semibold mb-4">Accessibility</h2>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            • Supports keyboard navigation with arrow keys and Enter/Space
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Proper ARIA attributes for screen readers
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Focus management and escape key handling
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Clear visual indicators for selected and disabled states
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+}