@alpaca-editor/core 1.0.0

package/src/editor/ui/ItemNameDialog.tsx

@@ -0,0 +1,94 @@
+import { Dialog } from "primereact/dialog";
+
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import DialogButtons from "./DialogButtons";
+import { Button } from "primereact/button";
+import { InputText } from "primereact/inputtext";
+
+export interface ItemNameDialogHandle {
+  show: (props: ItemNameDialogProps) => void;
+}
+
+export type ItemNameDialogProps = {
+  name?: string;
+  title?: string;
+  message?: string;
+  accept: (name: string) => void;
+  onClose?: (result: string | null) => void;
+};
+
+type ItemNameDialogPropsInternal = {};
+
+export const ItemNameDialog = forwardRef<
+  ItemNameDialogHandle,
+  ItemNameDialogPropsInternal
+>((_props, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  const [props, setProps] = useState<ItemNameDialogProps>();
+
+  const [name, setName] = useState("");
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setName(props?.name || "");
+  }, [props]);
+
+  useImperativeHandle(ref, () => ({
+    show: (props: ItemNameDialogProps) => {
+      setVisible(true);
+      setProps(props);
+    },
+  }));
+
+  if (!visible) return null;
+
+  if (!props) return null;
+
+  const isValidName = name.trim().length > 0;
+
+  const handleOk = () => {
+    setVisible(false);
+    props?.accept(name);
+    props.onClose?.(name);
+  };
+
+  return (
+    <Dialog
+      visible={visible}
+      onHide={() => {
+        setVisible(false);
+      }}
+      onShow={() => {
+        nameRef.current?.focus();
+      }}
+      style={{ width: "400px" }}
+      header={props?.title ?? "Name"}
+    >
+      <div className="py-3">
+        <div className="text-sm my-2">
+          {props.message || "Enter a name for the new item:"}
+        </div>
+        <InputText
+          ref={nameRef}
+          value={name}
+          className="w-full"
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(ev) => {
+            if (ev.key === "Enter" && isValidName) handleOk();
+          }}
+        />
+      </div>
+      <DialogButtons>
+        <Button onClick={handleOk} label="Ok" disabled={!isValidName} />
+        <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+      </DialogButtons>
+    </Dialog>
+  );
+});

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -0,0 +1,118 @@
+import { Dialog } from "primereact/dialog";
+
+import { useEffect, useRef, useState } from "react";
+import DialogButtons from "./DialogButtons";
+import { Button } from "primereact/button";
+import { InputText } from "primereact/inputtext";
+import { DialogProps } from "../client/DialogContext";
+import { ItemDescriptor } from "../pageModel";
+import { useEditContext } from "../client/editContext";
+import { getChildren } from "../services/contentService";
+import { useDebouncedCallback } from "use-debounce";
+
+export type ItemNameDialogProps = {
+  name?: string;
+  title?: string;
+  message?: string;
+  parentItem?: ItemDescriptor;
+  itemId?: string;
+};
+
+export function ItemNameDialog(
+  props: ItemNameDialogProps & DialogProps<string>
+) {
+  const editContext = useEditContext();
+  const [name, setName] = useState("");
+  const [validationError, setValidationError] = useState<string>();
+  const [isValid, setIsValid] = useState(false);
+
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setName(props?.name || "");
+  }, [props]);
+
+  const checkNameValidDebounced = useDebouncedCallback(
+    async () => checkName(),
+    500
+  );
+
+  useEffect(() => {
+    checkNameValidDebounced();
+  }, [name]);
+
+  const checkName = async () => {
+    let valid = name.trim().length > 0;
+
+    if (!props.parentItem) {
+      setIsValid(valid);
+      setValidationError(valid ? undefined : "Name is required");
+      return;
+    }
+
+    if (valid) {
+      const children = await getChildren(
+        props.parentItem.id,
+        editContext?.sessionId ?? "",
+        [],
+        false,
+        props.parentItem?.language || "en"
+      );
+      if (
+        children.find(
+          (x) =>
+            x.name.toLocaleLowerCase() === name.trim().toLocaleLowerCase() &&
+            (props.itemId ? x.id !== props.itemId : true)
+        )
+      ) {
+        valid = false;
+        setValidationError("A page with this name already exists.");
+      }
+    }
+
+    if (valid) setValidationError(undefined);
+    setIsValid(valid);
+    return valid;
+  };
+
+  const handleOk = () => {
+    props.onClose?.(name);
+  };
+
+  return (
+    <Dialog
+      visible={true}
+      onHide={() => {
+        props.onClose?.(null);
+      }}
+      onShow={() => {
+        nameRef.current?.focus();
+        nameRef.current?.select();
+      }}
+      style={{ width: "400px" }}
+      header={props?.title ?? "Name"}
+    >
+      <div className="p-3">
+        <div className="text-sm my-2">
+          {props.message || "Enter a name for the new item:"}
+        </div>
+        <InputText
+          ref={nameRef}
+          value={name}
+          className="w-full"
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(ev) => {
+            if (ev.key === "Enter" && isValid) handleOk();
+          }}
+        />
+        {validationError && (
+          <div className="text-red-500 mt-2">{validationError}</div>
+        )}
+      </div>
+      <DialogButtons>
+        <Button onClick={handleOk} label="Ok" disabled={!isValid} />
+        <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+      </DialogButtons>
+    </Dialog>
+  );
+}

