chore: upgrade storybook

.cspell.json

@@ -503,7 +503,11 @@
     "springboot",
     "errmsg",
     "shelljs",
-    "prefiltering"
+    "prefiltering",
+    "autodocs",
+    "stackalt",
+    "mediumdark",
+    "Docgen"
   ],
   "flagWords": [],
   "patterns": [

apps/web/.storybook/main.js

@@ -1,13 +1,23 @@
+import { dirname, join } from "path";
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    // '@storybook/preset-create-react-app',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    'storybook-dark-mode',
-  ],
-  framework: '@storybook/react',
+
+  addons: [getAbsolutePath("@storybook/addon-links"), getAbsolutePath("@storybook/addon-essentials"), getAbsolutePath("storybook-dark-mode"), getAbsolutePath("@storybook/addon-mdx-gfm")],
+
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {}
+  },
+
   features: {
     emotionAlias: false,
   },
+
+  docs: {
+    autodocs: true
+  }
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

apps/web/package.json

@@ -18,8 +18,8 @@
     "cypress:open": "cross-env NODE_ENV=test cypress open",
     "cypress:run:components": "cross-env NODE_OPTIONS=--max_old_space_size=4096 NODE_ENV=test cypress run --component",
     "start:api": "cd ../../ && pnpm start:api:test",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006 -s public",
+    "build-storybook": "storybook build -s public",
     "lint": "eslint src",
     "lint:fix": "pnpm lint -- --fix"
   },
@@ -54,8 +54,8 @@
     "@segment/analytics-next": "^1.48.0",
     "@sentry/react": "^7.40.0",
     "@sentry/tracing": "^7.40.0",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addon-docs": "^7.4.2",
+    "@storybook/theming": "^7.4.2",
     "@tanstack/react-query": "^4.20.4",
     "@tanstack/react-query-devtools": "^4.20.4",
     "@testing-library/react": "^11.1.0",
@@ -113,7 +113,7 @@
     "react-use-intercom": "^2.0.0",
     "rimraf": "^3.0.2",
     "slugify": "^1.4.6",
-    "storybook-dark-mode": "^1.0.8",
+    "storybook-dark-mode": "^3.0.1",
     "typescript": "4.9.5",
     "uniqid": "^5.3.0",
     "uuid": "8.3.2",
@@ -129,12 +129,14 @@
     "@babel/runtime": "^7.20.13",
     "@novu/dal": "^0.19.0",
     "@novu/testing": "^0.19.0",
-    "@storybook/addon-actions": "^6.4.14",
-    "@storybook/addon-essentials": "^6.4.14",
-    "@storybook/addon-links": "^6.4.14",
-    "@storybook/node-logger": "^6.4.14",
-    "@storybook/preset-create-react-app": "^4.1.0",
-    "@storybook/react": "^6.4.21",
+    "@storybook/addon-actions": "^7.4.2",
+    "@storybook/addon-essentials": "^7.4.2",
+    "@storybook/addon-links": "^7.4.2",
+    "@storybook/addon-mdx-gfm": "^7.4.2",
+    "@storybook/node-logger": "^7.4.2",
+    "@storybook/preset-create-react-app": "^7.4.2",
+    "@storybook/react": "^7.4.2",
+    "@storybook/react-webpack5": "^7.4.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@types/react": "^17.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
@@ -143,11 +145,13 @@
     "cypress-network-idle": "^1.11.2",
     "cypress-wait-until": "^1.7.2",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-storybook": "^0.6.13",
     "http-server": "^0.13.0",
     "less-loader": "4.1.0",
     "nodemon": "^2.0.15",
     "react-error-overlay": "6.0.11",
     "react-joyride": "^2.5.3",
+    "storybook": "^7.4.2",
     "typescript": "4.9.5",
     "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.9.0"

