@alpaca-editor/core 1.0.0

package/src/splash-screen/NewPage.tsx

@@ -0,0 +1,232 @@
+import { useEffect, useMemo, useState } from "react";
+import { ScrollingContentTree } from "../editor/ScrollingContentTree";
+
+import {
+  getChildren,
+  ItemTreeNodeData,
+} from "../editor/services/contentService";
+import {
+  executeCreateItem,
+  loadInsertOptions,
+} from "../editor/services/editService";
+import { InputText } from "primereact/inputtext";
+import { Button } from "primereact/button";
+import { getAbsoluteIconUrl, getItemDescriptor } from "../editor/utils";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "../client-components";
+
+import { SectionHeadline } from "./SectionHeadline";
+import { ItemDescriptor } from "../editor/pageModel";
+import { useDebouncedCallback } from "use-debounce";
+import { getWizards } from "../page-wizard/service";
+import { Wizard } from "../page-wizard/PageWizard";
+export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
+  const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(null);
+  const [isValid, setIsValid] = useState<boolean>(false);
+  const [insertOptions, setInsertOptions] = useState<ItemTreeNodeData[] | null>(
+    null,
+  );
+  const [validationMessage, setValidationMessage] = useState<string | null>(
+    null,
+  );
+  const [selectedTemplate, setSelectedTemplate] = useState<string>();
+  const [name, setName] = useState<string>("");
+  const editContext = useEditContext();
+  const [wizards, setWizards] = useState<Wizard[]>([]);
+
+  const insertOptionsAndWizards = useMemo(() => {
+    return [...(insertOptions || []), ...(wizards || [])];
+  }, [insertOptions, wizards]);
+
+  useEffect(() => {
+    const loadOptions = async () => {
+      if (!selectedItem) return;
+
+      const item = getItemDescriptor(selectedItem);
+      const insertOptions = await loadInsertOptions(item);
+      const pageInsertOptions = insertOptions?.filter((x) => x.hasLayout);
+      setInsertOptions(pageInsertOptions);
+      setSelectedTemplate(pageInsertOptions?.[0]?.id);
+    };
+
+    const loadWizards = async () => {
+      if (!selectedItem) return;
+      const item = getItemDescriptor(selectedItem);
+      const wizards = await getWizards(item);
+      setWizards(wizards);
+    };
+
+    loadOptions();
+    loadWizards();
+  }, [selectedItem]);
+
+  useEffect(() => {
+    const loadItem = async () => {
+      const itemId =
+        selectedItemId ||
+        editContext?.configuration.editor.dialogs.newPage.expandTreeNode;
+      if (!itemId) return;
+      const item = await editContext!.itemsRepository.getItem({
+        id: itemId,
+        language: "en",
+        version: 0,
+      });
+      if (item) setSelectedItem(item);
+    };
+    loadItem();
+  }, [selectedItemId]);
+
+  const isValidDebounced = useDebouncedCallback(async () => {
+    if (!selectedItem) return;
+    let valid: boolean = !!selectedTemplate && name.trim().length >= 3;
+    if (valid) {
+      const children = await getChildren(
+        selectedItem.id,
+        editContext?.sessionId ?? "",
+        [],
+        false,
+        editContext?.contentEditorItem?.language || "en",
+      );
+      if (
+        children.find(
+          (x) => x.name.toLocaleLowerCase() === name.trim().toLocaleLowerCase(),
+        )
+      ) {
+        valid = false;
+        setValidationMessage("A page with this name already exists.");
+      }
+    } else {
+      if (name.trim().length > 0 && name.trim().length < 3)
+        setValidationMessage("Name is too short.");
+      else setValidationMessage(null);
+    }
+
+    if (valid) setValidationMessage(null);
+
+    setIsValid(valid);
+  }, 500);
+
+  useEffect(() => {
+    isValidDebounced();
+  }, [name]);
+
+  const handleOk = async () => {
+    if (!selectedItem || !selectedTemplate) return;
+    const result = await executeCreateItem(
+      getItemDescriptor(selectedItem),
+      selectedTemplate,
+      name,
+    );
+    if (result.response.ok) {
+      editContext?.switchView("page-editor");
+      if (result.data) editContext?.loadItem(result.data);
+    } else {
+      editContext!.showToast({
+        severity: "error",
+        summary: "Error",
+        detail: "Failed to create item",
+      });
+    }
+  };
+
+  const launchWizard = (ev: React.MouseEvent<HTMLButtonElement>) => {
+    const wizard = wizards?.find((x) => x.id === selectedTemplate);
+    if (!wizard || !selectedItem) return;
+    editContext?.executeCommand({
+      command: editContext?.configuration.pageWizard.startWizardCommand,
+      data: {
+        wizard,
+        item: selectedItem,
+      },
+      event: ev,
+    });
+  };
+
+  return (
+    <div className="flex h-full gap-3">
+      <div className="tour-pick-location flex w-1/2 flex-col">
+        <SectionHeadline>1. Pick Location</SectionHeadline>
+        <div className="relative flex-1">
+          <div className="absolute inset-0 overflow-auto">
+            <ScrollingContentTree
+              selectedItemId={selectedItem?.id || selectedItemId}
+              onSelectionChange={(selection) => {
+                const selected = selection[0] as ItemTreeNodeData;
+                if (selected) setSelectedItem(selected);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="w-1/2 border-l pl-7">
+        <SectionHeadline className="tour-choose-template">
+          2. Choose a Template or Wizard
+        </SectionHeadline>
+        <div className="mt-1 flex min-h-12 flex-wrap gap-3">
+          {!insertOptions?.length && (
+            <div>No page templates available here.</div>
+          )}
+          {insertOptionsAndWizards?.map((option) => (
+            <div
+              key={option.id}
+              onClick={() => setSelectedTemplate(option.id)}
+              className={classNames(
+                "mb-2 flex cursor-pointer flex-col items-center bg-gray-100 p-2 text-sm",
+                selectedTemplate === option.id
+                  ? "tour-selected-template bg-gray-200 outline outline-2 outline-offset-2 outline-gray-200"
+                  : "bg-gray-100",
+              )}
+            >
+              {
+                <img
+                  src={getAbsoluteIconUrl(option.icon)}
+                  width="32"
+                  height="32"
+                ></img>
+              }
+              {option.name}
+            </div>
+          ))}
+        </div>
+        {selectedTemplate &&
+          wizards?.find((x) => x.id === selectedTemplate) && (
+            <div className="mt-4">
+              <Button
+                onClick={launchWizard}
+                label="Start Wizard"
+                id="launch-wizard-button"
+              />
+            </div>
+          )}
+        {selectedTemplate &&
+          insertOptions?.find((x) => x.id === selectedTemplate) && (
+            <>
+              <SectionHeadline>3. Name Your Page</SectionHeadline>
+
+              <InputText
+                className="w-full"
+                value={name}
+                id="new-page-name"
+                onChange={(e) => setName(e.target.value)}
+                onKeyDown={(ev) => {
+                  if (ev.key === "Enter" && isValid) handleOk();
+                }}
+                data-testid="new-page-name"
+              />
+              {validationMessage && (
+                <div className="mt-2 text-red-500">{validationMessage}</div>
+              )}
+              <div className="mt-4">
+                <Button
+                  onClick={handleOk}
+                  label="Create"
+                  disabled={!isValid}
+                  id="create-new-page-button"
+                />
+              </div>
+            </>
+          )}
+      </div>
+    </div>
+  );
+}

package/src/splash-screen/SectionHeadline.tsx

@@ -0,0 +1,21 @@
+import { classNames } from "primereact/utils";
+import { ArrowRightIcon } from "../editor/ui/Icons";
+
+export function SectionHeadline({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={classNames(
+        "mt-2 mb-2 font-bold flex gap-2 items-center w-fit",
+        className
+      )}
+    >
+      <ArrowRightIcon /> {children}
+    </div>
+  );
+}

package/src/splash-screen/SplashScreen.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { HistoryEntry } from "../types";
+
+import { useEffect, useState } from "react";
+
+import { ItemTreeNodeData } from "../editor/services/contentService";
+import { useEditContext } from "../editor/client/editContext";
+import { SimpleTabs, Tab } from "../editor/ui/SimpleTabs";
+import { ScrollingContentTree } from "../editor/ScrollingContentTree";
+import { NewPage } from "./NewPage";
+import { usePathname, useRouter } from "next/navigation";
+import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
+
+export function SplashScreen() {
+  const savedHistory =
+    typeof window !== "undefined"
+      ? localStorage.getItem("editor.browseHistory")
+      : null;
+  const [selectedPage, setSelectedPage] = useState<HistoryEntry | null>(null);
+  const [activeTab, setActiveTab] = useState(0);
+  const editContext = useEditContext();
+  const recentPages: HistoryEntry[] = savedHistory
+    ? JSON.parse(savedHistory)
+    : [];
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const [history, setHistory] = useState<HistoryEntry[]>();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const fetchItems = async () => {
+      const pages = await editContext?.itemsRepository.getItems(recentPages);
+      setHistory(pages);
+    };
+    fetchItems();
+  }, [editContext?.itemsRepository]);
+
+  useEffect(() => {
+    if (recentPages.length > 0 && recentPages[0])
+      setSelectedPage(recentPages[0]);
+    if (searchParams.get("create") === "1") setActiveTab(1);
+  }, []);
+
+  useEffect(() => {
+    if (activeTab === 0) {
+      router.replace(pathname);
+    } else {
+      router.replace(`${pathname}?create=1`);
+    }
+  }, [activeTab]);
+
+  if (searchParams.has("itemid")) return;
+
+  const tabs: Tab[] = [
+    {
+      content: (
+        <div className="flex flex-1 gap-4 p-2 text-sm">
+          <div className="relative w-2/3">
+            <ScrollingContentTree
+              selectedItemId={selectedPage?.id}
+              onSelectionChange={(selection) => {
+                const selectedItem = selection[0];
+                if (selectedItem)
+                  editContext?.loadItem({
+                    id: selectedItem.id,
+                    language: selectedItem.language ?? "en",
+                    version: selectedItem.version,
+                  });
+              }}
+            />
+          </div>
+          <div className="flex w-1/3 flex-col border-l pl-6">
+            <div className="mb-3 font-bold">Recent Pages</div>
+            <div className="relative flex-1">
+              <ul className="absolute inset-0 overflow-auto">
+                {history?.map((page, index) => (
+                  <li
+                    key={index}
+                    onMouseOver={() => setSelectedPage(page)}
+                    onClick={() => {
+                      editContext?.switchView("page-editor");
+                      editContext?.loadItem({
+                        id: page.id,
+                        language: page.language ?? "en",
+                        version: 0,
+                      });
+                    }}
+                    className="flex cursor-pointer items-center gap-2 p-2 text-xs hover:bg-gray-100"
+                  >
+                    {page.icon && (
+                      <img src={page.icon} width="16" height="16" />
+                    )}{" "}
+                    {page.name}{" "}
+                    <span className="text-gray-500">({page.language})</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      ),
+      label: "Open Page",
+      id: "open-page-tab",
+    },
+    {
+      content: (
+        <div className="relative flex flex-1 flex-col">
+          <NewPage selectedItemId={selectedPage?.id} />
+        </div>
+      ),
+      label: "New Page",
+      id: "new-page-tab",
+      testId: "new-page-tab",
+    },
+  ];
+
+  return (
+    <div className="flex h-full items-center justify-center bg-gray-100">
+      <div className="relative h-3/4 w-2/3 space-y-8 rounded-lg bg-white p-6 p-8 shadow-lg">
+        <div className="flex h-full flex-col">
+          <div className="flex flex-1 flex-col">
+            <SimpleTabs
+              tabs={tabs}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+            />
+          </div>
+          <div className="flex justify-end">
+            <a
+              className="flex cursor-pointer items-center text-xs text-blue-600"
+              onClick={() => editContext?.startTour()}
+            >
+              <i className="pi pi-arrow-right mr-2"></i> Take Tour
+            </a>
+          </div>
+        </div>
+
+        <div className="absolute top-0 right-0 p-2">
+          <SimpleIconButton
+            icon="pi pi-times"
+            onClick={() =>
+              editContext?.switchView(
+                editContext.contentEditorItem?.hasLayout
+                  ? "page-editor"
+                  : "content-editor",
+              )
+            }
+            label="Close"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}