@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/page-wizard/WizardSteps.tsx

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

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

@@ -1,26 +0,0 @@
-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;
-  },
-};