update storybook dependencies

Author: mkumbobeaty

web/.storybook/main.ts

@@ -1,19 +1,34 @@
-import { resolve } from "path";
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from "node:url";
+import { resolve, dirname } from "path";
 
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|ts|tsx|mdx)"],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-styling"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-a11y",
+    "@storybook/addon-themes",
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs"
+  ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+
   core: {
     disableTelemetry: true,
   },
+
   staticDirs: ["./public"],
+
   viteFinal(config, { configType }) {
     return mergeConfig(config, {
       define: {
@@ -65,8 +80,11 @@ const config: StorybookConfig = {
       },
     });
   },
-  docs: {
-    autodocs: true,
-  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
 };
-module.exports = config;
+export default config;

web/.storybook/manager.ts

@@ -7,8 +7,8 @@ import {
   Observable,
 } from "@apollo/client";
 import { ThemeProvider } from "@emotion/react";
-import { withThemeFromJSXProvider } from "@storybook/addon-styling";
-import type { Preview, ReactRenderer } from "@storybook/react";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import type { Preview, ReactRenderer } from "@storybook/react-vite";
 import React from "react";
 
 import classicDarkTheme from "../src/classic/theme/reearthTheme/darkTheme"; // temp classic imports
@@ -33,18 +33,18 @@ const mockClient = new ApolloClient({
 const preview: Preview = {
   parameters: {
     backgrounds: {
-      values: [
-        { name: "Light", value: "lightGrey" },
-        { name: "Dark", value: "ash" },
-      ],
+      options: {
+        light: { name: "Light", value: "lightGrey" },
+        dark: { name: "Dark", value: "ash" }
+      },
     },
     layout: "fullscreen",
     controls: { expanded: true },
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       theme,
     },
   },
+
   decorators: [
     withThemeFromJSXProvider<ReactRenderer>({
       themes: {
@@ -73,6 +73,8 @@ const preview: Preview = {
       );
     },
   ],
+
+  tags: ["autodocs"]
 };
 
 export default preview;

web/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming";
+import { create } from "storybook/theming";
 
 export default create({
   base: "dark",