refactor(web): layer inspector (#1061)

Co-authored-by: airslice <[email protected]>
Co-authored-by: Piyush Chauhan <[email protected]>

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/index.tsx

@@ -1,4 +1,6 @@
-import Text from "@reearth/beta/components/Text";
+import { FC } from "react";
+
+import { InputField, TextareaField } from "@reearth/beta/ui/fields";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -7,44 +9,40 @@ type Props = {
   selectedLayer: NLSLayer;
 };
 
-const LayerData: React.FC<Props> = ({ selectedLayer }) => {
+const DataSource: FC<Props> = ({ selectedLayer }) => {
   const t = useT();
   return (
     <Wrapper>
-      <Text size="body">{t("Format")}</Text>
-      <ValueWrapper>
-        <StyledText size="body" otherProperties={{ userSelect: "auto" }}>
-          {selectedLayer.config?.data?.type}
-        </StyledText>
-      </ValueWrapper>
-      {!!selectedLayer.config?.data?.url && (
-        <>
-          <Text size="body">{t("Resource URL")}</Text>
-          <ValueWrapper>
-            <StyledText size="body" otherProperties={{ userSelect: "auto" }}>
-              {selectedLayer.config?.data?.url}
-            </StyledText>
-          </ValueWrapper>
-        </>
+      <InputField
+        commonTitle={t("Layer Name")}
+        value={selectedLayer.title}
+        appearance="readonly"
+        disabled
+      />
+      <InputField
+        commonTitle={t("Format")}
+        value={selectedLayer.config?.data?.type}
+        appearance="readonly"
+        disabled
+      />
+
+      {selectedLayer.config?.data?.url && (
+        <TextareaField
+          commonTitle={t("Resource URL")}
+          value={selectedLayer.config?.data?.url}
+          appearance="readonly"
+          disabled
+          rows={3}
+        />
       )}
     </Wrapper>
   );
 };
 
-export default LayerData;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-
-const ValueWrapper = styled.div`
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  border-radius: 4px;
-  padding: 4px 8px;
-`;
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.large,
+}));
 
-const StyledText = styled(Text)`
-  word-break: break-all;
-`;
+export default DataSource;

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx

@@ -1,10 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 
-import NumberField from "@reearth/beta/components/fields/NumberField";
-import TextAreaField from "@reearth/beta/components/fields/TextAreaField";
-import TextField from "@reearth/beta/components/fields/TextField";
-import ToggleField from "@reearth/beta/components/fields/ToggleField";
-import URLField from "@reearth/beta/components/fields/URLField";
+import { AssetField, InputField, NumberField, SwitchField } from "@reearth/beta/ui/fields";
+import TextAreaField from "@reearth/beta/ui/fields/TextareaField";
 import { SketchFeature } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 
@@ -58,32 +55,32 @@ export const FieldComponent = ({ field, selectedFeature, setField, onSubmit }: P
     [],
   );
   return field?.type === "Text" ? (
-    <TextField
+    <InputField
       key={field?.id}
-      name={field?.title}
+      commonTitle={field?.title}
       value={getDynamicValue(selectedFeature, field.title, field.value)}
-      onChange={handleChange}
+      onBlur={handleChange}
     />
   ) : field?.type === "TextArea" ? (
     <TextAreaField
       key={field?.id}
-      name={field?.title}
+      commonTitle={field?.title}
       value={getDynamicValue(selectedFeature, field.title, field.value)}
-      onChange={handleChange}
+      onBlur={handleChange}
     />
   ) : field?.type === "Asset" ? (
-    <URLField
+    <AssetField
       key={field?.id}
-      name={field?.title}
+      commonTitle={field?.title}
       entityType="image"
       fileType={"asset"}
       value={getDynamicValue(selectedFeature, field.title, field.value)}
       onChange={handleChange}
     />
   ) : field?.type === "URL" ? (
-    <URLField
+    <AssetField
       key={field?.id}
-      name={field?.title}
+      commonTitle={field?.title}
       entityType="file"
       fileType={"URL"}
       value={getDynamicValue(selectedFeature, field.title, field.value)}
@@ -92,15 +89,15 @@ export const FieldComponent = ({ field, selectedFeature, setField, onSubmit }: P
   ) : field?.type === "Float" || field.type === "Int" ? (
     <NumberField
       key={field?.id}
-      name={field?.title}
+      commonTitle={field?.title}
       value={getDynamicValue(selectedFeature, field.title, field.value)}
-      onChange={handleChange}
+      onBlur={handleChange}
     />
   ) : field?.type === "Boolean" ? (
-    <ToggleField
+    <SwitchField
       key={field?.id}
-      name={field?.title}
-      checked={getDynamicValue(selectedFeature, field.title, field.value)}
+      commonTitle={field?.title}
+      value={getDynamicValue(selectedFeature, field.title, field.value)}
       onChange={handleChange}
     />
   ) : (

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx

@@ -1,16 +1,15 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import "react18-json-view/src/style.css";
 import "react18-json-view/src/dark.css";
 import JsonView from "react18-json-view";
 import { v4 as uuidv4 } from "uuid";
 
-import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
-import Text from "@reearth/beta/components/Text";
 import { GeoJsonFeatureUpdateProps } from "@reearth/beta/features/Editor/hooks/useSketch";
+import { Collapse } from "@reearth/beta/lib/reearth-ui";
 import { Geometry } from "@reearth/core";
 import { SketchFeature } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
+import { styled, useTheme } from "@reearth/services/theme";
 
 import { FieldComponent } from "./CustomPropertField";
 
@@ -34,7 +33,6 @@ export type FieldProp = {
   title: string;
   value?: ValueProp;
 };
-
 const FeatureData: React.FC<Props> = ({
   selectedFeature,
   isSketchLayer,
@@ -44,7 +42,7 @@ const FeatureData: React.FC<Props> = ({
   onGeoJsonFeatureUpdate,
 }) => {
   const t = useT();
-
+  const theme = useTheme();
   const [field, setField] = useState<FieldProp[]>([]);
 
   useEffect(() => {
@@ -81,61 +79,74 @@ const FeatureData: React.FC<Props> = ({
     [layerId, onGeoJsonFeatureUpdate, selectedFeature, sketchFeature?.id],
   );
 
+  const jsonStyle = useMemo(
+    () => ({
+      wordWrap: "break-word" as const,
+      minWidth: 0,
+      lineHeight: "1.5em",
+      fontSize: theme.fonts.sizes.body,
+    }),
+    [theme.fonts.sizes.body],
+  );
+
   return (
     <Wrapper>
-      <Text size="body">{t("ID")}</Text>
-      <ValueWrapper>
-        <Text size="body" otherProperties={{ userSelect: "auto" }}>
-          {selectedFeature?.id}
-        </Text>
-      </ValueWrapper>
-      <StyledSidePanelSectionField title={t("Geometry")} border="1">
+      {isSketchLayer && (
+        <Collapse
+          title={t("Custom Properties")}
+          size="small"
+          background={theme.bg[2]}
+          headerBg={theme.bg[2]}>
+          <FieldsWrapper>
+            {field.map(f => (
+              <FieldComponent
+                field={f}
+                key={f.id}
+                selectedFeature={sketchFeature}
+                setField={setField}
+                onSubmit={handleSubmit}
+              />
+            ))}
+          </FieldsWrapper>
+        </Collapse>
+      )}
+      <Collapse title={t("Geometry")} size="small" background={theme.bg[2]} headerBg={theme.bg[2]}>
         <ValueWrapper>
-          <JsonView
-            src={selectedFeature?.geometry}
-            theme="a11y"
-            dark
-            style={{ wordWrap: "break-word", minWidth: 0, lineHeight: "1.5em" }}
-          />
+          <JsonView src={selectedFeature?.geometry} theme="vscode" dark style={jsonStyle} />
         </ValueWrapper>
-      </StyledSidePanelSectionField>
-      <StyledSidePanelSectionField title={t("Properties")} border="1">
+      </Collapse>
+      <Collapse
+        title={t("Properties")}
+        size="small"
+        background={theme.bg[2]}
+        headerBg={theme.bg[2]}>
         <ValueWrapper>
-          <JsonView src={selectedFeature?.properties} theme="a11y" dark />
+          <JsonView src={selectedFeature?.properties} theme="vscode" dark style={jsonStyle} />
         </ValueWrapper>
-      </StyledSidePanelSectionField>
-      {isSketchLayer && (
-        <StyledSidePanelSectionField title={t("Custom Properties")} border="1">
-          {field.map(f => (
-            <FieldComponent
-              field={f}
-              key={f.id}
-              selectedFeature={sketchFeature}
-              setField={setField}
-              onSubmit={handleSubmit}
-            />
-          ))}
-        </StyledSidePanelSectionField>
-      )}
+      </Collapse>
     </Wrapper>
   );
 };
 
 export default FeatureData;
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  word-break: break-all;
-`;
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.small,
+  padding: `${theme.spacing.small}px 0`,
+  wordBreak: "break-all",
+}));
 
-const ValueWrapper = styled.div`
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  border-radius: 4px;
-  padding: 4px 8px;
-`;
+const FieldsWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.large,
+}));
 
-const StyledSidePanelSectionField = styled(SidePanelSectionField)`
-  background: ${({ theme }) => theme.outline.weaker};
-`;
+const ValueWrapper = styled("div")(({ theme }) => ({
+  border: `1px solid ${theme.outline.weak}`,
+  borderRadius: theme.radius.small,
+  background: theme.bg[1],
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+}));

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/hooks.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { filterVisibleItems } from "@reearth/beta/components/fields/utils";
+import { filterVisibleItems } from "@reearth/beta/ui/fields/utils";
 import { useInfoboxFetcher } from "@reearth/services/api";
 import { Item, convert } from "@reearth/services/api/propertyApi/utils";
 

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx

@@ -1,5 +1,7 @@
-import PropertyItem from "@reearth/beta/components/fields/Property/PropertyItem";
-import ToggleField from "@reearth/beta/components/fields/ToggleField";
+import { FC } from "react";
+
+import { SwitchField } from "@reearth/beta/ui/fields";
+import PropertyItem from "@reearth/beta/ui/fields/Properties";
 import { NLSInfobox } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -11,7 +13,7 @@ type Props = {
   infobox?: NLSInfobox;
 };
 
-const Infobox: React.FC<Props> = ({ selectedLayerId, infobox }) => {
+const Infobox: FC<Props> = ({ selectedLayerId, infobox }) => {
   const t = useT();
 
   const { visibleItems, handleInfoboxCreate } = useHooks({
@@ -26,21 +28,21 @@ const Infobox: React.FC<Props> = ({ selectedLayerId, infobox }) => {
           <PropertyItem key={i.id ?? ""} propertyId={infobox?.property?.id} item={i} />
         ))
       ) : (
-        <ToggleField
-          name={t("Enable Infobox")}
+        <SwitchField
+          commonTitle={t("Enable Infobox")}
           description={t("Show infobox when the user clicks on a layer")}
-          checked={false}
+          value={false}
           onChange={handleInfoboxCreate}
         />
       )}
     </Wrapper>
   );
 };
 
-export default Infobox;
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.large,
+}));
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
+export default Infobox;