Merge branch 'main' into add-unsafe-plugin-urls-envvar

reearth · Dec 11, 2024 · aa2cfa9 · aa2cfa9
2 parents 61e1b62 + daa169c
commit aa2cfa9
Show file tree

Hide file tree

Showing 55 changed files with 2,083 additions and 1,265 deletions.
diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml
@@ -2318,6 +2318,37 @@ extensions:
             - id: creditUrl
               type: url
               title: Credit Url
+  - id: googleMapSearch
+    type: widget
+    name: Google Map Search (Experimental)
+    description: A widget that allows you to search for a location on the map using Google Maps.
+    singleOnly: true
+    widgetLayout:
+      defaultLocation:
+        zone: outer
+        section: left
+        area: top
+    schema:
+      groups:
+        - id: default
+          title: Google Map Search Widget
+          fields:
+            - id: apiToken
+              type: string
+              title: API Token
+              description: Google Maps API Key
+        - id: appearance
+          title: Appearance
+          fields:
+            - id: theme
+              type: string
+              title: Theme
+              defaultValue: light
+              choices:
+                - key: light
+                  label: Light
+                - key: dark
+                  label: Dark
   - id: story
     name: Story
     type: story

diff --git a/web/components.json b/web/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "@reearth-widget-ui/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": "tw-"
+  },
+  "aliases": {
+    "components": "@reearth-widget-ui/components",
+    "utils": "@reearth-widget-ui/utils",
+    "ui": "@reearth-widget-ui/components/ui",
+    "lib": "@reearth-widget-ui/lib",
+    "hooks": "@reearth-widget-ui/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/web/e2e/utils/index.ts b/web/e2e/utils/index.ts
@@ -20,9 +20,9 @@ export type Reearth = {
   }>;
   goto: Page["goto"];
   token: string | undefined;
-  gql: <T = any>(
+  gql: <T = unknown>(
     query: string,
-    variables?: Record<string, any>,
+    variables?: Record<string, unknown>,
     options?: { ignoreError?: boolean }
   ) => Promise<T>;
 } & Config;

diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
@@ -37,4 +37,9 @@ const e2eConfig = [
   }
 ];
 
-export default [...config("@reearth"), ...e2eConfig, ...themeConfig];
+export default [
+  ...config("@reearth"),
+  ...e2eConfig,
+  ...themeConfig,
+  { ignores: ["bin/pluginDoc.ts"] }
+];
diff --git a/web/package.json b/web/package.json
@@ -73,6 +73,7 @@
     "@vitejs/plugin-react-swc": "3.5.0",
     "@vitest/coverage-v8": "0.34.6",
     "@welldone-software/why-did-you-render": "8.0.3",
+    "autoprefixer": "10.4.20",
     "del-cli": "5.1.0",
     "dotenv": "16.4.5",
     "eslint": "9.9.1",
@@ -84,11 +85,13 @@
     "jsdom": "25.0.0",
     "lint-staged": "15.2.10",
     "npm-run-all": "4.1.5",
+    "postcss": "8.4.49",
     "prettier": "3.3.3",
     "read-env": "2.0.0",
     "rollup": "4.21.2",
     "rollup-plugin-visualizer": "5.12.0",
     "storybook": "8.2.9",
+    "tailwindcss": "3.4.15",
     "ts-node": "10.9.2",
     "type-fest": "4.26.0",
     "typescript": "5.5.4",
@@ -124,7 +127,8 @@
     "@lexical/utils": "0.12.0",
     "@monaco-editor/react": "4.6.0",
     "@popperjs/core": "2.11.8",
-    "@reearth/core": "0.0.7-alpha.21",
+    "@radix-ui/react-slot": "1.1.0",
+    "@reearth/core": "0.0.7-alpha.22",
     "@rot1024/use-transition": "1.0.0",
     "@sentry/browser": "7.77.0",
     "@seznam/compose-react-refs": "1.0.6",
@@ -134,6 +138,8 @@
     "aws-amplify": "5.3.11",
     "axios": "1.7.7",
     "cesium": "1.118.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
     "core-js": "3.38.1",
     "crypto-js": "4.2.0",
     "dayjs": "1.11.13",
