[Hemdi] Storybook 7 Migration

.storybook/main.js

@@ -6,11 +6,11 @@ module.exports = {
     '@storybook/addon-interactions',
     '@storybook/addon-mdx-gfm',
   ],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
-  },
   docs: {
     autodocs: true,
   },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
 };

package.json

@@ -33,13 +33,13 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime-corejs3": "^7.19.6",
-    "@storybook/addon-actions": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-mdx-gfm": "^7.0.7",
-    "@storybook/react": "^7.0.7",
-    "@storybook/react-webpack5": "^7.0.7",
+    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-mdx-gfm": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-vite": "^7.0.18",
     "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
@@ -59,17 +59,16 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.0",
     "lerna": "^6.0.1",
     "lint-staged": "^13.0.4",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.7",
+    "storybook": "^7.0.18",
     "styled-components": "^5.3.6",
     "typescript": "^4.8.4",
     "vite": "^4.3.5"
-  },
-  "dependencies": {}
+  }
 }

packages/primitives/src/components/Dropdown/dropdown.stories.tsx

@@ -1,17 +1,17 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { Dropdown } from '.';
 
 export default {
   title: 'Primitives/DropDown',
   component: Dropdown,
-} as ComponentMeta<typeof Dropdown>;
+} as Meta<typeof Dropdown>;
 
 const handleClick = () => {
   console.log('dropdown Item click');
 };
 
