upgrade and fix storybook

Author: geoffhouse

src/client/.storybook/main.js

@@ -7,11 +7,10 @@ const config = {
     addons: [
         "@storybook/addon-links",
         "@storybook/addon-essentials",
-        "@storybook/addon-interactions" // Recommended for SB8 + @storybook/test
+        "@storybook/addon-interactions"
     ],
 
     framework: {
-        // Updated to standard string format for SB8
         name: "@storybook/react-vite",
         options: {},
     },
@@ -31,11 +30,12 @@ const config = {
     },
 
     docs: {
-        autodocs: true
+        defaultName: 'Documentation',
+        autodocs: true,
+        docsMode: true,
     },
 
     typescript: {
-        // 'react-docgen' is significantly faster in SB8 than 'react-docgen-typescript'
         reactDocgen: "react-docgen"
     }
 };

src/client/.storybook/manager.js

@@ -5,4 +5,8 @@ import bugTheme from "./BugTheme";
 
 addons.setConfig({
     theme: bugTheme,
+    sidebar: {
+        collapsedRoots: ['bug-core'],
+        showStoriesView: false,
+    },
 });

src/client/.storybook/preview-head.html

@@ -0,0 +1,22 @@
+<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap" rel="stylesheet">
+<style>
+    .stories-no-header h2 {
+        display: none;
+    }
+
+    .sbdocs.sbdocs-wrapper {
+        padding-top: 20px;
+    }
+
+    .docs-story {
+        background-color: rgb(24, 24, 24);
+    }
+
+    .sbdocs hr {
+        margin: 20px 0;
+    }
+
+    .sbdocs h2 {
+        display: none;
+    }
+</style>

src/client/.storybook/preview.jsx

@@ -1,26 +1,17 @@
+import { BugConfirmDialogProvider } from "@core/BugConfirmDialog";
+import { BugCustomDialogProvider } from "@core/BugCustomDialog";
+import { BugRenameDialogProvider } from "@core/BugRenameDialog";
 import { ThemeProvider } from "@emotion/react";
 import { ThemeProvider as MUIThemeProvider, StyledEngineProvider } from "@mui/material/styles";
-import { fn } from "@storybook/test";
+import reduxStore from "@redux/store";
 import { themes } from "@storybook/theming";
 import { Provider } from "react-redux";
 import { MemoryRouter as Router } from "react-router";
-
-import { BugConfirmDialogProvider } from "@core/BugConfirmDialog";
-import { BugCustomDialogProvider } from "@core/BugCustomDialog";
-import { BugRenameDialogProvider } from "@core/BugRenameDialog";
-import reduxStore from "@redux/store";
 import theme from "../src/theme";
 
 const appTheme = theme();
 
-/** @type { import('@storybook/react').Preview } */
 const preview = {
-    args: {
-        onClick: fn(),
-        onChange: fn(),
-        onSubmit: fn(),
-    },
-
     parameters: {
         controls: {
             expanded: true,
@@ -71,4 +62,4 @@ const preview = {
     ],
 };
 
-export default preview;
+export default preview;