package/src/editor/ui/ItemSearch.tsx

@@ -0,0 +1,173 @@
+import { InputText } from "primereact/inputtext";
+import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { executeSearch } from "../services/aiService";
+import { useDebouncedCallback } from "use-debounce";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { ItemDescriptor } from "../pageModel";
+import { getItemDescriptor } from "../utils";
+
+export type ResultItem = {
+  id: string;
+  name: string;
+  language: string;
+  icon?: string;
+  path: string;
+  idPath?: string;
+};
+
+interface SearchProps {
+  rootItemIds?: string[];
+  setHoveredItem?: React.Dispatch<React.SetStateAction<ResultItem | undefined>>;
+  itemSelected: (
+    item: ItemDescriptor & { path?: string; idPath?: string; icon?: string }
+  ) => void;
+  language?: string;
+  resultClassName?: string;
+  autoFocus?: boolean;
+}
+
+export const ItemSearch: React.FC<SearchProps> = ({
+  rootItemIds,
+  setHoveredItem,
+  itemSelected,
+  language,
+  resultClassName,
+  autoFocus = false,
+}) => {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<ResultItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const editContext = useEditContext();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSearch = useDebouncedCallback(async (searchPrompt: string) => {
+    if (!editContext) return;
+
+    setLoading(true);
+    const currentQuery = searchPrompt;
+
+    const guidPattern =
+      /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+    if (guidPattern.test(searchPrompt)) {
+      const item = await editContext.itemsRepository.getItem({
+        id: searchPrompt,
+        language: language || "en",
+        version: 0,
+      });
+      if (item) {
+        if (query === currentQuery) {
+          itemSelected({
+            ...getItemDescriptor(item),
+            path: item.path || item.name,
+            idPath: item.idPath,
+            icon: item.icon,
+            name: item.name,
+          });
+          setLoading(false);
+        }
+      }
+      return;
+    }
+
+    const result = await executeSearch({
+      index: "master",
+      query: searchPrompt,
+      editContext,
+      rootItemIds,
+      maxResults: 6,
+    });
+
+    if (query === currentQuery) {
+      if (result.type == "success") {
+        setResults(() => result.data as ResultItem[]);
+      } else {
+        editContext.showToast({
+          severity: "error",
+          summary: "Error searching",
+          detail: result.response.statusText,
+        });
+      }
+    }
+    setLoading(false);
+  }, 600);
+
+  useEffect(() => {
+    if (query) {
+      setLoading(true);
+      handleSearch(query);
+    } else {
+      setResults([]);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    if (inputRef.current && autoFocus) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="relative">
+        <div className="flex items-center">
+          <InputText
+            className="w-full text-sm pr-8" // Add padding to the right to make space for the spinner
+            onChange={(e) => setQuery(e.target.value)}
+            value={query}
+            ref={inputRef}
+          />
+          {!loading && !query && (
+            <i className="pi pi-search px-3 text-gray-500" />
+          )}
+          {!loading && query && (
+            <i
+              className="pi pi-times px-3 cursor-pointer text-gray-500"
+              onClick={() => setQuery("")}
+            />
+          )}
+          {loading && (
+            <ProgressSpinner
+              style={{ width: "24px", height: "24px", margin: "0 12px" }}
+            />
+          )}
+        </div>
+      </div>
+      {results.length > 0 && (
+        <div
+          className={`overflow-y-auto flex flex-col gap-1 flex-1 mt-1 ${resultClassName}`}
+        >
+          {results
+            .filter((x) => x.language)
+            .slice(0, 6)
+            .map((x) => (
+              <div
+                key={x.id + x.language}
+                className="text-xs cursor-pointer hover:text-gray-400 flex gap-1 items-start"
+                onMouseEnter={() => setHoveredItem?.(x)}
+                onMouseLeave={() => setHoveredItem?.(undefined)}
+                onClick={() =>
+                  itemSelected({
+                    id: x.id,
+                    language: x.language,
+                    version: 0,
+                    path: x.path,
+                    icon: x.icon,
+                    idPath: x.idPath,
+                  })
+                }
+              >
+                {x.icon && <img src={x.icon} width="16" height="16" />} {x.path}{" "}
+                <span className="text-500">({x.language})</span>
+              </div>
+            ))}
+        </div>
+      )}
+      {results.length === 0 && !loading && query && (
+        <div className="text-xs text-gray-500 mt-1">No results found</div>
+      )}
+    </>
+  );
+};
+
+export default ItemSearch;