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,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 = {
+const withThemeProvider = (Story, context) => (
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  <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) => (
+export default preview;
-  <Container
-    themeData={{
-      theme: context.globals.theme,
-      scheme: context.globals.scheme,
-      colorPreference: context.globals.color,
-    }}
-  >
-    <Story {...context} />
-  </Container>
-);
-export const decorators = [withThemeProvider];

packages/redux-devtools-ui/package.json

@@ -25,8 +25,8 @@
   },
   "scripts": {
     "start": "pnpm run storybook",
-    "storybook": "start-storybook --port 6006 --static-dir ./fonts",
+    "storybook": "storybook dev --port 6006 --static-dir ./fonts",
-    "build:storybook": "build-storybook --static-dir ./fonts --quiet",
+    "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/addon-essentials": "^7.0.2",
-    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/addon-interactions": "^7.0.2",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/addon-links": "^7.0.2",
-    "@storybook/react": "^6.5.16",
+    "@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) => (
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  render: (args) => (
     <Container>
       <Button {...args} />
     </Container>
-);
+  ),
-
+  args: {
-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 = {
+  argTypes: {
     onClick: { control: { disable: true } },
     type: { control: { disable: true } },
     mark: { control: { disable: true } },
     theme: { control: { disable: true } },
+  },
 };
 
-export const Mark = Template.bind({});
+export const Mark: Story = {
-Mark.args = {
+  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 } },
+  },
 };

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>
-);
+  ),
-
+  args: {
-export const Default = Template.bind({});
-Default.args = {
     visible: true,
     x: 100,
     y: 100,
     items,
-};
+  },
-Default.argTypes = {
+  argTypes: {
     visible: { control: { disable: true } },
     items: { control: { disable: true } },
     onClick: { control: { disable: true } },
+  },
 };

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>)> = (
+export default meta;
-  args
-) => <Dialog {...args} />;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof Dialog>;
-Default.args = {
+
+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({});
+export const WithForm: Story = {
-WithForm.args = {
+  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 } },
+  },
 };

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({});
+type Story = StoryObj<typeof Editor>;
-Default.args = {
+
+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) => (
+export const WithTabs: StoryObj<WithTabsProps> = {
-  <WithTabsComponent {...args} />
+  render: (args) => <WithTabsComponent {...args} />,
-);
+  args: {
-
-export const WithTabs = WithTabsTemplate.bind({});
-WithTabs.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,
+};

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({});
+type Story = StoryObj<typeof Form>;
-Default.args = {
+
+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 } },
+  },
 };

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>
-);
+  ),
-
+  args: {
-export const Default = Template.bind({});
-Default.args = {
     type: 'warning',
     children: 'Hello Notification',
-};
+  },
-Default.argTypes = {
+  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
+export default meta;
-const Template: Story<SegmentedControlProps> = ({ values, ...args }) => (
+
+type Story = StoryObj<typeof SegmentedControl>;
+
+export const Default: Story = {
+  render: ({ values, ...args }) => (
     <Container>
       <SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
     </Container>
-);
+  ),
-
+  args: {
-export const Default = Template.bind({});
-Default.args = {
     selected: 'Button1',
     disabled: false,
-};
+  },
-Default.argTypes = {
+  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 { Meta, StoryObj } from '@storybook/react';
-import { SelectProps } from './Select';
 
 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<
+export default meta;
-  SelectProps<{ value: string; label: string }, boolean>,
-  'value'
-> & { value: string };
 
-// eslint-disable-next-line react/prop-types
+type Story = StoryObj<typeof Select>;
-const Template: Story<TemplateArgs> = ({ value, ...args }) => (
+
+export const Default: Story = {
+  render: ({ value, ...args }) => (
     <Container>
       <Select
         options={options}
@@ -36,10 +34,8 @@ const Template: Story<TemplateArgs> = ({ value, ...args }) => (
         {...args}
       />
     </Container>
-);
+  ),
-
+  args: {
-export const Default = Template.bind({});
-Default.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',
     },
+  },
 };

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>
-);
+  ),
-
+  args: {
-export const Default = Template.bind({});
-Default.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 } },
+  },
 };

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>
-);
+  ),
-
+  args: {
-export const Default = Template.bind({});
-Default.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 = (
+export const WithContext: StoryObj<TabsProps<{ selected: string }>> = {
-  Template as Story<TabsProps<{ selected: string }>>
+  render: (args) => (
-).bind({});
+    <Container>
-WithContent.args = {
+      <Tabs {...args} />
+    </Container>
+  ),
+  args: {
     tabs,
     selected: 'Tab2',
     main: false,
     collapsible: false,
     position: 'left',
-};
+  },
-WithContent.argTypes = {
+  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,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
@@ -86,17 +89,15 @@ const Template: Story<TemplateArgs> = ({
         <Select options={options} />
       </Toolbar>
     </Container>
-);
+  ),
-
+  args: {
-export const Default = Template.bind({});
-Default.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
@@ -187,10 +190,8 @@ const TabsTemplate: Story<TabsTemplateArgs> = ({
         </Button>
       </Toolbar>
     </Container>
-);
+  ),
-
+  args: {
-export const Tabs = TabsTemplate.bind({});
-Tabs.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
@@ -315,10 +318,8 @@ const WithSliderTemplate: Story<WithSliderTemplateArgs> = ({
         </Toolbar>
       </SliderContainer>
     </Container>
-);
+  ),
-
+  args: {
-export const WithSlider = WithSliderTemplate.bind({});
-WithSlider.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',
     },
+  },
 };