@alpaca-editor/core 1.0.3896 → 1.0.3898

package/src/page-wizard/WizardSteps.tsx

@@ -1,21 +1,222 @@
 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 { 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 { Allotment } from "allotment";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
-export function WizardSteps({
-  wizard,
-  parentItem,
-}: {
+import { Button } from "../components/ui/button";
+import { cn } from "../lib/utils";
+
+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;
+}
+
+interface WizardContentProps {
+  currentStep: any;
+  children: React.ReactNode;
+}
+
+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) {
+  return (
+    <div className="flex-1 overflow-hidden">
+      <div className="scrollbar-hide flex flex-1 justify-center overflow-x-auto p-2.5 text-xs md:gap-3">
+        <div className="flex min-w-max items-center gap-3 md:gap-3">
+          {wizard.steps.map((step, index) => (
+            <>
+              <div
+                key={step.id}
+                className={classNames(
+                  "flex min-w-max flex-col items-center gap-1",
+                  currentStepIndex > index && "cursor-pointer",
+                )}
+                onClick={() =>
+                  index < currentStepIndex ? onStepClick(index) : undefined
+                }
+              >
+                <span
+                  className={cn(
+                    "relative flex h-6 w-6 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(
+                    "w-auto text-center whitespace-nowrap opacity-100",
+                    currentStepIndex === index
+                      ? "text-theme-secondary font-semibold"
+                      : currentStepIndex >= index
+                        ? "text-gray-600"
+                        : "text-gray-400",
+                  )}
+                >
+                  {step.name}
+                </div>
+              </div>
+
+              {index < wizard.steps.length - 1 && (
+                <div className="mt-[-20px] h-0 w-8 border-t border-gray-300 bg-gray-300 md:w-10" />
+              )}
+            </>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function WizardHeader({
+  wizard,
+  currentStepIndex,
+  onStepClick,
+  onPrevious,
+  onNext,
+  onFinish,
+  stepCompleted,
+}: WizardHeaderProps) {
+  return (
+    <div className="flex items-center gap-3 border-b border-gray-300 bg-white md:pr-8">
+      <div className="text-md flex items-center justify-center self-stretch border-r border-gray-300 p-2 px-10 text-sm font-semibold text-neutral-800">
+        {wizard.name}
+      </div>
+
+      <PreviousButton
+        currentStepIndex={currentStepIndex}
+        wizard={wizard}
+        onPrevious={onPrevious}
+      />
+
+      <NavigationSteps
+        wizard={wizard}
+        currentStepIndex={currentStepIndex}
+        onStepClick={onStepClick}
+      />
+
+      <div>
+        <NextButton
+          currentStepIndex={currentStepIndex}
+          wizard={wizard}
+          stepCompleted={stepCompleted}
+          onNext={onNext}
+          onFinish={onFinish}
+        />
+      </div>
+    </div>
+  );
+}
+
+function WizardContent({ currentStep, children }: WizardContentProps) {
+  return (
+    <div className="relative flex-1 bg-neutral-100">
+      <div className="h-full p-8">
+        <div className="relative z-10 h-full">
+          <div className="flex h-full flex-col">
+            <div className="mb-10 flex gap-4">
+              <Logo className="h-8 w-8" />
+              <div className="flex-1 text-neutral-800">
+                <div className="text-xl font-semibold">{currentStep?.name}</div>
+                {currentStep?.description && (
+                  <div className="mt-1 font-light">
+                    {currentStep.description}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="relative flex-1">{children}</div>
+          </div>
+        </div>
+        <div className="bg-wizard absolute inset-0" />
+      </div>
+    </div>
+  );
+}
+
+export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [data, setData] = useState<WizardData>({});
   const [pageModel, setPageModel] = useState<WizardPageModel>({
@@ -81,118 +282,37 @@ export function WizardSteps({
     });
   };
 
+  const handlePrevious = () => {
+    switchStep(currentStepIndex - 1);
+  };
+
+  const handleNext = () => {
+    switchStep(currentStepIndex + 1);
+  };
+
+  const handleFinish = () => {
+    editContext?.switchView("editor", { skipConfirmation: true });
+  };
+
   const currentStep = wizard.steps[currentStepIndex];
 
   if (!currentStep) return null;
 
-  const panels = [
-    <Allotment.Pane key="left" minSize={200}>
-      <div className="absolute inset-0 overflow-y-auto">
-        <div className="flex h-full flex-col bg-gray-50 text-sm text-gray-700">
-          <div className="flex gap-3 border-b border-gray-200 bg-gray-100 p-2">
-            <PageWizardLogo />
-            <div className="gap-1p-2 flex flex-col justify-center">
-              <div className="text-md font-semibold">{wizard.name}</div>
-              <div className="text-sm font-light">{wizard.description}</div>
-            </div>
-          </div>
-          <div className="flex flex-1 flex-col gap-3 p-4">
-            {wizard.steps.map((step, index) => (
-              <div
-                key={step.id}
-                className={classNames(
-                  "flex items-center gap-4",
-                  currentStepIndex > index && "cursor-pointer",
-                )}
-                onClick={() =>
-                  index < currentStepIndex ? switchStep(index) : undefined
-                }
-              >
-                <span
-                  className={classNames(
-                    "text-activeStepColor flex h-7 w-7 items-center justify-center rounded-full border-2 p-2 text-xs font-medium",
-                    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"
-                      : currentStepIndex >= index
-                        ? "text-sm text-gray-600"
-                        : "text-sm text-gray-400",
-                  )}
-                >
-                  {step.name}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </Allotment.Pane>,
-    <Allotment.Pane key="right">
-      <div className="absolute inset-0 overflow-y-auto">
-        <div className="bg-secondary animate-fadeIn flex h-full flex-col px-4 pt-4 transition-all duration-500 lg:pr-20 xl:pr-32">
-          <div className="border-b border-gray-200 pb-4">
-            <div className="text-xl font-semibold">{currentStep?.name}</div>
-            {currentStep?.description && (
-              <div className="mt-2 text-base font-light">
-                {currentStep.description}
-              </div>
-            )}
-          </div>
-          <div className="flex-1 pt-4 pb-4">{getCurrentStep()}</div>
-        </div>
-      </div>
-    </Allotment.Pane>,
-  ];
-
   return (
-    <div className="flex h-full flex-col justify-stretch">
-      <div className="relative flex-1 border-b border-gray-200 bg-gray-100">
-        <Allotment defaultSizes={[20, 80]}>{panels}</Allotment>
-      </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", { skipConfirmation: true });
-              }}
-              label="Finish"
-              className="ml-2"
-            />
-          )}
-        </div>
-      </div>
+    <div className="flex h-full flex-col">
+      <WizardHeader
+        wizard={wizard}
+        currentStepIndex={currentStepIndex}
+        onStepClick={switchStep}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+        onFinish={handleFinish}
+        stepCompleted={stepCompleted}
+      />
+
+      <WizardContent currentStep={currentStep}>
+        {getCurrentStep()}
+      </WizardContent>
     </div>
   );
 }

package/src/page-wizard/steps/CollectStep.tsx

@@ -5,8 +5,11 @@ import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
 import MDEditor from "@uiw/react-md-editor";
 import { StepComponentProps } from "../../config/types";
 import { ActionButton } from "../../components/ActionButton";
-import { UploadCloudIcon } from "../../editor/ui/Icons";
+import { UploadIcon, DocumentIcon } from "../../editor/ui/Icons";
 import { Spinner } from "../../editor/ui/Spinner";
+import { WizardBox } from "../WizardBox";
+import { LinkIcon } from "lucide-react";
+import { InputTextarea } from "primereact/inputtextarea";
 
 export function CollectStep({
   data,
@@ -129,45 +132,6 @@ export function CollectStep({
           <div className="text-sm font-semibold text-gray-700">
             Upload a file
           </div>
-
-          <div
-            className={`flex h-40 w-40 flex-col items-center justify-center border border-dashed border-gray-300 p-5 ${
-              isUploading ? "bg-gray-200" : "bg-white"
-            }`}
-            onDrop={handleDrop}
-            onDragOver={(e) => e.preventDefault()}
-          >
-            <div className="flex flex-col items-center justify-center gap-1 text-center text-sm font-medium">
-              {!isUploading && <UploadCloudIcon />}
-              {isUploading && <Spinner />}
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                accept=".pdf,.doc,.docx"
-                style={{ display: "none" }}
-                onChange={(e) => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    uploadFile(file);
-                  }
-                }}
-                onDrop={handleDrop}
-                disabled={isUploading}
-              />
-              Drag & Drop to upload or
-              <span
-                className={`text-sm font-medium ${
-                  isUploading
-                    ? "text-gray-500"
-                    : "text-canvas-pink cursor-pointer underline"
-                } `}
-                onClick={triggerFileInput}
-              >
-                browse
-              </span>
-            </div>
-          </div>
         </div>
 
         {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
@@ -204,33 +168,131 @@ export function CollectStep({
     ),
   };
 
-  const resultPanel: SplitterPanel = {
-    name: "result",
-    defaultSize: "auto",
-    collapsible: false,
-    content: (
-      <div className="absolute inset-0 h-full w-full px-4 pb-4">
-        <MDEditor
-          height="100%"
-          className="max-h-full"
-          value={data.htmlContent}
-          preview="edit"
-          enableScroll={true}
-          onChange={(val) =>
-            setData((prev: WizardData) => ({
-              ...prev,
-              htmlContent: val || "",
-            }))
-          }
-        />
-      </div>
-    ),
-  };
-
   return (
-    <Splitter
-      localStorageKey="editor.page-wizard.panels"
-      panels={[uploadPanel, resultPanel]}
-    />
+    <div className="absolute inset-0 overflow-auto">
+      <div className="grid grid-cols-2 gap-4">
+        <WizardBox
+          icon={<UploadIcon className="text-theme-secondary" />}
+          title="Upload a file  (optional)"
+          description="Upload a file to the page"
+          className="flex-1"
+        >
+          <div
+            className={`flex flex-col items-center justify-center border border-dashed border-gray-300 p-8 ${
+              isUploading ? "bg-gray-200" : "bg-white"
+            }`}
+            onDrop={handleDrop}
+            onDragOver={(e) => e.preventDefault()}
+          >
+            <div className="flex flex-col items-center justify-center gap-1 text-center text-sm">
+              {!isUploading && (
+                <svg
+                  width="49"
+                  height="48"
+                  viewBox="0 0 49 48"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    x="0.666992"
+                    width="48"
+                    height="48"
+                    rx="24"
+                    fill="#F6EEFF"
+                  />
+                  <path
+                    d="M32.604 20.68C32.594 20.648 32.583 20.6167 32.571 20.586C32.5235 20.4775 32.4572 20.3783 32.375 20.293L26.375 14.293C26.2897 14.2108 26.1905 14.1445 26.082 14.097C26.052 14.083 26.02 14.075 25.988 14.064C25.9043 14.0356 25.8172 14.0185 25.729 14.013C25.707 14.011 25.688 14 25.667 14H18.667C17.564 14 16.667 14.897 16.667 16V32C16.667 33.103 17.564 34 18.667 34H30.667C31.77 34 32.667 33.103 32.667 32V21C32.667 20.979 32.656 20.96 32.654 20.938C32.6487 20.8502 32.6319 20.7634 32.604 20.68ZM29.253 20H26.667V17.414L29.253 20ZM18.667 32V16H24.667V21C24.667 21.2652 24.7723 21.5196 24.9599 21.7071C25.1474 21.8946 25.4018 22 25.667 22H30.667L30.669 32H18.667Z"
+                    fill="#9650FB"
+                  />
+                </svg>
+              )}
+              {isUploading && <Spinner />}
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                accept=".pdf,.doc,.docx"
+                style={{ display: "none" }}
+                onChange={(e) => {
+                  const file = e.target.files?.[0];
+                  if (file) {
+                    uploadFile(file);
+                  }
+                }}
+                onDrop={handleDrop}
+                disabled={isUploading}
+              />
+              <div className="flex items-center gap-1">
+                <span
+                  className={`text-sm font-medium ${
+                    isUploading
+                      ? "text-gray-500"
+                      : "text-theme-secondary cursor-pointer underline"
+                  } `}
+                  onClick={triggerFileInput}
+                >
+                  Click
+                </span>
+                or drag & drop to upload
+              </div>
+            </div>
+          </div>
+        </WizardBox>
+        <WizardBox
+          icon={<LinkIcon className="text-theme-secondary" />}
+          title="Scrape page from URL (optional)"
+          description="Upload a file to the page"
+          className="flex-1"
+        >
+          {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm font-semibold text-gray-700">
+              <div className="text-xs font-normal text-gray-500">
+                Only scrape websites you have permission to access. You are
+                responsible for complying with the website's terms of service
+                and all applicable laws.
+              </div>
+            </div>
+            <InputText
+              type="text"
+              className="rounded-md border border-gray-300 px-3 py-2"
+              onChange={(e) => setScrapeUrl(e.target.value)}
+            />
+            {scrapeError && (
+              <div className="mt-2 text-sm text-red-500">{scrapeError}</div>
+            )}
+            <div className="flex gap-2">
+              <ActionButton
+                type="submit"
+                isLoading={isScraping}
+                onClick={handleScrape}
+                loadingText="Scraping..."
+              >
+                Scrape
+              </ActionButton>
+            </div>
+          </div>
+        </WizardBox>
+        <WizardBox
+          icon={<DocumentIcon className="text-theme-secondary" />}
+          title="Text"
+          description="Provide the text you want to use for the page"
+          className="col-span-2"
+        >
+          <InputTextarea
+            className="max-h-full w-full"
+            value={data.htmlContent}
+            rows={20}
+            onChange={(e) =>
+              setData((prev: WizardData) => ({
+                ...prev,
+                htmlContent: e.target.value || "",
+              }))
+            }
+          />
+        </WizardBox>
+      </div>
+    </div>
   );
 }

package/src/page-wizard/steps/ComponentTypesSelector.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState, useRef } from "react";
 import { WizardStep } from "../PageWizard";
 import {
   PageSchema,
@@ -30,6 +30,7 @@ export function ComponentTypeSelector({
     useState(true);
   const [preselectedTypes, setPreselectedTypes] = useState<string[]>([]);
   const [searchFilter, setSearchFilter] = useState<string>("");
+  const contentRef = useRef<HTMLDivElement>(null);
 
   // Ensure selectedComponentTypes is always an array
   useEffect(() => {
@@ -270,22 +271,42 @@ export function ComponentTypeSelector({
         </div>
         <button
           onClick={() => setIsSettingsPanelCollapsed(!isSettingsPanelCollapsed)}
-          className="flex h-6 w-6 items-center justify-center rounded bg-gray-200 p-1 text-gray-700 hover:bg-gray-300"
+          className="flex h-6 w-6 items-center justify-center rounded bg-gray-200 p-1 text-gray-700 transition-colors duration-200 hover:bg-gray-300"
           title={
             isSettingsPanelCollapsed ? "Expand settings" : "Collapse settings"
           }
           aria-expanded={!isSettingsPanelCollapsed}
         >
-          {isSettingsPanelCollapsed ? (
-            <span className="text-lg">↓</span>
-          ) : (
-            <span className="text-lg">↑</span>
-          )}
+          <svg
+            className={`h-4 w-4 transition-transform duration-300 ease-in-out ${
+              isSettingsPanelCollapsed ? "rotate-0" : "rotate-180"
+            }`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
         </button>
       </div>
 
-      {!isSettingsPanelCollapsed && (
-        <>
+      <div
+        ref={contentRef}
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${
+          isSettingsPanelCollapsed
+            ? "max-h-0 opacity-0"
+            : "max-h-[1000px] opacity-100"
+        }`}
+        style={{
+          transitionProperty: "max-height, opacity",
+        }}
+      >
+        <div className="pt-2">
           <div className="mb-2">
             <input
               type="text"
@@ -467,8 +488,8 @@ export function ComponentTypeSelector({
               </div>
             </div>
           </div>
-        </>
-      )}
+        </div>
+      </div>
     </div>
   );
 }