Upgrade to Storybook 7 (#1386)

* Migrate * Config updates * Remove * No require-from-string * Update lock file * Fix types * Doesn't work * Update to CSF3
2024-11-22 09:36:43 +03:00 · 2023-04-06 21:39:14 -04:00 · 2023-04-06 21:39:14 -04:00 · c52cfbe469
commit c52cfbe469
parent 59be92a8af
17 changed files with 2460 additions and 5276 deletions
--- a/package.json
+++ b/package.json
@ -43,12 +43,6 @@
  "pnpm": {
    "overrides": {
      "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
-    },
-    "peerDependencyRules": {
-      "allowedVersions": {
-        "react": "18",
-        "react-dom": "18"
-      }
    }
  }
 }
--- a/packages/redux-devtools-ui/.storybook/main.js
+++ b/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,
-      },
-    },
-  ],
-};
--- a/packages/redux-devtools-ui/.storybook/main.ts
+++ b/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;
--- a/packages/redux-devtools-ui/.storybook/preview.tsx
+++ b/packages/redux-devtools-ui/.storybook/preview.tsx
@ -1,12 +1,26 @@
 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].*' },
-};
+const withThemeProvider = (Story, context) => (
+  <Container
+    themeData={{
+      theme: context.globals.theme,
+      scheme: context.globals.scheme,
+      colorPreference: context.globals.color,
+    }}
+  >
+    <Story {...context} />
+  </Container>
+);

-export const globalTypes = {
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+  },
+  globalTypes: {
    theme: {
      name: 'Theme',
      description: 'Global theme for components',
@ -34,17 +48,8 @@ export const globalTypes = {
        showName: true,
      },
    },
+  },
+  decorators: [withThemeProvider],
 };

-const withThemeProvider = (Story, context) => (
-  <Container
-    themeData={{
-      theme: context.globals.theme,
-      scheme: context.globals.scheme,
-      colorPreference: context.globals.color,
-    }}
-  >
-    <Story {...context} />
-  </Container>
-);
-export const decorators = [withThemeProvider];
+export default preview;
--- a/packages/redux-devtools-ui/package.json
+++ b/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",
--- a/packages/redux-devtools-ui/src/Button/Button.stories.tsx
+++ b/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) => (
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  render: (args) => (
    <Container>
      <Button {...args} />
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    title: 'Hello Tooltip! \\a And from new line hello!',
    tooltipPosition: 'top',
    primary: true,
    size: 'normal',
    disabled: false,
    children: 'Hello Button',
-};
-Default.argTypes = {
+  },
+  argTypes: {
    onClick: { control: { disable: true } },
    type: { control: { disable: true } },
    mark: { control: { disable: true } },
    theme: { control: { disable: true } },
+  },
 };

