fix: upgrade storybook to v9

.storybook/addons/button/githubButton.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@storybook/components'
 import { GithubIcon } from '@storybook/icons'
-import { addons, types } from '@storybook/manager-api'
 import React from 'react'
+import { Button } from 'storybook/internal/components'
+import { addons, types } from 'storybook/manager-api'
 
 const ADDON_ID = 'github-link'
 const TOOL_ID = `${ADDON_ID}/tool`

.storybook/addons/button/logo.tsx

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api'
+import { addons } from 'storybook/manager-api'
 
 const logoDataAttribute = 'data-storybook-logo-id'
 const logoId = 'storybook-sidebar-custom-logo'

.storybook/addons/button/viewSourceButton.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@storybook/components'
-import { addons, type API, types } from '@storybook/manager-api'
 import React, { useEffect, useState } from 'react'
+import { Button } from 'storybook/internal/components'
 import type { API_LeafEntry } from 'storybook/internal/types'
+import { addons, type API, types } from 'storybook/manager-api'
 
 const ADDON_ID = 'github-source-link'
 const TOOL_ID = `${ADDON_ID}/tool`

.storybook/main.ts

@@ -1,12 +1,10 @@
-/* eslint-disable storybook/no-uninstalled-addons */
 import type { StorybookConfig } from '@storybook/react-webpack5'
 import path from 'path'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(tsx)', '../docs/*.mdx'],
+
   addons: [
-    '@storybook/addon-toolbars',
-    '@storybook/addon-viewport',
     'storybook-addon-mock',
     {
       name: '@storybook/addon-docs',
@@ -19,9 +17,6 @@ const config: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
   typescript: {
     // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
     reactDocgen: 'react-docgen',

.storybook/manager.ts

@@ -1,6 +1,6 @@
 import './addons/button/logo.tsx'
 
-import { addons } from '@storybook/manager-api'
+import { addons } from 'storybook/manager-api'
 
 import rusticTheme from './rusticTheme'
 

.storybook/preview.js → .storybook/preview.tsx

@@ -1,17 +1,19 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import { CssBaseline, ThemeProvider } from '@mui/material'
+import { ThemeProvider } from '@mui/material'
+import CssBaseline from '@mui/material/CssBaseline'
 import { StyledEngineProvider } from '@mui/material/styles'
 import {
-  Title,
-  Subtitle,
+  ArgTypes,
   Description,
   Primary,
-  ArgTypes,
   Stories,
-} from '@storybook/blocks'
-import { rusticLightTheme, rusticDarkTheme } from '../src/rusticTheme'
-
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks'
+import type { StoryContext, StoryFn } from '@storybook/react-webpack5'
 import React from 'react'
+import { INITIAL_VIEWPORTS } from 'storybook/viewport'
+
+import { rusticDarkTheme, rusticLightTheme } from '../src/rusticTheme'
 
 export const globalTypes = {
   theme: {
@@ -27,7 +29,7 @@ export const globalTypes = {
   },
 }
 
-const withMuiTheme = (Story, context) => {
+const withMuiTheme = (Story: StoryFn, context: StoryContext) => {
   const theme =
     context.globals.theme === 'light' ? rusticLightTheme : rusticDarkTheme
 
@@ -90,11 +92,11 @@ const preview = {
   },
 }
 
-export const webpackFinal = async (config) => {
+export const webpackFinal = async (config: any) => {
   config.module.rules.push({
     test: /\.css$/,
     use: ['style-loader', 'css-loader'],
-    include: path.resolve(__dirname, '../'),
+    include: '../',
   })
 
   config.module.rules.push({

.storybook/rusticTheme.js → .storybook/rusticTheme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create'
+import { create } from 'storybook/theming'
 
 export default create({
   base: 'light',

docs/quickStart.mdx

@@ -1,4 +1,4 @@
-import { Source, Meta } from '@storybook/addon-docs'
+import { Source, Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Documentation/Quick Start" />
 

docs/theme.mdx

@@ -1,4 +1,4 @@
-import { Source, Meta } from '@storybook/addon-docs'
+import { Source, Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Documentation/Theme And Styling" />
 

docs/troubleshooting.mdx

@@ -1,4 +1,4 @@
-import { Source, Meta } from '@storybook/addon-docs'
+import { Source, Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Documentation/Troubleshooting" />
 

docs/usage.md

@@ -1,4 +1,4 @@
-import { Source, Meta } from '@storybook/addon-docs'
+import { Source, Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Documentation/Usage" />
 

eslint.config.mjs

@@ -20,11 +20,11 @@ const compat = new FlatCompat({
 export default [{
     ignores: ['**/jest.config.js', '**/webpack.config.js', '**/webpack.prod.config.js'],
 }, ...compat.extends(
-  'eslint:recommended',
-  'plugin:@typescript-eslint/recommended',
-  'plugin:cypress/recommended',
-  'plugin:storybook/recommended',
-  'prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:cypress/recommended',
+    'plugin:storybook/recommended',
+    'prettier',
 ), {
     plugins: {
         "unused-imports": unusedImports,