chore(web): infobox support in beta (#880)

.github/CODEOWNERS

@@ -2,9 +2,9 @@
 
 /server/                    @pyshx
 
-/web/e2e/                   @keiya01
 
-/web/src/                   @airslice @mkumbobeaty
+/web/                       @airslice @mkumbobeaty
+/web/e2e/                   @keiya01
 /web/src/classic/           @airslice
 /web/src/classic/core/      @keiya01
 /web/src/beta/lib/core/     @keiya01

server/pkg/builtin/manifest.yml

@@ -2708,4 +2708,4 @@ extensions:
               availableIf:
                 field: displayType
                 type: string
-                value: custom
+                value: custom

web/package.json

@@ -117,7 +117,7 @@
         "@sentry/browser": "7.77.0",
         "@seznam/compose-react-refs": "1.0.6",
         "@turf/turf": "6.5.0",
-        "@types/d3": "^7.4.3",
+        "@types/d3": "7.4.3",
         "@types/escape-string-regexp": "2.0.1",
         "@ungap/event-target": "0.2.4",
         "@xstate/react": "3.2.1",
@@ -132,7 +132,7 @@
         "core-js": "3.33.2",
         "crypto-js": "4.2.0",
         "csv-parse": "5.5.2",
-        "d3": "^7.8.5",
+        "d3": "7.8.5",
         "date-fns": "2.30.0",
         "dayjs": "1.11.10",
         "detect-browser": "5.3.0",
@@ -185,7 +185,7 @@
         "react-router-dom": "6.21.0",
         "react-spinners": "0.13.8",
         "react-use": "17.4.0",
-        "react18-json-view": "0.2.6",
+        "react18-json-view": "0.2.7",
         "remark-gfm": "3.0.1",
         "resium": "1.16.1",
         "suspend-react": "^0.1.3",
@@ -197,4 +197,4 @@
         "uuid": "9.0.1",
         "xstate": "4.38.2"
     }
-}
+}

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

@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import { useCallback, useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useDragDropManager } from "react-dnd";
 
 import { styled } from "@reearth/services/theme";

web/src/beta/components/Icon/icons.ts

@@ -4,13 +4,11 @@
 // Primitives
 import PrimPhotoOverlay from "./Icons/primPhotoIcon.svg?react";
 
-// Infobox Blocks
+// Infobox
 import Infobox from "./Icons/infoboxIcon.svg?react";
-import InfoHTML from "./Icons/infoboxHTMLIcon.svg?react";
-import InfoLocation from "./Icons/infoboxLocationIcon.svg?react";
-import InfoTable from "./Icons/infoboxTableIcon.svg?react";
-import InfoText from "./Icons/infoboxTextIcon.svg?react";
-import InfoVideo from "./Icons/infoboxVideoIcon.svg?react";
+import InfoboxImageBlock from "./Icons/imageInfoboxBlock.svg?react";
+import TextBlock from "./Icons/textBlock.svg?react";
+import InfoboxPropertyBlock from "./Icons/propertyInfoboxBlock.svg?react";
 
 // Arrow
 import ArrowUpDown from "./Icons/arrowUpDown.svg?react";
@@ -82,7 +80,6 @@ import Copy from "./Icons/copy.svg?react";
 import GearSix from "./Icons/gearSix.svg?react";
 import PencilSimple from "./Icons/pencilSimple.svg?react";
 import Trash from "./Icons/trash.svg?react";
-import TextStoryBlock from "./Icons/textStoryBlock.svg?react";
 import Edit from "./Icons/storyBlockEdit.svg?react";
 import Exit from "./Icons/exit.svg?react";
 import Settings from "./Icons/settings.svg?react";
