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

This reverts commit 916dcad.

Author: wilfredmulenga

web/.storybook/main.ts

@@ -1,34 +1,19 @@
-// This file has been automatically migrated to valid ESM format by Storybook.
-import { fileURLToPath } from "node:url";
-import { resolve, dirname } from "path";
+import { resolve } 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-onboarding",
-    "@storybook/addon-a11y",
-    "@storybook/addon-themes",
-    "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-  ],
-
+  addons: ["@storybook/addon-essentials", "@storybook/addon-styling"],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-
   core: {
     disableTelemetry: true,
   },
-
   staticDirs: ["./public"],
-
   viteFinal(config, { configType }) {
     return mergeConfig(config, {
       define: {
@@ -61,29 +46,7 @@ const config: StorybookConfig = {
             find: "@reearth/core",
             replacement: resolve(__dirname, "..", "node_modules/@reearth/core"),
           },
-          // 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"),
-          },
+          // quickjs-emscripten
           {
             find: "@reearth",
             replacement: resolve(__dirname, "..", "src"),
@@ -94,10 +57,6 @@ 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
@@ -106,11 +65,8 @@ const config: StorybookConfig = {
       },
     });
   },
-
-  docs: {},
-
-  typescript: {
-    reactDocgen: "react-docgen-typescript",
+  docs: {
+    autodocs: true,
   },
 };
-export default config;
+module.exports = config;

web/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/manager-api";
+
+import theme from "./theme";
+
+addons.setConfig({
+  theme,
+});

web/.storybook/preview.tsx

@@ -7,8 +7,8 @@ import {
   Observable,
 } from "@apollo/client";
 import { ThemeProvider } from "@emotion/react";
-import { withThemeFromJSXProvider } from "@storybook/addon-themes";
-import type { Preview, ReactRenderer } from "@storybook/react-vite";
+import { withThemeFromJSXProvider } from "@storybook/addon-styling";
+import type { Preview, ReactRenderer } from "@storybook/react";
 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: {
-      options: {
-        light: { name: "Light", value: "lightGrey" },
-        dark: { name: "Dark", value: "ash" },
-      },
+      values: [
+        { name: "Light", value: "lightGrey" },
+        { name: "Dark", value: "ash" },
+      ],
     },
     layout: "fullscreen",
     controls: { expanded: true },
+    actions: { argTypesRegex: "^on.*" },
     docs: {
       theme,
     },
   },
-
   decorators: [
     withThemeFromJSXProvider<ReactRenderer>({
       themes: {
@@ -73,8 +73,6 @@ const preview: Preview = {
       );
     },
   ],
-
-  tags: ["autodocs"],
 };
 
 export default preview;

web/.storybook/theme.ts

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