@alpaca-editor/core 1.0.0

package/src/editor/component-designer/ComponentEditor.tsx

@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+import { Toolbar } from "../ui/Toolbar";
+import { ComponentsDropdown } from "./ComponentsDropdown";
+import { TemplateEditor } from "./TemplateEditor";
+import { getSelectedComponents } from "../componentTreeHelper";
+import { useEditContext } from "../client/editContext";
+import {
+  Component,
+  loadComponentDetails,
+  saveComponentDetails,
+} from "../services/componentDesignerService";
+
+import { Button } from "primereact/button";
+
+export function ComponentEditor({
+  allComponents,
+}: {
+  allComponents: Component[];
+}) {
+  const context = useEditContext()!;
+
+  useEffect(() => {
+    const loadSelectedComponent = async () => {
+      const selectedComponents = getSelectedComponents(context!);
+      if (selectedComponents.length !== 1) {
+        return;
+      }
+      const component = selectedComponents[0];
+
+      if (!component) {
+        context.setComponentDesignerComponent(undefined);
+        context.setComponentDesignerRendering(undefined);
+      } else {
+        context.setComponentDesignerComponent(
+          await loadComponentDetails(
+            component.datasourceItem!.templateId,
+            context!.page!.item.id
+          )
+        );
+        // if (component.rendering) {
+        //   context.setComponentDesignerRendering(
+        //     await getItem({
+        //       id: component.rendering.id,
+        //       language: "en",
+        //       version: 0,
+        //     })
+        //   );
+        // } else context.setComponentDesignerRendering(undefined);
+      }
+    };
+    loadSelectedComponent();
+  }, [context.selection]);
+
+  useEffect(() => {
+    const refresh = async () => {
+      if (context.componentDesignerComponent) {
+        context.setComponentDesignerComponent(
+          await loadComponentDetails(
+            context.componentDesignerComponent.templateId,
+            context!.page!.item.id
+          )
+        );
+      }
+    };
+    refresh();
+  }, [context.refreshCompletedFlag]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <Toolbar>
+        <ComponentsDropdown allComponents={allComponents} />{" "}
+        <Button
+          icon="pi pi-fw pi-save"
+          text
+          size="small"
+          disabled={!context.componentDesignerComponent}
+          onClick={() => {
+            const save = async () => {
+              await saveComponentDetails(
+                context.componentDesignerComponent!,
+                context.page!.item
+              );
+              context.showToast({
+                content: "Component saved",
+                severity: "success",
+              });
+            };
+            save();
+          }}
+        />
+      </Toolbar>
+      <div className="flex-1 overflow-auto">
+        <TemplateEditor />
+      </div>
+    </div>
+  );
+}

package/src/editor/component-designer/ComponentRenderingCodeEditor.tsx

