merge from main

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",

web/.storybook/theme.ts

@@ -44,6 +44,7 @@
         "**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": "eslint --fix"
     },
     "devDependencies": {
+        "@chromatic-com/storybook": "5.2.1",
         "@emotion/jest": "11.11.0",
         "@graphql-codegen/cli": "6.1.0",
         "@graphql-codegen/client-preset": "5.2.0",
@@ -54,13 +55,11 @@
         "@graphql-codegen/typescript-react-apollo": "4.3.3",
         "@playwright/test": "1.55.1",
         "@rollup/plugin-yaml": "4.1.2",
-        "@storybook/addon-essentials": "7.5.2",
-        "@storybook/addon-styling": "1.3.7",
-        "@storybook/addons": "7.5.2",
-        "@storybook/manager-api": "7.5.2",
-        "@storybook/react": "7.5.2",
-        "@storybook/react-vite": "7.5.2",
-        "@storybook/theming": "7.5.2",
+        "@storybook/addon-a11y": "10.4.0",
+        "@storybook/addon-docs": "10.4.0",
+        "@storybook/addon-onboarding": "10.4.0",
+        "@storybook/addon-themes": "10.4.0",
+        "@storybook/react-vite": "10.4.0",
         "@testing-library/jest-dom": "6.1.4",
         "@testing-library/react": "14.0.0",
         "@testing-library/user-event": "14.5.1",
@@ -81,35 +80,35 @@
         "@types/react-leaflet": "2.8.2",
         "@types/styled-components": "5.1.29",
         "@types/tinycolor2": "1.4.5",
-        "@types/uuid": "11.0.0",
-        "@vitejs/plugin-react-swc": "4.3.1",
-        "@vitest/coverage-v8": "4.1.6",
+        "@types/uuid": "9.0.6",
+        "@vitejs/plugin-react-swc": "3.7.1",
+        "@vitest/coverage-v8": "4.0.14",
         "@welldone-software/why-did-you-render": "7.0.1",
         "del-cli": "5.1.0",
         "dotenv": "16.3.1",
         "eslint": "8.40.0",
         "eslint-config-reearth": "0.2.2",
         "eslint-plugin-playwright": "0.12.0",
-        "eslint-plugin-storybook": "0.6.15",
+        "eslint-plugin-storybook": "10.4.0",
         "husky": "8.0.3",
         "i18next-parser": "9.3.0",
         "jsdom": "22.1.0",
         "lint-staged": "13.2.2",
         "npm-run-all": "4.1.5",
         "prettier": "2.8.8",
         "read-env": "2.0.0",
-        "rollup": "4.60.4",
-        "rollup-plugin-visualizer": "7.0.1",
-        "storybook": "7.5.2",
+        "rollup": "4.22.4",
+        "rollup-plugin-visualizer": "6.0.3",
+        "storybook": "10.4.0",
         "ts-node": "10.9.1",
         "type-fest": "4.6.0",
-        "typescript": "6.0.3",
+        "typescript": "5.0.4",
         "typescript-styled-plugin": "0.18.3",
-        "vite": "8.0.13",
+        "vite": "5.4.21",
         "vite-plugin-cesium": "1.2.23",
-        "vite-plugin-svgr": "5.2.0",
-        "vite-tsconfig-paths": "6.1.1",
-        "vitest": "4.1.6",
+        "vite-plugin-svgr": "4.5.0",
+        "vite-tsconfig-paths": "5.1.4",
+        "vitest": "4.0.14",
         "web-streams-polyfill": "3.2.1"
     },
     "dependencies": {
@@ -130,7 +129,7 @@
         "@rot1024/use-transition": "1.0.0",
         "@sentry/browser": "7.119.1",
         "@seznam/compose-react-refs": "1.0.6",
-        "@turf/turf": "6.5.0",
+        "@turf/turf": "7.3.5",
         "@types/d3": "7.4.3",
         "@types/escape-string-regexp": "2.0.1",
         "@ungap/event-target": "0.2.4",
@@ -139,7 +138,7 @@
         "apollo-upload-client": "17.0.0",
         "array-move": "4.0.0",
         "aws-amplify": "6.15.8",
-        "axios": "1.16.1",
+        "axios": "1.12.0",
         "cesium": "1.116.0",
         "cesium-dnd": "1.1.0",
         "cesium-mvt-imagery-provider": "1.4.0",
@@ -151,7 +150,7 @@
         "dayjs": "1.11.10",
         "detect-browser": "5.3.0",
         "escape-string-regexp": "5.0.0",
-        "fast-xml-parser": "5.7.0",
+        "fast-xml-parser": "4.3.2",
         "formik": "2.4.5",
         "framer-motion": "10.18.0",
         "github-markdown-css": "5.4.0",
@@ -169,7 +168,7 @@
         "leaflet": "1.9.4",
         "lexical": "0.12.2",
         "localforage": "1.10.0",
-        "lodash-es": "4.18.1",
+        "lodash-es": "4.17.21",
         "lru-cache": "8.0.4",
         "mini-svg-data-uri": "1.4.4",
         "moment-timezone": "0.5.43",
@@ -181,7 +180,7 @@
         "rc-slider": "9.7.5",
         "react": "18.3.1",
         "react-accessible-accordion": "5.0.0",
-        "react-align": "2.2.2",
+        "react-align": "2.2.3",
         "react-beautiful-dnd": "13.1.1",
         "react-colorful": "5.6.1",
         "react-dnd": "16.0.1",
@@ -210,7 +209,7 @@
         "use-callback-ref": "1.3.0",
         "use-custom-compare": "1.4.0",
         "use-file-input": "1.0.0",
-        "uuid": "14.0.0",
+        "uuid": "9.0.1",
         "xstate": "4.38.2"
     },
     "packageManager": "yarn@4.10.2"

web/.yarn/install-state.gz

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import Accordion from ".";
 

web/package.json

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import Avatar from ".";
 

web/src/beta/components/Accordion/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import Button from ".";
 

web/src/beta/components/Avatar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";