Update to CSF3

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',
     },
+  },
 };