-export const Default: ComponentStory<typeof Dropdown> = () => (
+export const Default: StoryFn<typeof Dropdown> = () => (
   <Dropdown>
     <Dropdown.Trigger trigger="DropDown Trigger" />
     <Dropdown.List transformOrigin="left">

packages/primitives/src/components/IntersectListener/intersectListener.stories.tsx

@@ -1,12 +1,12 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { useEffect, useState } from 'react';
 
 import { IntersectListener } from '.';
 
 export default {
   title: 'Primitives/IntersectListener',
   component: IntersectListener,
-} as ComponentMeta<typeof IntersectListener>;
+} as Meta<typeof IntersectListener>;
 
 const Card = ({ number }) => (
   <div
@@ -35,7 +35,7 @@ const datas = [
 
 const getData = (page: number) => datas[page];
 
-export const Default: ComponentStory<typeof IntersectListener> = () => {
+export const Default: StoryFn<typeof IntersectListener> = () => {
   const [page, setPage] = useState(0);
   const [elements, setElements] = useState<number[]>(getData(0));
 

packages/primitives/src/components/Tab/tab.stories.tsx

@@ -1,11 +1,11 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { Tab } from '.';
 
 export default {
   title: 'Primitives/Tab',
   component: Tab,
-} as ComponentMeta<typeof Tab>;
+} as Meta<typeof Tab>;
 
 export const Basic = () => (
   <Tab.Group defaultIndex={0}>

packages/primitives/src/components/TextArea/textArea.stories.tsx

@@ -1,14 +1,10 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { TextArea } from '.';
 
 export default {
   title: 'Primitives/TextArea',
   component: TextArea,
-} as ComponentMeta<typeof TextArea>;
+} as Meta<typeof TextArea>;
 
-const Template: ComponentStory<typeof TextArea> = (args) => (
-  <TextArea {...args} />
-);
-
-export const Default = Template.bind({});
+export const Default = {};

packages/primitives/src/components/TextInput/textInput.stories.tsx

@@ -1,14 +1,10 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { TextInput } from '.';
 
 export default {
   title: 'Primitives/TextInput',
   component: TextInput,
-} as ComponentMeta<typeof TextInput>;
+} as Meta<typeof TextInput>;
 
-const Template: ComponentStory<typeof TextInput> = (args) => (
-  <TextInput {...args} />
-);
-
-export const Default = Template.bind({});
+export const Default = {};

packages/react/src/components/Avatar/avatar.stories.tsx

@@ -1,6 +1,6 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
-import { Avatar, AvatarProps } from '.';
+import { Avatar } from '.';
 
 import { AVATARS } from '../../constants/avatar';
 import { FlexBox } from '../FlexBox';
@@ -9,6 +9,9 @@ import { Text } from '../Text';
 export default {
   title: 'React/Avatar',
   component: Avatar,
+  args: {
+    size: 'medium',
+  },
   argTypes: {
     alt: {
       control: 'text',
@@ -28,7 +31,6 @@ export default {
       table: {
         category: 'Origin Props',
       },
-      defaultValue: 'medium',
     },
     children: {
       control: 'text',
@@ -48,11 +50,7 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Avatar>;
-
-const Template: ComponentStory<typeof Avatar> = (args: AvatarProps) => (
-  <Avatar {...args} />
-);
+} as Meta<typeof Avatar>;
 
 export const Default = () => (
   <FlexBox sx={{ flexDirection: 'column', gap: 5, mb: 10 }}>
@@ -76,16 +74,18 @@ export const Default = () => (
   </FlexBox>
 );
 
-export const ImageAvatar = Template.bind({});
-ImageAvatar.args = {
-  src: AVATARS[0].src,
-  alt: AVATARS[0].name,
+export const ImageAvatar = {
+  args: {
+    src: AVATARS[0].src,
+    alt: AVATARS[0].name,
+  },
 };
 
-export const TextAvatar = Template.bind({});
-TextAvatar.args = {
-  children: 'CoStudo',
-  sx: {
-    backgroundColor: 'primary',
+export const TextAvatar = {
+  args: {
+    children: 'CoStudo',
+    sx: {
+      backgroundColor: 'primary',
+    },
   },
 };

packages/react/src/components/AvatarGroup/avatarGroup.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { AvatarGroup, AvatarGroupProps } from '.';
 
@@ -10,26 +10,32 @@ import { Text } from '../Text';
 export default {
   title: 'React/AvatarGroup',
   component: AvatarGroup,
+  args: {
+    dummyType: 'double',
+    max: 5,
+    spacing: 'small',
+    size: 'medium',
+  },
   argTypes: {
     dummyType: {
       control: 'select',
       options: ['double', 'triple', 'four'],
-      defaultValue: 'double',
+
       table: {
         category: 'Story Options',
       },
     },
     max: {
       type: 'number',
-      defaultValue: 5,
+
       table: {
         category: 'AvatarGroup Props',
       },
     },
     spacing: {
       control: 'radio',
       options: ['small', 'medium', 'large'],
-      defaultValue: 'small',
+
       table: {
         category: 'AvatarGroup Props',
       },
@@ -40,7 +46,6 @@ export default {
       table: {
         category: 'Avatar Props',
       },
-      defaultValue: 'medium',
     },
     sx: {
       control: 'object',
@@ -49,7 +54,7 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof AvatarGroup>;
+} as Meta<typeof AvatarGroup>;
 
 interface AvatarGroupStoryProps
   extends AvatarGroupProps,
@@ -126,8 +131,8 @@ export const Default = () => (
   </>
 );
 
-export const Custom: ComponentStory<
-  (props: AvatarGroupStoryProps) => JSX.Element
-> = ({ dummyType, size, sx, ...args }) => (
-  <AvatarGroup {...args} avatars={AVATARS_GROUP[dummyType]} />
-);
+export const Custom: StoryObj<(props: AvatarGroupStoryProps) => JSX.Element> = {
+  render: ({ dummyType, size, sx, ...args }) => (
+    <AvatarGroup {...args} avatars={AVATARS_GROUP[dummyType]} />
+  ),
+};

packages/react/src/components/Button/button.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { css } from 'styled-components';
 
 import { Button } from '.';
@@ -9,11 +9,7 @@ import { Text } from '../Text';
 export default {
   title: 'React/Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => (
-  <Button {...args}>Button</Button>
-);
+} as Meta<typeof Button>;
 
 export const Default = () => (
   <div
@@ -68,4 +64,12 @@ export const Default = () => (
   </div>
 );
 
-export const Custom = Template.bind({});
+export const Custom = {
+  args: {
+    type: 'button',
+    color: 'primary',
+    shape: 'rect',
+    size: 'medium',
+    variant: 'contained',
+  },
+};

packages/react/src/components/Dropdown/dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { Dropdown } from '.';
 
@@ -7,13 +7,13 @@ import { Avatar } from '../Avatar';
 export default {
   title: 'React/Dropdown',
   component: Dropdown,
-} as ComponentMeta<typeof Dropdown>;
+} as Meta<typeof Dropdown>;
 
 const handleLogoutClick = () => {
   console.log('logout clicked!');
 };
 
-export const Default: ComponentStory<typeof Dropdown> = () => (
+export const Default: StoryFn<typeof Dropdown> = () => (
   <Dropdown>
     <Dropdown.Trigger
       trigger={

packages/react/src/components/FlexBox/flexbox.stories.tsx

@@ -1,16 +1,15 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { useRef } from 'react';
 
 import { FlexBox } from '.';
 
 export default {
   title: 'React/FlexBox',
   component: FlexBox,
-} as ComponentMeta<typeof FlexBox>;
+} as Meta<typeof FlexBox>;
 
-export const Default: ComponentStory<typeof FlexBox> = (args) => {
+const Template = (args) => {
   const ref = useRef<HTMLUListElement>(null);
-
   return (
     <FlexBox
       as="ul"
@@ -30,3 +29,7 @@ export const Default: ComponentStory<typeof FlexBox> = (args) => {
     </FlexBox>
   );
 };
+
+export const Default = {
+  render: Template,
+};