@alpaca-editor/core 1.0.0

package/src/editor/views/ItemEditor.tsx

@@ -0,0 +1,58 @@
+import { Button } from "primereact/button";
+import { EditorWarnings } from "../EditorWarnings";
+import { FieldList } from "../FieldList";
+import { ItemInfo } from "../ItemInfo";
+import { useEditContext } from "../client/editContext";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { FullItem } from "../pageModel";
+
+export function ItemEditor({
+  item,
+  compareToItem,
+}: {
+  item?: FullItem;
+  compareToItem?: FullItem;
+  pageViewContext?: PageViewContext;
+}) {
+  const editContext = useEditContext();
+
+  if (!editContext) return;
+  if (!item) item = editContext.contentEditorItem;
+  if (!item) return;
+
+  const pageValidators =
+    editContext.validationResult?.find(
+      (x) =>
+        x.item.id === item?.id &&
+        x.item.language === item?.language &&
+        x.item.version === item?.version
+    )?.results || [];
+
+  return (
+    <div className="absolute inset-0 overflow-y-auto">
+      <EditorWarnings item={item} />
+      <ItemInfo item={item} />
+
+      {editContext.itemVersions.length > 0 && (
+        <FieldList
+          fields={[{ fields: Object.values(item.fields) }]}
+          validators={pageValidators.filter((x) => x.itemId === item.id)}
+          showStandardFieldsEnabled={true}
+          compareToFields={compareToItem?.fields}
+        />
+      )}
+
+      {editContext.itemVersions.length === 0 && (
+        <div className="flex justify-center p-4">
+          <Button
+            onClick={async () => {
+              await editContext.operations.createVersion(item.descriptor);
+            }}
+          >
+            Create First Version ({item.language})
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/editor/views/SingleEditView.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { useEffect } from "react";
+import { useEditContext } from "../client/editContext";
+import { PageViewer } from "../page-viewer/PageViewer";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { FullItem, ItemDescriptor } from "../pageModel";
+import { ItemEditor } from "./ItemEditor";
+
+export function SingleEditView({
+  pageViewContext,
+  itemDescriptor,
+  mode,
+  name,
+}: {
+  pageViewContext: PageViewContext;
+  itemDescriptor?: ItemDescriptor;
+  mode: "edit" | "compare" | "view";
+  name: string;
+}) {
+  const editContext = useEditContext();
+  const [item, setItem] = useState<FullItem | undefined>(undefined);
+
+  useEffect(() => {
+    async function loadItem() {
+      if (!itemDescriptor) return;
+      const item = await editContext?.itemsRepository.getItem(itemDescriptor);
+      setItem(item);
+    }
+    loadItem();
+  }, [itemDescriptor]);
+
+  if ((item && !item.hasLayout) || pageViewContext.device === "")
+    return <ItemEditor item={item} />;
+
+  return (
+    <PageViewer
+      mode={mode}
+      pageViewContext={pageViewContext}
+      showFormEditor={true}
+      name={name}
+      followEditsDefault={true}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./config/types";
+
+export { Editor } from "./editor/Editor";
+
+export { configureForUser } from "./config/config";
+
+export type { DialogProps } from "./editor/client/DialogContext";

package/src/page-wizard/PageWizard.tsx

@@ -0,0 +1,163 @@
+import { useEditContext } from "../editor/client/editContext";
+import { SelectWizard } from "./SelectWizard";
+import { useState, useEffect } from "react";
+import { WizardSteps } from "./WizardSteps";
+import { ItemDescriptor } from "../editor/pageModel";
+import { Thumbnail } from "../editor/media-selector/Thumbnails";
+import { getWizards } from "./service"; // Adjust import as needed
+import { useSearchParams } from "next/navigation";
+
+export type Wizard = {
+  id: string;
+  name: string;
+  description: string;
+  steps: WizardStep[];
+  icon: string;
+  schema: PageSchema;
+  templateId: string;
+};
+
+export type PageSchema = SchemaPlaceholder[];
+
+export type SchemaComponent = {
+  type: string;
+  typeId: string;
+  fields: SchemaField[];
+  placeholders: SchemaPlaceholder[];
+};
+
+export type SchemaPlaceholder = {
+  name: string;
+  components: SchemaComponent[];
+};
+
+export type SchemaField = {
+  id: string;
+  name: string;
+  type: string;
+};
+
+export type WizardSchemaComponent = {
+  type: string;
+  fields: WizardSchemaField[];
+  availableParentPlaceholders?: string[];
+  allowedChildrenComponentTypes: string[];
+  allowedOnRoot: boolean;
+};
+
+export type WizardSchemaField = {
+  name: string;
+  type: string;
+};
+
+export type WizardStep = {
+  id: string;
+  name: string;
+  description: string;
+  [property: string]: string;
+};
+
+export type WizardData = {
+  [key: string]: any;
+};
+
+export type WizardPageModel = {
+  components: WizardPageComponent[];
+  name: string;
+  metaDescription: string;
+  metaKeywords: string;
+  message?: string;
+  images?: Thumbnail[];
+};
+
+export type WizardPageComponent = {
+  id: string;
+  name: string;
+  type: string;
+  fields: WizardField[];
+  children?: WizardPageComponent[];
+  description: string;
+  placeholder?: string;
+};
+
+export type WizardField = {
+  name: string;
+  value: string;
+  type: string;
+  writtenValue?: string;
+};
+
+export function PageWizard() {
+  const editContext = useEditContext();
+  const [wizard, setWizard] = useState<Wizard | null>(null);
+  const [parentItem, setParentItem] = useState<ItemDescriptor>();
+  const searchParams = useSearchParams();
+
+  // Load all wizards and check URL param on mount
+  useEffect(() => {
+    if (!editContext?.currentItemDescriptor) return;
+    getWizards(editContext?.currentItemDescriptor).then((availableWizards) => {
+      // Check for wizard ID in URL
+      const params = new URLSearchParams(window.location.search);
+      const wizardName = params.get("wizard");
+
+      if (wizardName) {
+        // Find wizard by ID from the loaded wizards
+        const foundWizard = availableWizards.find((w) => w.name === wizardName);
+        if (foundWizard) {
+          setWizard(foundWizard);
+          setParentItem(editContext.currentItemDescriptor);
+        }
+      }
+    });
+  }, [searchParams]);
+
+  const handleSelect = (selectedWizard: Wizard) => {
+    setWizard(selectedWizard);
+    // Update URL with wizard ID
+    const url = new URL(window.location.href);
+    url.searchParams.set("wizard", selectedWizard.name);
+    window.history.pushState({}, "", url);
+  };
+
+  const handleCancel = () => {
+    setWizard(null);
+    // Remove wizard from URL
+    const url = new URL(window.location.href);
+    url.searchParams.delete("wizard");
+    window.history.pushState({}, "", url);
+    editContext?.switchView("content-editor");
+  };
+
+  if (!editContext?.currentItemDescriptor) return null;
+
+  if (!wizard) {
+    return (
+      <div className="fixed inset-0 z-1000 bg-white">
+        <SelectWizard
+          parentItem={parentItem}
+          setParentItem={setParentItem}
+          onSelect={handleSelect}
+        />
+      </div>
+    );
+  }
+
+  if (!parentItem) return null;
+
+  return (
+    <div className="fixed inset-0 z-1000 bg-white text-gray-950">
+      <WizardSteps
+        wizard={wizard}
+        onCancel={handleCancel}
+        parentItem={parentItem}
+        onLanguageSelected={(language) => {
+          setParentItem({
+            ...parentItem,
+            language: language.languageCode,
+          });
+        }}
+      />
+    </div>
+  );
+}

package/src/page-wizard/SelectWizard.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from "react";
+import { getWizards } from "./service";
+import { ItemDescriptor } from "../editor/pageModel";
+import { Wizard } from "./PageWizard";
+import { ScrollingContentTree } from "../editor/ScrollingContentTree";
+import { ItemTreeNodeData } from "../editor/services/contentService";
+import { Splitter, SplitterPanel } from "../editor/ui/Splitter";
+import { PageWizardLogo } from "../editor/ui/Icons";
+import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
+import { useEditContext } from "../editor/client/editContext";
+export function SelectWizard({
+  parentItem,
+  setParentItem,
+  onSelect,
+}: {
+  parentItem?: ItemDescriptor;
+  setParentItem: (item: ItemDescriptor) => void;
+  onSelect: (wizard: Wizard) => void;
+}) {
+  const editContext = useEditContext();
+  const [wizards, setWizards] = useState<Wizard[]>([]);
+
+  useEffect(() => {
+    const fetchWizards = async () => {
+      if (!parentItem) return;
+      const wizards = await getWizards(parentItem);
+      setWizards(wizards);
+    };
+    fetchWizards();
+  }, [parentItem]);
+
+  const treePanel: SplitterPanel = {
+    name: "tree",
+    defaultSize: 450,
+    content: (
+      <div className="flex h-full gap-2">
+        <ScrollingContentTree
+          selectedItemId={parentItem?.id}
+          onSelectionChange={(x: ItemTreeNodeData | ItemTreeNodeData[]) => {
+            setParentItem({
+              ...parentItem,
+              id: (x as ItemTreeNodeData).id,
+              language: (x as ItemTreeNodeData).language,
+              version: (x as ItemTreeNodeData).version,
+            });
+          }}
+        />
+      </div>
+    ),
+  };
+
+  const wizardPanel: SplitterPanel = {
+    name: "wizard",
+    defaultSize: "auto",
+    collapsible: false,
+    content: (
+      <div className="absolute inset-2 overflow-auto">
+        {!parentItem && (
+          <div className="flex h-full items-center justify-center text-center text-gray-500">
+            Select a parent item on the left!
+          </div>
+        )}
+        {parentItem && wizards?.length === 0 && (
+          <div className="text-center text-gray-500">No wizards found</div>
+        )}
+        {parentItem && wizards.length > 0 && (
+          <div className="mx-2 flex flex-wrap gap-3">
+            {wizards.map((wizard) => (
+              <div
+                key={wizard.id}
+                className="flex cursor-pointer items-center gap-2 rounded-md border border-gray-300 p-4 hover:bg-gray-100"
+                onClick={() => onSelect(wizard)}
+              >
+                <img
+                  src={wizard.icon}
+                  alt={wizard.name}
+                  className="h-10 w-10"
+                />
+                <div>
+                  <h2 className="text-lg">{wizard.name}</h2>
+                  <p className="text-sm">{wizard.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    ),
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <h1 className="bg-shape-black flex w-full items-center gap-2 p-4 text-xl font-bold text-white">
+        <PageWizardLogo />
+        Select Wizard
+        <SimpleIconButton
+          icon="pi pi-times"
+          className="ml-auto"
+          onClick={() => editContext?.switchView("editor")}
+          label="Cancel"
+        />
+      </h1>
+      <div className="flex gap-2 bg-gray-100 px-4 py-3 text-sm text-gray-600">
+        First select a parent item, then select a wizard to create a new page.
+      </div>
+      <Splitter panels={[treePanel, wizardPanel]} />
+    </div>
+  );
+}

package/src/page-wizard/WizardSteps.tsx

@@ -0,0 +1,207 @@
+import { useState } from "react";
+import { Wizard, WizardData, WizardPageModel } from "./PageWizard";
+import { Button } from "primereact/button";
+import { ItemDescriptor, Language } from "../editor/pageModel";
+import { PageWizardLogo } from "../editor/ui/Icons";
+import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
+
+import { flushSync } from "react-dom";
+import { useEditContext } from "../editor/client/editContext";
+import { classNames } from "primereact/utils";
+// import { LanguageSelector } from "../editor/menubar/LanguageSelector";
+
+export function WizardSteps({
+  wizard,
+  onCancel,
+  parentItem,
+}: // onLanguageSelected,
+{
+  wizard: Wizard;
+  onCancel: () => void;
+  parentItem: ItemDescriptor;
+  onLanguageSelected: (language: Language) => void;
+}) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [data, setData] = useState<WizardData>({});
+  const [pageModel, setPageModel] = useState<WizardPageModel>({
+    components: [],
+    name: "",
+    metaDescription: "",
+    metaKeywords: "",
+  });
+
+  const editContext = useEditContext();
+  const [internalState, setInternalState] = useState<any>({});
+  const [stepCompleted, setStepCompleted] = useState(-1);
+
+  const getCurrentStep = () => {
+    const step = wizard.steps[currentStepIndex];
+    if (!step) return null;
+    const type = step.type;
+    const stepId = step.id;
+
+    if (!type) throw new Error("Step type is required");
+
+    // Extract component name by removing "Page Wizard" prefix and spaces
+    const componentName = type.replace("Page Wizard ", "").replace(/\s+/g, "");
+
+    const config = editContext?.configuration;
+    if (!config) return null;
+
+    // Get the appropriate component based on the extracted name
+    const StepComponent = config.pageWizard.stepComponents[componentName];
+
+    if (StepComponent) {
+      return (
+        <StepComponent
+          step={wizard.steps[currentStepIndex]}
+          data={data}
+          setData={setData}
+          setPageModel={setPageModel}
+          pageModel={pageModel}
+          key={stepId}
+          wizard={wizard}
+          setStepCompleted={(completed) => {
+            if (completed) {
+              setStepCompleted((prev) => Math.max(prev, currentStepIndex));
+            } else {
+              setStepCompleted(currentStepIndex - 1);
+            }
+          }}
+          internalState={internalState}
+          setInternalState={setInternalState}
+          parentItem={parentItem}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  const switchStep = (index: number) => {
+    document.startViewTransition(() => {
+      flushSync(() => {
+        setCurrentStepIndex(index);
+      });
+    });
+  };
+
+  const currentStep = wizard.steps[currentStepIndex];
+
+  if (!currentStep) return null;
+
+  return (
+    <div className="flex flex-col  flex-1 h-full justify-stretch ">
+      <div className="flex flex-col border-b border-gray-200 bg-gray-100 flex-1">
+        <div className="flex gap-2 items-center bg-shape-black text-white p-4 py-4">
+          <PageWizardLogo />{" "}
+          <h1 className="text-xl font-bold text-white">{wizard.name}</h1>
+          {wizard.description && (
+            <div className="text-gray-200">- {wizard.description}</div>
+          )}
+          <SimpleIconButton
+            icon="pi pi-times"
+            className="ml-auto"
+            onClick={onCancel}
+            label="Cancel"
+          />
+        </div>
+        <div className="flex gap-2 flex-1">
+          <div className="flex flex-col animate-fadeLeft transition-all duration-900 bg-white">
+            {/* <div className="">
+              <LanguageSelector
+                darkMode={true}
+                showAllLanguagesSwitch={true}
+                selectedLanguage={parentItem.language}
+                onLanguageSelected={onLanguageSelected}
+              />
+            </div> */}
+            <div className="flex flex-col text-sm text-gray-500 px-5 py-4">
+              {wizard.steps.map((step, index) => (
+                <div
+                  key={step.id}
+                  className={classNames(
+                    "flex gap-4 items-center mb-5",
+                    currentStepIndex > index && "cursor-pointer"
+                  )}
+                  onClick={() =>
+                    index < currentStepIndex ? switchStep(index) : undefined
+                  }
+                >
+                  <span
+                    className={classNames(
+                      "border-2 rounded-full w-7 h-7 p-2 flex items-center justify-center text-xs font-medium text-activeStepColor",
+                      currentStepIndex >= index
+                        ? "border-canvas-red text-canvas-red"
+                        : "border-gray-400"
+                    )}
+                  >
+                    {index + 1}
+                  </span>
+                  <div
+                    className={classNames(
+                      "w-auto  opacity-100",
+                      currentStepIndex === index
+                        ? "text-canvas-red font-semibold text-base"
+                        : currentStepIndex >= index
+                          ? "text-gray-600 text-sm"
+                          : "text-gray-400 text-sm"
+                    )}
+                  >
+                    {step.name}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex-1 flex flex-col px-8 pt-9 bg-secondary lg:pr-20 xl:pr-32 container animate-fadeIn transition-all duration-500">
+            <div className="text-4xl font-semibold">
+              {currentStep?.name}
+            </div>
+            {currentStep?.description && (
+              <div className="text-base mt-2 font-light">
+                {currentStep.description}
+              </div>
+            )}
+            <div className="flex-1 pt-8">{getCurrentStep()}</div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-between border-t border-gray-200 p-3">
+        <div>
+          {currentStepIndex > 0 && (
+            <Button
+              icon="pi pi-arrow-left mr-2"
+              onClick={() => switchStep(currentStepIndex - 1)}
+              disabled={currentStepIndex === 0}
+            >
+              {wizard.steps[currentStepIndex - 1]?.name}
+            </Button>
+          )}
+        </div>
+        <div>
+          {currentStepIndex < wizard.steps.length - 1 && (
+            <Button
+              icon="pi pi-arrow-right mr-2"
+              disabled={stepCompleted < currentStepIndex}
+              onClick={() => switchStep(currentStepIndex + 1)}
+            >
+              {wizard.steps[currentStepIndex + 1]?.name}
+            </Button>
+          )}
+          {currentStepIndex === wizard.steps.length - 1 && (
+            <Button
+              icon="pi pi-check"
+              disabled={stepCompleted < currentStepIndex}
+              onClick={() => {
+                editContext?.switchView("editor");
+              }}
+              label="Finish"
+              className="ml-2"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/page-wizard/service.ts

@@ -0,0 +1,35 @@
+import { EditContextType } from "../editor/client/editContext";
+import { ItemDescriptor } from "../editor/pageModel";
+import { post } from "../editor/services/serviceHelper";
+
+import { Wizard } from "./PageWizard";
+
+export async function getWizards(
+  parentItem: ItemDescriptor
+): Promise<Wizard[]> {
+  const result = await post("/alpaca/editor/page-wizard/wizards", parentItem);
+  return result.data as Wizard[] | [];
+}
+
+export function createWizardAiContext({
+  editContext,
+}: {
+  editContext: EditContextType;
+}) {
+  const aiPromptUrl = "/alpaca/editor/page-wizard/prompt";
+
+  return {
+    // configuration.services.editorService.baseUrl +
+    endpoint: aiPromptUrl,
+    promptData: {
+      itemid: editContext.currentItemDescriptor?.id,
+      language: editContext.currentItemDescriptor?.language,
+      version: editContext.currentItemDescriptor?.version,
+    },
+  };
+}
+
+export async function wipeComponents(pageItem: ItemDescriptor) {
+  const result = await post("/alpaca/editor/page-wizard/wipePage", pageItem);
+  return result.data;
+}

package/src/page-wizard/startPageWizardCommand.ts

@@ -0,0 +1,27 @@
+import { CommandContext } from "../editor/commands/commands";
+import { ItemDescriptor } from "../editor/pageModel";
+import { Wizard } from "./PageWizard";
+
+export const startPageWizardCommand = {
+  id: "startWizard",
+  label: "Start Wizard",
+  icon: "pi pi-magic",
+  execute: async (
+    context: CommandContext<{ wizard: Wizard; item: ItemDescriptor }>
+  ) => {
+    if (!context.data?.item) return;
+
+    await context.editContext.loadItem(context.data.item);
+
+    // Add wizard name to URL
+    if (context.data?.wizard) {
+      await context.editContext.updateUrl({
+        wizard: context.data.wizard.name,
+        view: "page-wizard",
+      });
+    }
+  },
+  disabled: () => {
+    return false;
+  },
+};