apps/web/src/design-system/button/Button.stories.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Group } from '@mantine/core';
 import { Button } from './Button';
 
 export default {
   title: 'Components/Button',
   component: Button,
   argTypes: {},
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = ({ ...args }) => <Button {...args}>Click Me</Button>;
+const Template: StoryFn<typeof Button> = ({ ...args }) => <Button {...args}>Click Me</Button>;
 
 export const Default = Template.bind({});
 Default.args = {};

apps/web/src/design-system/checkbox/Checkbox.stories.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Group } from '@mantine/core';
 import { Checkbox } from './Checkbox';
 
 export default {
   title: 'Components/Checkbox',
   component: Checkbox,
   argTypes: {},
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;
 
-const Template: ComponentStory<typeof Checkbox> = ({ ...args }) => <Checkbox {...args} />;
+const Template: StoryFn<typeof Checkbox> = ({ ...args }) => <Checkbox {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

apps/web/src/design-system/color-input/ColorInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { ColorInput } from './ColorInput';
 
 export default {
@@ -17,9 +17,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ColorInput>;
+} as Meta<typeof ColorInput>;
 
-const Template: ComponentStory<typeof ColorInput> = ({ ...args }) => <ColorInput {...args} />;
+const Template: StoryFn<typeof ColorInput> = ({ ...args }) => <ColorInput {...args} />;
 
 export const PrimaryUse = Template.bind({});
 PrimaryUse.args = {

apps/web/src/design-system/input/Input.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Input } from './Input';
 import { Copy } from '../icons';
 
@@ -18,9 +18,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Input>;
+} as Meta<typeof Input>;
 
-const Template: ComponentStory<typeof Input> = ({ ...args }) => <Input {...args} />;
+const Template: StoryFn<typeof Input> = ({ ...args }) => <Input {...args} />;
 
 export const PrimaryUse = Template.bind({});
 PrimaryUse.args = {

apps/web/src/design-system/navigation/NavMenu.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 import { NavMenu } from './NavMenu';
 import { Activity, Bolt, Settings, Team } from '../icons';
@@ -8,7 +8,7 @@ export default {
   title: 'Menus/NavigationMenu',
   component: NavMenu,
   argTypes: {},
-} as ComponentMeta<typeof NavMenu>;
+} as Meta<typeof NavMenu>;
 
 const menuItems = [
   { icon: <Bolt />, link: '/0', label: 'Notifications' },
@@ -21,7 +21,7 @@ const menuItems = [
   },
 ];
 
-const Template: ComponentStory<typeof NavMenu> = ({ ...args }) => (
+const Template: StoryFn<typeof NavMenu> = ({ ...args }) => (
   <MemoryRouter initialEntries={['/0']}>
     <NavMenu {...args} menuItems={menuItems} />{' '}
   </MemoryRouter>

apps/web/src/design-system/radio/Radio.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Radio, RadioProps } from './Radio';
 
 export default {
   title: 'Components/Radio',
   component: Radio,
   argTypes: {},
-} as ComponentMeta<typeof Radio>;
+} as Meta<typeof Radio>;
 
-const Template: ComponentStory<typeof Radio> = ({ children, ...args }: RadioProps) => <Radio {...args}>Button</Radio>;
+const Template: StoryFn<typeof Radio> = ({ children, ...args }: RadioProps) => <Radio {...args}>Button</Radio>;
 
 export const Default = Template.bind({});
 Default.args = {

apps/web/src/design-system/segmented-control/SegmentedControl.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { SegmentedControl } from './SegmentedControl';
 
 export default {
@@ -16,9 +16,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SegmentedControl>;
+} as Meta<typeof SegmentedControl>;
 
-const Template: ComponentStory<typeof SegmentedControl> = ({ ...args }) => <SegmentedControl {...args} />;
+const Template: StoryFn<typeof SegmentedControl> = ({ ...args }) => <SegmentedControl {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

apps/web/src/design-system/select/Select.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Select } from './Select';
 
 export default {
   title: 'Inputs/Select',
   component: Select,
   argTypes: {},
-} as ComponentMeta<typeof Select>;
+} as Meta<typeof Select>;
 
-const Template: ComponentStory<typeof Select> = ({ ...args }) => <Select {...args} />;
+const Template: StoryFn<typeof Select> = ({ ...args }) => <Select {...args} />;
 
 const data = [
   { value: 'Arial', label: 'Arial' },

apps/web/src/design-system/switch/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Switch } from './Switch';
 
 export default {
@@ -15,9 +15,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Switch>;
+} as Meta<typeof Switch>;
 
-const Template: ComponentStory<typeof Switch> = ({ ...args }) => <Switch {...args} />;
+const Template: StoryFn<typeof Switch> = ({ ...args }) => <Switch {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {};

apps/web/src/design-system/table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Badge } from '@mantine/core';
 
 import { Switch } from '../switch/Switch';
@@ -16,7 +16,7 @@ export default {
       control: false,
     },
   },
