chore(web): update storybooks dependencies (#139)

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: {
@@ -46,7 +61,29 @@ const config: StorybookConfig = {
             find: "@reearth/core",
             replacement: resolve(__dirname, "..", "node_modules/@reearth/core"),
           },
-          // quickjs-emscripten
+          // cesium-mvt-imagery-provider: force resolution to the JS bundle, not the .d.ts types file
+          {
+            find: "cesium-mvt-imagery-provider",
+            replacement: resolve(
+              __dirname,
+              "..",
+              "node_modules/cesium-mvt-imagery-provider/dist/cesium-mvt-imagery-provider.mjs",
+            ),
+          },
+          // quickjs-emscripten: force resolution to the JS bundle, not the .d.ts types file
+          {
+            find: "quickjs-emscripten-sync",
+            replacement: resolve(
+              __dirname,
+              "..",
+              "node_modules/quickjs-emscripten-sync/dist/quickjs-emscripten-sync.mjs",
+            ),
+          },
+          // react-align: force resolution to the JS bundle, not the .d.ts types file
+          {
+            find: "react-align",
+            replacement: resolve(__dirname, "..", "node_modules/react-align/dist/react-align.mjs"),
+          },
           {
             find: "@reearth",
             replacement: resolve(__dirname, "..", "src"),
@@ -57,6 +94,10 @@ const config: StorybookConfig = {
           },
         ],
       },
+      optimizeDeps: {
+        include: ["quickjs-emscripten-sync", "prop-types", "hoist-non-react-statics", "react-is"],
+        exclude: ["react-align"],
+      },
       server: {
         watch: {
           // https://github.com/storybookjs/storybook/issues/22253#issuecomment-1673229400
@@ -65,8 +106,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",