upgrade storybook

.storybook/docsTemplates.tsx

@@ -1,6 +1,6 @@
 import {
+  ArgTypes,
   Controls,
-  ArgsTable,
   Description,
   Primary,
   Stories,
@@ -12,10 +12,10 @@ export const defaultTemplate = () => (
   <>
     <Title />
     <Subtitle />
-    <Description  />
-    <Primary  />
+    <Description />
+    <Primary />
     <Controls />
-    <Stories includePrimary={false}  />
+    <Stories includePrimary={false} />
   </>
 );
 export const subcomponentsTemplate = () => (
@@ -24,7 +24,7 @@ export const subcomponentsTemplate = () => (
     <Subtitle />
     <Description />
     <Primary />
-    <ArgsTable />
+    <ArgTypes />
     <Stories includePrimary={false} />
   </>
-);
+);

package.json

@@ -57,6 +57,7 @@
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@storybook/test": "^8.0.2",
     "@tanstack/react-table": "^8.10.6",
     "classnames": "^2.3.1",
     "csstype": "^3.0.11",
@@ -89,7 +90,7 @@
     "@faker-js/faker": "^8.2.0",
     "@fontsource/inter": "^4.5.15",
     "@fontsource/space-mono": "^4.5.12",
-    "@geometricpanda/storybook-addon-badges": "^2.0.0",
+    "@geometricpanda/storybook-addon-badges": "^2.0.2",
     "@mdx-js/react": "^1.6.22",
     "@prisma-capacity/babel-plugin-react-display-name": "^1.0.6",
     "@semantic-release/changelog": "^6.0.1",
@@ -98,19 +99,17 @@
     "@semantic-release/github": "^8.0.4",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-actions": "^7.5.1",
-    "@storybook/addon-designs": "^7.0.5",
-    "@storybook/addon-docs": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/components": "^7.5.1",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-vite": "^7.5.1",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "^8.0.2",
+    "@storybook/addon-actions": "^8.0.2",
+    "@storybook/addon-designs": "^8.0.0",
+    "@storybook/addon-docs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/components": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
+    "@storybook/test-runner": "^0.17.0",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -143,7 +142,7 @@
     "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.0.4",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^5.10.3",
     "history": "^5.3.0",
     "husky": "^7.0.4",
@@ -168,7 +167,7 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "semantic-release": "^19.0.2",
     "semantic-release-export-data": "^1.0.1",
-    "storybook": "^7.5.1",
+    "storybook": "^8.0.2",
     "storycap": "^4.0.0",
     "styled-components": "^5.3.10",
     "stylelint": "^15.5.0",

src/changelog.mdx

@@ -1,4 +1,4 @@
-import { Markdown, Meta } from '@storybook/addon-docs';
+import { Markdown, Meta } from '@storybook/blocks';
 
 import Changelog from '../CHANGELOG.md?raw';
 

src/codeExamples/addIcon.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 import copySVGcode from './images/CopySVGcode.png';
 

src/codeExamples/closeHandlingDrawer.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="code examples/Close handling for Drawer" />
 

src/codeExamples/implementingBreadcrumbs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 import imageUrl from './images/Breadcrumbs.png';
 

src/codeExamples/replacingFlexContainer.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="code examples/Replacing FlexContainer" />
 

src/codeExamples/semanticModalsUsage.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 import SemanticModal from './images/SemanticModal.png';
 

src/components/Accordion/Accordion.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within } from '@storybook/test';
+import { expect } from '@storybook/test';
 
 import Accordion from './Accordion';
 import AccordionItem from './AccordionItem';

src/components/Stepper/Stepper.stories.tsx

@@ -69,8 +69,9 @@ const steps = [
   },
 ];
 
-const containerDecorator = (width) => (storyFn) =>
-  <div style={{ width }}>{storyFn()}</div>;
+const containerDecorator = (width) => (storyFn) => (
+  <div style={{ width }}>{storyFn()}</div>
+);
 
 export const Playground: Story<StepperProps> = (args) => (
   <Stepper {...args}>

src/components/forms/example.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { DSProvider } from '../../theme';
 import { Stack } from '../layout';

src/hooks/useDebounce.stories.mdx → src/hooks/useDebounce.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Hooks/useDebounce" />
 

src/hooks/useLockBodyScroll.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Hooks/useLockBodyScroll" />
 

src/hooks/useOuterCallback.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Hooks/useOuterCallback" />
 

src/hooks/usePortal.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Hooks/usePortal" />
 

src/managers/NotificationsManager/NotificationsProvider.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="managers/NotificationsProvider/Docs" />
 

src/overview.mdx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import styled from 'styled-components';
 import { noop } from 'ramda-adjunct';
 

src/theme/DSProvider/DSProvider.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta } from '@storybook/addon-docs';
+import { ArgTypes, Meta } from '@storybook/blocks';
 
 import DSProvider from './DSProvider';
 
@@ -11,7 +11,7 @@ You can extend [default Design System theme](/docs/theme-theme-object--page) wit
 values when `theme` prop is passed into the component. This component also includes reset CSS rules
 (this is opt-out feature via `config.hasIncludedGlobalStyles` property).
 
-<ArgsTable of={DSProvider} />
+<ArgTypes of={DSProvider} />
 
 ### Usage with default theme
 

src/theme/DSThemeOverride/DSThemeOverride.stories.mdx → src/theme/DSThemeOverride/DSThemeOverride.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Source, Story } from '@storybook/addon-docs';
+import { ArgTypes, Meta, Source, Story } from '@storybook/blocks';
 
 import DSThemeOverride from './DSThemeOverride';
 
@@ -26,7 +26,7 @@ The `overrides` property accept either a function that returns the subset of the
 the subset itself. The function accepts the default theme object as the first argument which allows
 you to assign any value to the overriden object.
 
-<ArgsTable of={DSThemeOverride} />
+<ArgTypes of={DSThemeOverride} />
 
 ```jsx
 const DarkBox = ({ children }) => (

src/theme/colors.mdx

@@ -1,4 +1,4 @@
-import { ColorItem, ColorPalette, Meta } from '@storybook/addon-docs';
+import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
 
 import { colors } from './colors';
 

src/theme/createIconLibrary.mdx

@@ -1,4 +1,4 @@
-import { IconGallery, IconItem, Meta } from '@storybook/addon-docs';
+import { IconGallery, IconItem, Meta } from '@storybook/blocks';
 
 import Icon from '../components/Icon/Icon';
 import { IconTypes, SSCIconNames } from './icons/icons.enums';

src/theme/space.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import { Figma } from '@storybook/addon-designs/blocks';
 
 import { SpaceScale } from '../../.storybook/blocks/SpaceScale';

src/theme/theme.mdx

@@ -1,4 +1,4 @@
-import { Meta, Source } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/blocks';
 
 import { theme } from './theme';
 

src/theme/typography.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 import { FontItem, FontPalette } from '../../.storybook/blocks/FontPallete';
 import { theme } from './theme';

src/utils/helpers.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Helpers/Methods" />