chore(web): unsafe plugin support (#576)

Co-authored-by: YK <81808708+yk-eukarya@users.noreply.github.com>

server/.env.example

@@ -76,5 +76,5 @@ REEARTH_SES_NAME=
 #REEARTH_GCS_PUBLICATIONCACHECONTROL=
 
 # Extension plugin url as csv
-# each path should contais `reearth.yml` file
+# each path should contain `reearth.yml` file
 REEARTH_EXT_PLUGIN=http://fileserve.local:8090/pluging-01,http://fileserve.local:8090/pluging-02

web/src/beta/components/TabButton/index.tsx

@@ -1,9 +1,9 @@
 import type { FC } from "react";
 
+import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
 
 import Icon, { Icons } from "../Icon";
-import Text from "../Text";
 
 export type Props = {
   label: string;
@@ -14,7 +14,7 @@ export type Props = {
 
 const TabButton: FC<Props> = ({ label, icon, onClick, selected }) => {
   return (
-    <Button onClick={onClick} disabled={selected}>
+    <Button onClick={onClick} selected={selected} disabled={selected}>
       {icon && <Icon icon={icon} size={20} />}
       <Text size="body" customColor>
         {label}
@@ -24,7 +24,7 @@ const TabButton: FC<Props> = ({ label, icon, onClick, selected }) => {
 };
 
 type ButtonProps = {
-  disabled?: boolean;
+  selected?: boolean;
 };
 
 const Button = styled.button<ButtonProps>`
@@ -35,10 +35,8 @@ const Button = styled.button<ButtonProps>`
   padding: 4px 8px;
   gap: 8px;
   border-radius: 4px;
-  color: ${({ disabled, theme }) => (disabled ? theme.content.main : theme.content.weak)};
+  color: ${({ selected, theme }) => (selected ? theme.content.main : theme.content.weak)};
   background: ${({ disabled, theme }) => (disabled ? theme.bg[3] : theme.bg[0])};
-  font-weight: 700;
-  font-size: 14px;
   line-height: 19px;
   white-space: nowrap;
   overflow: hidden;

web/src/beta/features/Editor/tabs/widgets/Nav/Devices/index.tsx

@@ -1,5 +1,5 @@
-import TabButton from "@reearth/beta/components/TabButton";
-import { useT } from "@reearth/services/i18n";
+// import TabButton from "@reearth/beta/components/TabButton";
+// import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 export type Device = "desktop" | "mobile";
@@ -18,11 +18,11 @@ type Props = {
   onDeviceChange: (device: Device) => void;
 };
 
-const Devices: React.FC<Props> = ({ selectedDevice, onDeviceChange }) => {
-  const t = useT();
+const Devices: React.FC<Props> = () => {
+  // const t = useT();
   return (
     <DeviceWrapper>
-      <TabButton
+      {/* <TabButton
         label={t("Desktop")}
         icon="desktop"
         selected={selectedDevice === "desktop"}
@@ -33,7 +33,7 @@ const Devices: React.FC<Props> = ({ selectedDevice, onDeviceChange }) => {
         icon="mobile"
         selected={selectedDevice === "mobile"}
         onClick={() => onDeviceChange("mobile")}
-      />
+      /> */}
     </DeviceWrapper>
   );
 };

web/src/beta/lib/core/Crust/Infobox/Block/DataList/index.tsx → web/src/beta/lib/core/Crust/Infobox/Block/builtin/DataList/index.tsx

@@ -4,8 +4,8 @@ import Icon from "@reearth/beta/components/Icon";
 import { Typography, typographyStyles } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
 
-import { CommonProps as BlockProps } from "..";
-import { Border, Title } from "../utils";
+import { CommonProps as BlockProps } from "../..";
+import { Border, Title } from "../../utils";
 
 export type Props = BlockProps<Property>;
 

web/src/beta/lib/core/Crust/Infobox/Block/HTML/index.tsx → web/src/beta/lib/core/Crust/Infobox/Block/builtin/HTML/index.tsx

@@ -5,8 +5,8 @@ import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
-import { CommonProps as BlockProps } from "..";
-import { Border } from "../utils";
+import { CommonProps as BlockProps } from "../..";
+import { Border } from "../../utils";
 
 export type Props = BlockProps<Property>;
 

web/src/beta/lib/core/Crust/Infobox/Block/Image/index.tsx → web/src/beta/lib/core/Crust/Infobox/Block/builtin/Image/index.tsx

@@ -3,8 +3,8 @@ import React, { useCallback, useState } from "react";
 import Icon from "@reearth/beta/components/Icon";
 import { styled } from "@reearth/services/theme";
 
-import { CommonProps as BlockProps } from "..";
-import { Border, Title } from "../utils";
+import { CommonProps as BlockProps } from "../..";
+import { Border, Title } from "../../utils";
 
 export type Props = BlockProps<Property>;
 

web/src/beta/lib/core/Crust/Infobox/Block/Location/index.tsx → web/src/beta/lib/core/Crust/Infobox/Block/builtin/Location/index.tsx

@@ -5,8 +5,8 @@ import "leaflet/dist/leaflet.css";
 
 import { styled } from "@reearth/services/theme";
 
-import { CommonProps as BlockProps, LatLng } from "..";
-import { Border, Title } from "../utils";
+import { CommonProps as BlockProps, LatLng } from "../..";
+import { Border, Title } from "../../utils";
 
 import iconSvg from "./icon.svg?raw";
 

web/src/beta/lib/core/Crust/Infobox/Block/Text/index.tsx → web/src/beta/lib/core/Crust/Infobox/Block/builtin/Text/index.tsx

@@ -7,8 +7,8 @@ import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
-import { CommonProps as BlockProps, Typography } from "..";
-import { Border, typographyStyles } from "../utils";
+import { CommonProps as BlockProps, Typography } from "../..";
+import { Border, typographyStyles } from "../../utils";
 
 export type Props = BlockProps<Property>;
 

web/src/beta/lib/core/Crust/Infobox/Block/Video/index.tsx → web/src/beta/lib/core/Crust/Infobox/Block/builtin/Video/index.tsx

@@ -4,8 +4,8 @@ import Player from "react-player";
 import Icon from "@reearth/beta/components/Icon";
 import { styled } from "@reearth/services/theme";
 
-import { CommonProps as BlockProps } from "..";
-import { Border, Title } from "../utils";
+import { CommonProps as BlockProps } from "../..";
+import { Border, Title } from "../../utils";
 
 export type Props = BlockProps<Property>;
 

web/src/beta/lib/core/Crust/Infobox/Block/builtin/index.ts

@@ -0,0 +1,47 @@
+import { merge } from "lodash-es";
+
+import type { Component } from "..";
+
+import DataList from "./DataList";
+import HTML from "./HTML";
+import Image from "./Image";
+import Location from "./Location";
+import Text from "./Text";
+import { unsafeBuiltinBlocks, type UnsafeBuiltinBlocks } from "./unsafeBlocks";
+import Video from "./Video";
+
+export const DATALIST_BUILTIN_BLOCK_ID = "reearth/dlblock";
+export const IMAGE_BUILTIN_BLOCK_ID = "reearth/imageblock";
+export const LOCATION_BUILTIN_BLOCK_ID = "reearth/locationblock";
+export const TEXT_BUILTIN_BLOCK_ID = "reearth/textblock";
+export const VIDEO_BUILTIN_BLOCK_ID = "reearth/videoblock";
+export const HTML_BUILTIN_BLOCK_ID = "reearth/htmlblock";
+
+export type ReEarthBuiltinBlocks<T = unknown> = Record<
+  | typeof DATALIST_BUILTIN_BLOCK_ID
+  | typeof IMAGE_BUILTIN_BLOCK_ID
+  | typeof LOCATION_BUILTIN_BLOCK_ID
+  | typeof TEXT_BUILTIN_BLOCK_ID
+  | typeof VIDEO_BUILTIN_BLOCK_ID
+  | typeof HTML_BUILTIN_BLOCK_ID,
+  T
+>;
+
+export type BuiltinBlocks<T = unknown> = ReEarthBuiltinBlocks<T> & UnsafeBuiltinBlocks<T>;
+
+const reearthBuiltin: BuiltinBlocks<Component> = {
+  [DATALIST_BUILTIN_BLOCK_ID]: DataList,
+  [IMAGE_BUILTIN_BLOCK_ID]: Image,
+  [LOCATION_BUILTIN_BLOCK_ID]: Location,
+  [TEXT_BUILTIN_BLOCK_ID]: Text,
+  [VIDEO_BUILTIN_BLOCK_ID]: Video,
+  [HTML_BUILTIN_BLOCK_ID]: HTML,
+};
+
+const builtin = merge({}, reearthBuiltin, unsafeBuiltinBlocks);
+
+export const isBuiltinBlock = (id: string): id is keyof BuiltinBlocks => {
+  return !!builtin[id as keyof BuiltinBlocks];
+};
+
+export default builtin;

web/src/beta/lib/core/Crust/Infobox/Block/builtin/unsafeBlocks.ts

@@ -0,0 +1,35 @@
+import { merge } from "lodash-es";
+
+import { Component } from "..";
+import { UnsafeBuiltinPlugin } from "../../../types";
+
+export type UnsafeBuiltinBlocks<T = unknown> = Record<string, T>;
+
+const unsafeBuiltinPlugins = (
+  await import(/* @vite-ignore */ "@reearth/beta/lib/unsafeBuiltinPlugins")
+).default;
+
+export const unsafeBuiltinBlocks = processUnsafeBuiltinBlocks(unsafeBuiltinPlugins);
+
+function processUnsafeBuiltinBlocks(plugin?: UnsafeBuiltinPlugin[]) {
+  if (!plugin) return;
+
+  const unsafeBlocks: UnsafeBuiltinBlocks<Component> | undefined = plugin
+    .map(p =>
+      p.widgets.map(w => {
+        return {
+          widgetId: `${p.id}/${w.extensionId}`,
+          ...w,
+        };
+      }),
+    )
+    .reduce((a, b) => {
+      const newObject: { [key: string]: Component } = {};
+      b.forEach(w => {
+        newObject[w.widgetId] = w.component;
+      });
+      return merge(a, newObject);
+    }, {});
+
+  return unsafeBlocks;
+}

web/src/beta/lib/core/Crust/Infobox/Block/index.tsx

@@ -7,7 +7,7 @@ import { styled } from "@reearth/services/theme";
 import { Theme } from "../../types";
 import type { Block, BlockProps, InfoboxProperty } from "../types";
 
-import builtin from "./builtin";
+import builtin, { isBuiltinBlock } from "./builtin";
 
 export type { InfoboxProperty, Typography, LatLng } from "../types";
 
@@ -38,10 +38,8 @@ export default function BlockComponent<P = any>({
   renderBlock,
   ...props
 }: Props<P>): JSX.Element | null {
-  const Builtin =
-    props.block?.pluginId && props.block.extensionId
-      ? builtin[`${props.block.pluginId}/${props.block.extensionId}`]
-      : undefined;
+  const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
+  const Builtin = isBuiltinBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;
 
   return Builtin ? (
     <Builtin {...props} />

web/src/beta/lib/core/Crust/Widgets/Widget/Button/MenuButton.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx

@@ -6,8 +6,8 @@ import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled, metricsSizes, mask } from "@reearth/services/theme";
 
-import type { Camera, FlyToDestination, Theme } from "../types";
-import { Visible } from "../useVisible";
+import type { Camera, FlyToDestination, Theme } from "../../types";
+import { Visible } from "../../useVisible";
 
 export type Button = {
   id: string;

web/src/beta/lib/core/Crust/Widgets/Widget/Button/index.stories.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Button/index.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import { Math as CesiumMath } from "cesium";
 
-import { contextEvents } from "../storybook";
+import { contextEvents } from "../../storybook";
 
 import Button, { Props } from ".";
 

web/src/beta/lib/core/Crust/Widgets/Widget/Button/index.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Button/index.tsx

@@ -1,7 +1,7 @@
 import { styled } from "@reearth/services/theme";
 
-import type { ComponentProps as WidgetProps } from "..";
-import { useVisible } from "../useVisible";
+import type { ComponentProps as WidgetProps } from "../..";
+import { useVisible } from "../../useVisible";
 
 import MenuButton, { Button as ButtonType, MenuItem as MenuItemType } from "./MenuButton";
 
@@ -27,6 +27,7 @@ const Menu = ({
     isMobile,
     onVisibilityChange,
   });
+  // console.log("BOKOSDFJ CONTEXT:", onFlyTo);
 
   return visible ? (
     <Wrapper>

web/src/beta/lib/core/Crust/Widgets/Widget/LegacyMenu/MenuButton.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/LegacyMenu/MenuButton.tsx

@@ -8,7 +8,7 @@ import Icon from "@reearth/beta/components/Icon";
 import { Camera } from "@reearth/beta/utils/value";
 import { fonts, styled } from "@reearth/services/theme";
 
-import type { FlyToDestination, Theme } from "../types";
+import type { FlyToDestination, Theme } from "../../types";
 
 export type Position = "topleft" | "topright" | "bottomleft" | "bottomright";
 

web/src/beta/lib/core/Crust/Widgets/Widget/LegacyMenu/index.stories.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/LegacyMenu/index.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import { Math as CesiumMath } from "cesium";
 
-import { contextEvents } from "../storybook";
+import { contextEvents } from "../../storybook";
 
 import Menu, { Props } from ".";
 

web/src/beta/lib/core/Crust/Widgets/Widget/LegacyMenu/index.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/LegacyMenu/index.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import Flex from "@reearth/beta/components/Flex";
 import { styled } from "@reearth/services/theme";
 
-import type { ComponentProps as WidgetProps } from "..";
+import type { ComponentProps as WidgetProps } from "../..";
 
 import MenuButton, {
   Button as ButtonType,

web/src/beta/lib/core/Crust/Widgets/Widget/Navigator/UI/index.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx

@@ -4,7 +4,7 @@ import Icon from "@reearth/beta/components/Icon";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
-import type { Theme } from "../../types";
+import type { Theme } from "../../../types";
 
 import { useNavigator } from "./hooks";
 

web/src/beta/lib/core/Crust/Widgets/Widget/Navigator/hooks.ts → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Navigator/hooks.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 
-import type { Camera, FlyToDestination, Widget } from "../types";
-import { useVisible } from "../useVisible";
+import type { Camera, FlyToDestination, Widget } from "../../types";
+import { useVisible } from "../../useVisible";
 
 import { degreeToRadian, radianToDegree } from "./UI";
 

web/src/beta/lib/core/Crust/Widgets/Widget/Navigator/index.stories.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from "@storybook/react";
 
-import { contextEvents } from "../storybook";
+import { contextEvents } from "../../storybook";
 
 import Component, { Props } from ".";
 

web/src/beta/lib/core/Crust/Widgets/Widget/Navigator/index.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Navigator/index.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps as WidgetProps } from "..";
-import { Visible } from "../useVisible";
+import type { ComponentProps as WidgetProps } from "../..";
+import { Visible } from "../../useVisible";
 
 import useHooks from "./hooks";
 import NavigatorUI from "./UI";

web/src/beta/lib/core/Crust/Widgets/Widget/SplashScreen/index.stories.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/SplashScreen/index.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import { Math as CesiumMath } from "cesium";
 
-import { contextEvents } from "../storybook";
+import { contextEvents } from "../../storybook";
 
 import SplashScreen, { Props } from ".";
 

web/src/beta/lib/core/Crust/Widgets/Widget/SplashScreen/index.tsx → web/src/beta/lib/core/Crust/Widgets/Widget/builtin/SplashScreen/index.tsx

@@ -4,9 +4,9 @@ import { useTimeoutFn } from "react-use";
 
 import { styled } from "@reearth/services/theme";
 
-import type { ComponentProps as WidgetProps } from "..";
-import type { Camera } from "../types";
-import { useVisible, Visible } from "../useVisible";
+import type { ComponentProps as WidgetProps } from "../..";
+import type { Camera } from "../../types";
+import { useVisible, Visible } from "../../useVisible";
 
 export type Props = WidgetProps<Property>;