@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/page-wizard/WizardBoxConnector.tsx

@@ -0,0 +1,56 @@
+import { cn } from "../lib/utils";
+
+export function WizardBoxConnector({
+  className,
+  direction,
+}: {
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}) {
+  return (
+    <>
+      <div
+        className={cn(
+          "mt-[-3px] mb-[-3px] flex items-center justify-center",
+          className,
+          (!direction || direction === "horizontal") && "md:hidden",
+        )}
+      >
+        <svg
+          width="40"
+          height="31"
+          viewBox="0 0 40 31"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M40 3.04199C33.8405 3.55018 29 8.70936 29 15C29 21.2906 33.8405 26.4498 40 26.958L40 31L-1.35505e-06 31L-1.18021e-06 27C6.62741 27 12 21.6274 12 15C12 8.37258 6.62741 3 -1.31134e-07 3L0 -1.74846e-06L40 0L40 3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+
+      <div
+        className={cn(
+          "mt-6 mr-[-3px] ml-[-3px] hidden",
+          className,
+          (!direction || direction === "horizontal") && "md:block",
+        )}
+      >
+        <svg
+          className={className}
+          width="31"
+          height="40"
+          viewBox="0 0 31 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.04199 0C3.55018 6.15949 8.70936 11 15 11C21.2906 11 26.4498 6.1595 26.958 0H31V40H27C27 33.3726 21.6274 28 15 28C8.37258 28 3 33.3726 3 40H0V0H3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </>
+  );
+}

package/src/page-wizard/WizardSteps.tsx