@@ -0,0 +1,31 @@
+import "@uiw/react-textarea-code-editor/dist.css";
+
+import CodeEditor from "@uiw/react-textarea-code-editor";
+
+export function ComponentRenderingCodeEditor({
+  code,
+  setCode,
+}: {
+  code: string;
+  setCode: (code: string) => void;
+}): React.ReactNode {
+  return (
+    <div className="size-full relative">
+      <div className="absolute inset-0 overflow-auto">
+        <CodeEditor
+          value={code}
+          language="js"
+          placeholder="Please enter TSX code."
+          onChange={(evn: any) => setCode(evn.target.value)}
+          padding={15}
+          style={{
+            fontSize: 12,
+            backgroundColor: "#f5f5f5",
+            fontFamily:
+              "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/editor/component-designer/ComponentRenderingEditor.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import { Toolbar } from "../ui/Toolbar";
+import { ComponentRenderingCodeEditor } from "./ComponentRenderingCodeEditor";
+import { RenderingsDropdown } from "./RenderingsDropdown";
+import { useEditContext } from "../client/editContext";
+import { getSelectedComponents } from "../componentTreeHelper";
+import { Button } from "primereact/button";
+
+export function ComponentRenderingEditor() {
+  const context = useEditContext()!;
+  const [code, setCode] = useState<string>("");
+
+  useEffect(() => {
+    async function loadRendering() {
+      const selectedComponents = getSelectedComponents(context!);
+
+      if (selectedComponents.length !== 1) {
+        context;
+        return;
+      }
+
+      const component = selectedComponents[0];
+      const renderingId = component?.rendering?.id;
+
+      if (renderingId) {
+        const renderingItem = await context.itemsRepository.getItem({
+          id: renderingId,
+          language: "en",
+          version: 0,
+        });
+
+        context?.setComponentDesignerRendering(renderingItem);
+      } else {
+        context?.setComponentDesignerRendering(undefined);
+      }
+    }
+
+    loadRendering();
+  }, [context.selection]);
+
+  const codeField = context.componentDesignerRendering?.fields.find(
+    (x) => x.name === "code"
+  );
+
+  useEffect(() => {
+    if (codeField) {
+      setCode(codeField.value as string);
+    } else {
+      setCode("");
+    }
+  }, [context.componentDesignerRendering]);
+
+  useEffect(() => {
+    const refresh = async () => {
+      if (context.componentDesignerRendering) {
+        const renderingItem = await context.itemsRepository.getItem({
+          id: context.componentDesignerRendering.id,
+          language: "en",
+          version: 0,
+        });
+        context?.setComponentDesignerRendering(renderingItem);
+      }
+    };
+    refresh();
+  }, [context.refreshCompletedFlag]);
+
+  if (!context.componentDesignerComponent)
+    return (
+      <div className="flex items-center justify-center h-full text-xs">
+        Select a component
+      </div>
+    );
+  else
+    return (
+      <div className="flex flex-col h-full">
+        <Toolbar>
+          <RenderingsDropdown />
+          <Button
+            icon="pi pi-fw pi-save"
+            text
+            size="small"
+            disabled={!codeField}
+            onClick={() => {
+              if (!codeField) return;
+              context.operations.editField({
+                field: codeField.descriptor,
+                value: code,
+              });
+            }}
+          />
+        </Toolbar>
+        <div className="flex-1">
+          {!codeField && (
+            <div className="flex items-center justify-center h-full text-xs">
+              Select a rendering
+            </div>
+          )}
+          {codeField && (
+            <ComponentRenderingCodeEditor code={code} setCode={setCode} />
+          )}
+        </div>
+      </div>
+    );
+}

package/src/editor/component-designer/ComponentsDropdown.tsx

@@ -0,0 +1,39 @@
+import { useEditContext } from "../client/editContext";
+import {
+  Component,
+  loadComponentDetails,
+} from "../services/componentDesignerService";
+
+import { Dropdown } from "primereact/dropdown";
+
+export function ComponentsDropdown({
+  allComponents,
+}: {
+  allComponents: Component[];
+}) {
+  const context = useEditContext();
+  if (!context?.page) return null;
+
+  async function loadComponent(id: string) {
+    const component = await loadComponentDetails(id, context!.page!.item.id);
+    context!.setComponentDesignerComponent(component);
+  }
+  const value = allComponents.find(
+    (x) => x.templateId === context.componentDesignerComponent?.templateId
+  );
+
+  return (
+    <Dropdown
+      value={value}
+      filter
+      options={allComponents}
+      optionLabel="name"
+      placeholder="Select a Component"
+      onChange={(e) => {
+        loadComponent(e.value.templateId);
+        context.setComponentDesignerRendering(undefined);
+        context.select([]);
+      }}
+    />
+  );
+}

package/src/editor/component-designer/PlaceholdersEditor.tsx

@@ -0,0 +1,183 @@
+import { useEditContext } from "../client/editContext";
+import {
+  Component,
+  PlaceholderDefinition,
+  saveComponentDetails,
+} from "../services/componentDesignerService";
+import { ArrowDownIcon } from "../ui/Icons";
+import { Toolbar } from "../ui/Toolbar";
+import { Button } from "primereact/button";
+import { ItemNameDialogHandle, ItemNameDialog } from "../ui/ItemNameDialog";
+import { useRef } from "react";
+import { InsertOption } from "../../types";
+
+export function PlaceholdersEditor({
+  allComponents,
+}: {
+  allComponents: Component[];
+}) {
+  const context = useEditContext()!;
+  const component = context.componentDesignerComponent;
+  const itemNameDialogRef = useRef<ItemNameDialogHandle>(null);
+
+  const handleDragStart = (
+    event: React.DragEvent<HTMLDivElement>,
+    component: Component | InsertOption
+  ) => {
+    event.dataTransfer.setData("text/plain", JSON.stringify(component));
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
+  const handleDrop = (
+    event: React.DragEvent<HTMLDivElement>,
+    placeholderName: string
+  ) => {
+    event.preventDefault();
+    const componentData = JSON.parse(event.dataTransfer.getData("text/plain"));
+    const placeholder = component?.placeholders.find(
+      (x) => x.name == placeholderName
+    );
+    if (!placeholder) return;
+    console.log(placeholder, componentData);
+
+    if (
+      placeholder.components.find(
+        (x) => x.typeId === componentData.typeId
+      )
+    )
+      return;
+    placeholder.components.push(componentData);
+    context.setComponentDesignerComponent({
+      ...context.componentDesignerComponent!,
+    });
+  };
+
+  const removeInsertOption = (
+    placeholder: PlaceholderDefinition,
+    insertOption: InsertOption
+  ) => {
+    placeholder.components = placeholder.components.filter(
+      (x) => x.typeId !== insertOption.typeId
+    );
+    context.setComponentDesignerComponent({
+      ...context.componentDesignerComponent!,
+    });
+  };
+
+  const addNewPlaceholder = async () => {
+    itemNameDialogRef.current?.show({
+      title: "Choose Placeholder Name",
+      accept: async (name: string) => {
+        if (!context.componentDesignerComponent) return;
+        const placeholder = {
+          name: name,
+          components: [],
+        };
+        context.componentDesignerComponent.placeholders.push(placeholder);
+        context.setComponentDesignerComponent({
+          ...context.componentDesignerComponent!,
+        });
+      },
+    });
+  };
+
+  if (!component)
+    return (
+      <div className="flex items-center justify-center h-full text-xs">
+        Select a component
+      </div>
+    );
+  else
+    return (
+      <div className="flex flex-col h-full">
+        <Toolbar>
+          <Button
+            icon="pi pi-fw pi-plus"
+            label="New Placeholder"
+            text
+            size="small"
+            className="text-xs text-gray-800 font-normal"
+            disabled={!component}
+            onClick={() => {
+              addNewPlaceholder();
+            }}
+          />
+          <Button
+            icon="pi pi-fw pi-save"
+            label="Save"
+            text
+            size="small"
+            className="text-xs text-gray-800 font-normal"
+            disabled={!component}
+            onClick={() => {
+              saveComponentDetails(component, context.page!.item);
+            }}
+          />
+        </Toolbar>
+        <div className="flex flex-1">
+          <div className="relative flex-1 h-full">
+            <div className="absolute inset-1 overflow-y-auto">
+              {component.placeholders.map((x) => (
+                <div
+                  key={x.name}
+                  className="mb-2"
+                  onDragOver={handleDragOver}
+                  onDrop={(event) => handleDrop(event, x.name)}
+                >
+                  <div className="text-xs flex gap-1 items-center">
+                    <ArrowDownIcon /> {x.name}
+                  </div>
+                  <div className="flex gap-4 flex-wrap text-xs mt-1.5 p-1">
+                    {x.components.map((y) => (
+                      <div className="relative" key={y.typeId}>
+                        <div
+                          className="absolute top-[-12px] right-[-12px] border rounded-full p-1 bg-white cursor-pointer"
+                          onClick={() => removeInsertOption(x, y)}
+                        >
+                          <i className="pi pi-times text-xs" />
+                        </div>
+                        {renderComponent(y)}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="relative w-24">
+            <div className="absolute inset-0 overflow-y-auto text-xs border-l ">
+              {allComponents.map((x) => (
+                <div
+                  key={x.templateId}
+                  className="mb-2 cursor-grab"
+                  draggable
+                  onDragStart={(event) => handleDragStart(event, x)}
+                >
+                  {renderComponent(x)}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <ItemNameDialog ref={itemNameDialogRef} />
+      </div>
+    );
+}
+
+function renderComponent(y: Component | InsertOption) {
+  return (
+    <div className="flex flex-col items-center p-2 border border-gray-200">
+      {y.svg && (
+        <div
+          className="w-8 h-8"
+          dangerouslySetInnerHTML={{ __html: y.svg }}
+        ></div>
+      )}
+      {!y.svg && <img src={y.icon} width="32" height="32"></img>}
+      {y.name}
+    </div>
+  );
+}

package/src/editor/component-designer/RenderingsDropdown.tsx

@@ -0,0 +1,36 @@
+import { useEditContext } from "../client/editContext";
+import { Dropdown } from "primereact/dropdown";
+
+import { Rendering } from "../../types";
+
+export function RenderingsDropdown() {
+  const context = useEditContext()!;
+
+  if (!context.componentDesignerComponent) return null;
+
+  const compatibleRenderings = [
+    ...context.componentDesignerComponent.compatibleRenderings,
+  ];
+
+  if (!compatibleRenderings) return null;
+
+  const loadRendering = async (value: Rendering) => {
+    const item = await context.itemsRepository.getItem({
+      id: value.id,
+      language: "en",
+      version: 0,
+    });
+    context.setComponentDesignerRendering(item);
+  };
+
+  return (
+    <Dropdown
+      options={compatibleRenderings}
+      optionLabel="name"
+      value={compatibleRenderings.find(
+        (x) => x.id === (context.componentDesignerRendering?.id || "")
+      )}
+      onChange={(e) => loadRendering(e.value as Rendering)}
+    />
+  );
+}