chore: upgrade to storybook 7

.storybook/main.js

@@ -1,20 +1,23 @@
 const webpackCommon = require('../webpack.common');
 
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-links',
-    'storybook-css-modules',
     '@storybook/addon-a11y',
     'storybook-addon-rtl',
   ],
+
   staticDirs: ['../public/assets'],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
   },
+
   typescript: {
     check: false,
     checkOptions: {},
@@ -25,6 +28,7 @@ module.exports = {
         prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
+
   webpackFinal: async (config, { configType }) => {
     const webpackCommonConfig = webpackCommon(
       {},
@@ -40,4 +44,8 @@ module.exports = {
       },
     };
   },
+
+  docs: {
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -1,2 +1,2 @@
-import { initializeRTL } from 'storybook-addon-rtl';
-initializeRTL();
+// import { initializeRTL } from 'storybook-addon-rtl';
+// initializeRTL();

package.json

@@ -33,8 +33,8 @@
     "url": "https://github.com/EightfoldAI/octuple"
   },
   "scripts": {
-    "storybook": "start-storybook -p 2022",
-    "build-storybook": "rm -rf storybook-static && mkdir storybook-static && build-storybook -o storybook-static",
+    "storybook": "storybook dev -p 2022",
+    "build-storybook": "rm -rf storybook-static && mkdir storybook-static && storybook build -o storybook-static",
     "build": "rm -rf lib && yarn lint && rollup -c",
     "build:webpack": "rm -rf lib && yarn lint && webpack --config webpack.prod.js --mode production",
     "details": "webpack --config webpack.dev.js --mode development --stats-error-details",
@@ -111,23 +111,21 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.6",
-    "@storybook/addon-a11y": "6.5.13",
-    "@storybook/addon-actions": "6.5.13",
-    "@storybook/addon-docs": "6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addon-interactions": "6.5.13",
-    "@storybook/addon-links": "6.5.13",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.13",
-    "@storybook/addon-viewport": "6.5.13",
-    "@storybook/addons": "6.5.13",
-    "@storybook/builder-webpack5": "6.5.13",
-    "@storybook/manager-webpack5": "6.5.13",
-    "@storybook/node-logger": "6.5.13",
+    "@storybook/addon-a11y": "7.6.20",
+    "@storybook/addon-actions": "7.6.20",
+    "@storybook/addon-docs": "7.6.20",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-interactions": "7.6.20",
+    "@storybook/addon-links": "7.6.20",
+    "@storybook/addon-storyshots": "7.6.20",
+    "@storybook/addon-viewport": "7.6.20",
+    "@storybook/addons": "7.6.20",
+    "@storybook/node-logger": "7.6.20",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.13",
-    "@storybook/source-loader": "6.5.13",
-    "@storybook/theming": "6.5.13",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/source-loader": "7.6.20",
+    "@storybook/theming": "7.6.20",
     "@svgr/webpack": "6.3.1",
     "@teamsupercell/typings-for-css-modules-loader": "2.5.1",
     "@testing-library/jest-dom": "5.16.2",
@@ -220,9 +218,9 @@
     "sinon": "14.0.1",
     "source-map-loader": "3.0.0",
     "standard-version": "9.5.0",
+    "storybook": "7.6.20",
     "storybook-addon-rtl": "0.4.3",
     "storybook-addon-state": "1.0.3",
-    "storybook-css-modules": "1.0.5",
     "style-loader": "3.3.1",
     "style-resources-loader": "1.5.0",
     "terser-webpack-plugin": "5.2.5",

src/components/Accordion/Accordion.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Accordion, AccordionProps, AccordionSize, AccordionShape } from './';
 import { Button, ButtonShape, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
@@ -60,7 +60,7 @@ export default {
       control: 'select',
     },
   },
-} as ComponentMeta<typeof Accordion>;
+} as Meta<typeof Accordion>;
 
 const listItems: AccordionProps[] = [
   {
@@ -98,15 +98,15 @@ const buttons = [0, 1].map((i) => ({
   variant: i === 0 ? ButtonVariant.Neutral : ButtonVariant.Secondary,
 }));
 
-const Single_Story: ComponentStory<typeof Accordion> = (args) => (
+const Single_Story: StoryFn<typeof Accordion> = (args) => (
   <Accordion {...args} />
 );
 
 interface ListStoryArgs {
   items: AccordionProps[];
   theme?: OcThemeName;
 }
-const List_Story: ComponentStory<typeof List> = (args: ListStoryArgs) => {
+const List_Story: StoryFn<typeof List> = (args: ListStoryArgs) => {
   const { theme, ...restProps } = args;
 
   return (
@@ -119,7 +119,7 @@ const List_Story: ComponentStory<typeof List> = (args: ListStoryArgs) => {
   );
 };
 
-const Custom_Story: ComponentStory<typeof Accordion> = (args) => (
+const Custom_Story: StoryFn<typeof Accordion> = (args) => (
   <Accordion {...args} />
 );
 

src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { IconName } from '../Icon';
 import {
   Avatar,
@@ -40,30 +40,28 @@ export default {
       control: { type: 'inline-radio' },
     },
   },
-} as ComponentMeta<typeof Avatar>;
+} as Meta<typeof Avatar>;
 
 const imageProps = {
   src: 'https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg',
   alt: 'random profile image',
 };
 
-const Avatar_Story: ComponentStory<typeof Avatar> = (args) => (
-  <Avatar {...args} />
-);
+const Avatar_Story: StoryFn<typeof Avatar> = (args) => <Avatar {...args} />;
 
-const Avatar_Round_Story: ComponentStory<typeof Avatar> = (args) => (
+const Avatar_Round_Story: StoryFn<typeof Avatar> = (args) => (
   <Avatar popupProps={{ content: 'A popup' }} {...args} />
 );
 
-const Avatar_Fallback_Theme_Story: ComponentStory<typeof Avatar> = (args) => (
+const Avatar_Fallback_Theme_Story: StoryFn<typeof Avatar> = (args) => (
   <Avatar {...args} theme="green" />
 );
 
-const Avatar_Fallback_Hashing_Story: ComponentStory<typeof Avatar> = (args) => (
+const Avatar_Fallback_Hashing_Story: StoryFn<typeof Avatar> = (args) => (
   <Avatar {...args} hashingFunction={() => 3} />
 );
 
-const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
+const Avatar_StatusItem_Story: StoryFn<typeof Avatar> = (args) => {
   const avatarSize = 100;
   const [statusItemSize] = getStatusItemSizeAndPadding(avatarSize);
   args.size = `${avatarSize}px`;
@@ -210,7 +208,7 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
   );
 };
 
-const Avatar_Tooltip_Story: ComponentStory<typeof Avatar> = (args) => (
+const Avatar_Tooltip_Story: StoryFn<typeof Avatar> = (args) => (
   <Avatar {...args} theme="red" />
 );
 

src/components/Avatar/AvatarGroup.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Avatar, AvatarGroup, AvatarGroupVariant, AvatarPopupProps } from '.';
 import { TooltipSize, TooltipTheme } from '../Tooltip';
 
@@ -33,7 +33,7 @@ export default {
       control: { type: 'inline-radio' },
     },
   },
-} as ComponentMeta<typeof AvatarGroup>;
+} as Meta<typeof AvatarGroup>;
 
 const imageProps = {
   src: 'https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg',
@@ -70,7 +70,7 @@ const sampleList: User[] = [
   randomiseTheme: true,
 }));
 
-const Basic_Story: ComponentStory<typeof AvatarGroup> = (args) => (
+const Basic_Story: StoryFn<typeof AvatarGroup> = (args) => (
   <AvatarGroup
     animateOnHover
     maxProps={{
@@ -198,7 +198,7 @@ const Basic_Story: ComponentStory<typeof AvatarGroup> = (args) => (
   </AvatarGroup>
 );
 
-const List_Story: ComponentStory<typeof AvatarGroup> = (args) => (
+const List_Story: StoryFn<typeof AvatarGroup> = (args) => (
   <AvatarGroup
     animateOnHover
     avatarListProps={{

src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Badge, BadgeSize } from './';
 import { Popup, PopupTheme } from '../Popup';
 
@@ -33,10 +33,10 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;
 
-const Badge_Story: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
-const Badge_Popup_Story: ComponentStory<typeof Badge> = (args) => (
+const Badge_Story: StoryFn<typeof Badge> = (args) => <Badge {...args} />;
+const Badge_Popup_Story: StoryFn<typeof Badge> = (args) => (
   <Popup
     content={
       <div

src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Breadcrumb } from './';
 import { IconName } from '../Icon';
 import { Link } from '../Link';
@@ -54,9 +54,9 @@ export default {
       control: 'select',
     },
   },
-} as ComponentMeta<typeof Breadcrumb>;
+} as Meta<typeof Breadcrumb>;
 
-const Breadcrumb_Story: ComponentStory<typeof Breadcrumb> = (args) => (
+const Breadcrumb_Story: StoryFn<typeof Breadcrumb> = (args) => (
   <Breadcrumb {...args} />
 );
 

src/components/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
   Button,
   ButtonIconAlign,
@@ -179,11 +179,9 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-const Button_Story: ComponentStory<typeof Button> = (args) => (
-  <Button {...args} />
-);
+const Button_Story: StoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Button_Story.bind({});
 export const Counter = Button_Story.bind({});

src/components/Button/TwoStateButton/TwoStateButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
   Button,
   ButtonShape,
@@ -56,11 +56,11 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-const Two_State_Button_Story: ComponentStory<typeof TwoStateButton> = (
-  args
-) => <TwoStateButton {...args} />;
+const Two_State_Button_Story: StoryFn<typeof TwoStateButton> = (args) => (
+  <TwoStateButton {...args} />
+);
 
 export const Two_State_Button = Two_State_Button_Story.bind({});
 

src/components/Card/Card.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Card, CardSize } from './';
 import { IconName } from '../Icon';
 import { Avatar } from '../Avatar';
@@ -35,9 +35,9 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as ComponentMeta<typeof Card>;
+} as Meta<typeof Card>;
 
-const Card_Story: ComponentStory<typeof Card> = (args) => <Card {...args} />;
+const Card_Story: StoryFn<typeof Card> = (args) => <Card {...args} />;
 
 export const CustomCard = Card_Story.bind({});
 

src/components/Carousel/Carousel.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
   autoScrollApiType,
   Carousel,
@@ -68,9 +68,9 @@ export default {
       control: 'select',
     },
   },
-} as ComponentMeta<typeof Carousel>;
+} as Meta<typeof Carousel>;
 
-const Slide_Story: ComponentStory<typeof Carousel> = (args) => (
+const Slide_Story: StoryFn<typeof Carousel> = (args) => (
   <Carousel {...args}>
     <Slide>
       <div
@@ -121,9 +121,7 @@ const sampleList: SampleItem[] = [1, 2, 3, 4, 5, 6, 7, 8].map((i) => ({
   key: `key-${i}`,
 }));
 
-const Scroll_Story: ComponentStory<typeof Carousel> = (args) => (
-  <Carousel {...args} />
-);
+const Scroll_Story: StoryFn<typeof Carousel> = (args) => <Carousel {...args} />;
 
 type scrollVisibilityApiType = React.ContextType<typeof VisibilityContext>;
 
@@ -147,7 +145,7 @@ const onWheel = (
   }
 };
 
-const Scroll_Custom_Buttons_Story: ComponentStory<typeof Carousel> = (args) => {
+const Scroll_Custom_Buttons_Story: StoryFn<typeof Carousel> = (args) => {
   const htmlDir: string = useCanvasDirection();
   const apiRef: React.MutableRefObject<autoScrollApiType> = useRef(
     {} as scrollVisibilityApiType