-} as ComponentMeta<typeof Table>;
+} as Meta<typeof Table>;
 
 const SwitchCell = (props) => {
   const [status, setStatus] = useState(props.status);
@@ -68,9 +68,7 @@ const data: IExampleData[] = [
   { name: 'Whats up?', category: 'Done', status: 'Enabled', creationDate: '01/01/2021 16:36' },
 ];
 
-const Template: ComponentStory<typeof Table> = ({ ...args }) => (
-  <Table columns={columns as any} data={data} {...args} />
-);
+const Template: StoryFn<typeof Table> = ({ ...args }) => <Table columns={columns as any} data={data} {...args} />;
 
 export const PrimaryUse = Template.bind({});
 PrimaryUse.args = {};

apps/web/src/design-system/tabs/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { Tabs } from './Tabs';
 
@@ -8,9 +8,9 @@ export default {
   component: Tabs,
 
   argTypes: {},
-} as ComponentMeta<typeof Tabs>;
+} as Meta<typeof Tabs>;
 
-const Template: ComponentStory<typeof Tabs> = ({ ...args }) => <Tabs {...args} />;
+const Template: StoryFn<typeof Tabs> = ({ ...args }) => <Tabs {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

apps/web/src/design-system/tooltip/Tooltip.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Tooltip } from './Tooltip';
 
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
   argTypes: {},
-} as ComponentMeta<typeof Tooltip>;
+} as Meta<typeof Tooltip>;
 
-const Template: ComponentStory<typeof Tooltip> = ({ ...args }) => <Tooltip {...args}>Hover Here</Tooltip>;
+const Template: StoryFn<typeof Tooltip> = ({ ...args }) => <Tooltip {...args}>Hover Here</Tooltip>;
 
 export const Label = Template.bind({});
 Label.args = {

apps/web/src/design-system/typography/text/Text.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Text } from './Text';
 
 export default {
   title: 'Components/Typography/Text',
   component: Text,
   argTypes: {},
-} as ComponentMeta<typeof Text>;
+} as Meta<typeof Text>;
 
-const Template: ComponentStory<typeof Text> = ({ ...args }) => <Text {...args}>Example Text</Text>;
+const Template: StoryFn<typeof Text> = ({ ...args }) => <Text {...args}>Example Text</Text>;
 
 export const all = () => (
   <div>

apps/web/src/design-system/typography/title/Title.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Title } from './Title';
 
 export default {
   title: 'Components/Typography/Title',
   component: Title,
   argTypes: {},
-} as ComponentMeta<typeof Title>;
+} as Meta<typeof Title>;
 
-const Template: ComponentStory<typeof Title> = ({ ...args }) => <Title {...args}>Example Text</Title>;
+const Template: StoryFn<typeof Title> = ({ ...args }) => <Title {...args}>Example Text</Title>;
 
 export const all = () => (
   <div>