@alpaca-editor/core 1.0.3942 → 1.0.3944

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

@@ -0,0 +1,259 @@
+import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
+
+import { FullItem, ItemDescriptor } from "../../editor/pageModel";
+import { useEditContext } from "../../editor/client/editContext";
+
+import { useEffect, useState } from "react";
+import { StepComponentProps } from "../../config/types";
+import { PageViewer } from "../../editor/page-viewer/PageViewer";
+
+import { useDebouncedCallback } from "use-debounce";
+import { getChildren } from "../../editor/services/contentService";
+import { ActionButton } from "../../components/ActionButton";
+import Generate from "./Generate";
+import { usePageCreator } from "./usePageCreator";
+
+export function BuildPageStep({
+  data,
+  setData,
+  parentItem,
+  wizard,
+  setStepCompleted,
+}: StepComponentProps) {
+  const editContext = useEditContext();
+
+  const [createdPageDescriptor, setCreatedPageDescriptor] =
+    useState<ItemDescriptor>();
+  const [pageLoaded, setPageLoaded] = useState(false);
+
+  const [fullParentItem, setFullParentItem] = useState<FullItem>();
+  const [isBuilding, setIsBuilding] = useState(false);
+
+  const [validationMessage, setValidationMessage] = useState<string>();
+
+  useEffect(() => {
+    if (
+      createdPageDescriptor &&
+      createdPageDescriptor.id === editContext?.page?.item?.descriptor.id
+    )
+      setPageLoaded(true);
+  }, [editContext?.page]);
+
+  useEffect(() => {
+    const loadParentItem = async () => {
+      if (!parentItem) return;
+      const item = await editContext?.itemsRepository.getItem(parentItem);
+      setFullParentItem(item);
+    };
+    loadParentItem();
+  }, [parentItem]);
+
+  useEffect(() => {
+    const buildComponents = async () => {
+      try {
+        console.log(
+          "Building components",
+          createdPageDescriptor,
+          editContext?.page,
+        );
+        // Recursively create components from page model
+        if (pageModel.components && pageModel.components.length > 0) {
+          await pageCreator.createComponentsRecursively(
+            pageModel.components,
+            "root",
+          );
+        }
+        editContext?.requestRefresh();
+        console.log(
+          "Components built",
+          createdPageDescriptor,
+          editContext?.page,
+        );
+      } finally {
+        setIsBuilding(false);
+      }
+    };
+    if (pageLoaded) {
+      buildComponents();
+    }
+  }, [pageLoaded]);
+
+  // Initialize pageModel if it doesn't exist
+  const pageModel = data.pageModel || {
+    components: [],
+    name: "",
+    metaDescription: "",
+  };
+
+  // Handle input changes
+  const handleInputChange = (field: keyof typeof pageModel, value: string) => {
+    const updatedPageModel = {
+      ...pageModel,
+      [field]: value,
+    };
+
+    setData({
+      ...data,
+      pageModel: updatedPageModel,
+    });
+  };
+
+  const checkName = async () => {
+    if (!parentItem) return;
+    let valid: boolean =
+      !!wizard.templateId && pageModel.name.trim().length >= 3;
+    if (valid) {
+      const children = await getChildren(
+        parentItem.id,
+        editContext?.sessionId ?? "",
+        [],
+        false,
+        editContext?.contentEditorItem?.language || "en",
+      );
+      if (
+        children.find(
+          (x) =>
+            x.name.toLocaleLowerCase() ===
+            pageModel.name.trim().toLocaleLowerCase(),
+        )
+      ) {
+        valid = false;
+        setValidationMessage("A page with this name already exists.");
+      }
+    } else {
+      if (pageModel.name.trim().length > 0 && pageModel.name.trim().length < 3)
+        setValidationMessage("Name is too short.");
+      else setValidationMessage(undefined);
+    }
+
+    if (valid) setValidationMessage(undefined);
+    return valid;
+  };
+
+  const checkNameValidDebounced = useDebouncedCallback(
+    async () => checkName(),
+    500,
+  );
+
+  useEffect(() => {
+    checkNameValidDebounced();
+  }, [pageModel.name]);
+
+  const createPage = () => {
+    setTimeout(async () => {
+      if (!editContext || !parentItem) return;
+      try {
+        if (!(await checkName())) return;
+        setIsBuilding(true);
+        const result = await editContext.operations.createItem(
+          parentItem,
+          wizard.templateId,
+          pageModel.name,
+        );
+        if (!result) return;
+        editContext?.loadItem(result, { addToBrowseHistory: true });
+
+        setCreatedPageDescriptor(result);
+
+        console.log("Page created", result, "Page model", pageModel);
+        setStepCompleted(true);
+      } catch (error) {
+        console.error("Error creating page", error);
+        setIsBuilding(false);
+      }
+    }, 1);
+  };
+
+  const pageCreator = usePageCreator(
+    createdPageDescriptor,
+    wizard,
+    (pageModel) => setData({ ...data, pageModel }),
+  );
+
+  const settingsPanel: SplitterPanel = {
+    name: "settings",
+    defaultSize: 450,
+    collapsible: false,
+    content: (
+      <div className="pr-6">
+        <div className="mb-4">
+          <div className="mb-1 text-sm font-medium">Target Parent Item</div>
+          <div className="mb-4 break-after-all text-xs">
+            {fullParentItem?.path}
+          </div>
+        </div>
+        <div className="mb-4">
+          <label htmlFor="pageName" className="mb-1 block text-sm font-medium">
+            Page Name
+          </label>
+          <input
+            id="pageName"
+            type="text"
+            className="w-full rounded border p-2 text-sm"
+            value={pageModel.name}
+            onChange={(e) => handleInputChange("name", e.target.value)}
+            placeholder="Enter page name"
+          />
+          {validationMessage && (
+            <div className="mt-2 text-sm text-red-500">{validationMessage}</div>
+          )}
+        </div>
+
+        <div className="mb-4">
+          <label
+            htmlFor="metaDescription"
+            className="mb-1 block text-sm font-medium"
+          >
+            Meta Description
+          </label>
+          <textarea
+            id="metaDescription"
+            className="min-h-[100px] w-full rounded border p-2 text-sm"
+            value={pageModel.metaDescription}
+            onChange={(e) =>
+              handleInputChange("metaDescription", e.target.value)
+            }
+            placeholder="Enter meta description"
+          />
+        </div>
+        <ActionButton
+          disabled={isBuilding || !!validationMessage}
+          className="w-full flex-1"
+          onClick={() => {
+            createPage();
+          }}
+          isLoading={isBuilding}
+          loadingText="Working"
+        >
+          Create Page
+        </ActionButton>
+      </div>
+    ),
+  };
+
+  const contentPanel: SplitterPanel = {
+    name: "content",
+    defaultSize: "auto",
+    collapsible: false,
+    content: (
+      <>
+        <div className={pageLoaded ? "h-full" : "h-0"}>
+          <PageViewer
+            name="single"
+            compareView={false}
+            showFormEditor={false}
+            followEditsDefault={true}
+            pageViewContext={editContext!.pageView}
+          />
+        </div>
+        {isBuilding && !pageLoaded && (
+          <div className="flex h-full items-center justify-center">
+            <Generate title="Building page..." />
+          </div>
+        )}
+      </>
+    ),
+  };
+
+  return <Splitter panels={[settingsPanel, contentPanel]}></Splitter>;
+}

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