@@ -143,13 +140,6 @@ export default {
   addLayer: AddLayerIcon,
   zoomToLayer: ZoomToLayer,
   file: File,
-  dl: InfoTable,
-  infobox: Infobox,
-  text: InfoText,
-  html: InfoHTML,
-  video: InfoVideo,
-  clock: Clock,
-  location: InfoLocation,
   photooverlay: PrimPhotoOverlay,
   arrowUpDown: ArrowUpDown,
   arrowRight: ArrowRight,
@@ -199,7 +189,12 @@ export default {
   exit: Exit,
   settings: Settings,
   padding: Padding,
-  textStoryBlock: TextStoryBlock,
+  infobox: Infobox,
+  imageInfoboxBetaBlock: InfoboxImageBlock,
+  textInfoboxBetaBlock: TextBlock,
+  propertyInfoboxBetaBlock: InfoboxPropertyBlock,
+  clock: Clock,
+  textStoryBlock: TextBlock,
   titleStoryBlock: TitleStoryBlock,
   videoStoryBlock: VideoStoryBlock,
   imageStoryBlock: ImageStoryBlock,

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

@@ -68,7 +68,6 @@ const Wrapper = styled.div<{
   clamp?: Clamp;
 }>`
   display: flex;
-  width: 100%;
   min-height: 36px;
   align-items: center;
   color: ${({ theme }) => theme.content.main};

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

@@ -87,7 +87,7 @@ Default.args = {
     { id: "tab1", name: "My infobox", icon: "infobox", component: <SampleComponent /> },
     {
       id: "tab2",
-      icon: "dl",
+      icon: "marker",
       component: <Text size="body">Tab 2. Can be any react component</Text>,
     },
   ],

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

@@ -46,7 +46,7 @@ const TabMenu: FC<Props> = ({ tabs, selectedTab, onSelectedTabChange, menuAlignm
             <Text size="body">{selectedTabItem.name}</Text>
           </Header>
         )}
-        {selectedTabItem ? selectedTabItem.component : null}
+        <Content>{selectedTabItem ? selectedTabItem.component : null}</Content>
       </MainArea>
     </Wrapper>
   );
@@ -60,14 +60,14 @@ const Wrapper = styled.div<{ menuAlignment?: menuAlignment }>`
   flex-flow: column nowrap;
   position: relative;
   background: ${({ theme }) => theme.bg[1]};
-  border-radius: 4px;
+  height: 100%;
 `;
 
 const Tabs = styled.div<{ menuAlignment?: menuAlignment }>`
-  padding-top: 4px;
-  background: ${({ theme }) => theme.bg[0]};
   display: flex;
   flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "row" : "column")} nowrap;
+  padding-top: 4px;
+  background: ${({ theme }) => theme.bg[0]};
 `;
 
 const TabIconWrapper = styled.div<{ selected: boolean; menuAlignment?: menuAlignment }>`
@@ -87,12 +87,14 @@ const TabHeader = styled(Text)`
 `;
 
 const Header = styled.div`
-  padding-bottom: 12px;
-  margin-bottom: 12px;
+  padding: 12px;
   border-bottom: 1px solid ${({ theme }) => theme.outline.weak};
 `;
 
 const MainArea = styled.div`
   display: block;
+`;
+
+const Content = styled.div`
   padding: 12px;
 `;

web/src/beta/components/fields/SelectField/index.tsx

@@ -153,7 +153,7 @@ const ProviderWrapper = styled.div<{ multiSelect: boolean }>`
   flex-direction: column;
   gap: 6px;
   border-radius: 4px;
-  padding: 4px;
+  width: 100%;
 `;
 
 const InputWrapper = styled.div<{ disabled: boolean }>`

web/src/beta/components/fields/TextField/index.tsx

@@ -3,25 +3,35 @@ import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import Property from "..";
 
 export type Props = {
+  className?: string;
   name?: string;
   description?: string;
   value?: string;
   placeholder?: string;
-  onChange?: (text: string) => void;
   disabled?: boolean;
+  onChange?: (text: string) => void;
+  onBlur?: () => void;
 };
 
 const TextField: React.FC<Props> = ({
+  className,
   name,
   description,
   value,
   placeholder,
-  onChange,
   disabled,
+  onChange,
+  onBlur,
 }) => {
   return (
-    <Property name={name} description={description}>
-      <TextInput value={value} placeholder={placeholder} onChange={onChange} disabled={disabled} />
+    <Property className={className} name={name} description={description}>
+      <TextInput
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+      />
     </Property>
   );
 };

web/src/beta/features/Editor/BottomPanel/index.tsx

@@ -32,6 +32,7 @@ const Wrapper = styled.div`
   height: 100%;
   border-left: 1px solid ${({ theme }) => theme.outline.weakest};
   border-right: 1px solid ${({ theme }) => theme.outline.weakest};