-export const Mark = Template.bind({});
-Mark.args = {
+export const Mark: Story = {
+  render: Default.render,
+  args: {
    mark: 'base08',
    title: 'Hello Tooltip',
    tooltipPosition: 'top',
    size: 'normal',
    disabled: false,
    children: <MdFiberManualRecord />,
-};
-Mark.argTypes = {
+  },
+  argTypes: {
    children: { control: { disable: true } },
    onClick: { control: { disable: true } },
    type: { control: { disable: true } },
    primary: { control: { disable: true } },
    theme: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx
+++ b/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) => (
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Default: Story = {
+  render: (args) => (
    <Container>
      <ContextMenu {...args} />
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    visible: true,
    x: 100,
    y: 100,
    items,
-};
-Default.argTypes = {
+  },
+  argTypes: {
    visible: { control: { disable: true } },
    items: { control: { disable: true } },
    onClick: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx
+++ b/packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx
@ -1,21 +1,19 @@
 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 = {
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  args: {
    title: 'Dialog Title',
    submitText: 'Submit!',
    open: true,
@ -24,16 +22,17 @@ Default.args = {
    modal: false,
    fullWidth: false,
    children: 'Hello Dialog!',
-};
-Default.argTypes = {
+  },
+  argTypes: {
    actions: { control: { disable: true } },
    onDismiss: { control: { disable: true } },
    onSubmit: { control: { disable: true } },
    theme: { control: { disable: true } },
+  },
 };

-export const WithForm = Template.bind({});
-WithForm.args = {
+export const WithForm: Story = {
+  args: {
    open: true,
    noHeader: false,
    noFooter: false,
@ -42,8 +41,8 @@ WithForm.args = {
    formData,
    schema,
    uiSchema,
-};
-WithForm.argTypes = {
+  },
+  argTypes: {
    title: { control: { disable: true } },
    children: { control: { disable: true } },
    actions: { control: { disable: true } },
@ -51,4 +50,5 @@ WithForm.argTypes = {
    onDismiss: { control: { disable: true } },
    onSubmit: { control: { disable: true } },
    theme: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx
+++ b/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,39 +11,39 @@ 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 = {
+type Story = StoryObj<typeof Editor>;
+
+export const Default: Story = {
+  args: {
    value,
    lineNumbers: true,
    lineWrapping: false,
    foldGutter: true,
    readOnly: false,
    autofocus: true,
-};
-Default.argTypes = {
+  },
+  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 = {
+export const WithTabs: StoryObj<WithTabsProps> = {
+  render: (args) => <WithTabsComponent {...args} />,
+  args: {
    lineNumbers: true,
    position: 'left',
-};
-WithTabs.argTypes = {
+  },
+  argTypes: {
    value: { control: { disable: true } },
    mode: { control: { disable: true } },
    lineWrapping: { control: { disable: true } },
@ -53,4 +52,5 @@ WithTabs.argTypes = {
    foldGutter: { control: { disable: true } },
    autofocus: { control: { disable: true } },
    onChange: { control: { disable: true } },
-} as any;
+  } as any,
+};
--- a/packages/redux-devtools-ui/src/Form/Form.stories.tsx
+++ b/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 = {
+type Story = StoryObj<typeof Form>;
+
+export const Default: Story = {
+  args: {
    formData,
    schema,
    uiSchema,
    submitText: 'Submit',
-};
-Default.argTypes = {
+  },
+  argTypes: {
    children: { control: { disable: true } },
    primaryButton: { control: { disable: true } },
    noSubmit: { control: { disable: true } },
    widgets: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx
+++ b/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) => (
+export default meta;
+
+type Story = StoryObj<typeof Notification>;
+
+export const Default: Story = {
+  render: (args) => (
    <Container>
      <Notification {...args} />
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    type: 'warning',
    children: 'Hello Notification',
-};
-Default.argTypes = {
+  },
+  argTypes: {
    onClose: { control: { disable: true } },
    theme: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
+++ b/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 }) => (
+export default meta;
+
+type Story = StoryObj<typeof SegmentedControl>;
+
+export const Default: Story = {
+  render: ({ values, ...args }) => (
    <Container>
      <SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    selected: 'Button1',
    disabled: false,
-};
-Default.argTypes = {
+  },
+  argTypes: {
    values: { control: { disable: true } },
    onClick: { control: { disable: true } },
    theme: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/Select/Select.stories.tsx
+++ b/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,18 +16,17 @@ 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 }) => (
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: ({ value, ...args }) => (
    <Container>
      <Select
        options={options}
@ -36,10 +34,8 @@ const Template: Story<TemplateArgs> = ({ value, ...args }) => (
        {...args}
      />
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    value: 'one',
    maxMenuHeight: 300,
    isClearable: false,
@ -48,9 +44,10 @@ Default.args = {
    isMulti: false,
    isSearchable: true,
    menuPlacement: 'bottom',
-};
-Default.argTypes = {
+  },
+  argTypes: {
    onChange: {
      action: 'selected',
    },
+  },
 };
--- a/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx
+++ b/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,19 +11,22 @@ const Container = styled.div`
  align-items: center;
 `;

-export default {
+const meta: Meta = {
  title: 'Slider',
  component: Slider,
 };

-const Template: Story<SliderProps> = (args) => (
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  render: (args) => (
    <Container>
      <Slider {...args} />
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    value: 0,
    min: 0,
    max: 100,
@ -32,8 +34,9 @@ Default.args = {
    sublabel: '(sublabel}',
    withValue: false,
    disabled: false,
-};
-Default.argTypes = {
+  },
+  argTypes: {
    onChange: { control: { disable: true } },
    theme: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx
+++ b/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) => (
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: (args) => (
    <Container>
      <Tabs {...args} />
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    tabs: simple10Tabs,
    selected: '2',
    main: true,
    collapsible: true,
    position: 'left',
-};
-Default.argTypes = {
+  },
+  argTypes: {
    tabs: { control: { disable: true } },
    onClick: { control: { disable: true } },
+  },
 };

-export const WithContent = (
-  Template as Story<TabsProps<{ selected: string }>>
-).bind({});
-WithContent.args = {
+export const WithContext: StoryObj<TabsProps<{ selected: string }>> = {
+  render: (args) => (
+    <Container>
+      <Tabs {...args} />
+    </Container>
+  ),
+  args: {
    tabs,
    selected: 'Tab2',
    main: false,
    collapsible: false,
    position: 'left',
-};
-WithContent.argTypes = {
+  },
+  argTypes: {
    tabs: { control: { disable: true } },
    onClick: { control: { disable: true } },
+  },
 };
--- a/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx
+++ b/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,7 +50,8 @@ interface TemplateArgs {
  label: ReactNode;
 }

-const Template: Story<TemplateArgs> = ({
+export const Default: StoryObj<TemplateArgs> = {
+  render: ({
    // eslint-disable-next-line react/prop-types
    borderPosition,
    // eslint-disable-next-line react/prop-types
@ -61,7 +64,7 @@ const Template: Story<TemplateArgs> = ({
    onClick,
    // eslint-disable-next-line react/prop-types
    label,
-}) => (
+  }) => (
    <Container>
      <Toolbar borderPosition={borderPosition}>
        <Button
@ -86,17 +89,15 @@ const Template: Story<TemplateArgs> = ({
        <Select options={options} />
      </Toolbar>
    </Container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
+  ),
+  args: {
    borderPosition: 'top',
    title: 'Hello Tooltip',
    tooltipPosition: 'top',
    disabled: false,
    label: 'Hello Button',
-};
-Default.argTypes = {
+  },
+  argTypes: {
    borderPosition: {
      control: {
        type: 'select',
@ -121,6 +122,7 @@ Default.argTypes = {
    onClick: {
      action: 'button clicked',
    },
+  },
 };

 interface TabsTemplateArgs {
@ -136,7 +138,8 @@ interface TabsTemplateArgs {
  position: Position;
 }

-const TabsTemplate: Story<TabsTemplateArgs> = ({
+export const Tabs: StoryObj<TabsTemplateArgs> = {
+  render: ({
    // eslint-disable-next-line react/prop-types
    title,
    // eslint-disable-next-line react/prop-types
@ -158,7 +161,7 @@ const TabsTemplate: Story<TabsTemplateArgs> = ({
    // eslint-disable-next-line react/prop-types
    position,
    // eslint-disable-next-line react/prop-types
-}) => (
+  }) => (
    <Container>
      <Toolbar>
        <Button
@ -187,10 +190,8 @@ const TabsTemplate: Story<TabsTemplateArgs> = ({
        </Button>
      </Toolbar>
    </Container>
-);
-
-export const Tabs = TabsTemplate.bind({});
-Tabs.args = {
+  ),
+  args: {
    title: 'Hello Tooltip',
    tooltipPosition: 'top',
    disabled: false,
@ -199,8 +200,8 @@ Tabs.args = {
    main: true,
    collapsible: true,
    position: 'center',
-};
-Tabs.argTypes = {
+  },
+  argTypes: {
    tooltipPosition: {
      control: {
        type: 'select',
@ -228,6 +229,7 @@ Tabs.argTypes = {
        options: ['left', 'right', 'center'],
      },
    },
+  },
 };

 interface WithSliderTemplateArgs {
@ -246,7 +248,8 @@ interface WithSliderTemplateArgs {
  segmentedControlOnClick: (value: string) => void;
 }

-const WithSliderTemplate: Story<WithSliderTemplateArgs> = ({
+export const WithSlider: StoryObj<WithSliderTemplateArgs> = {
+  render: ({
    // eslint-disable-next-line react/prop-types
    title,
    // eslint-disable-next-line react/prop-types
@ -273,7 +276,7 @@ const WithSliderTemplate: Story<WithSliderTemplateArgs> = ({
    selected,
    // eslint-disable-next-line react/prop-types
    segmentedControlOnClick,
-}) => (
+  }) => (
    <Container>
      <SliderContainer>
        <Toolbar noBorder fullHeight compact>
@ -315,10 +318,8 @@ const WithSliderTemplate: Story<WithSliderTemplateArgs> = ({
        </Toolbar>
      </SliderContainer>
    </Container>
-);
-
-export const WithSlider = WithSliderTemplate.bind({});
-WithSlider.args = {
+  ),
+  args: {
    title: 'Play',
    tooltipPosition: 'top',
    value: 80,
@ -327,8 +328,8 @@ WithSlider.args = {
    label: 'Slider label',
    withValue: false,
    selected: 'live',
-};
-WithSlider.argTypes = {
+  },
+  argTypes: {
    tooltipPosition: {
      control: {
        type: 'select',
@ -365,4 +366,5 @@ WithSlider.argTypes = {
    segmentedControlOnClick: {
      action: 'button selected',
    },
+  },
 };
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml