@transferwise/components 46.100.1 → 46.101.0

package/src/select/Select.story.tsx

@@ -1,16 +1,38 @@
-import { text, boolean, select } from '@storybook/addon-knobs';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Person as ProfileIcon, Globe as GlobeIcon } from '@transferwise/icons';
 import { useState } from 'react';
-
 import Select, { SelectItem, SelectOptionItem } from './Select';
 
 /**
- * @deprecated Use **`SelectInput`** instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ * @deprecated Use **`SelectInput`** instead <br/> [https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput](https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
  */
-export default {
+const meta: Meta<typeof Select> = {
   component: Select,
-  title: 'Forms/Select (Deprecated)',
+  title: 'Forms/Select',
+  tags: ['deprecated'],
+  argTypes: {
+    id: { control: 'text' },
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    dropdownRight: { control: 'radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    dropdownWidth: { control: 'radio', options: [undefined, 'sm', 'md', 'lg'] },
+    placeholder: { control: 'text' },
+    inverse: { control: 'boolean' },
+    block: { control: 'boolean' },
+    required: { control: 'boolean' },
+    dropdownUp: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    search: { control: 'boolean' },
+    searchPlaceholder: { control: 'text' },
+    options: { control: false },
+    selected: { control: false },
+    onChange: { action: 'onChange' },
+    onSearchChange: { action: 'onSearchChange' },
+    searchValue: { control: false },
+  },
 };
+export default meta;
+
+type Story = StoryObj<typeof Select>;
 
 const ImageIcon = () => (
   <img
@@ -20,410 +42,376 @@ const ImageIcon = () => (
   />
 );
 
-interface SelectItemWithCountries extends SelectItem {
-  countries?: string;
-}
-
 const isSelectOptionItem = (option: SelectItem | null): option is SelectOptionItem => {
   return option !== null && typeof option.value !== 'undefined';
 };
 
-export const Basic = () => {
-  const [selected, setSelected] = useState<SelectOptionItem>({
-    value: 0,
-    label: 'A thing',
-    note: 'with a note',
-  });
-
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
-
-  const id = text('id', 'basic-button');
-  const placeholder = text('placeholder', 'Placeholder text');
-  const inverse = boolean('inverse', false);
-  const block = boolean('block', true);
-  const required = boolean('required', false);
-  const dropdownUp = boolean('dropdownUp', false);
-  const disabled = boolean('disabled', false);
-  const search = boolean('search', true);
-
-  return (
-    <Select
-      id={id}
-      size={size}
-      placeholder={placeholder}
-      dropdownRight={dropdownRight}
-      dropdownWidth={dropdownWidth}
-      inverse={inverse}
-      block={block}
-      selected={selected}
-      disabled={disabled}
-      search={search}
-      required={required}
-      searchPlaceholder="Search placeholder"
-      dropdownUp={dropdownUp}
-      options={[
-        { header: 'Basic' },
-        { value: -1, label: 'A thing' },
-        { value: 0, label: 'A thing', note: 'with a note' },
-        { value: 1, label: 'Another thing', secondary: 'with secondary text this time' },
-        {
-          value: -2,
-          label: 'One more thing',
-          note: 'with a note',
-          secondary: 'and with secondary text',
-        },
-        { value: 6, icon: <ImageIcon />, label: 'An <img>', note: 'with a note' },
-        { value: 2, label: 'A disabled thing', disabled: true },
-        { separator: true },
-        { header: 'Icons' },
-        { value: 3, label: 'Profile', icon: <ProfileIcon /> },
-        {
-          value: 4,
-          label: 'USD',
-          icon: <GlobeIcon />,
-          note: 'United States dollar - Outside of the US',
-        },
-        { header: 'Currencies' },
-        { value: 5, label: 'British pound', currency: 'gbp' },
-        { value: 6, label: 'Euro', currency: 'eur' },
-        { value: 7, label: 'USD', currency: 'usd', note: 'United States dollar' },
-        { separator: true },
-        { value: 8, label: 'Something else' },
-        { header: 'Options with searchable alternatives' },
-        {
-          value: 9,
-          label: 'A thing with searchable alternatives',
-          searchStrings: ['abbreviation', 'acronym', 'nickname'],
-        },
-        { separator: true },
-        { header: 'Long content options' },
-        {
-          value: 10,
-          label:
-            'One more thing with lorem ipsum dolor sit amet, consectetur adipiscing elit consequat text',
-          note: 'with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor note text',
-          secondary:
-            'and with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation secondary text',
-        },
-        {
-          value: 11,
-          icon: <GlobeIcon />,
-          label:
-            'One more thing with lorem ipsum dolor sit amet, consectetur adipiscing elit consequat text',
-          note: 'with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor note text',
-          secondary:
-            'and with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation secondary text',
-        },
-      ]}
-      onChange={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
-        }
-      }}
-    />
-  );
+export const Basic: Story = {
+  args: {
+    id: 'basic-button',
+    size: 'md',
+    placeholder: 'Placeholder text',
+    dropdownRight: 'md',
+    dropdownWidth: 'md',
+    inverse: false,
+    block: true,
+    required: false,
+    dropdownUp: false,
+    disabled: false,
+    search: true,
+    searchPlaceholder: 'Search placeholder',
+    options: [
+      { header: 'Basic' },
+      { value: -1, label: 'A thing' },
+      { value: 0, label: 'A thing', note: 'with a note' },
+      { value: 1, label: 'Another thing', secondary: 'with secondary text this time' },
+      {
+        value: -2,
+        label: 'One more thing',
+        note: 'with a note',
+        secondary: 'and with secondary text',
+      },
+      { value: 6, icon: <ImageIcon />, label: 'An <img>', note: 'with a note' },
+      { value: 2, label: 'A disabled thing', disabled: true },
+      { separator: true },
+      { header: 'Icons' },
+      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
+      {
+        value: 4,
+        label: 'USD',
+        icon: <GlobeIcon />,
+        note: 'United States dollar - Outside of the US',
+      },
+      { header: 'Currencies' },
+      { value: 5, label: 'British pound', currency: 'gbp' },
+      { value: 6, label: 'Euro', currency: 'eur' },
+      { value: 7, label: 'USD', currency: 'usd', note: 'United States dollar' },
+      { separator: true },
+      { value: 8, label: 'Something else' },
+      { header: 'Options with searchable alternatives' },
+      {
+        value: 9,
+        label: 'A thing with searchable alternatives',
+        searchStrings: ['abbreviation', 'acronym', 'nickname'],
+      },
+      { separator: true },
+      { header: 'Long content options' },
+      {
+        value: 10,
+        label:
+          'One more thing with lorem ipsum dolor sit amet, consectetur adipiscing elit consequat text',
+        note: 'with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor note text',
+        secondary:
+          'and with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation secondary text',
+      },
+      {
+        value: 11,
+        icon: <GlobeIcon />,
+        label:
+          'One more thing with lorem ipsum dolor sit amet, consectetur adipiscing elit consequat text',
+        note: 'with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor note text',
+        secondary:
+          'and with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation secondary text',
+      },
+    ],
+    selected: { value: 0, label: 'A thing', note: 'with a note' },
+  },
+  render: (args) => {
+    const initialSelected = args.selected ?? { value: 0, label: 'A thing', note: 'with a note' };
+    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
+    return (
+      <Select
+        {...args}
+        selected={selected}
+        onChange={(option) => {
+          if (isSelectOptionItem(option)) {
+            setSelected(option);
+          }
+        }}
+      />
+    );
+  },
 };
 
-export const CustomSearchFunction = () => {
-  const [selected, setSelected] = useState<SelectOptionItem>({
-    value: 1,
-    label: 'EUR',
-    currency: 'EUR',
-  });
-
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
-
-  const id = text('id', 'custom-search-button');
-  const placeholder = text('placeholder', 'placeholder');
-  const inverse = boolean('inverse', false);
-  const block = boolean('block', true);
-  const required = boolean('required', false);
-  const dropdownUp = boolean('dropdownUp', false);
-  const disabled = boolean('disabled', false);
-  const search = boolean('search', true);
-
-  return (
-    <Select
-      id={id}
-      size={size}
-      placeholder={placeholder}
-      dropdownRight={dropdownRight}
-      dropdownWidth={dropdownWidth}
-      inverse={inverse}
-      block={block}
-      selected={selected}
-      disabled={disabled}
-      search={search}
-      required={required}
-      searchPlaceholder="Search placeholder"
-      dropdownUp={dropdownUp}
-      options={[
-        { header: 'Popular currencies' },
-        {
-          value: 1,
-          label: 'EUR',
-          currency: 'EUR',
-          searchStrings: [
-            'Austria',
-            'Belgium',
-            'Cyprus',
-            'Estonia',
-            'Finland',
-            'France',
-            'Germany',
-            'Greece',
-            'Ireland',
-            'Italy',
-            'Latvia',
-            'Lithuania',
-            'Luxembourg',
-            'Malta',
-            'Netherlands',
-            'Portugal',
-            'Slovakia',
-            'Slovenia',
-            'Spain',
-            'Andorra',
-            'Monaco',
-            'San Marino',
-            'Vatican City',
-            'Kosovo',
-            'Montenegro',
-          ],
-        },
-        {
-          value: 2,
-          label: 'GBP',
-          currency: 'GBP',
-          searchStrings: ['Isle of Man', 'United Kingdom'],
-        },
-        {
-          value: 3,
-          label: 'INR',
-          currency: 'INR',
-          searchStrings: ['India'],
-        },
-        {
-          value: 4,
-          label: 'USD',
-          currency: 'USD',
-          searchStrings: [
-            'United States',
-            'Ecuador',
-            'El Salvador',
-            'Panama',
-            'East Timor',
-            'Zimbabwe',
-            'Micronesia',
-            'Marshall Islands',
-            'Palau',
-            'Turks and Caicos Islands',
-            'British Virgin Islands',
-            'Caribbean Netherlands',
-            'Bermuda',
-            'Bahamas',
-            'Puerto Rico',
-            'Guam',
-            'Northern Mariana Islands',
-            'American Samoa',
-            'U.S. Virgin Islands',
-          ],
-        },
-        {
-          value: 5,
-          label: 'DOP',
-          currency: 'dop',
-        },
-        {
-          value: 6,
-          label: 'UZS',
-          currency: 'uzs',
-        },
-        {
-          value: 7,
-          label: 'TTD',
-          currency: 'ttd',
-        },
-        { header: 'All currencies' },
-        {
-          currency: 'aed',
-          value: 'AED',
-          label: 'AED',
-          searchStrings: ['United Arab Emirates'],
-        },
-        {
-          currency: 'aud',
-          value: 'AUD',
-          label: 'AUD',
-          note: 'Australian dollar',
-          searchStrings: ['Australia'],
-          secondary: '',
-          icon: null,
-        },
-        {
-          currency: 'bgn',
-          value: 'BGN',
-          label: 'BGN',
-          note: 'Bulgarian lev',
-          searchStrings: ['Bulgaria'],
-          secondary: '',
-          icon: null,
-        },
-        {
-          currency: 'brl',
-          value: 'BRL',
-          label: 'BRL',
-          note: 'Brazilian real',
-          searchStrings: ['Brazil'],
-          secondary: '',
-          icon: null,
-        },
-        {
-          currency: undefined,
-          value: 'USD',
-          label: 'USD',
-          note: 'United States dollar - Outside of the US',
-          searchStrings: ['United States'],
-          secondary: '',
-          icon: <GlobeIcon />,
-        },
-      ]}
-      onChange={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
-        }
-      }}
-    />
-  );
+export const CustomSearchFunction: Story = {
+  args: {
+    id: 'custom-search-button',
+    size: 'md',
+    placeholder: 'placeholder',
+    dropdownRight: 'md',
+    dropdownWidth: 'md',
+    inverse: false,
+    block: true,
+    required: false,
+    dropdownUp: false,
+    disabled: false,
+    search: true,
+    searchPlaceholder: 'Search placeholder',
+    options: [
+      { header: 'Popular currencies' },
+      {
+        value: 1,
+        label: 'EUR',
+        currency: 'EUR',
+        searchStrings: [
+          'Austria',
+          'Belgium',
+          'Cyprus',
+          'Estonia',
+          'Finland',
+          'France',
+          'Germany',
+          'Greece',
+          'Ireland',
+          'Italy',
+          'Latvia',
+          'Lithuania',
+          'Luxembourg',
+          'Malta',
+          'Netherlands',
+          'Portugal',
+          'Slovakia',
+          'Slovenia',
+          'Spain',
+          'Andorra',
+          'Monaco',
+          'San Marino',
+          'Vatican City',
+          'Kosovo',
+          'Montenegro',
+        ],
+      },
+      {
+        value: 2,
+        label: 'GBP',
+        currency: 'GBP',
+        searchStrings: ['Isle of Man', 'United Kingdom'],
+      },
+      {
+        value: 3,
+        label: 'INR',
+        currency: 'INR',
+        searchStrings: ['India'],
+      },
+      {
+        value: 4,
+        label: 'USD',
+        currency: 'USD',
+        searchStrings: [
+          'United States',
+          'Ecuador',
+          'El Salvador',
+          'Panama',
+          'East Timor',
+          'Zimbabwe',
+          'Micronesia',
+          'Marshall Islands',
+          'Palau',
+          'Turks and Caicos Islands',
+          'British Virgin Islands',
+          'Caribbean Netherlands',
+          'Bermuda',
+          'Bahamas',
+          'Puerto Rico',
+          'Guam',
+          'Northern Mariana Islands',
+          'American Samoa',
+          'U.S. Virgin Islands',
+        ],
+      },
+      { value: 5, label: 'DOP', currency: 'dop' },
+      { value: 6, label: 'UZS', currency: 'uzs' },
+      { value: 7, label: 'TTD', currency: 'ttd' },
+      { header: 'All currencies' },
+      {
+        currency: 'aed',
+        value: 'AED',
+        label: 'AED',
+        searchStrings: ['United Arab Emirates'],
+      },
+      {
+        currency: 'aud',
+        value: 'AUD',
+        label: 'AUD',
+        note: 'Australian dollar',
+        searchStrings: ['Australia'],
+        secondary: '',
+        icon: null,
+      },
+      {
+        currency: 'bgn',
+        value: 'BGN',
+        label: 'BGN',
+        note: 'Bulgarian lev',
+        searchStrings: ['Bulgaria'],
+        secondary: '',
+        icon: null,
+      },
+      {
+        currency: 'brl',
+        value: 'BRL',
+        label: 'BRL',
+        note: 'Brazilian real',
+        searchStrings: ['Brazil'],
+        secondary: '',
+        icon: null,
+      },
+      {
+        currency: undefined,
+        value: 'USD',
+        label: 'USD',
+        note: 'United States dollar - Outside of the US',
+        searchStrings: ['United States'],
+        secondary: '',
+        icon: <GlobeIcon />,
+      },
+    ],
+    selected: { value: 1, label: 'EUR', currency: 'EUR' },
+  },
+  render: (args) => {
+    const initialSelected = args.selected ?? { value: 1, label: 'EUR', currency: 'EUR' };
+    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
+    return (
+      <Select
+        {...args}
+        selected={selected}
+        onChange={(option) => {
+          if (isSelectOptionItem(option)) {
+            setSelected(option);
+          }
+        }}
+      />
+    );
+  },
 };
 
-export const AdvancedSearch = () => {
-  const [searchValue, setSearchValue] = useState('');
-  const [selected, setSelected] = useState<SelectOptionItem>({
-    value: 0,
-    label: 'A thing',
-    note: 'with a note',
-  });
-
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
-
-  const id = text('id', 'advanced-search-button');
-  const placeholder = text('placeholder', 'placeholder');
-  const inverse = boolean('inverse', false);
-  const block = boolean('block', true);
-  const required = boolean('required', false);
-  const dropdownUp = boolean('dropdownUp', false);
-  const disabled = boolean('disabled', false);
-
-  return (
-    <Select
-      id={id}
-      size={size}
-      placeholder={placeholder}
-      dropdownRight={dropdownRight}
-      dropdownWidth={dropdownWidth}
-      inverse={inverse}
-      block={block}
-      selected={selected}
-      disabled={disabled}
-      required={required}
-      searchValue={searchValue}
-      searchPlaceholder="searchplaceholder"
-      dropdownUp={dropdownUp}
-      options={[
-        { header: 'Basic' },
-        { value: -1, label: 'A thing' },
-        { value: 0, label: 'A thing', note: 'with a note' },
-        { value: 1, label: 'Another thing', secondary: 'with secondary text this time' },
-        {
-          value: -2,
-          label: 'One more thing',
-          note: 'with a note',
-          secondary: 'and with secondary text',
-        },
-        { value: 2, label: 'A disabled thing', disabled: true },
-        { separator: true },
-        { header: 'Icons' },
-        { value: 3, label: 'Profile', icon: <ProfileIcon /> },
-        { value: 4, label: 'Globe', icon: <GlobeIcon /> },
-        { header: 'Currencies' },
-        { value: 5, label: 'British pound', currency: 'gbp' },
-        { value: 6, label: 'Euro', currency: 'eur' },
-        { separator: true },
-        { value: 7, label: 'Something else' },
-        { header: 'Options with searchable alternatives' },
-        {
-          value: 8,
-          label: 'A thing with searchable alternatives',
-          searchStrings: ['abbreviation', 'acronym', 'nickname'],
-        },
-      ].filter((option) => option.label?.toLowerCase().includes(searchValue))}
-      onChange={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
+export const AdvancedSearch: Story = {
+  args: {
+    id: 'advanced-search-button',
+    size: 'md',
+    placeholder: 'placeholder',
+    dropdownRight: 'md',
+    dropdownWidth: 'md',
+    inverse: false,
+    block: true,
+    required: false,
+    dropdownUp: false,
+    disabled: false,
+    searchPlaceholder: 'searchplaceholder',
+    options: [
+      { header: 'Basic' },
+      { value: -1, label: 'A thing' },
+      { value: 0, label: 'A thing', note: 'with a note' },
+      { value: 1, label: 'Another thing', secondary: 'with secondary text this time' },
+      {
+        value: -2,
+        label: 'One more thing',
+        note: 'with a note',
+        secondary: 'and with secondary text',
+      },
+      { value: 2, label: 'A disabled thing', disabled: true },
+      { separator: true },
+      { header: 'Icons' },
+      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
+      { value: 4, label: 'Globe', icon: <GlobeIcon /> },
+      { header: 'Currencies' },
+      { value: 5, label: 'British pound', currency: 'gbp' },
+      { value: 6, label: 'Euro', currency: 'eur' },
+      { separator: true },
+      { value: 7, label: 'Something else' },
+      { header: 'Options with searchable alternatives' },
+      {
+        value: 8,
+        label: 'A thing with searchable alternatives',
+        searchStrings: ['abbreviation', 'acronym', 'nickname'],
+      },
+    ],
+    selected: { value: 0, label: 'A thing', note: 'with a note' },
+  },
+  render: (args) => {
+    const [searchValue, setSearchValue] = useState('');
+    const initialSelected = args.selected ?? { value: 0, label: 'A thing', note: 'with a note' };
+    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
+    return (
+      <Select
+        {...args}
+        selected={selected}
+        searchValue={searchValue}
+        options={
+          Array.isArray(args.options)
+            ? args.options.filter(
+                (option) =>
+                  typeof option.label === 'string' &&
+                  option.label.toLowerCase().includes(searchValue),
+              )
+            : []
         }
-      }}
-      onSearchChange={(v) => setSearchValue(v)}
-    />
-  );
+        onChange={(option) => {
+          if (isSelectOptionItem(option)) {
+            setSelected(option);
+          }
+        }}
+        onSearchChange={(v) => setSearchValue(v)}
+      />
+    );
+  },
 };
 
-export const SearchingLargeLists = () => {
-  const [selected, setSelected] = useState<SelectOptionItem>({
-    value: 'option1',
-    label: 'Option 1',
-    secondary: 'Here we have a description describing option 1',
-  });
-
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
-
-  const id = text('id', 'large-list-button');
-  const placeholder = text('placeholder', 'Placeholder text');
-  const inverse = boolean('inverse', false);
-  const block = boolean('block', true);
-  const required = boolean('required', false);
-  const dropdownUp = boolean('dropdownUp', false);
-  const disabled = boolean('disabled', false);
-
-  return (
-    <Select
-      id={id}
-      size={size}
-      placeholder={placeholder}
-      dropdownRight={dropdownRight}
-      dropdownWidth={dropdownWidth}
-      inverse={inverse}
-      block={block}
-      selected={selected}
-      disabled={disabled}
-      search
-      required={required}
-      searchPlaceholder="Search placeholder"
-      dropdownUp={dropdownUp}
-      options={new Array(1500).fill(null).map((x, index) => ({
-        value: `option${index + 1}`,
-        label: `Option ${index + 1}`,
-        secondary: `Here we have a description describing option ${index + 1}`,
-      }))}
-      onChange={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
-        }
-      }}
-    />
-  );
+export const SearchingLargeLists: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  args: {
+    id: 'large-list-button',
+    size: 'md',
+    placeholder: 'Placeholder text',
+    dropdownRight: 'md',
+    dropdownWidth: 'md',
+    inverse: false,
+    block: true,
+    required: false,
+    dropdownUp: false,
+    disabled: false,
+    search: true,
+    searchPlaceholder: 'Search placeholder',
+    options: new Array(1500).fill(null).map((x, index) => ({
+      value: `option${index + 1}`,
+      label: `Option ${index + 1}`,
+      secondary: `Here we have a description describing option ${index + 1}`,
+    })),
+    selected: {
+      value: 'option1',
+      label: 'Option 1',
+      secondary: 'Here we have a description describing option 1',
+    },
+  },
+  render: (args) => {
+    const initialSelected = args.selected ?? {
+      value: 'option1',
+      label: 'Option 1',
+      secondary: 'Here we have a description describing option 1',
+    };
+    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
+    return (
+      <Select
+        {...args}
+        selected={selected}
+        onChange={(option) => {
+          if (isSelectOptionItem(option)) {
+            setSelected(option);
+          }
+        }}
+      />
+    );
+  },
 };
 
-export const CustomDropdownBalances = () => {
-  return (
+export const CustomDropdownBalances: Story = {
+  render: () => (
     <>
       Bye
       <div className="open">
@@ -451,5 +439,5 @@ export const CustomDropdownBalances = () => {
         </ul>
       </div>
     </>
-  );
+  ),
 };