Bump Storybook dependencies to v8.

mrcgrtz · Apr 1, 2024 · 52b4c9f · 52b4c9f
1 parent 7c33666
commit 52b4c9f
Show file tree

Hide file tree

Showing 8 changed files with 3,331 additions and 3,440 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,11 +1,15 @@
 /** @type {import('@storybook/core-common').StorybookConfig} */
 module.exports = {
-  stories: ['../src/**/*.stories.@(tsx|mdx)'],
+  stories: ['../src/**/*.stories.tsx'],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-webpack5-compiler-babel'
+  ],
   features: {
     postcss: false,
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,11 +8,11 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.24.1",
     "@happy-dom/jest-environment": "^12.10.3",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-a11y": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
@@ -24,7 +24,7 @@
     "eslint-config-xo-react": "^0.27.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.7",
     "jest": "^29.7.0",
     "jest-styled-components": "^7.2.0",
@@ -33,7 +33,7 @@
     "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.5",
     "styled-components": "^6.1.8",
     "stylelint": "^16.2.1",
     "stylelint-config-standard": "^36.0.0",
@@ -57,5 +57,8 @@
     "test": "jest",
     "test:coverage": "jest --silent --coverage",
     "test:watch": "jest --watchAll"
+  },
+  "devDependencies": {
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3"
   }
 }
diff --git a/src/button/stories/index.stories.tsx b/src/button/stories/index.stories.tsx
@@ -18,8 +18,8 @@ const meta: Meta = {
   },
 };
 
-export const ButtonStory: StoryFn<typeof Button> = (args) => (
-  <Button {...args} />
+export const ButtonStory: StoryFn<typeof Button> = (properties) => (
+  <Button {...properties} />
 );
 ButtonStory.storyName = 'Button';
 

diff --git a/src/chat/stories/index.stories.tsx b/src/chat/stories/index.stories.tsx
@@ -53,7 +53,9 @@ const meta: Meta = {
   },
 };
 
-export const ChatStory: StoryFn<typeof Chat> = (args) => <Chat {...args} />;
+export const ChatStory: StoryFn<typeof Chat> = (properties) => (
+  <Chat {...properties} />
+);
 ChatStory.storyName = 'Chat';
 
 export default meta;
diff --git a/src/datetime/stories/index.stories.tsx b/src/datetime/stories/index.stories.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 import DateTime from '..';
 
-const defaultArgs = {
-  dateTime: new Date(),
-};
-
 const meta: Meta = {
   title: 'Design System/Components',
   component: DateTime,
@@ -14,12 +10,14 @@ const meta: Meta = {
       control: 'date',
     },
   },
-  args: defaultArgs,
+  args: {
+    dateTime: new Date(),
+  },
 };
 
-export const DateTimeStory: StoryObj<typeof DateTime> = (
-  args: typeof defaultArgs
-) => <DateTime {...args} />;
+export const DateTimeStory: StoryFn<typeof DateTime> = (properties) => (
+  <DateTime {...properties} />
+);
 DateTimeStory.storyName = 'Date and time';
 
 export default meta;
diff --git a/src/hamburger-button/stories/index.stories.tsx b/src/hamburger-button/stories/index.stories.tsx
@@ -1,22 +1,20 @@
 import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 import HamburgerButton from '..';
 
-const defaultArgs = {
-  label: 'Menü anzeigen',
-  labelActive: 'Menü ausblenden',
-  position: {blockStart: '20px', inlineStart: '20px'},
-};
-
 const meta: Meta = {
   title: 'Design System/Components',
   component: HamburgerButton,
-  args: defaultArgs,
+  args: {
+    label: 'Menü anzeigen',
+    labelActive: 'Menü ausblenden',
+    position: {blockStart: '20px', inlineStart: '20px'},
+  },
 };
 
-export const HamburgerButtonStory: StoryObj<typeof HamburgerButton> = (
-  args: typeof defaultArgs
-) => <HamburgerButton {...args} />;
+export const HamburgerButtonStory: StoryFn<typeof HamburgerButton> = (
+  properties
+) => <HamburgerButton {...properties} />;
 HamburgerButtonStory.storyName = 'Hamburger button';
 
 export default meta;
diff --git a/src/logo/stories/index.stories.tsx b/src/logo/stories/index.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type {Story, Meta} from '@storybook/react';
+import type {StoryFn, Meta} from '@storybook/react';
 import Logo from '..';
 
 const meta: Meta = {
@@ -12,7 +12,7 @@ const meta: Meta = {
   },
 };
 
-const Template: Story = (args) => <Logo {...args} />;
+const Template: StoryFn<typeof Logo> = (properties) => <Logo {...properties} />;
 
 export const LogoStory = Template.bind({});
 LogoStory.storyName = 'Default logo';