@alpaca-editor/core 1.0.3942 → 1.0.3944

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

@@ -0,0 +1,70 @@
+import { ComponentRenderingEditor } from "./ComponentRenderingEditor";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { StackedPanels } from "../ui/StackedPanels";
+import { Panel } from "../../config/types";
+
+import { PlaceholdersEditor } from "./PlaceholdersEditor";
+import { PuzzleIcon } from "../ui/Icons";
+import { ComponentEditor } from "./ComponentEditor";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import {
+  Component,
+  getAllComponents,
+} from "../services/componentDesignerService";
+import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
+
+export function ComponentDesigner() {
+  const [allComponents, setAllComponents] = useState<Component[]>([]);
+  const context = useEditContext();
+  if (!context?.page) return null;
+
+  useEffect(() => {
+    async function loadComponents() {
+      if (context?.page) {
+        const components = await getAllComponents(context.page.item.id);
+        setAllComponents(components);
+      } else setAllComponents([]);
+    }
+
+    loadComponents();
+  }, [context.page]);
+
+  const mainPanels: Panel[] = [
+    {
+      name: "template",
+      title: "Component",
+      initialSize: 30,
+      icon: <PuzzleIcon />,
+      noOverflow: true,
+      content: <ComponentEditor allComponents={allComponents} />,
+    },
+    {
+      name: "placeholders",
+      title: "Placeholders",
+      icon: "pi pi-th-large",
+      initialSize: 30,
+      noOverflow: true,
+      content: <PlaceholdersEditor allComponents={allComponents} />,
+    },
+    {
+      name: "rendering",
+      title: "Rendering",
+      icon: "pi pi-palette",
+      initialSize: 40,
+      content: <ComponentRenderingEditor />,
+      noOverflow: true,
+    },
+  ];
+
+  return (
+    <Splitter className="h-full">
+      <SplitterPanel>
+        <StackedPanels panels={mainPanels} />
+      </SplitterPanel>
+      <SplitterPanel>
+        <PageViewerFrame compareView={false} />
+      </SplitterPanel>
+    </Splitter>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { AiTerminal } from "../ai/AiTerminal";
+import { createDesignerAiContext } from "./aiContext";
+
+export function ComponentDesignerAiTerminal() {
+  return (
+    <AiTerminal
+      createAiContext={createDesignerAiContext}
+      defaultProfile="Component Designer"
+    />
+  );
+}

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

@@ -0,0 +1,91 @@
+import { Menubar } from "primereact/menubar";
+
+import {
+  createNewComponent,
+  createRendering,
+  loadComponentDetails,
+} from "../services/componentDesignerService";
+import { ItemNameDialog } from "../ui/ItemNameDialogNew";
+import { useRef } from "react";
+import { useEditContext } from "../client/editContext";
+import { ItemLanguageVersion } from "../menubar/ItemLanguageVersion";
+
+export function ComponentDesignerMenu() {
+  const context = useEditContext();
+  if (!context) return;
+
+  // const menuItems = [
+  //   {
+  //     id: "newComponent",
+  //     label: "New Component",
+  //     icon: "pi pi-fw pi-plus",
+  //     command: () => createNew(),
+  //     //      disabled: !context.componentRenderingFolder,
+  //   },
+  //   {
+  //     id: "newRendering",
+  //     label: "New Rendering",
+  //     icon: "pi pi-fw pi-palette",
+  //     command: () => createNewRendering(),
+  //     disabled: !context.componentDesignerComponent,
+  //   },
+  //   {
+  //     id: "delete",
+  //     label: "Delete rendering",
+  //     icon: "pi pi-fw pi-trash",
+  //     disabled: !context.componentDesignerRendering,
+  //   },
+  // ];
+  // const itemNameDialogRef = useRef<ItemNameDialogHandle>(null);
+
+  // const createNew = async () => {
+  //   itemNameDialogRef.current?.show({
+  //     title: "Choose Component Name",
+  //     accept: async (name) => {
+  //       await createNewComponent(name, context.page!.item);
+  //     },
+  //   });
+  // };
+
+  // const createNewRendering = async () => {
+  //   itemNameDialogRef.current?.show({
+  //     title: "Choose Rendering Name",
+  //     accept: async (name) => {
+  //       if (!context.componentDesignerComponent) return;
+  //       const details = await createRendering(
+  //         name,
+  //         context.page!.item,
+  //         context.componentDesignerComponent.templateId
+  //       );
+  //       if (!("id" in details)) return;
+
+  //       const component = await loadComponentDetails(
+  //         context.componentDesignerComponent.templateId,
+  //         context!.page!.item.id
+  //       );
+  //       // const rendering = await getItem({
+  //       //   id: details.id,
+  //       //   language: "en",
+  //       //   version: 0,
+  //       // });
+  //       context.setComponentDesignerComponent(component);
+  //       //    context.setComponentDesignerRendering(rendering);
+  //     },
+  //   });
+  // };
+
+  return (
+    <>
+      {/* <Menubar
+        model={menuItems}
+        end={
+          <div className="flex items-center space-x-2">
+            <ItemLanguageVersion />
+          </div>
+        }
+        className="rounded-none border-0 border-b bg-gray-50 p-1 text-sm"
+      ></Menubar>
+      <ItemNameDialog ref={itemNameDialogRef} /> */}
+    </>
+  );
+}

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,179 @@
+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 { ItemNameDialog } from "../ui/ItemNameDialogNew";
+
+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 h-full items-center justify-center text-xs">
+        Select a component
+      </div>
+    );
+  else
+    return (
+      <div className="flex h-full flex-col">
+        <Toolbar>
+          {/* <Button
+            icon="pi pi-fw pi-plus"
+            label="New Placeholder"
+            text
+            size="small"
+            className="text-xs font-normal text-gray-800"
+            disabled={!component}
+            onClick={() => {
+              addNewPlaceholder();
+            }}
+          /> */}
+          <Button
+            icon="pi pi-fw pi-save"
+            label="Save"
+            text
+            size="small"
+            className="text-xs font-normal text-gray-800"
+            disabled={!component}
+            onClick={() => {
+              saveComponentDetails(component, context.page!.item);
+            }}
+          />
+        </Toolbar>
+        <div className="flex flex-1">
+          <div className="relative h-full flex-1">
+            <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="flex items-center gap-1 text-xs">
+                    <ArrowDownIcon /> {x.name}
+                  </div>
+                  <div className="mt-1.5 flex flex-wrap gap-4 p-1 text-xs">
+                    {x.components.map((y) => (
+                      <div className="relative" key={y.typeId}>
+                        <div
+                          className="absolute top-[-12px] right-[-12px] cursor-pointer rounded-full border bg-white p-1"
+                          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 border-l text-xs">
+              {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 border border-gray-200 p-2">
+      {y.svg && (
+        <div
+          className="h-8 w-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)}
+    />
+  );
+}