@alpaca-editor/core 1.0.4112 → 1.0.4118

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)}
-    />
-  );
-}

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

@@ -1,236 +0,0 @@
-import { useEditContext } from "../client/editContext";
-
-import { InputText } from "primereact/inputtext";
-import {
-  FieldTypeGroup,
-  TemplateField,
-  TemplateSection,
-  getFieldTypes,
-} from "../services/componentDesignerService";
-import { useEffect, useState } from "react";
-import { Dropdown } from "primereact/dropdown";
-
-export function TemplateEditor() {
-  const context = useEditContext();
-  if (!context) return null;
-
-  const [sections, setSections] = useState<TemplateSection[]>([]);
-  const [fieldTypes, setFieldTypes] = useState<FieldTypeGroup[]>([]);
-
-  useEffect(() => {
-    const newSections = [
-      ...(context.componentDesignerComponent?.template?.sections.map((s) => ({
-        ...s,
-      })) || []),
-    ];
-    if (
-      newSections.length === 0 ||
-      newSections[newSections.length - 1].fields.length > 0
-    )
-      newSections.push({
-        name: "",
-        fields: [],
-        key: Math.random().toString(),
-      });
-    newSections.forEach((section) => {
-      const fields = [...section.fields];
-      if (
-        section.id ||
-        (section.name != "" &&
-          (!fields.length ||
-            fields[fields.length - 1].id ||
-            fields[fields.length - 1].name != ""))
-      ) {
-        fields.push({
-          name: "",
-          type: "",
-          source: "",
-          key: Math.random().toString(),
-        });
-      }
-      section.fields = fields;
-    });
-    setSections(newSections);
-  }, [context.componentDesignerComponent]);
-
-  useEffect(() => {
-    const load = async () => {
-      const types = await getFieldTypes();
-      setFieldTypes(types);
-    };
-    load();
-  }, []);
-
-  const template = context.componentDesignerComponent?.template;
-
-  if (!template) return null;
-
-  const updateComponent = (sections: TemplateSection[]) => {
-    const newSections = sections.filter((x) => x.id || x.name);
-    newSections.forEach((section) => {
-      section.fields = section.fields.filter((x) => x.id || x.name);
-    });
-
-    const newTemplate = {
-      ...template,
-      sections: newSections,
-    };
-
-    const newComponent = {
-      ...context.componentDesignerComponent!,
-      template: newTemplate,
-    };
-
-    console.log("Updating component", newComponent);
-
-    context.setComponentDesignerComponent(newComponent);
-  };
-
-  const update = () => {
-    updateComponent(sections);
-  };
-
-  const removeField = (section: TemplateSection, field: TemplateField) => {
-    section.fields = section.fields.filter((x) => x.id !== field.id);
-    update();
-  };
-
-  const handleDragStart = (
-    event: React.DragEvent,
-    index: number,
-    sectionIndex?: number
-  ) => {
-    event.dataTransfer.setData("text/plain", index.toString());
-    event.dataTransfer.effectAllowed = "move";
-    //event.currentTarget.style.opacity = "0.5";
-    if (sectionIndex === undefined) {
-      event.dataTransfer.setData("isSection", "true");
-    } else {
-      event.dataTransfer.setData("sectionIndex", sectionIndex.toString());
-      event.dataTransfer.setData("isSection", "false");
-    }
-  };
-
-  const handleDragOver = (event: React.DragEvent) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-  };
-
-  const handleDrop = (
-    event: React.DragEvent,
-    dropIndex: number,
-    sectionIndex?: number
-  ) => {
-    event.preventDefault();
-    const dragIndex = parseInt(event.dataTransfer.getData("text/plain"));
-    const isSectionDrag = event.dataTransfer.getData("isSection") === "true";
-
-    if (isSectionDrag && sectionIndex === undefined) {
-      const newSections = sections;
-      const [removed] = newSections.splice(dragIndex, 1);
-      newSections.splice(dropIndex, 0, removed);
-
-      updateComponent(newSections);
-    } else if (!isSectionDrag) {
-      const sourceSectionIndex = parseInt(
-        event.dataTransfer.getData("sectionIndex")
-      );
-      const sourceSection = sections[sourceSectionIndex];
-      const targetSection = sections[sectionIndex ?? dropIndex];
-
-      const sourceFields = sourceSection.fields;
-      const targetFields = targetSection.fields;
-      const [removed] = sourceFields.splice(dragIndex, 1);
-
-      if (sectionIndex === undefined) {
-        targetFields.push(removed);
-      } else {
-        targetFields.splice(dropIndex, 0, removed);
-      }
-
-      updateComponent(sections);
-    }
-  };
-
-  return (
-    <div className="p-1">
-      {sections.map((section, sectionIndex) => {
-        return (
-          <div key={section.id || section.key} className="mb-4">
-            <div className=" flex gap-1">
-              {dragHandle(sectionIndex)}
-              <InputText
-                className="text-xs"
-                value={section.name}
-                onChange={(e) => {
-                  section.name = e.target.value;
-                  update();
-                }}
-              />
-            </div>
-            {section.fields.map((field, fieldIndex) => {
-              return (
-                <div
-                  key={field.id || field.key}
-                  className="ml-4 flex gap-2 mt-1 items-center"
-                >
-                  {dragHandle(fieldIndex, sectionIndex)}
-                  <InputText
-                    key="name"
-                    className="text-xs flex-1"
-                    value={field.name}
-                    onChange={(e) => {
-                      field.name = e.target.value;
-                      update();
-                    }}
-                  />
-                  <Dropdown
-                    key="type"
-                    filter
-                    options={fieldTypes}
-                    optionGroupLabel="name"
-                    optionGroupChildren="fieldTypes"
-                    className="text-xs flex-1"
-                    value={field.type}
-                    onChange={(e) => {
-                      field.type = e.target.value;
-                      update();
-                    }}
-                  />
-                  <InputText
-                    key="source"
-                    className="text-xs flex-1"
-                    value={field.source}
-                    onChange={(e) => {
-                      field.source = e.target.value;
-                      update();
-                    }}
-                  />
-                  <i
-                    className="pi pi-fw pi-times cursor-pointer"
-                    onClick={() => removeField(section, field)}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
-  );
-
-  function dragHandle(index: number, sectionIndex?: number) {
-    return (
-      <div
-        draggable
-        onDragStart={(event) => handleDragStart(event, index, sectionIndex)}
-        onDragOver={handleDragOver}
-        onDrop={(event) => handleDrop(event, index, sectionIndex)}
-        // onDragEnd={handleDragEnd}
-        className="cursor-grab text-xs bg-gray-50 text-center p-0.5 border flex justify-center items-center"
-      >
-        <i className="pi pi-ellipsis-v" />
-      </div>
-    );
-  }
-}

package/src/editor/component-designer/aiContext.ts

@@ -1,21 +0,0 @@
-import { AiContext } from "../ai/types";
-//import { configuration } from "../config/config";
-import { EditContextType } from "../client/editContext";
-import { getItemDescriptor } from "../utils";
-
-export function createDesignerAiContext({
-  editContext,
-}: {
-  editContext: EditContextType;
-}): AiContext {
-  return {
-    callback: () => {
-      editContext.requestRefresh();
-    },
-    promptData: {
-      templateId: editContext.componentDesignerComponent?.templateId,
-      renderingId: editContext.componentDesignerRendering?.id,
-      contextItem: getItemDescriptor(editContext.page?.item!),
-    },
-  };
-}