chore(deps): upgrade storybook 8 (#1811)

.eslintrc.yml

@@ -155,3 +155,4 @@ overrides:
       '@typescript-eslint/no-restricted-imports': off
       no-restricted-imports: off
       'react/jsx-props-no-spreading': off
+      'storybook/no-renderer-packages': off

.storybook/main.ts

@@ -9,20 +9,38 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@storybook/addon-webpack5-compiler-swc',
+    '@chromatic-com/storybook',
     {
-      name: '@storybook/addon-styling',
+      name: '@storybook/addon-styling-webpack',
+
       options: {
-        cssLoaderOptions: {
+        rules: [
-          importLoaders: 1,
+          {
-          modules: {
+            test: /\.css$/,
-            localIdentName: '[path][name]__[local]',
+            sideEffects: true,
-            auto: true,
+            use: [
-            exportLocalsConvention: 'camelCaseOnly',
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 1,
+                  modules: {
+                    localIdentName: '[path][name]__[local]',
+                    auto: true,
+                    exportLocalsConvention: 'camelCaseOnly',
+                  },
+                },
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  implementation: postcss,
+                },
+              },
+            ],
           },
-        },
+        ],
-        postCss: {
-          implementation: postcss,
-        },
       },
     },
   ],

.storybook/preview.tsx

@@ -1,9 +1,9 @@
 import '../app/assets/css';
-import React from 'react';
 import { pushStateLocationPlugin, UIRouter } from '@uirouter/react';
 import { initialize as initMSW, mswLoader } from 'msw-storybook-addon';
 import { handlers } from '../app/setup-tests/server-handlers';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Preview } from '@storybook/react';
 
 initMSW(
   {
@@ -21,31 +21,30 @@ initMSW(
   handlers
 );
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  msw: {
-    handlers,
-  },
-};
-
 const testQueryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 });
 
-export const decorators = [
+const preview: Preview = {
-  (Story) => (
+  decorators: (Story) => (
     <QueryClientProvider client={testQueryClient}>
       <UIRouter plugins={[pushStateLocationPlugin]}>
         <Story />
       </UIRouter>
     </QueryClientProvider>
   ),
-];
+  loaders: [mswLoader],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    msw: {
+      handlers,
+    },
+  },
+};
 
-export const loaders = [mswLoader];
+export default preview;

app/react/components/Alert/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { Alert } from './Alert';
 
@@ -21,21 +21,21 @@ function Template({ text, color, title }: Args) {
   );
 }
 
-export const Success: Story<Args> = Template.bind({});
+export const Success: StoryFn<Args> = Template.bind({});
 Success.args = {
   color: 'success',
   title: 'Success',
   text: 'This is a success alert. Very long text, Very long text,Very long text ,Very long text ,Very long text, Very long text',
 };
 
-export const Error: Story<Args> = Template.bind({});
+export const Error: StoryFn<Args> = Template.bind({});
 Error.args = {
   color: 'error',
   title: 'Error',
   text: 'This is an error alert',
 };
 
