feat(web): plugin playground/reflect code editor to viewer

web/src/beta/features/PluginPlayground/Code/hook.ts

@@ -0,0 +1,125 @@
+import Visualizer from "@reearth/beta/features/Visualizer";
+import { useNotification } from "@reearth/services/state";
+import * as yaml from "js-yaml";
+import { ComponentProps, useCallback, useState } from "react";
+
+import { WidgetLocation } from "../../Visualizer/Crust/Widgets/types";
+import { FileType } from "../Plugins/constants";
+
+type Widgets = ComponentProps<typeof Visualizer>["widgets"];
+
+type ReearthYML = {
+  id: string;
+  name: string;
+  version: string;
+  extensions?: {
+    id: string;
+    type: string;
+    name: string;
+    description: string;
+    widgetLayout?: {
+      defaultLocation: {
+        zone: WidgetLocation["zone"];
+        section: WidgetLocation["section"];
+        area: WidgetLocation["area"];
+      };
+    };
+  }[];
+};
+
+type Props = {
+  files: FileType[];
+};
+
+const getYmlJson = (file: FileType) => {
+  if (file.sourceCode === "") {
+    return { success: false, message: "YAML file is empty" } as const;
+  }
+
+  try {
+    const data = yaml.load(file.sourceCode) as ReearthYML;
+    return { success: true, data } as const;
+  } catch (error) {
+    const message =
+      error instanceof yaml.YAMLException
+        ? error.message
+        : "Failed to parse YAML";
+    return { success: false, message } as const;
+  }
+};
+
+export default ({ files }: Props) => {
+  const [widgets, setWidgets] = useState<Widgets>();
+  const [, setNotification] = useNotification();
+
+  const executeCode = useCallback(() => {
+    const ymlFile = files.find((file) => file.title.endsWith(".yml"));
+
+    if (!ymlFile) return;
+
+    const getYmlResult = getYmlJson(ymlFile);
+
+    if (!getYmlResult.success) {
+      setNotification({ type: "error", text: getYmlResult.message });
+      return;
+    }
+
+    const ymlJson = getYmlResult.data;
+
+    if (!ymlJson.extensions) return;
+
+    const widgets = ymlJson.extensions.reduce<NonNullable<Widgets>>(
+      (prv, cur) => {
+        const file = files.find((file) => file.title === `${cur.id}.js`);
+
+        if (!file) {
+          return prv;
+        }
+
+        const { zone, section, area } = cur.widgetLayout?.defaultLocation ?? {
+          zone: "outer",
+          section: "left",
+          area: "top"
+        };
+
+        const zoneAlignSystem = prv?.alignSystem?.[zone] ?? {};
+        const sectionAlignSystem = zoneAlignSystem[section] ?? {};
+        const areaAlignSystem = sectionAlignSystem[area] ?? { widgets: [] };
+
+        return {
+          ...prv,
+          alignSystem: {
+            ...prv?.alignSystem,
+            [zone]: {
+              ...zoneAlignSystem,
+              [section]: {
+                ...sectionAlignSystem,
+                [area]: {
+                  ...areaAlignSystem,
+                  widgets: [
+                    ...(areaAlignSystem.widgets ?? []),
+                    {
+                      id: cur.id,
+                      __REEARTH_SOURCECODE: file.sourceCode
+                    }
+                  ]
+                }
+              }
+            }
+          }
+        };
+      },
+      {
+        alignSystem: {},
+        floating: [],
+        ownBuiltinWidgets: []
+      }
+    );
+    setWidgets(widgets);
+  }, [files, setNotification]);
+
+  return {
+    executeCode,
+    widgets
+  };
+};

web/src/beta/features/PluginPlayground/Code/index.tsx

@@ -0,0 +1,59 @@
+import { Button, CodeInput } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/theme";
+import { FC } from "react";
+
+type Props = {
+  fileTitle: string;
+  sourceCode: string;
+  onChangeSourceCode: (value: string | undefined) => void;
+  executeCode: () => void;
+};
+
+const getLanguageByFileExtension = (fileTitle: string) => {
+  const ext = fileTitle.split(".").pop();
+  switch (ext) {
+    case "js":
+      return "javascript";
+    case "yml":
+    case "yaml":
+      return "yaml";
+    default:
+      return "plaintext";
+  }
+};
+
+const Code: FC<Props> = ({
+  fileTitle,
+  sourceCode,
+  onChangeSourceCode,
+  executeCode
+}) => {
+  return (
+    <Wrapper>
+      <Header>
+        <Button icon="playRight" iconButton onClick={executeCode} />
+        <p>Widget</p>
+      </Header>
+      <CodeInput
+        language={getLanguageByFileExtension(fileTitle)}
+        value={sourceCode}
+        onChange={onChangeSourceCode}
+      />
+    </Wrapper>
+  );
+};
+
+const Header = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+}));
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.small,
+  height: "100%"
+}));
+
+export default Code;

