chore: Use vite to build Storybook (#3581)

editor.planx.uk/.storybook/__mocks__/react-navi.ts

@@ -0,0 +1,17 @@
+import {
+  useCurrentRoute as originalUseCurrentRoute,
+  useNavigation as originalUseNavigation,
+} from "react-navi";
+
+import type { Decorator } from "@storybook/react";
+
+export const reactNaviDecorator: Decorator = (storyFn, context) => {
+  const { parameters } = context;
+
+  const useCurrentRoute =
+    parameters?.reactNavi?.useCurrentRoute || originalUseCurrentRoute;
+  const useNavigation =
+    parameters?.reactNavi?.useNavigation || originalUseNavigation;
+
+  return storyFn({ useCurrentRoute, useNavigation });
+};

editor.planx.uk/.storybook/main.ts

@@ -0,0 +1,18 @@
+module.exports = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-a11y",
+  ],
+  staticDirs: ["../public"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
+  docs: {},
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
+};

editor.planx.uk/.storybook/preview.js → editor.planx.uk/.storybook/preview.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { defaultTheme } from "../src/theme";
+import React from "react";
 
 import { reactNaviDecorator } from "./__mocks__/react-navi";
 
@@ -19,3 +20,4 @@ export const decorators = [
   ),
   reactNaviDecorator,
 ];
+export const tags = ["autodocs"];

editor.planx.uk/.storybook/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});

editor.planx.uk/package.json

@@ -113,8 +113,8 @@
     "@storybook/node-logger": "^7.6.7",
     "@storybook/preset-create-react-app": "^7.6.7",
     "@storybook/react": "^7.6.7",
-    "@storybook/react-webpack5": "^7.6.7",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/react-vite": "^7.6.7",
+    "@storybook/test": "^7.6.7",
     "@storybook/theming": "^7.6.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.2.1",