Upgrade to Storybook 7 (#1647)

* Remove storybook

* Install storybook

* Fix

* Format

* Update

* Disable background

Author: Methuselah96

packages/redux-devtools-ui/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: '../../eslintrc.js.base.json',
+  extends: ['../../eslintrc.js.base.json', 'plugin:storybook/recommended'],
   overrides: [
     {
       files: ['*.ts', '*.tsx'],

packages/redux-devtools-ui/.gitignore

@@ -1 +1,2 @@
 storybook-static
+*storybook.log

packages/redux-devtools-ui/.storybook/main.ts

@@ -1,24 +1,36 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-links'),
     {
-      name: '@storybook/addon-essentials',
+      name: getAbsolutePath('@storybook/addon-essentials'),
       options: {
         backgrounds: false,
       },
     },
-    '@storybook/addon-interactions',
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-webpack5'),
     options: {},
   },
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../fonts'],
 };
-
 export default config;

packages/redux-devtools-ui/.storybook/preview.tsx

@@ -18,7 +18,12 @@ const withThemeProvider = (Story, context) => (
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
   },
   globalTypes: {
     theme: {

packages/redux-devtools-ui/package.json

@@ -25,8 +25,8 @@
   },
   "scripts": {
     "start": "pnpm run storybook",
-    "storybook": "storybook dev --port 6006 --static-dir ./fonts",
-    "build:storybook": "storybook build --static-dir ./fonts --quiet",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build --quiet",
     "build": "pnpm run build:lib && pnpm run build:storybook",
     "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
     "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
@@ -65,11 +65,16 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@chromatic-com/storybook": "1.2.25",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-onboarding": "^8.0.5",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.2",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
+    "@storybook/test": "^8.0.5",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
@@ -86,14 +91,15 @@
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ncp": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.5",
     "styled-components": "^5.3.11",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",