upgrade Storybook

.github/workflows/npm-publish.yml

@@ -20,7 +20,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           registry-url: https://registry.npmjs.org/
           scope: '@totalsoft'
       - run: yarn -v

.github/workflows/tests.yml

@@ -16,10 +16,10 @@ jobs:
     steps:
       - name: Checkout Repo
         uses: actions/checkout@master
-      - name: Set Node.js 16.x
+      - name: Set Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Install Dependencies
         run: yarn install
       - name: Run tests

.storybook/TableOfContent.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef } from 'react'
 import { Subheading } from '@storybook/blocks'
 import { makeStyles } from 'tss-react/mui'
-import { addons } from '@storybook/addons'
+import { addons } from '@storybook/manager-api'
 import { NAVIGATE_URL } from '@storybook/core-events'
 
 export const nameToHash = (id: string): string => id.toLowerCase().replace(/[^a-z0-9]/gi, '-')

.storybook/main.ts

@@ -1,21 +1,32 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from '@storybook/react-webpack5'
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 
-export default {
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-links', '@storybook/addon-interactions', '@storybook/preview-api'],
+  addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/preview-api"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+  ],
   staticDirs: ['../public'],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {}
+  framework: '@storybook/react-webpack5',
+  core:{
+    builder:"@storybook/builder-webpack5"
   },
   typescript: {
     reactDocgen: 'react-docgen',
     check: false
   },
-  features: { storyStoreV7: true },
   webpackFinal: async (config: any) => {
     config.resolve.plugins = [new TsconfigPathsPlugin()]
     return config
-  }
-} as StorybookConfig
+  },
+}
+export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import './doc-root.css'
 import React from 'react'
 import type { Preview } from '@storybook/react'
@@ -19,7 +18,6 @@ const withThemeProvider = (Story, context) => {
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       expanded: true
     },
@@ -45,7 +43,9 @@ const preview: Preview = {
       }
     }
   },
-  decorators: [withThemeProvider]
+  decorators: [withThemeProvider],
+  tags: ['autodocs']
+
 }
 
 export default preview

.yarnrc.yml

@@ -1,7 +1 @@
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: '@yarnpkg/plugin-typescript'
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: '@yarnpkg/plugin-version'
-
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

package.json

@@ -83,17 +83,18 @@
     "@babel/core": "^7.21.4",
     "@emotion/css": "^11.11.2",
     "@nrwl/js": "^15.9.2",
-    "@storybook/addon-essentials": "7.0.20",
-    "@storybook/addon-interactions": "7.0.20",
-    "@storybook/addon-links": "7.0.20",
-    "@storybook/addon-styling": "^1.1.0",
-    "@storybook/addons": "7.0.20",
-    "@storybook/blocks": "7.0.20",
-    "@storybook/core-events": "7.0.20",
-    "@storybook/preview-api": "^7.0.22",
-    "@storybook/react": "7.0.20",
-    "@storybook/react-webpack5": "7.0.20",
-    "@storybook/testing-library": "0.1.0",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/builder-webpack5": "^8.1.11",
+    "@storybook/core-events": "^8.1.11",
+    "@storybook/manager-api": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
+    "@storybook/theming": "^8.1.11",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -118,7 +119,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -128,16 +129,16 @@
     "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^5.0.0",
     "sort-package-json": "^2.4.1",
-    "storybook": "7.0.20",
+    "storybook": "^8.1.11",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "tss-react": "^4.8.2",
     "typescript": "5.0.4"
   },
-  "packageManager": "yarn@3.5.0",
+  "packageManager": "yarn@4.3.1",
   "engines": {
-    "node": ">=18.x",
+    "node": ">=20.x",
     "yarn": ">=3.x"
   },
   "publishConfig": {

src/components/buttons/Button/Button.test.tsx

@@ -85,4 +85,4 @@ describe('Other button functionalities', () => {
     render(<Button capitalize={false}>Text</Button>)
     expect(screen.getByText('Text')).toHaveStyle('text-transform: none')
   })
-})
+})

src/components/inputs/DynamicField/DynamicField.test.tsx

@@ -43,7 +43,8 @@ describe('DynamicField', () => {
   })
 
   test('renders an autocomplete if control type is "Autocomplete"', () => {
-    render(<DynamicField controlType={ControlType.Autocomplete} />)
+    const mockOnChange = jest.fn()
+    render(<DynamicField controlType={ControlType.Autocomplete} onChange={mockOnChange} />)
     expect(screen.getByRole('combobox')).toBeInTheDocument()
   })
 

src/stories/Introduction.stories.tsx

