@alpaca-editor/core 1.0.0

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

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

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

package/src/editor/componentTreeHelper.tsx

@@ -0,0 +1,114 @@
+import { EditContextType, DragObject } from "./client/editContext";
+import { Component, Page, Placeholder } from "./pageModel";
+
+export function findComponent(
+  id: string,
+  placeholders: Placeholder[],
+): Component | undefined {
+  if (!placeholders) return;
+  for (const p of placeholders) {
+    for (const c of p.components) {
+      if (c.id === id || c.datasourceItem?.id === id) {
+        return c;
+      }
+      if (c.placeholders) {
+        const match = findComponent(id, c.placeholders);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  }
+
+  return;
+}
+
+export function getComponentById(
+  id: string,
+  page: Page,
+): Component | undefined {
+  if (!page) return;
+  return findComponent(id, page.rootComponent.placeholders);
+}
+
+export function getComponentByIdFromHeadlessLayout(
+  id: string,
+  page: any,
+): Component | undefined {
+  if (!page) return;
+  return findComponent(id, page.placeholders);
+}
+
+export function getSelectedComponents(editContext: EditContextType) {
+  if (!editContext) return [];
+  const page = editContext.page;
+  if (!page) return [];
+  const selectedComponents = editContext.selection
+    .map((x) => getComponentById(x, page))
+    .filter((x) => x);
+  return selectedComponents.length === 0 ? [] : selectedComponents;
+}
+
+export function getComponentByIdWithPlaceholder(
+  id: string,
+  page: Page,
+): { placeholder: Placeholder; component: Component } | null {
+  if (!page) return null;
+  return findComponentWithPlaceholder(id, page.rootComponent.placeholders);
+}
+
+export function findComponentWithPlaceholder(
+  id: string,
+  placeholders: Placeholder[],
+): { placeholder: Placeholder; component: Component } | null {
+  if (!placeholders) return null;
+  for (const p of placeholders) {
+    for (const c of p.components) {
+      if (c.id === id || c.datasourceItem?.id === id) {
+        return { component: c, placeholder: p };
+      }
+      if (c.placeholders) {
+        const match = findComponentWithPlaceholder(id, c.placeholders);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+export function getAllPlaceholders(page: Page) {
+  const placeholders: Placeholder[] = [];
+  const addPlaceholders = (p: Placeholder[]) => {
+    p.forEach((x) => {
+      placeholders.push(x);
+      if (x.components) {
+        x.components.forEach((c) => {
+          addPlaceholders(c.placeholders);
+        });
+      }
+    });
+  };
+  addPlaceholders(page.rootComponent.placeholders);
+  return placeholders;
+}
+
+export const isValidPlaceholder = (
+  placeholder: Placeholder,
+  dragObject: DragObject,
+) => {
+  return (
+    placeholder.insertOptions?.find(
+      (y) =>
+        y.typeId === dragObject.typeId ||
+        y.typeId === dragObject?.templateId ||
+        y.compatibleTemplates?.find((z) => z == dragObject.typeId) !==
+          undefined ||
+        y.typeId === dragObject.templateId ||
+        y.compatibleTemplates?.find((z) => z == dragObject.templateId) !==
+          undefined,
+    ) !== undefined
+  );
+};

package/src/editor/control-center/ControlCenterMenu.tsx

@@ -0,0 +1,71 @@
+import { useRouter } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEditContext } from "../client/editContext";
+import { SimpleMenu } from "../ui/SimpleMenu";
+import { useEffect, useState } from "react";
+export function ControlCenterMenu() {
+  const editContext = useEditContext();
+  const config = editContext?.configuration;
+  const searchParams = useSearchParams();
+  const urlActiveItemKey = searchParams.get("ccpanel");
+  const [activeItemKey, setActiveItemKey] = useState<string | null>(
+    urlActiveItemKey
+  );
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const updateUrl = (key: string | null) => {
+    if (urlActiveItemKey === key) return;
+
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+
+    if (key) {
+      current.set("ccpanel", key);
+    } else {
+      current.delete("ccpanel");
+    }
+    router.push(`${pathname}?${current.toString()}`, { scroll: false });
+  };
+
+  useEffect(() => {
+    updateUrl(activeItemKey);
+  }, [activeItemKey]);
+
+  const items = config?.controlCenter.groups.map((group) => {
+    return {
+      key: group.title,
+      label: group.title,
+      icon: group.icon,
+      items:
+        group.panels.map((panel) => ({
+          key: panel.id,
+          label: panel.title,
+        })) || [],
+    };
+  });
+
+  useEffect(() => {
+    const groups = config?.controlCenter.groups;
+    const item = groups
+      ?.flatMap((x) => x.panels)
+      ?.find((item) => item.id === activeItemKey);
+    if (item) {
+      editContext?.setCenterPanelView(item.content);
+    }
+  }, [activeItemKey]);
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <SimpleMenu
+      items={items}
+      activeItemKey={activeItemKey}
+      onItemClick={(item) => {
+        setActiveItemKey(item.key);
+      }}
+    />
+  );
+}

package/src/editor/control-center/IndexOverview.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { getIndexes } from "../services/indexService";
+
+import { IndexSettings } from "./IndexSettings";
+import { classNames } from "primereact/utils";
+
+export function IndexOverview() {
+  const [indexes, setIndexes] = useState<string[] | undefined>(undefined);
+  const [selectedIndex, setSelectedIndex] = useState<string | undefined>(
+    undefined
+  );
+  useEffect(() => {
+    async function loadIndexes() {
+      const indexes = await getIndexes();
+      if (indexes.indexOf("master") === -1) {
+        indexes.push("master");
+      }
+      if (indexes.indexOf("media") === -1) {
+        indexes.push("media");
+      }
+      setIndexes(indexes);
+    }
+    loadIndexes();
+  }, []);
+  return (
+    <div className="flex items-stretch h-full">
+      <div className="flex flex-col gap-2 border-r border-gray-200">
+        <div className="flex items-center justify-center p-2 min-w-40 border-b border-gray-200">
+          Index
+        </div>
+        {indexes?.map((index) => (
+          <div
+            key={index}
+            onClick={() => setSelectedIndex(index)}
+            className={classNames(
+              "cursor-pointer p-2 px-6 hover:bg-gray-100 text-sm",
+              selectedIndex === index && "bg-gray-100"
+            )}
+          >
+            {index}
+          </div>
+        ))}
+      </div>
+      <div className="flex-1 p-2">
+        {selectedIndex && <IndexSettings index={{ name: selectedIndex }} />}
+      </div>
+    </div>
+  );
+}