@@ -0,0 +1,296 @@
+import { InputText } from "primereact/inputtext";
+import { useEffect, useRef, useState } from "react";
+import { WizardData } from "../PageWizard";
+
+import { StepComponentProps } from "../../config/types";
+import { ActionButton } from "../../components/ActionButton";
+import { UploadIcon, DocumentIcon } from "../../editor/ui/Icons";
+import { Spinner } from "../../editor/ui/Spinner";
+import { Card } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+import { LinkIcon } from "lucide-react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export function CollectStep({
+  step,
+  data,
+  setData,
+  setStepCompleted,
+}: StepComponentProps) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [isScraping, setIsScraping] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [scrapeError, setScrapeError] = useState<string | null>(null);
+  const [scrapeUrl, setScrapeUrl] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Extract configuration from step
+  const enableUpload = step?.fields.enableUpload === "1";
+  const enableScrape = step?.fields.enableScrape === "1";
+  const enableText = step?.fields.enableText === "1";
+
+  const uploadTitle = step?.fields.uploadTitle || "Upload a file (optional)";
+  const uploadDescription =
+    step?.fields.uploadDescription || "Upload a file to the page";
+
+  const scrapeTitle =
+    step?.fields.scrapeTitle || "Scrape page from URL (optional)";
+  const scrapeDescription =
+    step?.fields.scrapeDescription ||
+    "Only scrape websites you have permission to access. You are responsible for complying with the website's terms of service and all applicable laws.";
+
+  const textTitle = step?.fields.textTitle || "Text";
+  const textDescription =
+    step?.fields.textDescription ||
+    "Provide the text you want to use for the page";
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      uploadFile(e.dataTransfer.files[0]!);
+      setError(null);
+    }
+  };
+
+  useEffect(() => {
+    if (data.htmlContent) {
+      setStepCompleted(true);
+    }
+  }, [data.htmlContent]);
+
+  const uploadFile = async (file: File) => {
+    if (!file) {
+      setError("Please select a file first");
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      setError(null);
+
+      const formData = new FormData();
+      formData.append("uploadedFile", file);
+
+      const response = await fetch("/alpaca/editor/page-wizard/convertFile", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `Upload failed: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      const htmlContent = await response.text();
+      setData((prev: WizardData) => ({
+        ...prev,
+        htmlContent: htmlContent,
+      }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error occurred");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current ? (fileInputRef.current.value = "") : "";
+
+    fileInputRef.current?.click();
+  };
+
+  const handleScrape = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      setScrapeError(null);
+
+      if (!scrapeUrl) {
+        setScrapeError("Please enter a URL first");
+        return;
+      }
+
+      setIsScraping(true);
+      const response = await fetch("/alpaca/editor/page-wizard/scrape", {
+        method: "POST",
+        body: JSON.stringify({ url: scrapeUrl }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `Scraping failed: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      const htmlContent = await response.text();
+
+      setData((prev: WizardData) => ({
+        ...prev,
+        htmlContent: htmlContent,
+      }));
+    } catch (err) {
+      setScrapeError(
+        err instanceof Error ? err.message : "Unknown error occurred",
+      );
+    } finally {
+      setIsScraping(false);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {enableUpload && (
+        <Card
+          icon={<UploadIcon className="text-theme-secondary" />}
+          title={uploadTitle}
+          collapsible="mobileOnly"
+          defaultCollapsed="mobileOnly"
+          description={uploadDescription}
+        >
+          {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
+          <div
+            className={`flex flex-col items-center justify-center border border-dashed border-gray-300 p-8 ${
+              isUploading ? "" : "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 />}
+              {!isUploading && (
+                <>
+                  <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>
+        </Card>
+      )}
+      {enableScrape && (
+        <Card
+          icon={<LinkIcon className="text-theme-secondary" />}
+          title={scrapeTitle}
+          description={scrapeDescription}
+          collapsible="mobileOnly"
+          defaultCollapsed="mobileOnly"
+        >
+          <div className="flex flex-col gap-2">
+            <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>
+        </Card>
+      )}
+      {enableText && (
+        <Card
+          icon={<DocumentIcon className="text-theme-secondary" />}
+          title={textTitle}
+          description={textDescription}
+          className={`${!enableUpload && !enableScrape ? "md:col-span-2" : enableUpload && enableScrape ? "md:col-span-2" : ""}`}
+        >
+          <InputTextarea
+            className="border-theme-secondary max-h-full w-full text-sm"
+            value={data.htmlContent}
+            rows={20}
+            onChange={(e) =>
+              setData((prev: WizardData) => ({
+                ...prev,
+                htmlContent: e.target.value || "",
+              }))
+            }
+          />
+          {step.children && step.children.length > 0 && (
+            <div>
+              <div className="mt-2 mb-1 text-sm font-semibold">Examples:</div>
+              <div className="flex flex-wrap gap-2">
+                {step.children.map((child) => (
+                  <Button
+                    variant="outline"
+                    key={child.id}
+                    onClick={() => {
+                      setData((prev: WizardData) => ({
+                        ...prev,
+                        htmlContent: child.fields.text,
+                      }));
+                    }}
+                  >
+                    {child.fields.title}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+        </Card>
+      )}
+    </div>
+  );
+}