@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/select/Select.stories.tsx

@@ -1,336 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { fn } from 'storybook/test';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Select } from './Select';
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  args: {
-    onChange: fn(),
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const OPTIONS = [
-  { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
-  { value: 'vanilla', label: 'Vanilla' },
-  { value: 'mint', label: 'Mint' },
-  { value: 'cookies', label: 'Cookies & Cream' },
-] as const;
-
-const GROUPED_OPTIONS = [
-  {
-    label: 'Fruits',
-    options: [
-      { value: 'apple', label: 'Apple' },
-      { value: 'banana', label: 'Banana' },
-      { value: 'orange', label: 'Orange' },
-    ],
-  },
-  {
-    label: 'Vegetables',
-    options: [
-      { value: 'carrot', label: 'Carrot' },
-      { value: 'broccoli', label: 'Broccoli' },
-      { value: 'spinach', label: 'Spinach' },
-    ],
-  },
-] as const;
-
-const USERS = [
-  { value: 'john', label: 'John Doe', email: 'john@example.com' },
-  { value: 'jane', label: 'Jane Smith', email: 'jane@example.com' },
-  { value: 'bob', label: 'Bob Johnson', email: 'bob@example.com' },
-] as const;
-
-const FLAVOUR_PLACEHOLDER_TEXT = 'Select a flavour...' as const;
-const FLAVOUR_MULTI_PLACEHOLDER_TEXT = 'Select multiple flavours...' as const;
-
-export const Default: Story = {
-  args: {
-    options: OPTIONS,
-    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
-  },
-};
-
-export const WithDefaultValue: Story = {
-  args: {
-    options: OPTIONS,
-    defaultValue: OPTIONS[0],
-    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
-  },
-};
-
-export const Clearable: Story = {
-  args: {
-    options: OPTIONS,
-    defaultValue: OPTIONS[1],
-    isClearable: true,
-    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
-  },
-};
-
-export const Searchable: Story = {
-  args: {
-    options: OPTIONS,
-    isSearchable: true,
-    placeholder: 'Search and select...',
-  },
-};
-
-export const MultiSelect: Story = {
-  args: {
-    options: OPTIONS,
-    isMulti: true,
-    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
-  },
-};
-
-export const MultiSelectWithValues: Story = {
-  args: {
-    options: OPTIONS,
-    isMulti: true,
-    defaultValue: [OPTIONS[0], OPTIONS[2]],
-    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
-  },
-};
-
-export const MultiSelectClearable: Story = {
-  args: {
-    options: OPTIONS,
-    isMulti: true,
-    isClearable: true,
-    defaultValue: [OPTIONS[0], OPTIONS[1]],
-    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    options: OPTIONS,
-    isDisabled: true,
-    defaultValue: OPTIONS[0],
-    placeholder: 'This select is disabled',
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    options: OPTIONS,
-    isLoading: true,
-    placeholder: 'Loading...',
-  },
-};
-
-export const GroupedOptions: Story = {
-  args: {
-    options: GROUPED_OPTIONS,
-    placeholder: 'Select a food item...',
-  },
-};
-
-export const NoOptionsMessage: Story = {
-  args: {
-    options: [],
-    placeholder: 'No options available',
-    noOptionsMessage: () => 'No options found',
-  },
-};
-
-export const CustomFormatOptionLabel: Story = {
-  args: {
-    options: USERS,
-    placeholder: 'Select a user...',
-    formatOptionLabel: (data: unknown) => {
-      const option = data as { value: string; label: string; email: string };
-
-      return (
-        <div>
-          <div className="font-medium">{option.label}</div>
-
-          <div className="text-sm text-gray-500">{option.email}</div>
-        </div>
-      );
-    },
-  },
-};
-
-export const CustomClassNames: Story = {
-  args: {
-    options: OPTIONS,
-    placeholder: 'Custom styled select...',
-    classNames: {
-      control: () => 'border-2 border-purple-500 rounded-lg',
-      option: (state) =>
-        // eslint-disable-next-line sonarjs/no-nested-conditional
-        state.isSelected ? 'bg-purple-500 text-white' : state.isFocused ? 'bg-purple-100' : '',
-      menu: () => 'border-purple-500',
-    },
-  },
-};
-
-export const SmallSize: Story = {
-  args: {
-    options: OPTIONS,
-    placeholder: 'Small select...',
-    classNames: {
-      control: () => 'min-h-8 text-sm',
-      option: () => 'px-2 py-1 text-sm',
-    },
-  },
-};
-
-export const LargeSize: Story = {
-  args: {
-    options: OPTIONS,
-    placeholder: 'Large select...',
-    classNames: {
-      control: () => 'min-h-12 text-lg',
-      option: () => 'px-6 py-3 text-lg',
-    },
-  },
-};
-
-export const ControlledComponent: Story = {
-  render: () => {
-    const [value, setValue] = useState<{ value: string; label: string } | null>(OPTIONS[0]);
-
-    return (
-      <div className="space-y-4">
-        <Select
-          options={OPTIONS}
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
-          placeholder="Controlled select..."
-        />
-
-        <div className="text-sm text-gray-600">Selected: {value ? value.label : 'None'}</div>
-
-        <button
-          onClick={() => setValue(OPTIONS[2])}
-          className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
-        >
-          Set to Vanilla
-        </button>
-      </div>
-    );
-  },
-};
-export const WithLongOptions: Story = {
-  args: {
-    options: [
-      { value: 'short', label: 'Short' },
-      {
-        value: 'long',
-        label: 'This is a very long option that might overflow and needs to be handled properly',
-      },
-      {
-        value: 'medium',
-        label: 'Medium length option text',
-      },
-    ],
-    placeholder: 'Select an option...',
-  },
-};
-
-export const Async: Story = {
-  render: () => {
-    const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
-    const [isLoading, setIsLoading] = useState(false);
-
-    const loadOptions = () => {
-      setIsLoading(true);
-      // Simulate API call
-      setTimeout(() => {
-        setOptions([
-          { value: 'async1', label: 'Async Option 1' },
-          { value: 'async2', label: 'Async Option 2' },
-          { value: 'async3', label: 'Async Option 3' },
-        ]);
-        setIsLoading(false);
-      }, 1000);
-    };
-
-    useEffect(() => {
-      loadOptions();
-    }, []);
-
-    return (
-      <div className="space-y-4">
-        <Select options={options} isLoading={isLoading} placeholder="Loading async options..." />
-
-        <button onClick={loadOptions} className="px-3 py-1 bg-green-500 text-white rounded text-sm">
-          Reload Options
-        </button>
-      </div>
-    );
-  },
-};
-
-export const FormIntegration: Story = {
-  render: () => {
-    const [formData, setFormData] = useState<{
-      flavour: { value: string; label: string } | null;
-      toppings: { value: string; label: string }[];
-    }>({
-      flavour: null,
-      toppings: [],
-    });
-
-    return (
-      <form className="space-y-4 p-4 border rounded">
-        <div>
-          <label htmlFor="flavour" className="block text-sm font-medium mb-1">
-            Flavour
-          </label>
-
-          <Select
-            id="flavour"
-            options={OPTIONS}
-            value={formData.flavour}
-            onChange={(value) => setFormData({ ...formData, flavour: value })}
-            placeholder="Select a flavour..."
-            isClearable
-          />
-        </div>
-
-        <div>
-          <label htmlFor="toppings" className="block text-sm font-medium mb-1">
-            Toppings
-          </label>
-
-          <Select
-            id="toppings"
-            options={[
-              { value: 'sprinkles', label: 'Sprinkles' },
-              { value: 'nuts', label: 'Nuts' },
-              { value: 'chocolate-chips', label: 'Chocolate Chips' },
-              { value: 'cherry', label: 'Cherry' },
-            ]}
-            value={formData.toppings}
-            onChange={(value) =>
-              setFormData({ ...formData, toppings: Array.isArray(value) ? [...value] : [] })
-            }
-            placeholder="Select toppings..."
-            isMulti
-          />
-        </div>
-
-        <div className="text-sm text-gray-600">
-          <pre>{JSON.stringify(formData, null, 2)}</pre>
-        </div>
-      </form>
-    );
-  },
-};