chore(web): upgrade dependencies

web/.storybook/main.ts

@@ -6,9 +6,11 @@ import { mergeConfig } from "vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|ts|tsx|mdx)"],
   addons: ["@storybook/addon-essentials", "@storybook/addon-styling"],
-  framework: "@storybook/react-vite",
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
   core: {
-    builder: "@storybook/builder-vite",
     disableTelemetry: true,
   },
   staticDirs: ["./public"],
@@ -17,6 +19,7 @@ const config: StorybookConfig = {
       define: {
         "process.env.QTS_DEBUG": "false", // quickjs-emscripten
       },
+
       build:
         configType === "PRODUCTION"
           ? {
@@ -27,13 +30,31 @@ const config: StorybookConfig = {
           : {},
       resolve: {
         alias: [
-          { find: "crypto", replacement: "crypto-js" }, // quickjs-emscripten
-          { find: "@reearth", replacement: resolve(__dirname, "..", "src") },
-          { find: "csv-parse", replacement: "csv-parse/browser/esm" },
+          {
+            find: "crypto",
+            replacement: "crypto-js",
+          },
+          // quickjs-emscripten
+          {
+            find: "@reearth",
+            replacement: resolve(__dirname, "..", "src"),
+          },
+          {
+            find: "csv-parse",
+            replacement: "csv-parse/browser/esm",
+          },
         ],
       },
+      server: {
+        watch: {
+          // https://github.com/storybookjs/storybook/issues/22253#issuecomment-1673229400
+          ignored: ["**/.env"],
+        },
+      },
     });
   },
+  docs: {
+    autodocs: true,
+  },
 };
-
 module.exports = config;

web/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  /* enable page scroll for docs page */
+  body:has(#storybook-docs .sbdocs){
+    overflow-y: auto !important;
+  }
+</style>

web/.storybook/preview.tsx

@@ -17,6 +17,8 @@ import { Provider as DndProvider } from "../src/classic/util/use-dnd";
 import { Provider as I18nProvider } from "../src/services/i18n";
 import { GlobalStyles, darkTheme, lightTheme } from "../src/services/theme";
 
