@alpaca-editor/core 1.0.0

package/src/editor/commands/deleteVersionCommand.ts

@@ -0,0 +1,71 @@
+import { deleteVersion } from "../services/editService";
+import { getItemDescriptor } from "../utils";
+import { Command, CommandContext } from "./commands";
+
+export function getDeleteVersionCommand({}: {
+  language?: string;
+}): Command<CommandContext<any>> {
+  return {
+    id: "deleteVersion",
+    execute: (context) => execute(context),
+    label: "Delete Version",
+    icon: "pi pi-fw pi-times",
+    disabled: (context: CommandContext<any>) =>
+      !context.editContext.item?.canLock ||
+      context.editContext.item.version === 0 ||
+      context.editContext.itemVersions.length === 0,
+  };
+}
+
+async function execute(context: CommandContext<any>): Promise<void> {
+  if (!context.editContext.item) return;
+  const descriptor = getItemDescriptor(context.editContext.item);
+
+  let message =
+    "Are you sure you want to delete version " +
+    context.editContext.item.version +
+    "?";
+
+  const sessions = context.editContext.activeSessions.filter(
+    (x) =>
+      ((x.item?.id === descriptor.id &&
+        x.item?.language === descriptor.language &&
+        x.item?.version === descriptor.version) ||
+        (x.page?.id === descriptor.id &&
+          x.page?.language === descriptor.language &&
+          x.page?.version === descriptor.version)) &&
+      x.sessionId !== context.editContext.sessionId
+  );
+
+  if (sessions.length > 0) {
+    context.editContext.showMessageDialog({
+      header: "Delete Version",
+      message:
+        "This version is currently locked by " +
+        sessions.map((x) => x.user.name).join(", ") +
+        ". You cannot delete it.",
+    });
+    return;
+  }
+
+  if (
+    context.editContext.itemVersions[
+      context.editContext.itemVersions.length - 1
+    ]?.version === context.editContext.item.version
+  ) {
+    message += " This is the latest version!";
+  }
+
+  context.editContext.confirm?.({
+    header: "Delete Version",
+    message,
+    showCancel: true,
+    accept: async () => {
+      await deleteVersion(descriptor, context.editContext.sessionId);
+      context.editContext.loadItem({
+        ...descriptor,
+        version: 0,
+      });
+    },
+  });
+}

package/src/editor/commands/itemCommands.tsx

@@ -0,0 +1,186 @@
+import { Command, CommandContext, CommandData } from "./commands";
+import { FullItem } from "../pageModel";
+
+import { ItemNameDialog, ItemNameDialogProps } from "../ui/ItemNameDialogNew";
+
+export type ItemCommandData = CommandData & {
+  items: FullItem[];
+};
+
+export type ItemCommandContext = CommandContext<ItemCommandData>;
+
+export type ItemCommand = Command<ItemCommandData>;
+
+export const deleteItemCommand: ItemCommand = {
+  id: "deleteItem",
+  label: "Delete",
+  icon: "pi pi-times",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items || !context.data?.items[0]?.canLock || false,
+  execute: async (context: ItemCommandContext) => {
+    const items = context.data?.items;
+
+    if (!items || items.length === 0) return;
+    const confirmed = await new Promise<boolean>((resolve) => {
+      context.editContext.confirm({
+        message: (
+          <div>
+            Are you sure you want to delete{" "}
+            <em>{items.map((x) => x.name).join(", ")}</em>? This cannot be
+            undone.
+          </div>
+        ),
+        header: "Confirmation",
+        icon: "pi pi-exclamation-triangle",
+        accept: () => resolve(true),
+        reject: () => resolve(false),
+        showCancel: true,
+      });
+    });
+
+    if (confirmed) {
+      if (
+        items.some(
+          (x) => context.editContext.contentEditorItem?.descriptor.id === x.id,
+        )
+      ) {
+        const firstItem = items[0];
+        if (firstItem) {
+          context.editContext.loadItem({
+            id: firstItem.parentId,
+            language: context.editContext.contentEditorItem!.language,
+            version: 0,
+          });
+        }
+      }
+
+      await context.editContext.operations.deleteItems(
+        items.map((x) => x.descriptor),
+      );
+
+      return true;
+    }
+    return false;
+  },
+};
+export const renameItemCommand: ItemCommand = {
+  id: "renameItem",
+  label: "Rename",
+  icon: "pi pi-pencil",
+  keyBinding: "F2",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items ||
+    context.data.items.length !== 1 ||
+    !context.data.items[0]?.canLock ||
+    false,
+  execute: async (context: ItemCommandContext) => {
+    const item = context.data?.items[0];
+
+    if (!item) return;
+    const newName = await context.openDialog<string, ItemNameDialogProps>(
+      ItemNameDialog,
+      {
+        name: item.name,
+        title: "Rename Item",
+        message: "Enter a new name for the item:",
+        parentItem: { ...item.descriptor, id: item.parentId },
+        itemId: item.id,
+      },
+    );
+    if (newName) {
+      await context.editContext.operations.renameItem(item.descriptor, newName);
+    }
+  },
+};
+
+type InsertItemCommandData = ItemCommandData & {
+  templateId: string;
+};
+
+export type InsertItemCommandContext = CommandContext<InsertItemCommandData>;
+
+export type InsertItemCommand = Command<InsertItemCommandData>;
+
+export const insertItemCommand: ItemCommand = {
+  id: "insertItem",
+  label: "Insert Item",
+  icon: "pi pi-plus",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items || context.data.items.length !== 1 || false,
+  execute: async (context: InsertItemCommandContext) => {
+    const parentItem = context.data?.items[0];
+    const templateId = context.data?.templateId;
+
+    if (!parentItem || !templateId) return;
+
+    const templateItem = await context.editContext.itemsRepository.getItem({
+      id: templateId,
+      language: "en",
+      version: 0,
+    });
+    const templateName = templateItem?.name;
+
+    const name = await context.openDialog<string, ItemNameDialogProps>(
+      ItemNameDialog,
+      {
+        title: "Create Item",
+        message: "Enter a name for the new item:",
+        name: templateName,
+        parentItem: parentItem.descriptor,
+      },
+    );
+    if (name) {
+      const result = await context.editContext.operations.createItem(
+        parentItem.descriptor,
+        templateId,
+        name,
+      );
+
+      if (result) {
+        context.editContext.loadItem(result);
+      }
+
+      return result;
+    }
+  },
+};
+
+// export const localizeItemCommand: ItemCommand = {
+//   id: "localizeItem",
+//   label: "Localize",
+//   icon: "pi pi-globe",
+//   disabled: (context: ItemCommandContext) =>
+//     !context.data?.items || context.data.items.length === 0 || false,
+//   execute: async (context: ItemCommandContext) => {
+//     const items = context.data?.items;
+//     if (!items?.length) return;
+
+//     await context.openDialog<string, LocalizeItemDialogProps>(
+//       LocalizeItemDialog,
+//       {
+//         items,
+//         editContext: context.editContext,
+//       }
+//     );
+//     if (context.editContext.contentEditorItem?.descriptor)
+//       context.editContext.loadItem(
+//         context.editContext.contentEditorItem.descriptor
+//       );
+//   },
+// };
+
+export const publishItemCommand: ItemCommand = {
+  id: "publishItem",
+  label: "Publish",
+  icon: "pi pi-cloud-upload",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items ||
+    context.data.items.length !== 1 ||
+    !context.data.items[0]?.canLock ||
+    false,
+  execute: async (context: ItemCommandContext) => {
+    const item = context.data?.items[0];
+    if (!item) return;
+    await context.editContext.switchView("publish");
+  },
+};

