Bump Storybook version to 7

example/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

example/.storybook/main.js

@@ -1,11 +1,6 @@
 const path = require('path')
-
 const toPath = (_path) => path.join(process.cwd(), _path)
-
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
@@ -25,5 +20,11 @@ module.exports = {
       },
     },
   }),
-  framework: '@storybook/react',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 }

example/.storybook/preview.js

@@ -1,7 +1,6 @@
-import React from 'react'
-import { addDecorator } from '@storybook/react'
-import { SolvedGlobalStyles, solvedThemes } from '@solved-ac/ui-react'
 import { ThemeProvider } from '@emotion/react'
+import { SolvedGlobalStyles, solvedThemes } from '@solved-ac/ui-react'
+import React from 'react'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -13,11 +12,11 @@ export const parameters = {
   },
 }
 
-addDecorator((Story) => {
-  return (
+export const decorators = [
+  (Story) => (
     <ThemeProvider theme={solvedThemes.light}>
       <SolvedGlobalStyles />
       <Story />
     </ThemeProvider>
-  )
-})
+  ),
+]

example/package.json

@@ -8,8 +8,8 @@
     "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject",
-    "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"
   },
   "dependencies": {
     "@emotion/react": "link:../node_modules/@emotion/react",
@@ -21,28 +21,31 @@
     "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
     "@types/jest": "link:../node_modules/@types/jest",
     "@types/node": "link:../node_modules/@types/node",
-    "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "@types/react-icons": "link:../node_modules/@types/react-icons",
     "@types/react": "link:../node_modules/@types/react",
+    "@types/react-dom": "link:../node_modules/@types/react-dom",
     "framer-motion": "link:../node_modules/framer-motion",
+    "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-scripts": "link:../node_modules/react-scripts",
-    "react-icons": "link:../node_modules/react-icons",
-    "react": "link:../node_modules/react",
     "typescript": "link:../node_modules/typescript"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-interactions": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@storybook/node-logger": "^6.4.22",
-    "@storybook/preset-create-react-app": "^4.1.0",
-    "@storybook/react": "^6.4.22",
-    "@storybook/testing-library": "^0.0.11",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@storybook/addon-actions": "^7.0.21",
+    "@storybook/addon-essentials": "^7.0.21",
+    "@storybook/addon-interactions": "^7.0.21",
+    "@storybook/addon-links": "^7.0.21",
+    "@storybook/node-logger": "^7.0.21",
+    "@storybook/preset-create-react-app": "^7.0.21",
+    "@storybook/react": "^7.0.21",
+    "@storybook/react-webpack5": "^7.0.21",
+    "@storybook/testing-library": "^0.1.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "storybook": "^7.0.21",
     "webpack": "5"
   },
   "eslintConfig": {

example/src/stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -48,9 +48,9 @@ export default {
       description: 'The element to render the button as',
     },
   },
-} as ComponentMeta<typeof Button>
+} as Meta<typeof Button>
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />
 
 export const Default = Template.bind({})
 Default.args = {

example/src/stories/Card.stories.tsx

@@ -1,5 +1,5 @@
 import { Card } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -35,9 +35,9 @@ export default {
       description: 'The element to render the card as',
     },
   },
-} as ComponentMeta<typeof Card>
+} as Meta<typeof Card>
 
-const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />
+const Template: StoryFn<typeof Card> = (args) => <Card {...args} />
 
 export const Default = Template.bind({})
 Default.args = {

example/src/stories/Chip.stories.tsx

@@ -1,5 +1,5 @@
 import { Chip } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -19,9 +19,9 @@ export default {
       description: 'The element to render the chip as',
     },
   },
-} as ComponentMeta<typeof Chip>
+} as Meta<typeof Chip>
 
-const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />
+const Template: StoryFn<typeof Chip> = (args) => <Chip {...args} />
 
 export const Default = Template.bind({})
 Default.args = {

example/src/stories/Collapse.stories.tsx

@@ -1,5 +1,5 @@
 import { Collapse } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -22,9 +22,9 @@ export default {
       description: 'The children to display',
     },
   },
-} as ComponentMeta<typeof Collapse>
+} as Meta<typeof Collapse>
 
-const Template: ComponentStory<typeof Collapse> = (args) => (
+const Template: StoryFn<typeof Collapse> = (args) => (
   <Collapse {...args} />
 )
 

example/src/stories/Container.stories.tsx

@@ -1,5 +1,5 @@
 import { Container } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -27,9 +27,9 @@ export default {
       description: 'The element to render the container as',
     },
   },
-} as ComponentMeta<typeof Container>
+} as Meta<typeof Container>
 
-const Template: ComponentStory<typeof Container> = (args) => (
+const Template: StoryFn<typeof Container> = (args) => (
   <Container {...args} />
 )
 

example/src/stories/Divider.stories.tsx

@@ -1,5 +1,5 @@
 import { Divider } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -18,9 +18,9 @@ export default {
       description: 'The element to render the divider as',
     },
   },
-} as ComponentMeta<typeof Divider>
+} as Meta<typeof Divider>
 
-const Template: ComponentStory<typeof Divider> = (args) => <Divider {...args} />
+const Template: StoryFn<typeof Divider> = (args) => <Divider {...args} />
 
 export const Default = Template.bind({})
 Default.args = {}

example/src/stories/EmptyStatePlaceholder.stories.tsx

@@ -1,5 +1,5 @@
 import { EmptyStatePlaceholder } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -24,9 +24,9 @@ export default {
       description: 'The element to render the placeholder as',
     },
   },
-} as ComponentMeta<typeof EmptyStatePlaceholder>
+} as Meta<typeof EmptyStatePlaceholder>
 
-const Template: ComponentStory<typeof EmptyStatePlaceholder> = (args) => (
+const Template: StoryFn<typeof EmptyStatePlaceholder> = (args) => (
   <EmptyStatePlaceholder {...args} />
 )
 

example/src/stories/Footer.stories.tsx

@@ -1,5 +1,5 @@
 import { Container, Footer } from '@solved-ac/ui-react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 export default {
@@ -19,9 +19,9 @@ export default {
       description: 'The element to render the footer as',
     },
   },
-} as ComponentMeta<typeof Footer>
+} as Meta<typeof Footer>
 
-const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />
+const Template: StoryFn<typeof Footer> = (args) => <Footer {...args} />
 
 export const Default = Template.bind({})
 Default.args = {