+  background: ${({ theme }) => theme.bg[0]};
 `;
 
 const TitleWrapper = styled.div`

web/src/beta/features/Editor/SidePanel/index.tsx

@@ -15,9 +15,10 @@ export type SidePanelContent = {
 type Props = {
   location: "left" | "right";
   contents: SidePanelContent[];
+  padding?: number;
 };
 
-const Panel: React.FC<Props> = ({ location, contents }) => {
+const Panel: React.FC<Props> = ({ location, contents, padding }) => {
   return (
     <Wrapper location={location}>
       {contents.map(
@@ -27,7 +28,7 @@ const Panel: React.FC<Props> = ({ location, contents }) => {
               <Card>
                 <Title size="body">{content.title}</Title>
                 {content.actions && <ActionArea>{content.actions}</ActionArea>}
-                <Content hasActions={!!content.actions}>{content.children}</Content>
+                <Content padding={padding}>{content.children}</Content>
               </Card>
             </Section>
           ),
@@ -43,9 +44,9 @@ const Wrapper = styled.div<{ location: "left" | "right" }>`
   flex-direction: column;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
   gap: 4px;
-  background: ${({ theme }) => theme.bg[1]};
+  box-sizing: border-box;
+  padding: 2px 1px;
 `;
 
 const Section = styled.div<{ maxHeight?: CSSProperties["maxHeight"] }>`
@@ -63,16 +64,19 @@ const Card = styled.div`
 `;
 
 const Title = styled(Text)`
-  background: ${({ theme }) => theme.bg[1]};
-  padding: 8px;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background: ${({ theme }) => theme.bg[2]};
+  padding: 4px 12px;
 `;
 
 const ActionArea = styled.div`
   padding: 8px;
 `;
 
-const Content = styled.div<{ hasActions?: boolean }>`
-  padding: ${({ hasActions }) => (hasActions ? "0" : "8px")};
+const Content = styled.div<{ padding?: number }>`
+  ${({ padding }) => padding && `padding: ${padding}px;`}
+
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
   overflow-y: auto;

web/src/beta/features/Editor/Visualizer/convert-infobox.ts

@@ -0,0 +1,27 @@
+import { InfoboxBlock } from "@reearth/beta/lib/core/Crust/Infobox/types";
+import type { Layer } from "@reearth/beta/lib/core/Map";
+import { NLSInfobox } from "@reearth/services/api/layersApi/utils";
+
+import { processProperty as processNewProperty } from "./processNewProperty";
+
+export default (
+  orig: NLSInfobox | null | undefined,
+  parent: NLSInfobox | null | undefined,
+  blockNames?: {
+    [key: string]: string;
+  },
+): Layer["infobox"] => {
+  const used = orig || parent;
+  if (!used) return;
+  return {
+    property: processNewProperty(parent?.property, orig?.property),
+    blocks: used.blocks?.map<InfoboxBlock>(b => ({
+      id: b.id,
+      name: blockNames?.[b.extensionId] ?? "Infobox Block",
+      pluginId: b.pluginId,
+      extensionId: b.extensionId,
+      property: processNewProperty(undefined, b.property),
+      propertyId: b.propertyId, // required by onBlockChange
+    })),
+  };
+};