web/src/beta/features/PluginPlayground/PluginInspector/index.tsx

@@ -1,7 +1,20 @@
+import { Button } from "@reearth/beta/lib/reearth-ui";
 import { FC } from "react";
 
-const PluginInspector: FC = () => {
-  return <div>Plugin inspector content</div>;
+type Props = {
+  handlePluginDownload: () => void;
+};
+
+const PluginInspector: FC<Props> = ({ handlePluginDownload }) => {
+  return (
+    <div>
+      <Button
+        icon="install"
+        title="Download Package"
+        onClick={handlePluginDownload}
+      />
+    </div>
+  );
 };
 
 export default PluginInspector;

web/src/beta/features/PluginPlayground/Plugins/FileListItem.tsx

@@ -0,0 +1,119 @@
+import { TextInput } from "@reearth/beta/lib/reearth-ui";
+import { EntryItem } from "@reearth/beta/ui/components";
+import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useMemo, useState } from "react";
+
+import { FileType } from "./constants";
+import usePlugins from "./hook";
+
+type UsePluginsReturn = ReturnType<typeof usePlugins>;
+
+type Props = {
+  file: FileType;
+  selected: boolean;
+  onClick?: () => void;
+  isEditing?: boolean;
+  confirmFileTitle: (value: string, id: string) => void;
+  deleteFile?: UsePluginsReturn["deleteFile"];
+};
+
+const FileListItem: FC<Props> = ({
+  file,
+  selected,
+  onClick,
+  confirmFileTitle,
+  deleteFile,
+  isEditing: isEditingProp
+}) => {
+  const [isEditing, setIsEditing] = useState(isEditingProp);
+
+  const handleInputConfirm = useCallback(
+    (value: string) => {
+      confirmFileTitle(value, file.id);
+      setIsEditing(false);
+    },
+    [confirmFileTitle, file.id]
+  );
+
+  const optionsMenu = useMemo(() => {
+    const menuItems = [
+      ...(!file.disableDelete
+        ? [
+            {
+              id: "delete",
+              title: "Delete",
+              icon: "trash" as const,
+              onClick: () => deleteFile?.(file.id)
+            }
+          ]
+        : []),
+      ...(!file.disableEdit
+        ? [
+            {
+              id: "rename",
+              title: "Rename",
+              icon: "pencilSimple" as const,
+              onClick: () => setIsEditing(true)
+            }
+          ]
+        : [])
+    ];
+
+    return menuItems.length > 0 ? menuItems : undefined;
+  }, [deleteFile, file.id, file.disableDelete, file.disableEdit]);
+
+  return (
+    <Wrapper>
+      <EntryItem
+        icon="file"
+        title={
+          isEditing ? (
+            <TextInput
+              size="small"
+              extendWidth
+              autoFocus
+              value={file.title}
+              onBlur={handleInputConfirm}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleInputConfirm(e.currentTarget.value);
+                }
+              }}
+            />
+          ) : (
+            <TitleWrapper>{file.title}</TitleWrapper>
+          )
+        }
+        highlighted={selected}
+        optionsMenuWidth={100}
+        onClick={onClick}
+        optionsMenu={!isEditing ? optionsMenu : undefined}
+      />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled("li")(({ theme }) => ({
+  display: "flex",
+  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
+  }
+}));
+
+const TitleWrapper = styled("div")(({ theme }) => ({
+  padding: `0 ${theme.spacing.smallest + 1}px`,
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+
+export default FileListItem;

web/src/beta/features/PluginPlayground/Plugins/constants.ts

@@ -0,0 +1,36 @@
+export type PluginType = {
+  id: string;
+  title: string;
+  files: FileType[];
+};
+
+export type FileType = {
+  id: string;
+  title: string;
+  sourceCode: string;
+  disableEdit?: boolean;
+  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;