fix: bump and fix storybook

.storybook/main.js → .storybook/main.ts

@@ -1,16 +1,19 @@
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+import type { StorybookConfig } from "@storybook/react-vite";
 
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
   ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack4",
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
   },
   // Note: by default, storybook only forwards environment variables that
   //       take the form /^STORYBOOK_/ . The code below creates a 1:1 mapping
@@ -27,13 +30,5 @@ module.exports = {
       return accumulator;
     }, {}),
   }),
-  webpackFinal: async (config) => {
-    config.resolve.plugins = [
-      ...(config.resolve.plugins || []),
-      new TsconfigPathsPlugin({
-        extensions: config.resolve.extensions,
-      }),
-    ];
-    return config;
-  },
 };
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,29 @@
+import { Preview } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+
+import { default as GlobalStyles } from "../src/components/GlobalStyles/GlobalStyles";
+import { OnboardContext, useOnboardManager } from "../src/hooks/useOnboard";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={["/"]}>
+        <GlobalStyles />
+        <OnboardContext.Provider value={useOnboardManager()}>
+          <Story />
+        </OnboardContext.Provider>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -67,8 +67,8 @@
     "hardhat:node": "hardhat node",
     "cypress:open": "cypress open --e2e",
     "cypress:run": "cypress run --e2e",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
     "ampli:pull": "ampli pull --path=./src/ampli --omit-api-keys web && prettier -w ./src/ampli/*.ts",
     "postinstall": "patch-package"
@@ -94,16 +94,17 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@ethersproject/experimental": "^5.6.3",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-webpack4": "^6.5.12",
-    "@storybook/manager-webpack4": "^6.5.12",
-    "@storybook/node-logger": "^6.5.12",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.5.12",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/builder-vite": "^7.5.1",
+    "@storybook/node-logger": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -131,6 +132,7 @@
     "eslint": "^8.44.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-storybook": "^0.6.15",
     "hardhat": "^2.12.7",
     "husky": "^8.0.0",
     "jest": "^29.5.0",
@@ -142,6 +144,7 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.4.1",
     "serve": "^14.0.1",
+    "storybook": "^7.5.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",