@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,70 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,179 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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)}
-    />
-  );
-}