@@ -0,0 +1,458 @@
+import React from "react";
+import { Wizard, WizardData, WizardPageModel, WizardStep } from "./PageWizard";
+
+import { ItemDescriptor } from "../editor/pageModel";
+import { Logo } from "../editor/ui/Icons";
+
+import { flushSync } from "react-dom";
+import { useEditContext } from "../editor/client/editContext";
+import { classNames } from "primereact/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "../components/ui/button";
+import { cn } from "../lib/utils";
+import { useRef, useEffect } from "react";
+
+interface WizardStepsProps {
+  wizard: Wizard;
+  parentItem: ItemDescriptor;
+}
+
+interface NavigationStepsProps {
+  wizard: Wizard;
+  currentStepIndex: number;
+  onStepClick: (index: number) => void;
+}
+
+interface PreviousButtonProps {
+  currentStepIndex: number;
+  wizard: Wizard;
+  onPrevious: () => void;
+}
+
+interface NextButtonProps {
+  currentStepIndex: number;
+  wizard: Wizard;
+  stepCompleted: number;
+  onNext: () => void;
+  onFinish: () => void;
+}
+
+interface WizardHeaderProps {
+  wizard: Wizard;
+  currentStepIndex: number;
+  onStepClick: (index: number) => void;
+  onPrevious: () => void;
+  onNext: () => void;
+  onFinish: () => void;
+  stepCompleted: number;
+  isMobile: boolean;
+}
+
+interface WizardContentProps {
+  currentStep: WizardStep;
+  children: React.ReactNode;
+}
+
+interface MobileNavigationButtonsProps {
+  currentStepIndex: number;
+  wizard: Wizard;
+  stepCompleted: number;
+  onPrevious: () => void;
+  onNext: () => void;
+  onFinish: () => void;
+}
+
+function PreviousButton({
+  currentStepIndex,
+  wizard,
+  onPrevious,
+}: PreviousButtonProps) {
+  if (currentStepIndex === 0) return null;
+
+  return (
+    <Button onClick={onPrevious} variant="outline">
+      <ChevronLeft /> {wizard.steps[currentStepIndex - 1]?.name}
+    </Button>
+  );
+}
+
+function NextButton({
+  currentStepIndex,
+  wizard,
+  stepCompleted,
+  onNext,
+  onFinish,
+}: NextButtonProps) {
+  const isLastStep = currentStepIndex === wizard.steps.length - 1;
+  const isDisabled = stepCompleted < currentStepIndex;
+
+  if (isLastStep) {
+    return (
+      <Button disabled={isDisabled} onClick={onFinish}>
+        Finish <ChevronRight />
+      </Button>
+    );
+  }
+
+  return (
+    <Button disabled={isDisabled} onClick={onNext}>
+      {wizard.steps[currentStepIndex + 1]?.name}
+      <ChevronRight />
+    </Button>
+  );
+}
+
+function NavigationSteps({
+  wizard,
+  currentStepIndex,
+  onStepClick,
+}: NavigationStepsProps) {
+  const stepRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    const activeStepElement = stepRefs.current[currentStepIndex];
+    if (activeStepElement) {
+      activeStepElement.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [currentStepIndex]);
+
+  return (
+    <div className="min-w-0 flex-1">
+      <div className="p-2.5 text-xs">
+        <div className="flex items-center gap-3 md:justify-center">
+          {wizard.steps.map((step, index) => (
+            <>
+              <div
+                key={step.id}
+                ref={(el) => {
+                  stepRefs.current[index] = el;
+                }}
+                className={classNames(
+                  "flex shrink-0 flex-col items-center gap-1 px-1",
+                  currentStepIndex > index && "cursor-pointer",
+                )}
+                onClick={() =>
+                  index < currentStepIndex ? onStepClick(index) : undefined
+                }
+              >
+                <span
+                  className={cn(
+                    "relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-1 p-2 text-xs font-medium",
+                    currentStepIndex === index &&
+                      "border-theme-secondary text-theme-secondary bg-theme-secondary-light",
+                    currentStepIndex < index && "border-gray-400 text-gray-400",
+                    currentStepIndex > index &&
+                      "bg-theme-secondary text-gray-200",
+                  )}
+                >
+                  {currentStepIndex > index ? "✓" : index + 1}
+                </span>
+                <div
+                  className={classNames(
+                    "max-w-[80px] text-center text-[10px] whitespace-nowrap opacity-100 md:max-w-none md:text-xs",
+                    currentStepIndex === index
+                      ? "text-theme-secondary font-semibold"
+                      : currentStepIndex >= index
+                        ? "text-theme-secondary"
+                        : "text-gray-400",
+                  )}
+                >
+                  {step.name}
+                </div>
+              </div>
+
+              {index < wizard.steps.length - 1 && (
+                <div
+                  className={cn(
+                    index < currentStepIndex
+                      ? "border-theme-secondary"
+                      : "border-gray-400",
+                    "mt-[-20px] h-0 w-4 shrink-0 border-t-2 bg-gray-300 md:w-8",
+                  )}
+                />
+              )}
+            </>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function WizardHeader({
+  wizard,
+  currentStepIndex,
+  onStepClick,
+  onPrevious,
+  onNext,
+  onFinish,
+  stepCompleted,
+  isMobile,
+}: WizardHeaderProps) {
+  return (
+    <div className="scrollbar-hide flex w-[100vw] items-center gap-3 overflow-x-auto scroll-smooth border-b border-gray-300 bg-white md:w-auto md:px-4">
+      {!isMobile && (
+        <div className="shrink-0">
+          <PreviousButton
+            currentStepIndex={currentStepIndex}
+            wizard={wizard}
+            onPrevious={onPrevious}
+          />
+        </div>
+      )}
+
+      <NavigationSteps
+        wizard={wizard}
+        currentStepIndex={currentStepIndex}
+        onStepClick={onStepClick}
+      />
+
+      {!isMobile && (
+        <div className="shrink-0">
+          <NextButton
+            currentStepIndex={currentStepIndex}
+            wizard={wizard}
+            stepCompleted={stepCompleted}
+            onNext={onNext}
+            onFinish={onFinish}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function WizardContent({ currentStep, children }: WizardContentProps) {
+  return (
+    <div className="relative h-full flex-1 bg-neutral-100">
+      <div className="h-full p-4 md:p-8">
+        <div className="relative z-10 h-full">
+          <div className="flex h-full flex-col gap-6 md:gap-10">
+            <div className="flex gap-4">
+              <Logo className="h-8 w-8" />
+              <div className="flex-1 text-neutral-800">
+                <div className="text-lg font-semibold md:text-xl">
+                  {currentStep?.fields?.title ?? currentStep?.name}
+                </div>
+                {currentStep?.fields?.description && (
+                  <div className="mt-1 text-xs font-light md:text-sm">
+                    {currentStep.fields.description}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="relative flex-1">
+              <div className="absolute inset-0 overflow-auto">{children}</div>
+            </div>
+          </div>
+        </div>
+        <div className="bg-wizard absolute inset-0" />
+      </div>
+    </div>
+  );
+}
+
+function MobileNavigationButtons({
+  currentStepIndex,
+  wizard,
+  stepCompleted,
+  onPrevious,
+  onNext,
+  onFinish,
+}: MobileNavigationButtonsProps) {
+  const isLastStep = currentStepIndex === wizard.steps.length - 1;
+  const isNextDisabled = stepCompleted < currentStepIndex;
+  const showPrevious = currentStepIndex > 0;
+
+  return (
+    <div className="srcollbar-hide w-[100vw] overflow-x-auto border-t border-gray-300 bg-white px-4 py-3">
+      <div className="flex gap-3">
+        {showPrevious && (
+          <Button onClick={onPrevious} variant="outline" className="flex-1">
+            <ChevronLeft className="h-4 w-4" />
+            {wizard.steps[currentStepIndex - 1]?.name}
+          </Button>
+        )}
+
+        {isLastStep ? (
+          <Button
+            disabled={isNextDisabled}
+            onClick={onFinish}
+            className={cn("flex-1", !showPrevious && "w-full")}
+          >
+            Finish
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        ) : (
+          <Button
+            disabled={isNextDisabled}
+            onClick={onNext}
+            className={cn("flex-1", !showPrevious && "w-full")}
+          >
+            {wizard.steps[currentStepIndex + 1]?.name}
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, []);
+
+  const editContext = useEditContext();
+  const pageWizard = editContext?.pageWizard;
+
+  // Use state from pageWizard context instead of local state
+  const currentStepIndex = pageWizard?.currentStepIndex ?? 0;
+  const setCurrentStepIndex = pageWizard?.setCurrentStepIndex ?? (() => {});
+  const data = pageWizard?.data ?? {};
+  const setData = pageWizard?.setData ?? (() => {});
+  const pageModel = pageWizard?.pageModel ?? {
+    components: [],
+    name: "",
+    metaDescription: "",
+    metaKeywords: "",
+  };
+  const setPageModel = pageWizard?.setPageModel ?? (() => {});
+  const internalState = pageWizard?.internalState ?? {};
+  const setInternalState = pageWizard?.setInternalState ?? (() => {});
+  const stepCompleted = pageWizard?.stepCompleted ?? -1;
+  const setStepCompleted = pageWizard?.setStepCompleted ?? (() => {});
+
+  const beforeNextCallbackRef = pageWizard?.beforeNextCallbackRef ?? {
+    current: null,
+  };
+
+  const isMobile = editContext?.isMobile ?? false;
+
+  const setBeforeNextCallback = (callback: (() => Promise<boolean>) | null) => {
+    if (beforeNextCallbackRef) {
+      beforeNextCallbackRef.current = callback;
+    }
+  };
+
+  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={step}
+          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);
+            }
+          }}
+          setBeforeNextCallback={setBeforeNextCallback}
+          internalState={internalState}
+          setInternalState={setInternalState}
+          parentItem={parentItem}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  const switchStep = (index: number) => {
+    document.startViewTransition(() => {
+      flushSync(() => {
+        setCurrentStepIndex(index);
+        beforeNextCallbackRef.current = null; // Clear callback when switching steps
+      });
+    });
+  };
+
+  const handlePrevious = () => {
+    switchStep(currentStepIndex - 1);
+  };
+
+  const handleNext = async () => {
+    // If there's a beforeNext callback, execute it first
+    if (beforeNextCallbackRef.current) {
+      console.log("Calling beforeNext callback");
+      const canProceed = await beforeNextCallbackRef.current();
+      if (!canProceed) {
+        return; // Don't proceed if callback returns false
+      }
+    }
+    switchStep(currentStepIndex + 1);
+  };
+
+  const handleFinish = () => {
+    editContext?.switchView("page-editor", { skipConfirmation: true });
+  };
+
+  const currentStep = wizard.steps[currentStepIndex];
+
+  if (!currentStep) return null;
+
+  return (
+    <div className="flex h-full flex-col">
+      <WizardHeader
+        wizard={wizard}
+        currentStepIndex={currentStepIndex}
+        onStepClick={switchStep}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+        onFinish={handleFinish}
+        stepCompleted={stepCompleted}
+        isMobile={isMobile}
+      />
+
+      <WizardContent currentStep={currentStep}>
+        {getCurrentStep()}
+      </WizardContent>
+      {isMobile && (
+        <MobileNavigationButtons
+          currentStepIndex={currentStepIndex}
+          wizard={wizard}
+          stepCompleted={stepCompleted}
+          onPrevious={handlePrevious}
+          onNext={handleNext}
+          onFinish={handleFinish}
+        />
+      )}
+    </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;
+}

package/src/page-wizard/startPageWizardCommand.ts

@@ -0,0 +1,26 @@
+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) {
+      context.editContext.pageWizard.setWizard(context.data.wizard);
+      context.editContext.pageWizard.setParentItem(context.data.item);
+      context.editContext.switchView("page-wizard");
+    }
+  },
+  disabled: () => {
+    return false;
+  },
+};