Upgrade to Storybook 7 (#1386)

* Migrate

* Config updates

* Remove

* No require-from-string

* Update lock file

* Fix types

* Doesn't work

* Update to CSF3

package.json

@@ -43,12 +43,6 @@
   "pnpm": {
     "overrides": {
       "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
-    },
-    "peerDependencyRules": {
-      "allowedVersions": {
-        "react": "18",
-        "react-dom": "18"
-      }
     }
   }
 }

packages/redux-devtools-ui/.storybook/main.js

@@ -1,14 +0,0 @@
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-      },
-    },
-  ],
-};

packages/redux-devtools-ui/.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+
+export default config;

packages/redux-devtools-ui/.storybook/preview.tsx

@@ -1,41 +1,9 @@
 import React from 'react';
+import type { Preview } from '@storybook/react';
+
 import { Container } from '../src';
 import { listSchemes, listThemes } from '../src/utils/theme';
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};
-
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'default',
-    toolbar: {
-      items: listThemes(),
-      showName: true,
-    },
-  },
-  scheme: {
-    name: 'Color Scheme',
-    description: 'Global color scheme for components',
-    defaultValue: 'default',
-    toolbar: {
-      items: listSchemes(),
-      showName: true,
-    },
-  },
-  color: {
-    name: 'Color',
-    description: 'Global color for components',
-    defaultValue: 'light',
-    toolbar: {
-      items: ['auto', 'light', 'dark'],
-      showName: true,
-    },
-  },
-};
-
 const withThemeProvider = (Story, context) => (
   <Container
     themeData={{
@@ -47,4 +15,41 @@ const withThemeProvider = (Story, context) => (
     <Story {...context} />
   </Container>
 );
-export const decorators = [withThemeProvider];
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'default',
+      toolbar: {
+        items: listThemes(),
+        showName: true,
+      },
+    },
+    scheme: {
+      name: 'Color Scheme',
+      description: 'Global color scheme for components',
+      defaultValue: 'default',
+      toolbar: {
+        items: listSchemes(),
+        showName: true,
+      },
+    },
+    color: {
+      name: 'Color',
+      description: 'Global color for components',
+      defaultValue: 'light',
+      toolbar: {
+        items: ['auto', 'light', 'dark'],
+        showName: true,
+      },
+    },
+  },
+  decorators: [withThemeProvider],
+};
+
+export default preview;

packages/redux-devtools-ui/package.json

