From 5b1d6b2850cfca3d3fbf5be0c09cb4bcebbee7e5 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 29 Mar 2024 14:41:54 -0300
Subject: [PATCH] fix: Select's storybook (#27785)

---
 .../src/components/Select/Select.stories.tsx  | 269 +++++++++---------
 1 file changed, 132 insertions(+), 137 deletions(-)

diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/Select.stories.tsx
index 7fcb097ad3d22..4d7e06c47ea26 100644
--- a/superset-frontend/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/src/components/Select/Select.stories.tsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 import React from 'react';
+import { StoryObj } from '@storybook/react';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import { SelectOptionsType, SelectProps } from './types';
-
 import Select from './Select';
 
 export default {
@@ -74,87 +74,6 @@ const selectPositions = [
   },
 ];
 
-const ARG_TYPES = {
-  options: {
-    defaultValue: options,
-    description: `It defines the options of the Select.
-      The options can be static, an array of options.
-      The options can also be async, a promise that returns an array of options.
-    `,
-  },
-  ariaLabel: {
-    description: `It adds the aria-label tag for accessibility standards.
-      Must be plain English and localized.
-    `,
-  },
-  labelInValue: {
-    defaultValue: true,
-    table: {
-      disable: true,
-    },
-  },
-  name: {
-    table: {
-      disable: true,
-    },
-  },
-  notFoundContent: {
-    table: {
-      disable: true,
-    },
-  },
-  mappedMode: {
-    table: {
-      disable: true,
-    },
-  },
-  mode: {
-    description: `It defines whether the Select should allow for
-      the selection of multiple options or single. Single by default.
-    `,
-    defaultValue: 'single',
-    control: {
-      type: 'inline-radio',
-      options: ['single', 'multiple'],
-    },
-  },
-  allowNewOptions: {
-    description: `It enables the user to create new options.
-      Can be used with standard or async select types.
-      Can be used with any mode, single or multiple. False by default.
-    `,
-  },
-  invertSelection: {
-    description: `It shows a stop-outlined icon at the far right of a selected
-      option instead of the default checkmark.
-      Useful to better indicate to the user that by clicking on a selected
-      option it will be de-selected. False by default.
-    `,
-  },
-  optionFilterProps: {
-    description: `It allows to define which properties of the option object
-      should be looked for when searching.
-      By default label and value.
-    `,
-  },
-  oneLine: {
-    defaultValue: false,
-    description: `Sets maxTagCount to 1. The overflow tag is always displayed in
-       the same line, line wrapping is disabled.
-       When the dropdown is open, sets maxTagCount to 0,
-       displays only the overflow tag.
-       Requires '"mode=multiple"'.
-     `,
-  },
-  maxTagCount: {
-    defaultValue: 4,
-    description: `Sets maxTagCount attribute. The overflow tag is displayed in
-       place of the remaining items.
-       Requires '"mode=multiple"'.
-     `,
-  },
-};
-
 const mountHeader = (type: String) => {
   let header;
   if (type === 'text') {
@@ -186,67 +105,143 @@ const generateOptions = (opts: SelectOptionsType, count: number) => {
   return generated.slice(0, count);
 };
 
-export const InteractiveSelect = ({
-  header,
-  options,
-  optionsCount,
-  ...args
-}: SelectProps & { header: string; optionsCount: number }) => (
-  <div
-    style={{
-      width: DEFAULT_WIDTH,
-    }}
-  >
-    <Select
-      {...args}
-      options={
-        Array.isArray(options)
-          ? generateOptions(options, optionsCount)
-          : options
-      }
-      header={mountHeader(header)}
-    />
-  </div>
-);
-
-InteractiveSelect.args = {
-  autoFocus: true,
-  allowNewOptions: false,
-  allowClear: false,
-  autoClearSearchValue: false,
-  allowSelectAll: true,
-  showSearch: true,
-  disabled: false,
-  invertSelection: false,
-  placeholder: 'Select ...',
-  optionFilterProps: ['value', 'label', 'custom'],
-  oneLine: false,
-  maxTagCount: 4,
-};
-
-InteractiveSelect.argTypes = {
-  ...ARG_TYPES,
-  optionsCount: {
-    defaultValue: options.length,
-    control: {
-      type: 'number',
-    },
-  },
-  header: {
-    defaultValue: 'none',
-    description: `It adds a header on top of the Select. Can be any ReactNode.`,
-    control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
+export const InteractiveSelect: StoryObj = {
+  render: ({
+    header,
+    options,
+    optionsCount,
+    ...args
+  }: SelectProps & { header: string; optionsCount: number }) => (
+    <div
+      style={{
+        width: DEFAULT_WIDTH,
+      }}
+    >
+      <Select
+        {...args}
+        options={
+          Array.isArray(options)
+            ? generateOptions(options, optionsCount)
+            : options
+        }
+        header={mountHeader(header)}
+        mode="multiple"
+      />
+    </div>
+  ),
+  args: {
+    autoFocus: true,
+    allowNewOptions: false,
+    allowClear: false,
+    autoClearSearchValue: false,
+    allowSelectAll: true,
+    disabled: false,
+    header: 'none',
+    invertSelection: false,
+    labelInValue: true,
+    maxTagCount: 4,
+    mode: 'single',
+    oneLine: false,
+    options,
+    optionsCount: options.length,
+    optionFilterProps: ['value', 'label', 'custom'],
+    placeholder: 'Select ...',
+    showSearch: true,
   },
-  pageSize: {
-    description: `It defines how many results should be included in the query response.
+  argTypes: {
+    options: {
+      description: `It defines the options of the Select.
+        The options can be static, an array of options.
+        The options can also be async, a promise that returns an array of options.
+      `,
+    },
+    ariaLabel: {
+      description: `It adds the aria-label tag for accessibility standards.
+        Must be plain English and localized.
+      `,
+    },
+    labelInValue: {
+      table: {
+        disable: true,
+      },
+    },
+    name: {
+      table: {
+        disable: true,
+      },
+    },
+    notFoundContent: {
+      table: {
+        disable: true,
+      },
+    },
+    mappedMode: {
+      table: {
+        disable: true,
+      },
+    },
+    mode: {
+      description: `It defines whether the Select should allow for
+        the selection of multiple options or single. Single by default.
+      `,
+      control: {
+        type: 'inline-radio',
+        options: ['single', 'multiple'],
+      },
+    },
+    allowNewOptions: {
+      description: `It enables the user to create new options.
+        Can be used with standard or async select types.
+        Can be used with any mode, single or multiple. False by default.
+      `,
+    },
+    invertSelection: {
+      description: `It shows a stop-outlined icon at the far right of a selected
+        option instead of the default checkmark.
+        Useful to better indicate to the user that by clicking on a selected
+        option it will be de-selected. False by default.
+      `,
+    },
+    optionFilterProps: {
+      description: `It allows to define which properties of the option object
+        should be looked for when searching.
+        By default label and value.
+      `,
+    },
+    oneLine: {
+      description: `Sets maxTagCount to 1. The overflow tag is always displayed in
+         the same line, line wrapping is disabled.
+         When the dropdown is open, sets maxTagCount to 0,
+         displays only the overflow tag.
+         Requires '"mode=multiple"'.
+       `,
+    },
+    maxTagCount: {
+      description: `Sets maxTagCount attribute. The overflow tag is displayed in
+         place of the remaining items.
+         Requires '"mode=multiple"'.
+       `,
+    },
+    optionsCount: {
+      control: {
+        type: 'number',
+      },
+    },
+    header: {
+      description: `It adds a header on top of the Select. Can be any ReactNode.`,
+      control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
+    },
+    pageSize: {
+      description: `It defines how many results should be included in the query response.
       Works in async mode only (See the options property).
     `,
-  },
-  fetchOnlyOnSearch: {
-    description: `It fires a request against the server only after searching.
+    },
+    fetchOnlyOnSearch: {
+      description: `It fires a request against the server only after searching.
       Works in async mode only (See the options property).
       Undefined by default.
     `,
+    },
   },
 };