@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,266 @@
+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="text-sm font-medium mb-1">
+            Target Parent Item
+          </div>
+          <div className="mb-4 text-xs break-after-all">
+            {fullParentItem?.path}
+          </div>
+        </div>
+        <div className="mb-4">
+          <label
+            htmlFor="pageName"
+            className="block text-sm font-medium mb-1"
+          >
+            Page Name
+          </label>
+          <input
+            id="pageName"
+            type="text"
+            className="w-full p-2 border rounded 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="block text-sm font-medium mb-1"
+          >
+            Meta Description
+          </label>
+          <textarea
+            id="metaDescription"
+            className="w-full p-2 border rounded min-h-[100px]  text-sm"
+            value={pageModel.metaDescription}
+            onChange={(e) =>
+              handleInputChange("metaDescription", e.target.value)
+            }
+            placeholder="Enter meta description"
+          />
+        </div>
+        <ActionButton
+          disabled={isBuilding || !!validationMessage}
+          className="flex-1 w-full"
+          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"
+            mode={editContext?.previewMode ? "view" : "edit"}
+            showFormEditor={false}
+            followEditsDefault={true}
+            pageViewContext={editContext!.pageView}
+          />
+        </div>
+        {isBuilding && !pageLoaded && (
+          <div className="flex items-center justify-center h-full">
+            <Generate title="Building page..." />
+          </div>
+        )}
+      </>
+    ),
+  };
+
+  return <Splitter panels={[settingsPanel, contentPanel]}></Splitter>;
+}

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

@@ -0,0 +1,233 @@
+import { InputText } from "primereact/inputtext";
+import { useEffect, useRef, useState } from "react";
+import { WizardData } from "../PageWizard";
+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 { Spinner } from "../../editor/ui/Spinner";
+
+export function CollectStep({
+  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);
+
+  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);
+    }
+  };
+
+  const uploadPanel: SplitterPanel = {
+    name: "upload",
+    defaultSize: 300,
+    collapsible: false,
+    content: (
+      <div className="flex flex-col gap-6 items-stretch p-2 6">
+        <div className="flex flex-col gap-2">
+          <div className="text-sm font-semibold text-gray-700">
+            Upload a file
+          </div>
+
+          <div
+            className={`h-40 w-40 border border-dashed border-gray-300 flex flex-col justify-center items-center p-5   ${
+              isUploading ? "bg-gray-200" : "bg-white"
+            }`}
+            onDrop={handleDrop}
+            onDragOver={(e) => e.preventDefault()}
+          >
+            <div className="text-sm font-medium flex flex-col justify-center items-center text-center gap-1">
+              {!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 underline cursor-pointer"
+                }  `}
+                onClick={triggerFileInput}
+              >
+                browse
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="text-red-500 text-sm mt-2">{error}</div>
+        )}
+
+        <div className="flex flex-col gap-2">
+          <div className="text-sm font-semibold text-gray-700">
+            Scrape page from URL
+          </div>
+          <InputText
+            type="text"
+            className="border border-gray-300 rounded-md px-3 py-2"
+            onChange={(e) => setScrapeUrl(e.target.value)}
+          />
+          {scrapeError && (
+            <div className="text-red-500 text-sm mt-2">{scrapeError}</div>
+          )}
+          <div className="flex gap-2">
+            <ActionButton
+              type="submit"
+              isLoading={isScraping}
+              onClick={handleScrape}
+              loadingText="Scraping..."
+            >
+              Scrape
+            </ActionButton>
+          </div>
+        </div>
+      </div>
+    ),
+  };
+
+  const resultPanel: SplitterPanel = {
+    name: "result",
+    defaultSize: "auto",
+    collapsible: false,
+    content: (
+      <div className="absolute inset-0 w-full h-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]}
+    />
+  );
+}