@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -1,118 +0,0 @@
-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/editContext";
-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="my-2 text-sm">
-          {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="mt-2 text-red-500">{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

@@ -1,190 +0,0 @@
-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 pr-8 text-sm" // 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 cursor-pointer px-3 text-gray-500"
-              onClick={() => setQuery("")}
-            />
-          )}
-          {loading && (
-            <ProgressSpinner
-              style={{ width: "24px", height: "24px", margin: "0 12px" }}
-            />
-          )}
-        </div>
-      </div>
-      {results.length > 0 && (
-        <div
-          className={`mt-1 flex flex-1 flex-col gap-1 overflow-y-auto ${resultClassName}`}
-        >
-          {results
-            .filter((x) => x.language)
-            .slice(0, 6)
-            .map((x) => (
-              <div
-                key={x.id + x.language}
-                className="flex cursor-pointer items-start gap-2 rounded p-2 text-xs hover:bg-gray-50"
-                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"
-                    className="mt-0.5 flex-shrink-0"
-                  />
-                )}
-                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <div className="truncate font-medium text-gray-900">
-                    {x.name}
-                    <span className="text-2xs ml-1 text-gray-400">
-                      ({x.language})
-                    </span>
-                  </div>
-                  <div className="text-2xs truncate text-gray-500">
-                    {x.path}
-                  </div>
-                </div>
-              </div>
-            ))}
-        </div>
-      )}
-      {results.length === 0 && !loading && query && (
-        <div className="mt-1 text-xs text-gray-500">No results found</div>
-      )}
-    </>
-  );
-};
-
-export default ItemSearch;