+import theme from "./theme";
+
 // apollo client that does nothing
 const mockClient = new ApolloClient({
   link: new ApolloLink(
@@ -39,6 +41,9 @@ const preview: Preview = {
     layout: "fullscreen",
     controls: { expanded: true },
     actions: { argTypesRegex: "^on.*" },
+    docs: {
+      theme,
+    },
   },
   decorators: [
     withThemeFromJSXProvider({

web/package.json

@@ -41,18 +41,17 @@
         "@graphql-codegen/typescript-react-apollo": "3.3.7",
         "@playwright/test": "1.33.0",
         "@rollup/plugin-yaml": "4.1.0",
-        "@storybook/addon-essentials": "7.0.18",
-        "@storybook/addon-styling": "1.0.8",
-        "@storybook/addons": "7.0.18",
-        "@storybook/builder-vite": "7.0.18",
-        "@storybook/manager-api": "7.0.18",
-        "@storybook/react": "7.0.18",
-        "@storybook/react-vite": "7.0.18",
-        "@storybook/theming": "7.0.18",
+        "@storybook/addon-essentials": "7.3.2",
+        "@storybook/addon-styling": "1.3.6",
+        "@storybook/addons": "7.3.2",
+        "@storybook/manager-api": "7.3.2",
+        "@storybook/react": "7.3.2",
+        "@storybook/react-vite": "7.3.2",
+        "@storybook/theming": "7.3.2",
         "@testing-library/jest-dom": "5.16.5",
         "@testing-library/react": "14.0.0",
         "@testing-library/user-event": "14.4.3",
-        "@types/apollo-upload-client": "14.1.0",
+        "@types/apollo-upload-client": "17.0.2",
         "@types/carbon__colors": "10.31.0",
         "@types/gapi.auth2": "0.0.57",
         "@types/gapi.client": "1.0.5",
@@ -78,6 +77,7 @@
         "eslint": "8.40.0",
         "eslint-config-reearth": "0.2.2",
         "eslint-plugin-playwright": "0.12.0",
+        "eslint-plugin-storybook": "0.6.13",
         "husky": "8.0.3",
         "i18next-parser": "8.0.0",
         "jsdom": "22.0.0",
@@ -87,19 +87,19 @@
         "read-env": "2.0.0",
         "rollup": "3.22.1",
         "rollup-plugin-visualizer": "5.9.0",
-        "storybook": "7.0.18",
+        "storybook": "7.3.2",
         "ts-node": "10.9.1",
         "type-fest": "3.10.0",
         "typescript": "5.0.4",
         "typescript-styled-plugin": "0.18.3",
-        "vite": "4.3.2",
+        "vite": "4.4.9",
         "vite-plugin-cesium": "1.2.22",
         "vite-tsconfig-paths": "4.2.0",
         "vitest": "0.31.0",
         "web-streams-polyfill": "3.2.1"
     },
     "dependencies": {
-        "@apollo/client": "3.7.14",
+        "@apollo/client": "3.8.1",
         "@auth0/auth0-react": "2.1.0",
         "@aws-amplify/ui-react": "5.0.2",
         "@carbon/colors": "11.18.0",
@@ -120,7 +120,7 @@
         "array-move": "4.0.0",
         "aws-amplify": "5.2.2",
         "axios": "1.4.0",
-        "cesium": "1.105.2",
+        "cesium": "1.107.2",
         "cesium-dnd": "1.1.0",
         "cesium-mvt-imagery-provider": "1.3.0",
         "core-js": "3.30.2",
@@ -175,7 +175,7 @@
         "react-spinners": "0.13.8",
         "react-use": "17.4.0",
         "remark-gfm": "3.0.1",
-        "resium": "1.16.1",
+        "resium": "1.17.1",
         "tinycolor2": "1.6.0",
         "ts-easing": "0.2.0",
         "use-callback-ref": "1.3.0",

web/src/beta/lib/core/engines/Cesium/Feature/Tileset/hooks.ts

@@ -141,11 +141,13 @@ const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
 const useFeature = ({
   id,
   tileset,
+  tilesetReady,
   layer,
   evalFeature,
 }: {
   id?: string;
   tileset: MutableRefObject<Cesium3DTileset | undefined>;
+  tilesetReady: boolean;
   layer?: ComputedLayer;
   evalFeature: EvalFeature;
 }) => {
@@ -227,7 +229,7 @@ const useFeature = ({
         await attachComputedFeature(feature);
       });
     });
-  }, [tileset, cachedFeaturesRef, attachComputedFeature, layerId]);
+  }, [tileset, tilesetReady, cachedFeaturesRef, attachComputedFeature, layerId]);
 
   useEffect(() => {
     cachedCalculatedLayerRef.current = layer;
@@ -378,6 +380,7 @@ export const useHooks = ({
       }),
   );
   const tilesetRef = useRef<Cesium3DTilesetType>();
+  const [tilesetReady, setTilesReady] = useState(false);
 
   const ref = useCallback(
     (tileset: CesiumComponentRef<Cesium3DTilesetType> | null) => {
@@ -388,13 +391,17 @@ export const useHooks = ({
         (tileset?.cesiumElement as any)[layerIdField] = layer.id;
       }
       tilesetRef.current = tileset?.cesiumElement;
+      if (tilesetRef.current) {
+        setTilesReady(true);
+      }
     },
     [id, layer?.id, feature?.id],
   );
 
   useFeature({
     id,
     tileset: tilesetRef,
+    tilesetReady,
     layer,
     evalFeature,
   });
@@ -431,13 +438,6 @@ export const useHooks = ({
         return;
       }
 
-      try {
-        await tilesetRef.current?.readyPromise;
-      } catch (e) {
-        console.error("Could not load 3D tiles: ", e);
-        return;
-      }
-
       // Use internal original matrix for clipping planes.
       const clippingPlanesOriginMatrix = (
         tilesetRef.current as any

web/src/beta/lib/core/engines/Cesium/core/Globe.tsx

@@ -27,7 +27,7 @@ export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.El
     [property?.terrain, property?.default],
   );
 
-  const terrainProvider = useMemo((): TerrainProvider | undefined => {
+  const terrainProvider = useMemo((): Promise<TerrainProvider> | TerrainProvider | undefined => {
     const opts = {
       terrain: terrainProperty?.terrain,
       terrainType: terrainProperty?.terrainType,
@@ -89,36 +89,37 @@ const terrainProviders: {
           | "terrainCesiumIonUrl"
           | "terrainNormal"
         >,
-      ) => TerrainProvider | null);
+      ) => Promise<TerrainProvider> | null);
 } = {
   cesium: ({ terrainCesiumIonAccessToken, terrainNormal }) =>
-    // https://github.com/CesiumGS/cesium/blob/main/Source/Core/createWorldTerrain.js
-    new CesiumTerrainProvider({
-      url: IonResource.fromAssetId(1, {
+    CesiumTerrainProvider.fromUrl(
+      IonResource.fromAssetId(1, {
         accessToken: terrainCesiumIonAccessToken,
       }),
-      requestVertexNormals: terrainNormal,
-      requestWaterMask: false,
-    }),
-  arcgis: ({ terrainNormal }) =>
-    new ArcGISTiledElevationTerrainProvider({
-      url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
-      requestVertexNormals: terrainNormal,
-    }),
+      {
+        requestVertexNormals: terrainNormal,
+        requestWaterMask: false,
+      },
+    ),
+  arcgis: () =>
+    ArcGISTiledElevationTerrainProvider.fromUrl(
+      "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+    ),
   cesiumion: ({
     terrainCesiumIonAccessToken,
     terrainCesiumIonAsset,
     terrainCesiumIonUrl,
     terrainNormal,
   }) =>
     terrainCesiumIonAsset
-      ? new CesiumTerrainProvider({
-          url:
-            terrainCesiumIonUrl ||
+      ? CesiumTerrainProvider.fromUrl(
+          terrainCesiumIonUrl ||
             IonResource.fromAssetId(parseInt(terrainCesiumIonAsset, 10), {
               accessToken: terrainCesiumIonAccessToken,
             }),
-          requestVertexNormals: terrainNormal,
-        })
+          {
+            requestVertexNormals: terrainNormal,
+          },
+        )
       : null,
 };