-export const Info: Story<Args> = Template.bind({});
+export const Info: StoryFn<Args> = Template.bind({});
 Info.args = {
   color: 'info',
   title: 'Info',

app/react/components/Card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 
 import { Card, Props } from './Card';
@@ -14,5 +14,5 @@ function Template({
   return <Card>{children}</Card>;
 }
 
-export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+export const Primary: StoryFn<PropsWithChildren<Props>> = Template.bind({});
 Primary.args = {};

app/react/components/Code/Code.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { Code } from './Code';
 
@@ -16,18 +16,18 @@ function Template({ text, showCopyButton }: Args) {
   return <Code showCopyButton={showCopyButton}>{text}</Code>;
 }
 
-export const Primary: Story<Args> = Template.bind({});
+export const Primary: StoryFn<Args> = Template.bind({});
 Primary.args = {
   text: 'curl -X GET http://ultra-sound-money.eth',
   showCopyButton: true,
 };
 
-export const MultiLine: Story<Args> = Template.bind({});
+export const MultiLine: StoryFn<Args> = Template.bind({});
 MultiLine.args = {
   text: 'curl -X\n GET http://example-with-children.crypto',
 };
 
-export const MultiLineWithIcon: Story<Args> = Template.bind({});
+export const MultiLineWithIcon: StoryFn<Args> = Template.bind({});
 MultiLineWithIcon.args = {
   text: 'curl -X\n GET http://example-with-children.crypto',
   showCopyButton: true,

app/react/components/DashboardItem/DashboardItem.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { List } from 'lucide-react';
 
 import { Link } from '@@/Link';
@@ -29,7 +29,7 @@ function Template({ value, icon, type }: StoryProps) {
   );
 }
 
-export const Primary: Story<StoryProps> = Template.bind({});
+export const Primary: StoryFn<StoryProps> = Template.bind({});
 Primary.args = {
   value: 1,
   icon: List,

app/react/components/DetailsTable/DetailsTable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { DetailsTable } from './DetailsTable';
 import { DetailsRow } from './DetailsRow';
@@ -24,7 +24,7 @@ function Template({ key1, val1, key2, val2 }: Args) {
   );
 }
 
-export const Default: Story<Args> = Template.bind({});
+export const Default: StoryFn<Args> = Template.bind({});
 Default.args = {
   key1: 'Name',
   val1: 'My Cool App',

app/react/components/InlineLoader/InlineLoader.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 
 import { InlineLoader, Props } from './InlineLoader';
@@ -12,7 +12,7 @@ function Template({ className, children }: PropsWithChildren<Props>) {
   return <InlineLoader className={className}>{children}</InlineLoader>;
 }
 
-export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+export const Primary: StoryFn<PropsWithChildren<Props>> = Template.bind({});
 Primary.args = {
   className: 'test-class',
   children: 'Loading...',

app/react/components/InsightsBox/InsightsBox.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { InsightsBox, Props } from './InsightsBox';
 
@@ -11,7 +11,7 @@ function Template({ header, content }: Props) {
   return <InsightsBox header={header} content={content} />;
 }
 
-export const Primary: Story<Props> = Template.bind({});
+export const Primary: StoryFn<Props> = Template.bind({});
 Primary.args = {
   header: 'Insights box header',
   content: 'This is the content of the insights box',

app/react/components/NavTabs/NavTabs.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { NavTabs, type Option } from './NavTabs';
@@ -6,7 +6,7 @@ import { NavTabs, type Option } from './NavTabs';
 export default {
   title: 'Components/NavTabs',
   component: NavTabs,
-} as ComponentMeta<typeof NavTabs>;
+} as Meta<typeof NavTabs>;
 
 type Args = {
   options: Option[];
@@ -26,7 +26,7 @@ function Template({ options = [] }: Args) {
   );
 }
 
-export const Example: Story<Args> = Template.bind({});
+export const Example: StoryFn<Args> = Template.bind({});
 Example.args = {
   options: [
     { children: 'Content 1', id: 'option1', label: 'Option 1' },

app/react/components/PageHeader/HeaderContainer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useMemo } from 'react';
 
 import { UserContext } from '@/react/hooks/useUser';
@@ -39,7 +39,7 @@ function Template({ title }: StoryProps) {
   );
 }
 
-export const Primary: Story<StoryProps> = Template.bind({});
+export const Primary: StoryFn<StoryProps> = Template.bind({});
 Primary.args = {
   title: 'Container details',
 };

app/react/components/PageHeader/PageHeader.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useMemo } from 'react';
 
 import { UserContext } from '@/react/hooks/useUser';
@@ -37,7 +37,7 @@ function Template({ title }: StoryProps) {
   );
 }
 
-export const Primary: Story<StoryProps> = Template.bind({});
+export const Primary: StoryFn<StoryProps> = Template.bind({});
 Primary.args = {
   title: 'Container details',
 };

app/react/components/Tip/TextTip/TextTip.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 
 import { TextTip } from './TextTip';
@@ -14,7 +14,7 @@ function Template({
   return <TextTip>{children}</TextTip>;
 }
 
-export const Primary: Story<PropsWithChildren<unknown>> = Template.bind({});
+export const Primary: StoryFn<PropsWithChildren<unknown>> = Template.bind({});
 Primary.args = {
   children: 'This is a text tip with children',
 };

app/react/components/Tip/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { Tooltip, Props } from './Tooltip';
 
@@ -16,7 +16,7 @@ function Template({ message, position }: JSX.IntrinsicAttributes & Props) {
   );
 }
 
-export const Primary: Story<Props> = Template.bind({});
+export const Primary: StoryFn<Props> = Template.bind({});
 Primary.args = {
   message: 'Tooltip example',
   position: 'bottom',

app/react/components/ViewLoading/ViewLoading.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { ViewLoading } from './ViewLoading';
 
@@ -15,7 +15,7 @@ function Template({ message }: Args) {
   return <ViewLoading message={message} />;
 }
 
-export const Example: Story<Args> = Template.bind({});
+export const Example: StoryFn<Args> = Template.bind({});
 Example.args = {
   message: 'Loading...',
 };

app/react/components/buttons/AddButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { AddButton } from './AddButton';
 
@@ -15,7 +15,7 @@ function Template({ label }: Args) {
   return <AddButton data-cy="add-">{label}</AddButton>;
 }
 
-export const Primary: Story<Args> = Template.bind({});
+export const Primary: StoryFn<Args> = Template.bind({});
 Primary.args = {
   label: 'Create new container',
 };

app/react/components/buttons/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 import { Download } from 'lucide-react';
 
@@ -85,7 +85,7 @@ function Template({
   );
 }
 
-export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+export const Primary: StoryFn<PropsWithChildren<Props>> = Template.bind({});
 Primary.args = {
   color: 'primary',
   size: 'small',

app/react/components/buttons/ButtonGroup.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 import { Play, RefreshCw, Square, Trash2 } from 'lucide-react';
 
@@ -45,7 +45,7 @@ function Template({
   );
 }
 
-export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+export const Primary: StoryFn<PropsWithChildren<Props>> = Template.bind({});
 Primary.args = {
   size: 'small',
 };

app/react/components/buttons/CopyButton/CopyButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 
 import { CopyButton, Props } from './CopyButton';
@@ -24,13 +24,13 @@ function Template({
   );
 }
 
-export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+export const Primary: StoryFn<PropsWithChildren<Props>> = Template.bind({});
 Primary.args = {
   children: 'Copy',
   copyText: 'this will be copied to clipboard',
 };
 
-export const NoCopyText: Story<PropsWithChildren<Props>> = Template.bind({});
+export const NoCopyText: StoryFn<PropsWithChildren<Props>> = Template.bind({});
 NoCopyText.args = {
   children: 'Copy without copied text',
   copyText: 'clipboard override',

app/react/components/form-components/FormSection/FormSection.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { FormSection } from './FormSection';
 
@@ -25,7 +25,7 @@ const exampleContent = `Content
       Nullam nec nibh maximus, consequat quam sed, dapibus purus. Donec facilisis commodo mi, in commodo augue molestie sed.
   `;
 
-export const Example: Story<Args> = Template.bind({});
+export const Example: StoryFn<Args> = Template.bind({});
 Example.args = {
   title: 'title',
   content: exampleContent,

app/react/components/form-components/FormSectionTitle/FormSectionTitle.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 
 import { FormSectionTitle } from './FormSectionTitle';
@@ -14,7 +14,7 @@ function Template({
   return <FormSectionTitle>{children}</FormSectionTitle>;
 }
 
-export const Example: Story<PropsWithChildren<unknown>> = Template.bind({});
+export const Example: StoryFn<PropsWithChildren<unknown>> = Template.bind({});
 Example.args = {
   children: 'This is a title with children',
 };

app/react/components/form-components/Input/Input.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { Input } from './Input';
@@ -27,7 +27,7 @@ export function TextField({ disabled }: Args) {
   );
 }
 
-export const DisabledTextField: Story<Args> = TextField.bind({});
+export const DisabledTextField: StoryFn<Args> = TextField.bind({});
 DisabledTextField.args = {
   disabled: true,
 };

app/react/components/form-components/Input/Select.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { Select } from './Select';
@@ -31,7 +31,7 @@ export function Example({ disabled }: Args) {
   );
 }
 
-export const DisabledSelect: Story<Args> = Example.bind({});
+export const DisabledSelect: StoryFn<Args> = Example.bind({});
 DisabledSelect.args = {
   disabled: true,
 };

app/react/components/form-components/Slider/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useEffect, useState } from 'react';
 
 import { Slider, Props } from './Slider';
@@ -41,7 +41,7 @@ function Template({
   );
 }
 
-export const Primary: Story<Props> = Template.bind({});
+export const Primary: StoryFn<Props> = Template.bind({});
 Primary.args = {
   min: 0,
   max: 100,

app/react/components/form-components/SwitchField/Switch.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { Switch } from './Switch';
@@ -40,12 +40,12 @@ function Template({ checked }: Args) {
   );
 }
 
-export const Checked: Story<Args> = Template.bind({});
+export const Checked: StoryFn<Args> = Template.bind({});
 Checked.args = {
   checked: true,
 };
 
-export const Unchecked: Story<Args> = Template.bind({});
+export const Unchecked: StoryFn<Args> = Template.bind({});
 Unchecked.args = {
   checked: false,
 };

app/react/components/form-components/SwitchField/SwitchField.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { SwitchField } from './SwitchField';
@@ -43,14 +43,14 @@ function Template({ checked, label, labelClass }: Args) {
   );
 }
 
-export const Checked: Story<Args> = Template.bind({});
+export const Checked: StoryFn<Args> = Template.bind({});
 Checked.args = {
   checked: true,
   label: 'label',
   labelClass: 'col-sm-6',
 };
 
-export const Unchecked: Story<Args> = Template.bind({});
+export const Unchecked: StoryFn<Args> = Template.bind({});
 Unchecked.args = {
   checked: false,
   label: 'label',

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 
 import {
   Environment,
@@ -29,37 +29,37 @@ function Template({ environment }: Args) {
   );
 }
 
-export const DockerEnvironment: Story<Args> = Template.bind({});
+export const DockerEnvironment: StoryFn<Args> = Template.bind({});
 DockerEnvironment.args = {
   environment: mockEnvironment(EnvironmentType.Docker),
 };
 
-export const DockerAgentEnvironment: Story<Args> = Template.bind({});
+export const DockerAgentEnvironment: StoryFn<Args> = Template.bind({});
 DockerAgentEnvironment.args = {
   environment: mockEnvironment(EnvironmentType.AgentOnDocker),
 };
 
-export const DockerEdgeEnvironment: Story<Args> = Template.bind({});
+export const DockerEdgeEnvironment: StoryFn<Args> = Template.bind({});
 DockerEdgeEnvironment.args = {
   environment: mockEnvironment(EnvironmentType.EdgeAgentOnDocker),
 };
 
-export const AzureEnvironment: Story<Args> = Template.bind({});
+export const AzureEnvironment: StoryFn<Args> = Template.bind({});
 AzureEnvironment.args = {
   environment: mockEnvironment(EnvironmentType.Azure),
 };
 
-export const KubernetesLocalEnvironment: Story<Args> = Template.bind({});
+export const KubernetesLocalEnvironment: StoryFn<Args> = Template.bind({});
 KubernetesLocalEnvironment.args = {
   environment: mockEnvironment(EnvironmentType.KubernetesLocal),
 };
 
-export const KubernetesAgentEnvironment: Story<Args> = Template.bind({});
+export const KubernetesAgentEnvironment: StoryFn<Args> = Template.bind({});
 KubernetesAgentEnvironment.args = {
   environment: mockEnvironment(EnvironmentType.AgentOnKubernetes),
 };
 
-export const KubernetesEdgeEnvironment: Story<Args> = Template.bind({});
+export const KubernetesEdgeEnvironment: StoryFn<Args> = Template.bind({});
 KubernetesEdgeEnvironment.args = {
   environment: mockEnvironment(EnvironmentType.EdgeAgentOnKubernetes),
 };

app/react/portainer/access-control/AccessControlForm/AccessControlForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { UserViewModel } from '@/portainer/models/user';
@@ -39,12 +39,12 @@ function Template({ userRole }: Args) {
   );
 }
 
-export const AdminAccessControl: Story<Args> = Template.bind({});
+export const AdminAccessControl: StoryFn<Args> = Template.bind({});
 AdminAccessControl.args = {
   userRole: Role.Admin,
 };
 
-export const NonAdminAccessControl: Story<Args> = Template.bind({});
+export const NonAdminAccessControl: StoryFn<Args> = Template.bind({});
 NonAdminAccessControl.args = {
   userRole: Role.Standard,
 };

app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { useState } from 'react';
 
 import {
@@ -10,7 +10,7 @@ export default {
   title: 'Custom Templates/Variables Definition Field',
   component: CustomTemplatesVariablesDefinitionField,
   args: {},
-} as ComponentMeta<typeof CustomTemplatesVariablesDefinitionField>;
+} as Meta<typeof CustomTemplatesVariablesDefinitionField>;
 
 function Template() {
   const [value, setValue] = useState<VariableDefinition[]>([

app/react/sidebar/SidebarItem/SidebarItem.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Clock, type LucideIcon } from 'lucide-react';
 
 import { SidebarItem } from '.';
@@ -28,13 +28,13 @@ function Template({ icon, label }: StoryProps) {
   );
 }
 
-export const Primary: Story<StoryProps> = Template.bind({});
+export const Primary: StoryFn<StoryProps> = Template.bind({});
 Primary.args = {
   icon: Clock,
   label: 'Item with icon',
 };
 
-export const WithoutIcon: Story<StoryProps> = Template.bind({});
+export const WithoutIcon: StoryFn<StoryProps> = Template.bind({});
 WithoutIcon.args = {
   label: 'Item without icon',
 };

package.json

@@ -146,13 +146,15 @@
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
+    "@chromatic-com/storybook": "^3.2.7",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-actions": "8.6.15",
-    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-essentials": "8.6.15",
-    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-links": "8.6.15",
-    "@storybook/addon-styling": "^1.0.8",
+    "@storybook/addon-styling-webpack": "^3.0.0",
-    "@storybook/react": "^7.0.18",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/react": "8.6.15",
+    "@storybook/react-webpack5": "8.6.15",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/react": "^12",
@@ -201,7 +203,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-regex": "^1.10.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^9",
     "eslint-plugin-vitest": "^0.3.20",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^5.5.3",
@@ -220,7 +222,7 @@
     "react-docgen-typescript-plugin": "^1.0.5",
     "source-map-loader": "^4.0.1",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "storybook": "^7.6.21",
+    "storybook": "8.6.15",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
     "swagger2openapi": "^7.0.8",