@@ -22,6 +22,7 @@ const LandingPage = () => {
 const meta: Meta<typeof LandingPage> = {
   title: 'Introduction',
   component: LandingPage,
+  tags: ['!autodocs'],
   parameters: {
     options: {
       showPanel: false

src/stories/buttons/BackToButton/BackToButton.stories.tsx

@@ -10,7 +10,6 @@ import { BrowserRouter } from 'react-router-dom'
 const meta: Meta<typeof BackToButtonComponent> = {
   title: 'Components/Buttons/BackToButton',
   component: BackToButtonComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof BackToButtonComponent>
 
 export default meta

src/stories/buttons/Button/Button.stories.tsx

@@ -10,7 +10,6 @@ import { WithIconPreview } from './WithIconPreview'
 const meta: Meta<typeof ButtonComponent> = {
   title: 'Components/Buttons/Button',
   component: ButtonComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof ButtonComponent>
 
 export default meta

src/stories/buttons/IconButton/IconButton.stories.tsx

@@ -14,7 +14,6 @@ import { TypesPreview } from './TypesPreview'
 const meta: Meta<typeof IconButtonComponent> = {
   title: 'Components/Buttons/IconButton',
   component: IconButtonComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof IconButtonComponent>
 
 export default meta

src/stories/buttons/UploadButton/UploadButton.stories.tsx

@@ -14,7 +14,6 @@ import { CustomIconsPreview } from './CustomIconsPreview'
 const meta: Meta<typeof UploadButtonComponent> = {
   title: 'Components/Buttons/UploadButton',
   component: UploadButtonComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof UploadButtonComponent>
 
 export default meta

src/stories/charts/Chart/Chart.stories.tsx

@@ -11,7 +11,6 @@ import { barChartData, chartOptions, doughnutChartData, lineChartData } from './
 const meta: Meta<typeof Chart> = {
   title: 'Components/Charts/Chart',
   component: Chart,
-  tags: ['autodocs'],
   args: {
     width: 500,
     height: 200

src/stories/charts/statsChart/StatsChart.stories.tsx

@@ -11,7 +11,6 @@ import { StatsChart } from 'components'
 const meta: Meta<typeof StatsChart> = {
   title: 'Components/Charts/StatsChart',
   component: StatsChart,
-  tags: ['autodocs'],
   args: {
     width: 500,
     height: 200

src/stories/dataDisplay/ExpandingText/ExpandingText.stories.tsx

@@ -9,7 +9,6 @@ import { DisplayPreview } from './DisplayPreview'
 const meta: Meta<typeof ExpandingTextComponent> = {
   title: 'Components/DataDisplay/ExpandingText',
   component: ExpandingTextComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof ExpandingTextComponent>
 
 export default meta

src/stories/dataDisplay/FavIcon/FavIcon.stories.tsx

@@ -5,7 +5,6 @@ import { FavIcon } from 'components'
 const meta: Meta<typeof FavIcon> = {
   title: 'Components/DataDisplay/FavIcon',
   component: FavIcon,
-  tags: ['autodocs'],
   argTypes: {
     favIconSource: {
       control: { type: 'radio' },

src/stories/dataDisplay/Typography/Typography.stories.tsx

@@ -8,7 +8,6 @@ import { ExtraStylingPreview } from './ExtraStylingPreview'
 const meta: Meta<typeof TypographyComponent> = {
   title: 'Components/DataDisplay/Typography',
   component: TypographyComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof TypographyComponent>
 
 export default meta

src/stories/feedback/Dialog/Dialog.stories.tsx

@@ -11,7 +11,6 @@ import ActionsPreview from './ActionsPreview'
 const meta: Meta<typeof DialogComponent> = {
   title: 'Components/Feedback/Dialog',
   component: DialogComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof DialogComponent>
 
 export default meta

src/stories/feedback/FakeText/FakeText.stories.tsx

@@ -10,7 +10,6 @@ import VariantsPreview from './VariantsPreview'
 const meta: Meta<typeof FakeText> = {
   title: 'Components/Feedback/FakeText',
   component: FakeText,
-  tags: ['autodocs']
 } satisfies Meta<typeof FakeText>
 
 export default meta

src/stories/feedback/Forbidden/Forbidden.stories.tsx

@@ -7,7 +7,6 @@ import { Forbidden } from 'components'
 const meta: Meta<typeof Forbidden> = {
   title: 'Components/Feedback/Forbidden',
   component: Forbidden,
-  tags: ['autodocs']
 } satisfies Meta<typeof Forbidden>
 
 export default meta

src/stories/feedback/LinearProgress/LinearProgress.stories.tsx

@@ -12,7 +12,6 @@ import GlobalPreview from './GlobalPreview'
 const meta: Meta<typeof LinearProgress> = {
   title: 'Components/Feedback/LinearProgress',
   component: LinearProgress,
-  tags: ['autodocs']
 } satisfies Meta<typeof LinearProgress>
 
 export default meta

src/stories/feedback/NotFound/NotFound.stories.tsx

@@ -10,7 +10,6 @@ import { NotFound } from 'components'
 const meta: Meta<typeof NotFound> = {
   title: 'Components/Feedback/NotFound',
   component: NotFound,
-  tags: ['autodocs']
 } satisfies Meta<typeof NotFound>
 
 export default meta

src/stories/feedback/Toast/Toast.stories.tsx

@@ -11,7 +11,6 @@ import TransitionsPreview from './TransitionsPreview'
 const meta: Meta<typeof ToastContainer> = {
   title: 'Components/Feedback/Toast',
   component: ToastContainer,
-  tags: ['autodocs']
 } satisfies Meta<typeof ToastContainer>
 
 export default meta

src/stories/inputs/Autocomplete/Autocomplete.stories.tsx

@@ -18,7 +18,6 @@ import { Stack } from '@mui/material'
 const meta: Meta<typeof AutocompleteComponent> = {
   title: 'Components/Inputs/Autocomplete',
   component: AutocompleteComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof AutocompleteComponent>
 
 export default meta

src/stories/inputs/DateTime/DateTime.stories.tsx

@@ -15,7 +15,6 @@ import SwipeRightAlt from '@mui/icons-material/SwipeRightAlt'
 const meta: Meta<typeof DateTime> = {
   title: 'Components/Inputs/DateTime',
   component: DateTime,
-  tags: ['autodocs']
 } satisfies Meta<typeof DateTime>
 
 export default meta

src/stories/inputs/DynamicField/DynamicField.stories.tsx

@@ -12,7 +12,6 @@ import { Rating, Stack } from '@mui/material'
 export default {
   title: 'Components/Inputs/DynamicField',
   component: DynamicFieldComponent as ComponentType<DynamicFieldProps<any, any>>,
-  tags: ['autodocs']
 } satisfies Meta<typeof DynamicFieldComponent>
 
 type Story = StoryObj<typeof DynamicFieldComponent>

src/stories/inputs/PasswordField/PasswordField.stories.tsx

@@ -10,7 +10,6 @@ import StatesPreview from './StatesPreview'
 const meta: Meta<typeof PasswordFieldComponent> = {
   title: 'Components/Inputs/PasswordField',
   component: PasswordFieldComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof PasswordFieldComponent>
 
 export default meta

src/stories/inputs/Slider/Slider.stories.tsx

@@ -6,7 +6,6 @@ import { Slider } from 'components'
 const meta: Meta<typeof Slider> = {
   title: 'Components/Inputs/Slider',
   component: Slider,
-  tags: ['autodocs']
 } satisfies Meta<typeof Slider>
 
 export default meta

src/stories/inputs/TextField/TextField.stories.tsx

@@ -14,7 +14,6 @@ import NumericPreview from './NumericPreview'
 const meta: Meta<typeof TextFieldComponent> = {
   title: 'Components/Inputs/TextField',
   component: TextFieldComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof TextFieldComponent>
 
 export default meta

src/stories/navigation/NavPills/NavPills.stories.tsx

@@ -14,7 +14,6 @@ import ControlledPreview from './ControlledPreview'
 const meta: Meta<typeof NavPillsComponent> = {
   title: 'Components/Navigation/NavPills',
   component: NavPillsComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof NavPillsComponent>
 
 export default meta

src/stories/navigation/Pagination/Pagination.stories.tsx

@@ -10,7 +10,6 @@ import DefaultPreview from './DefaultPreview'
 const meta: Meta<typeof PaginationComponent> = {
   title: 'Components/Navigation/Pagination',
   component: PaginationComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof PaginationComponent>
 
 export default meta

src/stories/navigation/SideMenu/SideMenu.stories.tsx

@@ -9,7 +9,6 @@ import DefaultPreview from './DefaultPreview'
 const meta: Meta<typeof SideMenu> = {
   title: 'Components/Navigation/SideMenu',
   component: SideMenu,
-  tags: ['autodocs']
 } satisfies Meta<typeof SideMenu>
 
 export default meta

src/stories/surfaces/Accordion/Accordion.stories.tsx

@@ -16,7 +16,6 @@ import ActionsPreview from './ActionsPreview'
 const meta: Meta<typeof AccordionComponent> = {
   title: 'Components/Surfaces/Accordion',
   component: AccordionComponent,
-  tags: ['autodocs']
 } satisfies Meta<typeof AccordionComponent>
 
 export default meta

src/stories/surfaces/Card/Card.stories.tsx

@@ -13,7 +13,6 @@ import MediaPreview from './MediaPreview'
 const meta: Meta<typeof CardComponent> = {
   title: 'Components/Surfaces/Card',
   component: CardComponent,
-  tags: ['autodocs'],
   argTypes: {
     icon: {
       control: false