@@ -25,8 +25,8 @@
   },
   "scripts": {
     "start": "pnpm run storybook",
-    "storybook": "start-storybook --port 6006 --static-dir ./fonts",
-    "build:storybook": "build-storybook --static-dir ./fonts --quiet",
+    "storybook": "storybook dev --port 6006 --static-dir ./fonts",
+    "build:storybook": "storybook build --static-dir ./fonts --quiet",
     "build": "pnpm run build:lib && pnpm run build:storybook",
     "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
     "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
@@ -67,10 +67,11 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-webpack5": "^7.0.2",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -93,8 +94,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "require-from-string": "^2.0.2",
     "rimraf": "^4.4.1",
+    "storybook": "^7.0.2",
     "styled-components": "^5.3.9",
     "stylelint": "^15.3.0",
     "stylelint-config-prettier": "^9.0.5",

packages/redux-devtools-ui/src/Button/Button.stories.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
 import { MdFiberManualRecord } from 'react-icons/md';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import Button from './';
-import { ButtonProps } from './Button';
 
-export default {
+const meta: Meta = {
   title: 'Button',
   component: Button,
 };
 
+export default meta;
+
 const Container = styled.div`
   display: flex;
   height: 100%;
@@ -18,41 +19,45 @@ const Container = styled.div`
   align-items: center;
 `;
 
-const Template: Story<ButtonProps> = (args) => (
-  <Container>
-    <Button {...args} />
-  </Container>
-);
+type Story = StoryObj<typeof Button>;
 
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Hello Tooltip! \\a And from new line hello!',
-  tooltipPosition: 'top',
-  primary: true,
-  size: 'normal',
-  disabled: false,
-  children: 'Hello Button',
-};
-Default.argTypes = {
-  onClick: { control: { disable: true } },
-  type: { control: { disable: true } },
-  mark: { control: { disable: true } },
-  theme: { control: { disable: true } },
+export const Default: Story = {
+  render: (args) => (
+    <Container>
+      <Button {...args} />
+    </Container>
+  ),
+  args: {
+    title: 'Hello Tooltip! \\a And from new line hello!',
+    tooltipPosition: 'top',
+    primary: true,
+    size: 'normal',
+    disabled: false,
+    children: 'Hello Button',
+  },
+  argTypes: {
+    onClick: { control: { disable: true } },
+    type: { control: { disable: true } },
+    mark: { control: { disable: true } },
+    theme: { control: { disable: true } },
+  },
 };
 
-export const Mark = Template.bind({});
-Mark.args = {
-  mark: 'base08',
-  title: 'Hello Tooltip',
-  tooltipPosition: 'top',
-  size: 'normal',
-  disabled: false,
-  children: <MdFiberManualRecord />,
-};
-Mark.argTypes = {
-  children: { control: { disable: true } },
-  onClick: { control: { disable: true } },
-  type: { control: { disable: true } },
-  primary: { control: { disable: true } },
-  theme: { control: { disable: true } },
+export const Mark: Story = {
+  render: Default.render,
+  args: {
+    mark: 'base08',
+    title: 'Hello Tooltip',
+    tooltipPosition: 'top',
+    size: 'normal',
+    disabled: false,
+    children: <MdFiberManualRecord />,
+  },
+  argTypes: {
+    children: { control: { disable: true } },
+    onClick: { control: { disable: true } },
+    type: { control: { disable: true } },
+    primary: { control: { disable: true } },
+    theme: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import ContextMenu from './';
 import { items } from './data';
-import { ContextMenuProps } from './ContextMenu';
 
-export default {
+const meta: Meta = {
   title: 'ContextMenu',
   component: ContextMenu,
 };
 
+export default meta;
+
 const Container = styled.div`
   display: flex;
   height: 100%;
@@ -18,21 +19,23 @@ const Container = styled.div`
   align-items: center;
 `;
 
-const Template: Story<ContextMenuProps> = (args) => (
-  <Container>
-    <ContextMenu {...args} />
-  </Container>
-);
+type Story = StoryObj<typeof ContextMenu>;
 
-export const Default = Template.bind({});
-Default.args = {
-  visible: true,
-  x: 100,
-  y: 100,
-  items,
-};
-Default.argTypes = {
-  visible: { control: { disable: true } },
-  items: { control: { disable: true } },
-  onClick: { control: { disable: true } },
+export const Default: Story = {
+  render: (args) => (
+    <Container>
+      <ContextMenu {...args} />
+    </Container>
+  ),
+  args: {
+    visible: true,
+    x: 100,
+    y: 100,
+    items,
+  },
+  argTypes: {
+    visible: { control: { disable: true } },
+    items: { control: { disable: true } },
+    onClick: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx

@@ -1,54 +1,54 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import Dialog from './';
 import { schema, uiSchema, formData } from '../Form/schema';
-import { DialogProps } from './Dialog';
-import { Props as FormProps } from '../Form/Form';
 
-export default {
+const meta: Meta = {
   title: 'Dialog',
   component: Dialog,
 };
 
-const Template: Story<DialogProps | (DialogProps & FormProps<unknown>)> = (
-  args
-) => <Dialog {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Dialog Title',
-  submitText: 'Submit!',
-  open: true,
-  noHeader: false,
-  noFooter: false,
-  modal: false,
-  fullWidth: false,
-  children: 'Hello Dialog!',
-};
-Default.argTypes = {
-  actions: { control: { disable: true } },
-  onDismiss: { control: { disable: true } },
-  onSubmit: { control: { disable: true } },
-  theme: { control: { disable: true } },
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  args: {
+    title: 'Dialog Title',
+    submitText: 'Submit!',
+    open: true,
+    noHeader: false,
+    noFooter: false,
+    modal: false,
+    fullWidth: false,
+    children: 'Hello Dialog!',
+  },
+  argTypes: {
+    actions: { control: { disable: true } },
+    onDismiss: { control: { disable: true } },
+    onSubmit: { control: { disable: true } },
+    theme: { control: { disable: true } },
+  },
 };
 
-export const WithForm = Template.bind({});
-WithForm.args = {
-  open: true,
-  noHeader: false,
-  noFooter: false,
-  fullWidth: false,
-  submitText: 'Submit!',
-  formData,
-  schema,
-  uiSchema,
-};
-WithForm.argTypes = {
-  title: { control: { disable: true } },
-  children: { control: { disable: true } },
-  actions: { control: { disable: true } },
-  modal: { control: { disable: true } },
-  onDismiss: { control: { disable: true } },
-  onSubmit: { control: { disable: true } },
-  theme: { control: { disable: true } },
+export const WithForm: Story = {
+  args: {
+    open: true,
+    noHeader: false,
+    noFooter: false,
+    fullWidth: false,
+    submitText: 'Submit!',
+    formData,
+    schema,
+    uiSchema,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    children: { control: { disable: true } },
+    actions: { control: { disable: true } },
+    modal: { control: { disable: true } },
+    onDismiss: { control: { disable: true } },
+    onSubmit: { control: { disable: true } },
+    theme: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/Editor/Editor.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import Editor from './';
 import { default as WithTabsComponent, WithTabsProps } from './WithTabs';
-import { EditorProps } from './Editor';
 
 const value = `
 var themes = [];
@@ -12,45 +11,46 @@ function getThemes() {
 }
 `;
 
-export default {
+const meta: Meta = {
   title: 'Editor',
   component: Editor,
 };
 
-const Template: Story<EditorProps> = (args) => <Editor {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  value,
-  lineNumbers: true,
-  lineWrapping: false,
-  foldGutter: true,
-  readOnly: false,
-  autofocus: true,
-};
-Default.argTypes = {
-  autofocus: { control: { disable: true } },
-  mode: { control: { disable: true } },
-  theme: { control: { disable: true } },
-  onChange: { control: { disable: true } },
+type Story = StoryObj<typeof Editor>;
+
+export const Default: Story = {
+  args: {
+    value,
+    lineNumbers: true,
+    lineWrapping: false,
+    foldGutter: true,
+    readOnly: false,
+    autofocus: true,
+  },
+  argTypes: {
+    autofocus: { control: { disable: true } },
+    mode: { control: { disable: true } },
+    theme: { control: { disable: true } },
+    onChange: { control: { disable: true } },
+  },
 };
 
-const WithTabsTemplate: Story<WithTabsProps> = (args) => (
-  <WithTabsComponent {...args} />
-);
-
-export const WithTabs = WithTabsTemplate.bind({});
-WithTabs.args = {
-  lineNumbers: true,
-  position: 'left',
+export const WithTabs: StoryObj<WithTabsProps> = {
+  render: (args) => <WithTabsComponent {...args} />,
+  args: {
+    lineNumbers: true,
+    position: 'left',
+  },
+  argTypes: {
+    value: { control: { disable: true } },
+    mode: { control: { disable: true } },
+    lineWrapping: { control: { disable: true } },
+    readOnly: { control: { disable: true } },
+    theme: { control: { disable: true } },
+    foldGutter: { control: { disable: true } },
+    autofocus: { control: { disable: true } },
+    onChange: { control: { disable: true } },
+  } as any,
 };
-WithTabs.argTypes = {
-  value: { control: { disable: true } },
-  mode: { control: { disable: true } },
-  lineWrapping: { control: { disable: true } },
-  readOnly: { control: { disable: true } },
-  theme: { control: { disable: true } },
-  foldGutter: { control: { disable: true } },
-  autofocus: { control: { disable: true } },
-  onChange: { control: { disable: true } },
-} as any;

packages/redux-devtools-ui/src/Form/Form.stories.tsx

@@ -1,26 +1,28 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import Form from './';
 import { schema, uiSchema, formData } from './schema';
-import { Props as FormProps } from './Form';
 
-export default {
+const meta: Meta = {
   title: 'Form',
   component: Form,
 };
 
-const Template: Story<FormProps<unknown>> = (args) => <Form {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  formData,
-  schema,
-  uiSchema,
-  submitText: 'Submit',
-};
-Default.argTypes = {
-  children: { control: { disable: true } },
-  primaryButton: { control: { disable: true } },
-  noSubmit: { control: { disable: true } },
-  widgets: { control: { disable: true } },
+type Story = StoryObj<typeof Form>;
+
+export const Default: Story = {
+  args: {
+    formData,
+    schema,
+    uiSchema,
+    submitText: 'Submit',
+  },
+  argTypes: {
+    children: { control: { disable: true } },
+    primaryButton: { control: { disable: true } },
+    noSubmit: { control: { disable: true } },
+    widgets: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/Notification/Notification.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import Notification from './';
-import { NotificationProps } from './Notification';
 
 const Container = styled.div`
   display: flex;
@@ -12,23 +11,27 @@ const Container = styled.div`
   align-items: center;
 `;
 
-export default {
+const meta: Meta = {
   title: 'Notification',
   component: Notification,
 };
 
-const Template: Story<NotificationProps> = (args) => (
-  <Container>
-    <Notification {...args} />
-  </Container>
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  type: 'warning',
-  children: 'Hello Notification',
-};
-Default.argTypes = {
-  onClose: { control: { disable: true } },
-  theme: { control: { disable: true } },
+type Story = StoryObj<typeof Notification>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Container>
+      <Notification {...args} />
+    </Container>
+  ),
+  args: {
+    type: 'warning',
+    children: 'Hello Notification',
+  },
+  argTypes: {
+    onClose: { control: { disable: true } },
+    theme: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import SegmentedControl from './';
-import { SegmentedControlProps } from './SegmentedControl';
 
 const Container = styled.div`
   display: flex;
@@ -12,25 +11,28 @@ const Container = styled.div`
   align-items: center;
 `;
 
-export default {
+const meta: Meta = {
   title: 'SegmentedControl',
   component: SegmentedControl,
 };
 
-// eslint-disable-next-line react/prop-types
-const Template: Story<SegmentedControlProps> = ({ values, ...args }) => (
-  <Container>
-    <SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
-  </Container>
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  selected: 'Button1',
-  disabled: false,
-};
-Default.argTypes = {
-  values: { control: { disable: true } },
-  onClick: { control: { disable: true } },
-  theme: { control: { disable: true } },
+type Story = StoryObj<typeof SegmentedControl>;
+
+export const Default: Story = {
+  render: ({ values, ...args }) => (
+    <Container>
+      <SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
+    </Container>
+  ),
+  args: {
+    selected: 'Button1',
+    disabled: false,
+  },
+  argTypes: {
+    values: { control: { disable: true } },
+    onClick: { control: { disable: true } },
+    theme: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/Select/Select.stories.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import Select from './';
 import { options } from './options';
-import { Story } from '@storybook/react';
-import { SelectProps } from './Select';
+import { Meta, StoryObj } from '@storybook/react';
 
 const Container = styled.div`
   display: flex;
@@ -17,40 +16,38 @@ const Container = styled.div`
   }
 `;
 
-export default {
+const meta: Meta = {
   title: 'Select',
   component: Select,
 };
 
-type TemplateArgs = Omit<
-  SelectProps<{ value: string; label: string }, boolean>,
-  'value'
-> & { value: string };
+export default meta;
 
-// eslint-disable-next-line react/prop-types
-const Template: Story<TemplateArgs> = ({ value, ...args }) => (
-  <Container>
-    <Select
-      options={options}
-      value={options.filter((option) => option.value === value)}
-      {...args}
-    />
-  </Container>
-);
+type Story = StoryObj<typeof Select>;
 
-export const Default = Template.bind({});
-Default.args = {
-  value: 'one',
-  maxMenuHeight: 300,
-  isClearable: false,
-  isDisabled: false,
-  isLoading: false,
-  isMulti: false,
-  isSearchable: true,
-  menuPlacement: 'bottom',
-};
-Default.argTypes = {
-  onChange: {
-    action: 'selected',
+export const Default: Story = {
+  render: ({ value, ...args }) => (
+    <Container>
+      <Select
+        options={options}
+        value={options.filter((option) => option.value === value)}
+        {...args}
+      />
+    </Container>
+  ),
+  args: {
+    value: 'one',
+    maxMenuHeight: 300,
+    isClearable: false,
+    isDisabled: false,
+    isLoading: false,
+    isMulti: false,
+    isSearchable: true,
+    menuPlacement: 'bottom',
+  },
+  argTypes: {
+    onChange: {
+      action: 'selected',
+    },
   },
 };

packages/redux-devtools-ui/src/Slider/Slider.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import Slider from './';
-import { SliderProps } from './Slider';
 
 const Container = styled.div`
   display: flex;
@@ -12,28 +11,32 @@ const Container = styled.div`
   align-items: center;
 `;
 
-export default {
+const meta: Meta = {
   title: 'Slider',
   component: Slider,
 };
 
-const Template: Story<SliderProps> = (args) => (
-  <Container>
-    <Slider {...args} />
-  </Container>
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  value: 0,
-  min: 0,
-  max: 100,
-  label: 'Slider label',
-  sublabel: '(sublabel}',
-  withValue: false,
-  disabled: false,
-};
-Default.argTypes = {
-  onChange: { control: { disable: true } },
-  theme: { control: { disable: true } },
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Container>
+      <Slider {...args} />
+    </Container>
+  ),
+  args: {
+    value: 0,
+    min: 0,
+    max: 100,
+    label: 'Slider label',
+    sublabel: '(sublabel}',
+    withValue: false,
+    disabled: false,
+  },
+  argTypes: {
+    onChange: { control: { disable: true } },
+    theme: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import Tabs from './';
 import { tabs, simple10Tabs } from './data';
 import { TabsProps } from './Tabs';
@@ -13,41 +13,49 @@ const Container = styled.div`
   align-items: center;
 `;
 
-export default {
+const meta: Meta = {
   title: 'Tabs',
   component: Tabs,
 };
 
-const Template: Story<TabsProps<object>> = (args) => (
-  <Container>
-    <Tabs {...args} />
-  </Container>
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = {
-  tabs: simple10Tabs,
-  selected: '2',
-  main: true,
-  collapsible: true,
-  position: 'left',
-};
-Default.argTypes = {
-  tabs: { control: { disable: true } },
-  onClick: { control: { disable: true } },
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Container>
+      <Tabs {...args} />
+    </Container>
+  ),
+  args: {
+    tabs: simple10Tabs,
+    selected: '2',
+    main: true,
+    collapsible: true,
+    position: 'left',
+  },
+  argTypes: {
+    tabs: { control: { disable: true } },
+    onClick: { control: { disable: true } },
+  },
 };
 
-export const WithContent = (
-  Template as Story<TabsProps<{ selected: string }>>
-).bind({});
-WithContent.args = {
-  tabs,
-  selected: 'Tab2',
-  main: false,
-  collapsible: false,
-  position: 'left',
-};
-WithContent.argTypes = {
-  tabs: { control: { disable: true } },
-  onClick: { control: { disable: true } },
+export const WithContext: StoryObj<TabsProps<{ selected: string }>> = {
+  render: (args) => (
+    <Container>
+      <Tabs {...args} />
+    </Container>
+  ),
+  args: {
+    tabs,
+    selected: 'Tab2',
+    main: false,
+    collapsible: false,
+    position: 'left',
+  },
+  argTypes: {
+    tabs: { control: { disable: true } },
+    onClick: { control: { disable: true } },
+  },
 };

packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { MdPlayArrow } from 'react-icons/md';
 import { MdFiberManualRecord } from 'react-icons/md';
 import { MdKeyboardArrowLeft } from 'react-icons/md';
@@ -34,11 +34,13 @@ const SliderContainer = styled.div`
   height: 80px;
 `;
 
-export default {
+const meta: Meta = {
   title: 'Toolbar',
   component: Toolbar,
 };
 
+export default meta;
+
 interface TemplateArgs {
   borderPosition: BorderPosition;
   title?: string;
@@ -48,78 +50,78 @@ interface TemplateArgs {
   label: ReactNode;
 }
 
-const Template: Story<TemplateArgs> = ({
-  // eslint-disable-next-line react/prop-types
-  borderPosition,
-  // eslint-disable-next-line react/prop-types
-  title,
-  // eslint-disable-next-line react/prop-types
-  tooltipPosition,
-  // eslint-disable-next-line react/prop-types
-  disabled,
-  // eslint-disable-next-line react/prop-types
-  onClick,
-  // eslint-disable-next-line react/prop-types
-  label,
-}) => (
-  <Container>
-    <Toolbar borderPosition={borderPosition}>
-      <Button
-        title={title}
-        tooltipPosition={tooltipPosition}
-        disabled={disabled}
-        onClick={onClick}
-      >
-        {label}
-      </Button>
-      <Divider />
-      <Button
-        title={title}
-        tooltipPosition={tooltipPosition}
-        disabled={disabled}
-        onClick={onClick}
-      >
-        <MdFiberManualRecord />
-      </Button>
-      <Divider />
-      <Spacer />
-      <Select options={options} />
-    </Toolbar>
-  </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  borderPosition: 'top',
-  title: 'Hello Tooltip',
-  tooltipPosition: 'top',
-  disabled: false,
-  label: 'Hello Button',
-};
-Default.argTypes = {
-  borderPosition: {
-    control: {
-      type: 'select',
-      options: ['top', 'bottom'],
-    },
+export const Default: StoryObj<TemplateArgs> = {
+  render: ({
+    // eslint-disable-next-line react/prop-types
+    borderPosition,
+    // eslint-disable-next-line react/prop-types
+    title,
+    // eslint-disable-next-line react/prop-types
+    tooltipPosition,
+    // eslint-disable-next-line react/prop-types
+    disabled,
+    // eslint-disable-next-line react/prop-types
+    onClick,
+    // eslint-disable-next-line react/prop-types
+    label,
+  }) => (
+    <Container>
+      <Toolbar borderPosition={borderPosition}>
+        <Button
+          title={title}
+          tooltipPosition={tooltipPosition}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          {label}
+        </Button>
+        <Divider />
+        <Button
+          title={title}
+          tooltipPosition={tooltipPosition}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          <MdFiberManualRecord />
+        </Button>
+        <Divider />
+        <Spacer />
+        <Select options={options} />
+      </Toolbar>
+    </Container>
+  ),
+  args: {
+    borderPosition: 'top',
+    title: 'Hello Tooltip',
+    tooltipPosition: 'top',
+    disabled: false,
+    label: 'Hello Button',
   },
-  tooltipPosition: {
-    control: {
-      type: 'select',
-      options: [
-        'top',
-        'bottom',
-        'left',
-        'right',
-        'bottom-left',
-        'bottom-right',
-        'top-left',
-        'top-right',
-      ],
+  argTypes: {
+    borderPosition: {
+      control: {
+        type: 'select',
+        options: ['top', 'bottom'],
+      },
+    },
+    tooltipPosition: {
+      control: {
+        type: 'select',
+        options: [
+          'top',
+          'bottom',
+          'left',
+          'right',
+          'bottom-left',
+          'bottom-right',
+          'top-left',
+          'top-right',
+        ],
+      },
+    },
+    onClick: {
+      action: 'button clicked',
     },
-  },
-  onClick: {
-    action: 'button clicked',
   },
 };
 
@@ -136,96 +138,96 @@ interface TabsTemplateArgs {
   position: Position;
 }
 
-const TabsTemplate: Story<TabsTemplateArgs> = ({
-  // eslint-disable-next-line react/prop-types
-  title,
-  // eslint-disable-next-line react/prop-types
-  tooltipPosition,
-  // eslint-disable-next-line react/prop-types
-  disabled,
-  // eslint-disable-next-line react/prop-types
-  buttonOnClick,
-  // eslint-disable-next-line react/prop-types
-  label,
-  // eslint-disable-next-line react/prop-types
-  selected,
-  // eslint-disable-next-line react/prop-types
-  main,
-  // eslint-disable-next-line react/prop-types
-  tabsOnClick,
-  // eslint-disable-next-line react/prop-types
-  collapsible,
-  // eslint-disable-next-line react/prop-types
-  position,
-  // eslint-disable-next-line react/prop-types
-}) => (
-  <Container>
-    <Toolbar>
-      <Button
-        title={title}
-        tooltipPosition={tooltipPosition}
-        disabled={disabled}
-        onClick={buttonOnClick}
-      >
-        {label}
-      </Button>
-      <TabsComponent
-        tabs={simple10Tabs}
-        selected={selected}
-        main={main}
-        onClick={tabsOnClick}
-        collapsible={collapsible}
-        position={position}
-      />
-      <Button
-        title={title}
-        tooltipPosition={tooltipPosition}
-        disabled={disabled}
-        onClick={buttonOnClick}
-      >
-        {label}
-      </Button>
-    </Toolbar>
-  </Container>
-);
-
-export const Tabs = TabsTemplate.bind({});
-Tabs.args = {
-  title: 'Hello Tooltip',
-  tooltipPosition: 'top',
-  disabled: false,
-  label: 'Hello Button',
-  selected: '2',
-  main: true,
-  collapsible: true,
-  position: 'center',
-};
-Tabs.argTypes = {
-  tooltipPosition: {
-    control: {
-      type: 'select',
-      options: [
-        'top',
-        'bottom',
-        'left',
-        'right',
-        'bottom-left',
-        'bottom-right',
-        'top-left',
-        'top-right',
-      ],
+export const Tabs: StoryObj<TabsTemplateArgs> = {
+  render: ({
+    // eslint-disable-next-line react/prop-types
+    title,
+    // eslint-disable-next-line react/prop-types
+    tooltipPosition,
+    // eslint-disable-next-line react/prop-types
+    disabled,
+    // eslint-disable-next-line react/prop-types
+    buttonOnClick,
+    // eslint-disable-next-line react/prop-types
+    label,
+    // eslint-disable-next-line react/prop-types
+    selected,
+    // eslint-disable-next-line react/prop-types
+    main,
+    // eslint-disable-next-line react/prop-types
+    tabsOnClick,
+    // eslint-disable-next-line react/prop-types
+    collapsible,
+    // eslint-disable-next-line react/prop-types
+    position,
+    // eslint-disable-next-line react/prop-types
+  }) => (
+    <Container>
+      <Toolbar>
+        <Button
+          title={title}
+          tooltipPosition={tooltipPosition}
+          disabled={disabled}
+          onClick={buttonOnClick}
+        >
+          {label}
+        </Button>
+        <TabsComponent
+          tabs={simple10Tabs}
+          selected={selected}
+          main={main}
+          onClick={tabsOnClick}
+          collapsible={collapsible}
+          position={position}
+        />
+        <Button
+          title={title}
+          tooltipPosition={tooltipPosition}
+          disabled={disabled}
+          onClick={buttonOnClick}
+        >
+          {label}
+        </Button>
+      </Toolbar>
+    </Container>
+  ),
+  args: {
+    title: 'Hello Tooltip',
+    tooltipPosition: 'top',
+    disabled: false,
+    label: 'Hello Button',
+    selected: '2',
+    main: true,
+    collapsible: true,
+    position: 'center',
+  },
+  argTypes: {
+    tooltipPosition: {
+      control: {
+        type: 'select',
+        options: [
+          'top',
+          'bottom',
+          'left',
+          'right',
+          'bottom-left',
+          'bottom-right',
+          'top-left',
+          'top-right',
+        ],
+      },
     },
-  },
-  buttonOnClick: {
-    action: 'button clicked',
-  },
-  tabsOnClick: {
-    action: 'tab selected',
-  },
-  position: {
-    control: {
-      type: 'select',
-      options: ['left', 'right', 'center'],
+    buttonOnClick: {
+      action: 'button clicked',
+    },
+    tabsOnClick: {
+      action: 'tab selected',
+    },
+    position: {
+      control: {
+        type: 'select',
+        options: ['left', 'right', 'center'],
+      },
     },
   },
 };
@@ -246,123 +248,123 @@ interface WithSliderTemplateArgs {
   segmentedControlOnClick: (value: string) => void;
 }
 
-const WithSliderTemplate: Story<WithSliderTemplateArgs> = ({
-  // eslint-disable-next-line react/prop-types
-  title,
-  // eslint-disable-next-line react/prop-types
-  tooltipPosition,
-  // eslint-disable-next-line react/prop-types
-  playOnClick,
-  // eslint-disable-next-line react/prop-types
-  value,
-  // eslint-disable-next-line react/prop-types
-  min,
-  // eslint-disable-next-line react/prop-types
-  max,
-  // eslint-disable-next-line react/prop-types
-  label,
-  // eslint-disable-next-line react/prop-types
-  withValue,
-  // eslint-disable-next-line react/prop-types
-  onChange,
-  // eslint-disable-next-line react/prop-types
-  previousStateOnClick,
-  // eslint-disable-next-line react/prop-types
-  nextStateOnClick,
-  // eslint-disable-next-line react/prop-types
-  selected,
-  // eslint-disable-next-line react/prop-types
-  segmentedControlOnClick,
-}) => (
-  <Container>
-    <SliderContainer>
-      <Toolbar noBorder fullHeight compact>
-        <Button
-          title={title}
-          tooltipPosition={tooltipPosition}
-          onClick={playOnClick}
-        >
-          <MdPlayArrow />
-        </Button>
-        <Slider
-          value={value}
-          min={min}
-          max={max}
-          label={label}
-          withValue={withValue}
-          onChange={onChange}
-        />
-        <Button
-          title="Previous state"
-          tooltipPosition={tooltipPosition}
-          disabled
-          onClick={previousStateOnClick}
-        >
-          <MdKeyboardArrowLeft />
-        </Button>
-        <Button
-          title="Next state"
-          tooltipPosition={tooltipPosition}
-          onClick={nextStateOnClick}
-        >
-          <MdKeyboardArrowRight />
-        </Button>
-        <SegmentedControl
-          values={['live', '1x']}
-          selected={selected}
-          onClick={segmentedControlOnClick}
-        />
-      </Toolbar>
-    </SliderContainer>
-  </Container>
-);
-
-export const WithSlider = WithSliderTemplate.bind({});
-WithSlider.args = {
-  title: 'Play',
-  tooltipPosition: 'top',
-  value: 80,
-  min: 0,
-  max: 100,
-  label: 'Slider label',
-  withValue: false,
-  selected: 'live',
-};
-WithSlider.argTypes = {
-  tooltipPosition: {
-    control: {
-      type: 'select',
-      options: [
-        'top',
-        'bottom',
-        'left',
-        'right',
-        'bottom-left',
-        'bottom-right',
-        'top-left',
-        'top-right',
-      ],
+export const WithSlider: StoryObj<WithSliderTemplateArgs> = {
+  render: ({
+    // eslint-disable-next-line react/prop-types
+    title,
+    // eslint-disable-next-line react/prop-types
+    tooltipPosition,
+    // eslint-disable-next-line react/prop-types
+    playOnClick,
+    // eslint-disable-next-line react/prop-types
+    value,
+    // eslint-disable-next-line react/prop-types
+    min,
+    // eslint-disable-next-line react/prop-types
+    max,
+    // eslint-disable-next-line react/prop-types
+    label,
+    // eslint-disable-next-line react/prop-types
+    withValue,
+    // eslint-disable-next-line react/prop-types
+    onChange,
+    // eslint-disable-next-line react/prop-types
+    previousStateOnClick,
+    // eslint-disable-next-line react/prop-types
+    nextStateOnClick,
+    // eslint-disable-next-line react/prop-types
+    selected,
+    // eslint-disable-next-line react/prop-types
+    segmentedControlOnClick,
+  }) => (
+    <Container>
+      <SliderContainer>
+        <Toolbar noBorder fullHeight compact>
+          <Button
+            title={title}
+            tooltipPosition={tooltipPosition}
+            onClick={playOnClick}
+          >
+            <MdPlayArrow />
+          </Button>
+          <Slider
+            value={value}
+            min={min}
+            max={max}
+            label={label}
+            withValue={withValue}
+            onChange={onChange}
+          />
+          <Button
+            title="Previous state"
+            tooltipPosition={tooltipPosition}
+            disabled
+            onClick={previousStateOnClick}
+          >
+            <MdKeyboardArrowLeft />
+          </Button>
+          <Button
+            title="Next state"
+            tooltipPosition={tooltipPosition}
+            onClick={nextStateOnClick}
+          >
+            <MdKeyboardArrowRight />
+          </Button>
+          <SegmentedControl
+            values={['live', '1x']}
+            selected={selected}
+            onClick={segmentedControlOnClick}
+          />
+        </Toolbar>
+      </SliderContainer>
+    </Container>
+  ),
+  args: {
+    title: 'Play',
+    tooltipPosition: 'top',
+    value: 80,
+    min: 0,
+    max: 100,
+    label: 'Slider label',
+    withValue: false,
+    selected: 'live',
+  },
+  argTypes: {
+    tooltipPosition: {
+      control: {
+        type: 'select',
+        options: [
+          'top',
+          'bottom',
+          'left',
+          'right',
+          'bottom-left',
+          'bottom-right',
+          'top-left',
+          'top-right',
+        ],
+      },
+    },
+    playOnClick: {
+      action: 'button clicked',
+    },
+    onChange: {
+      action: 'slider changed',
+    },
+    previousStateOnClick: {
+      action: 'previous state clicked',
+    },
+    nextStateOnClick: {
+      action: 'next state clicked',
+    },
+    selected: {
+      control: {
+        type: 'select',
+        options: ['live', '1x'],
+      },
+    },
+    segmentedControlOnClick: {
+      action: 'button selected',
     },
   },
-  playOnClick: {
-    action: 'button clicked',
-  },
-  onChange: {
-    action: 'slider changed',
-  },
-  previousStateOnClick: {
-    action: 'previous state clicked',
-  },
-  nextStateOnClick: {
-    action: 'next state clicked',
-  },
-  selected: {
-    control: {
-      type: 'select',
-      options: ['live', '1x'],
-    },
-  },
-  segmentedControlOnClick: {
-    action: 'button selected',
-  },
 };