package/src/editor/commands/localizeItem/LocalizeItemDialog.tsx

@@ -0,0 +1,201 @@
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { useEffect, useState } from "react";
+import DialogButtons from "../../ui/DialogButtons";
+import { DialogProps } from "../../client/DialogContext";
+import { getLanguagesAndVersions } from "../../services/contentService";
+import { FullItem, ItemDescriptor } from "../../pageModel";
+import { LanguageVersions } from "../../../types";
+import { Checkbox } from "primereact/checkbox";
+
+import { EditContextType } from "../../client/editContext";
+import { Spinner } from "../../ui/Spinner";
+
+export type LocalizeItemDialogProps = {
+  items: FullItem[];
+  editContext: EditContextType;
+};
+
+type LanguageData = {
+  name: string;
+  items: ItemDescriptor[];
+};
+
+export function LocalizeItemDialog(
+  props: LocalizeItemDialogProps & DialogProps<string>
+) {
+  const [languageSelection, setLanguageSelection] = useState<
+    Record<string, boolean>
+  >({});
+  const [languageData, setLanguageData] = useState<Map<string, LanguageData>>();
+
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [currentTask, setCurrentTask] = useState<string>();
+  const [completedTasks, setCompletedTasks] = useState<string[]>([]);
+  const [finished, setFinished] = useState(false);
+
+  useEffect(() => {
+    const itemDescriptors = props.items.map((x) => x.descriptor);
+
+    const loadLanguages = async () => {
+      const itemLanguages = await Promise.all(
+        itemDescriptors.map(async (item: ItemDescriptor) => {
+          const result = await getLanguagesAndVersions(item);
+          return result.data?.languages || [];
+        })
+      );
+      const languageMap = new Map<string, LanguageData>();
+      itemLanguages.forEach((languages, index) => {
+        languages.forEach((language: LanguageVersions) => {
+          const languageData: LanguageData = languageMap.get(language.name) || {
+            name: language.name,
+            items: [],
+          };
+          if (language.versions > 0)
+            languageData.items.push(itemDescriptors[index]);
+          languageMap.set(language.languageCode, languageData);
+        });
+      });
+      setLanguageData(languageMap);
+    };
+    loadLanguages();
+  }, [props]);
+
+  async function startLocalization() {
+    setIsExecuting(true);
+    const completedTasks: string[] = [];
+    for (const item of props.items) {
+      for (const language of Object.keys(languageSelection)) {
+        if (!languageSelection[language]) continue;
+        if (
+          languageData
+            ?.get(language)
+            ?.items.find((x) => x.id === item.descriptor.id)
+        )
+          continue;
+        setCurrentTask(`${item.name} - ${language}`);
+        await props.editContext.operations.createVersion({
+          id: item.descriptor.id,
+          language: language,
+          version: 0,
+        });
+        completedTasks.push(`${item.name} - ${language}`);
+      }
+    }
+    setFinished(true);
+    setCompletedTasks(completedTasks);
+  }
+
+  const allLanguages = Array.from(languageData?.keys() || []).map((x) => ({
+    code: x,
+    name: languageData?.get(x)?.name || "",
+  }));
+
+  allLanguages.sort((a, b) => a.name.localeCompare(b.name));
+
+  const dialogContent = getContent();
+
+  function getContent() {
+    if (finished)
+      return (
+        <div className="flex gap-1 flex-col justify h-full">
+          {completedTasks.length > 0 && (
+            <>
+              <div className="text-lg font-bold pt-3 px-3">
+                Finished. Versions created:
+              </div>
+              <div className="flex-1 relative">
+                <div className="absolute inset-3 flex flex-col gap-3 overflow-y-auto">
+                  {completedTasks.map((x, index) => (
+                    <div key={index}>{x}</div>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+          {completedTasks.length === 0 && (
+            <div className="flex items-center justify-center h-full">
+              All items are already localized.
+            </div>
+          )}
+          <DialogButtons>
+            <Button onClick={() => props.onClose?.(null)} label="Close" />
+          </DialogButtons>
+        </div>
+      );
+
+    if (isExecuting)
+      return (
+        <div className="flex items-center justify-center gap-3 h-full">
+          <Spinner /> Creating version {currentTask}
+        </div>
+      );
+
+    return (
+      <div className="flex gap-1 flex-col justify h-full text-sm ">
+        <div className="p-3 flex flex-col gap-2 h-full">
+          <div className="my-2">
+            Select languages to localize{" "}
+            {props.items.map((x) => x.name).join(", ")}:
+          </div>
+          <div className="flex items-center gap-2 my-1">
+            <Checkbox
+              checked={allLanguages.every(
+                (language) => languageSelection[language.code]
+              )}
+              onChange={(e) => {
+                setLanguageSelection(
+                  Object.fromEntries(
+                    Array.from(languageData?.keys() || []).map((language) => [
+                      language,
+                      e.checked || false,
+                    ])
+                  )
+                );
+              }}
+            />{" "}
+            All
+          </div>
+          <div className="relative flex-1">
+            <div className="absolute top-0 left-0 w-full h-full overflow-y-auto">
+              {allLanguages.map((language) => (
+                <div
+                  key={language.code}
+                  className="flex items-center gap-2 my-2"
+                >
+                  <Checkbox
+                    checked={languageSelection[language.code] || false}
+                    onChange={(e) => {
+                      setLanguageSelection((prev) => ({
+                        ...prev,
+                        [language.code]: e.checked || false,
+                      }));
+                    }}
+                  />
+                  <div>{language.name}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <DialogButtons>
+          <Button onClick={startLocalization} label="Start" />
+          <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+        </DialogButtons>
+      </div>
+    );
+  }
+
+  return (
+    <Dialog
+      visible={true}
+      onHide={() => {
+        props.onClose?.(null);
+      }}
+      style={{ width: "75vw", height: "75vh" }}
+      header="Localize"
+    >
+      {dialogContent}
+    </Dialog>
+  );
+}

package/src/editor/commands/undo.ts

@@ -0,0 +1,39 @@
+import { CommandContext } from "./commands";
+
+export function getUndoCommand() {
+  return {
+    id: "undo",
+    label: "Undo",
+    icon: "pi pi-undo",
+    execute: async (context: CommandContext<any>) => {
+      context.editContext.operations.undo();
+    },
+    disabled: (context: CommandContext<any>) => {
+      return (
+        context.editContext.editHistory.length === 0 ||
+        !context.editContext.editHistory.find(
+          (x) => x.sessionId === context.editContext.sessionId && x.canUndo
+        )
+      );
+    },
+  };
+}
+
+export function getRedoCommand() {
+  return {
+    id: "redo",
+    label: "Redo",
+    icon: "pi pi-refresh",
+    execute: async (context: CommandContext<any>) => {
+      context.editContext.operations.redo();
+    },
+    disabled: (context: CommandContext<any>) => {
+      return (
+        context.editContext.editHistory.length === 0 ||
+        !context.editContext.editHistory.find(
+          (x) => x.sessionId === context.editContext.sessionId && x.canRedo
+        )
+      );
+    },
+  };
+}

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 mode="view" />
+      </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 { ItemNameDialogHandle, ItemNameDialog } from "../ui/ItemNameDialog";
+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="p-1 text-sm rounded-none border-0 border-b bg-gray-50"
+      ></Menubar>
+      <ItemNameDialog ref={itemNameDialogRef} />
+    </>
+  );
+}