chore: update npm dependencies

.storybook/main.ts

@@ -19,6 +19,9 @@ const config: StorybookConfig = {
     },
     "@storybook/addon-storysource",
   ],
+  typescript: {
+    reactDocgen: false,
+  },
   viteFinal(config) {
     return mergeConfig(config, {
       base: "",

docs/package.json

@@ -12,7 +12,7 @@
     "clear": "docusaurus clear"
   },
   "engines": {
-    "node": ">=v18"
+    "node": ">=20.12.0"
   },
   "browserslist": {
     "production": [
@@ -27,18 +27,18 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.1",
-    "@docusaurus/preset-classic": "2.4.1",
-    "clsx": "1.2.1",
+    "@docusaurus/core": "3.2.0",
+    "@docusaurus/preset-classic": "3.2.0",
+    "clsx": "2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.1",
-    "@tsconfig/docusaurus": "2.0.0",
-    "@types/react": "18.2.14",
-    "@types/react-helmet": "6.1.6",
+    "@docusaurus/module-type-aliases": "3.2.0",
+    "@tsconfig/docusaurus": "2.0.3",
+    "@types/react": "18.2.73",
+    "@types/react-helmet": "6.1.11",
     "@types/react-router-dom": "5.3.3",
-    "typescript": "5.1.6"
+    "typescript": "5.4.3"
   }
 }

package.json

@@ -36,43 +36,43 @@
     "dist"
   ],
   "engines": {
-    "node": ">=v18"
+    "node": ">=20.11.0"
   },
   "peerDependencies": {
     "cesium": "1.x",
     "react": ">=18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.0.26",
-    "@storybook/addon-storysource": "7.0.26",
-    "@storybook/addons": "7.0.26",
-    "@storybook/builder-vite": "7.0.26",
-    "@storybook/react": "7.0.26",
-    "@storybook/react-vite": "7.0.18",
-    "@storybook/theming": "7.0.26",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
-    "@types/node": "18.16.19",
-    "@types/react": "18.0.28",
-    "@vitejs/plugin-react": "4.0.2",
-    "c8": "8.0.0",
+    "@storybook/addon-essentials": "8.0.5",
+    "@storybook/addon-storysource": "8.0.5",
+    "@storybook/addons": "7.6.17",
+    "@storybook/builder-vite": "8.0.5",
+    "@storybook/react": "8.0.5",
+    "@storybook/react-vite": "8.0.5",
+    "@storybook/theming": "8.0.5",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.2",
+    "@types/node": "20.12.2",
+    "@types/react": "18.2.73",
+    "@vitejs/plugin-react": "4.2.1",
+    "c8": "9.1.0",
     "cesium": "1.107.2",
-    "eslint": "8.44.0",
-    "eslint-config-reearth": "0.2.2",
-    "globby": "13.2.2",
-    "jsdom": "22.1.0",
-    "npm-run-all": "4.1.5",
-    "prettier": "2.8.8",
+    "eslint": "8.57.0",
+    "eslint-config-reearth": "0.3.0",
+    "globby": "14.0.1",
+    "jsdom": "24.0.0",
+    "npm-run-all2": "5.0.0",
+    "prettier": "3.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.0.18",
+    "storybook": "8.0.5",
     "ts-expect": "1.3.0",
-    "ts-node": "10.9.1",
-    "typescript": "5.1.6",
-    "vite": "4.4.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.4.3",
+    "vite": "5.2.7",
     "vite-plugin-cesium": "1.2.22",
-    "vite-plugin-dts": "2.1.0",
-    "vitest": "0.29.2",
-    "web-streams-polyfill": "3.2.1"
+    "vite-plugin-dts": "3.8.1",
+    "vitest": "1.4.0",
+    "web-streams-polyfill": "4.0.0"
   }
 }

src/Billboard/Billboard.stories.tsx

@@ -1,57 +1,63 @@
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Cartesian3, Color, Transforms } from "cesium";
 
 import BillboardCollection from "../BillboardCollection";
 import { events } from "../core/storybook";
 import Viewer from "../Viewer";
 
-import Billboard, { BillboardProps } from "./Billboard";
+import Billboard from "./Billboard";
+
+type Story = StoryObj<typeof Billboard>;
 
 export default {
   title: "Billboard",
   component: BillboardCollection,
 } as Meta;
 
-const Template: Story<BillboardProps> = args => (
-  <Viewer full>
-    <BillboardCollection
-      modelMatrix={Transforms.eastNorthUpToFixedFrame(Cartesian3.fromDegrees(-75.59777, 40.03883))}>
-      {(
-        [
-          [Color.ORANGE, new Cartesian3(0.0, 0.0, 0.0)],
-          [Color.YELLOW, new Cartesian3(1000000.0, 0.0, 0.0)],
-          [Color.GREEN, new Cartesian3(0.0, 1000000.0, 0.0)],
-          [Color.CYAN, new Cartesian3(0.0, 0.0, 1000000.0)],
-        ] as const
-      ).map((p, i) => (
-        <Billboard key={i} id={`billboard-${i}`} {...args} color={p[0]} position={p[1]} />
-      ))}
-    </BillboardCollection>
-  </Viewer>
-);
-
-export const Basic = Template.bind({});
-
-Basic.args = {
-  image: "example.png",
-  scale: 0.1,
+export const Basic: Story = {
+  args: {
+    image: "example.png",
+    scale: 0.1,
+  },
+  render: args => (
+    <Viewer full>
+      <BillboardCollection
+        modelMatrix={Transforms.eastNorthUpToFixedFrame(
+          Cartesian3.fromDegrees(-75.59777, 40.03883),
+        )}>
+        {(
+          [
+            [Color.ORANGE, new Cartesian3(0.0, 0.0, 0.0)],
+            [Color.YELLOW, new Cartesian3(1000000.0, 0.0, 0.0)],
+            [Color.GREEN, new Cartesian3(0.0, 1000000.0, 0.0)],
+            [Color.CYAN, new Cartesian3(0.0, 0.0, 1000000.0)],
+          ] as const
+        ).map((p, i) => (
+          <Billboard key={i} id={`billboard-${i}`} {...args} color={p[0]} position={p[1]} />
+        ))}
+      </BillboardCollection>
+    </Viewer>
+  ),
 };
 
-export const Events: Story<BillboardProps> = args => (
-  <Viewer full>
-    <BillboardCollection
-      modelMatrix={Transforms.eastNorthUpToFixedFrame(Cartesian3.fromDegrees(-75.59777, 40.03883))}>
-      <Billboard
-        {...args}
-        color={Color.ORANGE}
-        position={new Cartesian3(0.0, 0.0, 0.0)}
-        {...events}
-      />
-    </BillboardCollection>
-  </Viewer>
-);
-
-Events.args = {
-  image: "example.png",
-  scale: 0.1,
+export const Events: Story = {
+  args: {
+    image: "example.png",
+    scale: 0.1,
+  },
+  render: args => (
+    <Viewer full>
+      <BillboardCollection
+        modelMatrix={Transforms.eastNorthUpToFixedFrame(
+          Cartesian3.fromDegrees(-75.59777, 40.03883),
+        )}>
+        <Billboard
+          {...args}
+          color={Color.ORANGE}
+          position={new Cartesian3(0.0, 0.0, 0.0)}
+          {...events}
+        />
+      </BillboardCollection>
+    </Viewer>
+  ),
 };

src/Camera/Camera.stories.tsx

@@ -1,20 +1,24 @@
 import { actions } from "@storybook/addon-actions";
-import { Story, Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Cartesian3 } from "cesium";
 
 import CameraFlyTo from "../CameraFlyTo";
 import Viewer from "../Viewer";
 
-import Camera, { CameraProps } from "./Camera";
+import Camera from "./Camera";
+
+type Story = StoryObj<typeof Camera>;
 
 export default {
   title: "Camera",
   component: Camera,
 } as Meta;
 
-export const Basic: Story<CameraProps> = args => (
-  <Viewer full>
-    <Camera {...args} {...actions("onMoveEnd", "onMoveStart", "onChange")} />
-    <CameraFlyTo duration={5} destination={Cartesian3.fromDegrees(139.767052, 35.681167, 100)} />
-  </Viewer>
-);
+export const Basic: Story = {
+  render: args => (
+    <Viewer full>
+      <Camera {...args} {...actions("onMoveEnd", "onMoveStart", "onChange")} />
+      <CameraFlyTo duration={5} destination={Cartesian3.fromDegrees(139.767052, 35.681167, 100)} />
+    </Viewer>
+  ),
+};

src/CameraFlyTo/CameraFlyTo.stories.tsx

@@ -1,41 +1,46 @@
-import { Story, Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Cartesian3 } from "cesium";
 import { useState } from "react";
 
 import Viewer from "../Viewer";
 
-import CameraFlyTo, { CameraFlyToProps } from "./CameraFlyTo";
+import CameraFlyTo from "./CameraFlyTo";
+
+type Story = StoryObj<typeof CameraFlyTo>;
 
 export default {
   title: "CameraFlyTo",
   component: CameraFlyTo,
 } as Meta;
 
-export const Basic: Story<CameraFlyToProps> = args => (
-  <Viewer full>
-    <CameraFlyTo {...args} destination={Cartesian3.fromDegrees(139.767052, 35.681167, 100)} />
-  </Viewer>
-);
-
-Basic.args = { duration: 5 };
-
-export const Once: Story<CameraFlyToProps> = args => {
-  const [once, setOnce] = useState(true);
-  return (
+export const Basic: Story = {
+  args: { duration: 5 },
+  render: args => (
     <Viewer full>
-      <button
-        style={{ position: "absolute", top: "0", left: "0" }}
-        onClick={() => setOnce(o => !o)}>
-        Once: {once.toString()}
-      </button>
-      <CameraFlyTo
-        {...args}
-        duration={5}
-        destination={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
-        once={once}
-      />
+      <CameraFlyTo {...args} destination={Cartesian3.fromDegrees(139.767052, 35.681167, 100)} />
     </Viewer>
-  );
+  ),
 };
 
-Once.args = { duration: 5 };
+export const Once: Story = {
+  args: { duration: 5 },
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [once, setOnce] = useState(true);
+    return (
+      <Viewer full>
+        <button
+          style={{ position: "absolute", top: "0", left: "0" }}
+          onClick={() => setOnce(o => !o)}>
+          Once: {once.toString()}
+        </button>
+        <CameraFlyTo
+          {...args}
+          duration={5}
+          destination={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
+          once={once}
+        />
+      </Viewer>
+    );
+  },
+};

src/CameraLookAt/CameraLookAt.stories.tsx

@@ -1,22 +1,25 @@
-import { Story, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react";
 import { Cartesian3 } from "cesium";
 
 import Viewer from "../Viewer";
 
-import CameraLookAt, { CameraLookAtProps } from "./CameraLookAt";
+import CameraLookAt from "./CameraLookAt";
+
+type Story = StoryObj<typeof CameraLookAt>;
 
 export default {
   title: "CameraLookAt",
   component: CameraLookAt,
 } as Meta;
 
-export const Basic: Story<CameraLookAtProps> = args => (
-  <Viewer full>
-    <CameraLookAt {...args} />
-  </Viewer>
-);
-
-Basic.args = {
-  target: Cartesian3.fromDegrees(-123.0744619, 44.0503706, 50),
-  offset: new Cartesian3(30, 30, -10),
+export const Basic: Story = {
+  args: {
+    target: Cartesian3.fromDegrees(-123.0744619, 44.0503706, 50),
+    offset: new Cartesian3(30, 30, -10),
+  },
+  render: args => (
+    <Viewer full>
+      <CameraLookAt {...args} />
+    </Viewer>
+  ),
 };