test(storybook): fix component stories (#29245)

2024-06-14 17:33:08 +03:00 · 2024-06-14 17:33:08 +03:00 · 66bd0ce3d0
parent 3dadefcfb0
commit 66bd0ce3d0
22 changed files with 84 additions and 63 deletions
--- a/superset-frontend/src/components/Alert/Alert.stories.tsx
+++ b/superset-frontend/src/components/Alert/Alert.stories.tsx
@ -87,6 +87,7 @@ InteractiveAlert.args = {
 InteractiveAlert.argTypes = {
  onClose: { action: 'onClose' },
  type: {
-    control: { type: 'select', options: types },
+    control: { type: 'select' },
+    options: types,
  },
 };
--- a/superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx
+++ b/superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx
@ -87,11 +87,13 @@ AsyncAceEditor.args = {
 AsyncAceEditor.argTypes = {
  editorType: {
    defaultValue: 'json',
-    control: { type: 'select', options: editorTypes },
+    control: { type: 'select' },
+    options: editorTypes,
  },
  defaultTheme: {
    defaultValue: 'github',
-    control: { type: 'radio', options: ['textmate', 'github'] },
+    control: { type: 'radio' },
+    options: ['textmate', 'github'],
  },
 };

--- a/superset-frontend/src/components/Badge/Badge.stories.tsx
+++ b/superset-frontend/src/components/Badge/Badge.stories.tsx
@ -73,32 +73,32 @@ InteractiveBadge.argTypes = {
  status: {
    control: {
      type: 'select',
-      options: [undefined, ...STATUSES],
    },
+    options: [undefined, ...STATUSES],
  },
  size: {
    control: {
      type: 'select',
-      options: SIZES.options,
    },
+    options: SIZES.options,
  },
  color: {
    control: {
      type: 'select',
-      options: [undefined, ...COLORS.options],
    },
+    options: [undefined, ...COLORS.options],
  },
  textColor: {
    control: {
      type: 'select',
-      options: [undefined, ...COLORS.options],
    },
+    options: [undefined, ...COLORS.options],
  },
  count: {
    control: {
      type: 'select',
-      options: [undefined, ...Array(100).keys()],
    },
+    options: [undefined, ...Array(100).keys()],
  },
 };

--- a/superset-frontend/src/components/Button/Button.stories.tsx
+++ b/superset-frontend/src/components/Button/Button.stories.tsx
@ -117,11 +117,13 @@ InteractiveButton.args = {
 InteractiveButton.argTypes = {
  target: {
    name: TARGETS.label,
-    control: { type: 'select', options: Object.values(TARGETS.options) },
+    control: { type: 'select' },
+    options: Object.values(TARGETS.options),
  },
  href: {
    name: HREFS.label,
-    control: { type: 'select', options: Object.values(HREFS.options) },
+    control: { type: 'select' },
+    options: Object.values(HREFS.options),
  },
  onClick: { action: 'clicked' },
 };
--- a/superset-frontend/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/superset-frontend/src/components/ButtonGroup/ButtonGroup.stories.tsx
@ -49,11 +49,13 @@ InteractiveButtonGroup.args = {
 InteractiveButtonGroup.argTypes = {
  buttonStyle: {
    name: STYLES.label,
-    control: { type: 'select', options: STYLES.options },
+    control: { type: 'select' },
+    options: STYLES.options,
  },
  buttonSize: {
    name: SIZES.label,
-    control: { type: 'select', options: SIZES.options },
+    control: { type: 'select' },
+    options: SIZES.options,
  },
 };

--- a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
+++ b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
@ -55,6 +55,7 @@ InteractiveCopyToClipboard.argTypes = {
  onCopyEnd: { action: 'onCopyEnd' },
  copyNode: {
    defaultValue: 'Button',
-    control: { type: 'radio', options: ['Button', 'Icon', 'Text'] },
+    control: { type: 'radio' },
+    options: ['Button', 'Icon', 'Text'],
  },
 };
--- a/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx
+++ b/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx
@ -40,14 +40,14 @@ const interactiveTypes = {
  picker: {
    control: {
      type: 'select',
-      options: ['', 'date', 'week', 'month', 'quarter', 'year'],
    },
+    options: ['', 'date', 'week', 'month', 'quarter', 'year'],
  },
  size: {
    control: {
      type: 'select',
-      options: ['large', 'middle', 'small'],
    },
+    options: ['large', 'middle', 'small'],
  },
 };

--- a/superset-frontend/src/components/Dropdown/Dropdown.stories.tsx
+++ b/superset-frontend/src/components/Dropdown/Dropdown.stories.tsx
@ -60,6 +60,7 @@ export const InteractiveDropdown = ({
 InteractiveDropdown.argTypes = {
  overlayType: {
    defaultValue: 'menu',
-    control: { type: 'radio', options: ['menu', 'custom'] },
+    control: { type: 'radio' },
+    options: ['menu', 'custom'],
  },
 };
--- a/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx
+++ b/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx
@ -59,7 +59,8 @@ InteractiveDropdownButton.args = {
 InteractiveDropdownButton.argTypes = {
  placement: {
    defaultValue: 'top',
-    control: { type: 'select', options: PLACEMENTS },
+    control: { type: 'select' },
+    options: PLACEMENTS,
  },
  overlay: {
    defaultValue: menu,
--- a/superset-frontend/src/components/IconButton/IconButton.stories.tsx
+++ b/superset-frontend/src/components/IconButton/IconButton.stories.tsx
@ -46,12 +46,12 @@ InteractiveIconButton.argTypes = {
    defaultValue: '/images/icons/sql.svg',
    control: {
      type: 'select',
-      options: [
-        '/images/icons/sql.svg',
-        '/images/icons/server.svg',
-        '/images/icons/image.svg',
-        'Click to see example alt text',
-      ],
    },
+    options: [
+      '/images/icons/sql.svg',
+      '/images/icons/server.svg',
+      '/images/icons/image.svg',
+      'Click to see example alt text',
+    ],
  },
 };
--- a/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx
+++ b/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx
@ -53,6 +53,7 @@ InteractiveIconTooltip.args = {
 InteractiveIconTooltip.argTypes = {
  placement: {
    defaultValue: 'top',
-    control: { type: 'select', options: PLACEMENTS },
+    control: { type: 'select' },
+    options: PLACEMENTS,
  },
 };
--- a/superset-frontend/src/components/Icons/Icons.stories.tsx
+++ b/superset-frontend/src/components/Icons/Icons.stories.tsx
@ -71,11 +71,13 @@ InteractiveIcons.argTypes = {
  },
  iconSize: {
    defaultValue: 'xl',
-    control: { type: 'inline-radio', options: ['s', 'l', 'm', 'xl', 'xxl'] },
+    control: { type: 'inline-radio' },
+    options: ['s', 'l', 'm', 'xl', 'xxl'],
  },
  iconColor: {
    defaultValue: null,
-    control: { type: 'select', options: palette },
+    control: { type: 'select' },
+    options: palette,
  },
  theme: {
    table: {
--- a/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx
+++ b/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx
@ -44,27 +44,27 @@ InteractiveInfoTooltip.argTypes = {
    defaultValue: 'top',
    control: {
      type: 'select',
-      options: [
-        'bottom',
-        'left',
-        'right',
-        'top',
-        'topLeft',
-        'topRight',
-        'bottomLeft',
-        'bottomRight',
-        'leftTop',
-        'leftBottom',
-        'rightTop',
-        'rightBottom',
-      ],
    },
+    options: [
+      'bottom',
+      'left',
+      'right',
+      'top',
+      'topLeft',
+      'topRight',
+      'bottomLeft',
+      'bottomRight',
+      'leftTop',
+      'leftBottom',
+      'rightTop',
+      'rightBottom',
+    ],
  },
  trigger: {
    defaultValue: 'hover',
    control: {
      type: 'select',
-      options: ['hover', 'click'],
    },
+    options: ['hover', 'click'],
  },
 };
--- a/superset-frontend/src/components/Loading/Loading.stories.tsx
+++ b/superset-frontend/src/components/Loading/Loading.stories.tsx
@ -64,6 +64,7 @@ InteractiveLoading.args = {
 InteractiveLoading.argTypes = {
  position: {
    name: 'position',
-    control: { type: 'select', options: POSITIONS },
+    control: { type: 'select' },
+    options: POSITIONS,
  },
 };
--- a/superset-frontend/src/components/Popover/Popover.stories.tsx
+++ b/superset-frontend/src/components/Popover/Popover.stories.tsx
@ -71,10 +71,12 @@ InteractivePopover.args = {
 InteractivePopover.argTypes = {
  placement: {
    name: PLACEMENTS.label,
-    control: { type: 'select', options: PLACEMENTS.options },
+    control: { type: 'select' },
+    options: PLACEMENTS.options,
  },
  trigger: {
    name: TRIGGERS.label,
-    control: { type: 'select', options: TRIGGERS.options },
+    control: { type: 'select' },
+    options: TRIGGERS.options,
  },
 };
--- a/superset-frontend/src/components/PopoverDropdown/PopoverDropdown.stories.tsx
+++ b/superset-frontend/src/components/PopoverDropdown/PopoverDropdown.stories.tsx
@ -68,11 +68,13 @@ export const InteractivePopoverDropdown = (props: Props) => {
 InteractivePopoverDropdown.argTypes = {
  buttonType: {
    defaultValue: 'default',
-    control: { type: 'radio', options: ['default', 'button'] },
+    control: { type: 'radio' },
+    options: ['default', 'button'],
  },
  optionType: {
    defaultValue: 'default',
-    control: { type: 'radio', options: ['default', 'button'] },
+    control: { type: 'radio' },
+    options: ['default', 'button'],
  },
  value: {
    defaultValue: OPTIONS[0].value,
--- a/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx
@ -42,19 +42,19 @@ InteractiveProgressBar.argTypes = {
  status: {
    control: {
      type: 'select',
-      options: ['normal', 'success', 'exception', 'active'],
    },
+    options: ['normal', 'success', 'exception', 'active'],
  },
  strokeLinecap: {
    control: {
      type: 'select',
-      options: ['round', 'square'],
    },
+    options: ['round', 'square'],
  },
  type: {
    control: {
      type: 'select',
-      options: ['line', 'circle', 'dashboard'],
    },
+    options: ['line', 'circle', 'dashboard'],
  },
 };
--- a/superset-frontend/src/components/Switch/Switch.stories.tsx
+++ b/superset-frontend/src/components/Switch/Switch.stories.tsx
@ -44,6 +44,7 @@ InteractiveSwitch.args = {
 InteractiveSwitch.argTypes = {
  size: {
    defaultValue: 'default',
-    control: { type: 'radio', options: ['small', 'default'] },
+    control: { type: 'radio' },
+    options: ['small', 'default'],
  },
 };
--- a/superset-frontend/src/components/TableView/TableView.stories.tsx
+++ b/superset-frontend/src/components/TableView/TableView.stories.tsx
@ -83,8 +83,8 @@ InteractiveTableView.argTypes = {
  emptyWrapperType: {
    control: {
      type: 'select',
-      options: [EmptyWrapperType.Default, EmptyWrapperType.Small],
    },
+    options: [EmptyWrapperType.Default, EmptyWrapperType.Small],
  },
  pageSize: {
    control: {
--- a/superset-frontend/src/components/Tabs/Tabs.stories.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.stories.tsx
@ -53,7 +53,7 @@ InteractiveTabs.argTypes = {
    defaultValue: 'line',
    control: {
      type: 'inline-radio',
-      options: ['line', 'card', 'editable-card'],
    },
+    options: ['line', 'card', 'editable-card'],
  },
 };
--- a/superset-frontend/src/components/Timer/Timer.stories.tsx
+++ b/superset-frontend/src/components/Timer/Timer.stories.tsx
@ -45,16 +45,16 @@ InteractiveTimer.argTypes = {
  status: {
    control: {
      type: 'select',
-      options: [
-        'success',
-        'warning',
-        'danger',
-        'info',
-        'default',
-        'primary',
-        'secondary',
-      ],
    },
+    options: [
+      'success',
+      'warning',
+      'danger',
+      'info',
+      'default',
+      'primary',
+      'secondary',
+    ],
  },
 };

--- a/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx
+++ b/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx
@ -57,11 +57,13 @@ InteractiveTooltip.args = {
 InteractiveTooltip.argTypes = {
  placement: {
    defaultValue: 'top',
-    control: { type: 'select', options: PLACEMENTS },
+    control: { type: 'select' },
+    options: PLACEMENTS,
  },
  trigger: {
    defaultValue: 'hover',
-    control: { type: 'select', options: TRIGGERS },
+    control: { type: 'select' },
+    options: TRIGGERS,
  },
  color: { control: { type: 'color' } },
  onVisibleChange: { action: 'onVisibleChange' },