@@ -149,6 +155,7 @@
     "lexical": "0.12.2",
     "localforage": "1.10.0",
     "lodash-es": "4.17.21",
+    "lucide-react": "0.462.0",
     "quickjs-emscripten": "0.24.0",
     "quickjs-emscripten-sync": "1.5.2",
     "rc-slider": "9.7.5",
@@ -173,6 +180,8 @@
     "react18-json-view": "0.2.8",
     "remark-gfm": "4.0.0",
     "sortablejs": "1.15.3",
+    "tailwind-merge": "2.5.5",
+    "tailwindcss-animate": "1.0.7",
     "tinycolor2": "1.6.0",
     "ts-easing": "0.2.0",
     "use-file-input": "1.0.0",

diff --git a/web/postcss.config.js b/web/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/web/src/app.tsx b/web/src/app.tsx
@@ -8,6 +8,7 @@ import { AuthProvider } from "./services/auth";
 import { Provider as GqlProvider } from "./services/gql";
 import { AppRoutes } from "./services/routing";
 import { Provider as ThemeProvider } from "./services/theme";
+import "@reearth-widget-ui/styles/globals.css";
 
 export default function App() {
   return (

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsx
@@ -1,6 +1,6 @@
+import useDoubleClick from "@reearth/beta/hooks/useDoubleClick";
 import { PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
 import Tooltip from "@reearth/beta/ui/components/Tooltip";
-import useDoubleClick from "@reearth/beta/hooks/useDoubleClick";
 import {
   useStorytellingFetcher,
   useProjectFetcher

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/items/RecycleBinItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/items/RecycleBinItem.tsx
@@ -1,8 +1,8 @@
 import { Button, PopupMenu, PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
+import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.webp";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useCallback, useState } from "react";
-import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.webp";
 
 import { DeletedProject } from "../../../type";
 import ProjectDeleteModal from "../ProjectDeleteModal";

diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/hooks.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/hooks.tsx
@@ -21,7 +21,7 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
     [t]
   );
 
-  const isValidGeoJSON = (json: any): boolean => {
+  const isValidGeoJSON = (json: Record<string, unknown>): boolean => {
     return (
       json &&
       typeof json === "object" &&

diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
@@ -1,4 +1,3 @@
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import "react18-json-view/src/style.css";
 import "react18-json-view/src/dark.css";
 
@@ -11,6 +10,7 @@ import { Geometry } from "@reearth/core";
 import { NLSLayer, SketchFeature } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import JsonView from "react18-json-view";
 
 import { FieldComponent } from "./CustomPropertField";
@@ -19,7 +19,7 @@ type Props = {
   selectedFeature?: {
     id: string;
     geometry: Geometry | undefined;
-    properties: any;
+    properties: Record<string, ValueProp>;
   };
   layer?: NLSLayer;
   sketchFeature?: SketchFeature;

diff --git a/web/src/beta/features/Editor/atoms.ts b/web/src/beta/features/Editor/atoms.ts
@@ -1,6 +1,5 @@
-import { atom, useAtom } from "jotai";
-
 import { Camera } from "@reearth/beta/utils/value";
+import { atom, useAtom } from "jotai";
 
 const currentCamera = atom<Camera | undefined>(undefined);
 export const useCurrentCamera = () => useAtom(currentCamera);
diff --git a/web/src/beta/features/Navbar/useRightSection.tsx b/web/src/beta/features/Navbar/useRightSection.tsx
@@ -98,6 +98,7 @@ const TabButton = styled("button")<{ selected?: boolean }>(
     alignItems: "flex-start",
     justifyContent: "center",
     padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+    fontSize: `${theme.fonts.sizes.body}px`,
     gap: theme.spacing.small,
     borderRadius: theme.radius.small,
     color: selected ? theme.content.main : theme.content.weak,

diff --git a/web/src/beta/features/PluginPlayground/Code/HtmlEditModal.tsx b/web/src/beta/features/PluginPlayground/Code/HtmlEditModal.tsx
@@ -22,7 +22,7 @@ const HtmlEditModal: FC<Props> = ({
 }) => {
   const [value, setValue] = useState(sourceCode);
   return (
-    <Modal size="medium" visible={isOpened}>
+    <Modal size="large" visible={isOpened}>
       <ModalPanel
         title="HTML Editor"
         onCancel={onClose}
@@ -52,9 +52,10 @@ const HtmlEditModal: FC<Props> = ({
   );
 };
 
-const CodeInputWrapper = styled("div")(() => ({
+const CodeInputWrapper = styled("div")(({ theme }) => ({
   height: "100%",
-  minHeight: "554px"
+  minHeight: "554px",
+  padding: theme.spacing.small
 }));
 
 export default HtmlEditModal;
diff --git a/web/src/beta/features/PluginPlayground/Code/hook.ts b/web/src/beta/features/PluginPlayground/Code/hook.ts
@@ -130,6 +130,8 @@ export default ({ files }: Props) => {
 
     const widgets = ymlJson.extensions.reduce<NonNullable<Widgets>>(
       (prv, cur) => {
+        if (cur.type !== "widget") return prv;
+
         const file = files.find((file) => file.title === `${cur.id}.js`);
 
         if (!file) {

diff --git a/web/src/beta/features/PluginPlayground/Code/index.tsx b/web/src/beta/features/PluginPlayground/Code/index.tsx
@@ -107,7 +107,6 @@ const Code: FC<Props> = ({
             disabled={!editableHtmlSourceCode}
             onClick={() => setIsOpenedHtmlEditor(true)}
           />
-          <p>Widget</p>
         </Header>
         <CodeInput
           language={getLanguageByFileExtension(fileTitle)}

diff --git a/web/src/beta/features/PluginPlayground/Console/index.tsx b/web/src/beta/features/PluginPlayground/Console/index.tsx
@@ -1,3 +1,4 @@
+import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 
@@ -15,9 +16,9 @@ const Console: FC<Props> = ({ fileOutputs }) => {
   return (
     <Wrapper>
       {fileOutputs.map(({ title, output }, index) => (
-        <div key={index}>
-          {`[${title}]`} {output}
-        </div>
+        <Typography key={index} size="body">
+          {`[${title}]`} {output || "✔"}
+        </Typography>
       ))}
     </Wrapper>
   );

diff --git a/web/src/beta/features/PluginPlayground/Plugins/FileListItem.tsx b/web/src/beta/features/PluginPlayground/Plugins/FileListItem.tsx
@@ -4,7 +4,7 @@ import { styled } from "@reearth/services/theme";
 import { FC, useCallback, useMemo, useState } from "react";
 
 import { FileType } from "./constants";
-import usePlugins from "./hook";
+import usePlugins from "./usePlugins";
 
 type UsePluginsReturn = ReturnType<typeof usePlugins>;
 
@@ -74,11 +74,6 @@ const FileListItem: FC<Props> = ({
               autoFocus
               value={file.title}
               onBlur={handleInputConfirm}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  handleInputConfirm(e.currentTarget.value);
-                }
-              }}
             />
           ) : (
             <TitleWrapper>{file.title}</TitleWrapper>
@@ -98,12 +93,8 @@ const Wrapper = styled("li")(({ theme }) => ({
   justifyContent: "space-between",
   alignItems: "center",
   gap: theme.spacing.small,
-  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px ${theme.spacing.smallest}px ${theme.spacing.normal}px`,
   borderRadius: theme.radius.small,
-  cursor: "pointer",
-  "&:not(:first-child)": {
-    marginTop: theme.spacing.smallest
-  }
+  cursor: "pointer"
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({

diff --git a/web/src/beta/features/PluginPlayground/Plugins/constants.ts b/web/src/beta/features/PluginPlayground/Plugins/constants.ts
@@ -12,25 +12,4 @@ export type FileType = {
   disableDelete?: boolean;
 };
 
-export const REEARTH_YML_FILE = {
-  id: "reearth-yml",
-  title: "reearth.yml",
-  sourceCode: `id: demo-widget
-name: Test plugin
-version: 1.0.0
-extensions:
-  - id: demo-widget
-    type: widget
-    name: Demo Widget
-    description: Demo widget
-    widgetLayout:
-      defaultLocation:
-        zone: outer
-        section: left
-        area: top
-  `,
-  disableEdit: true,
-  disableDelete: true
-} as const satisfies FileType;
-
 export const ALLOWED_FILE_EXTENSIONS = ["js"] as const;