roamjs-components 0.85.2 → 0.85.3

package/src/components/FormDialog.tsx

@@ -1,503 +0,0 @@
-import {
-  Button,
-  Checkbox,
-  Classes,
-  Dialog,
-  InputGroup,
-  Intent,
-  Label,
-  NumericInput,
-  Spinner,
-  SpinnerSize,
-} from "@blueprintjs/core";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import getTextByBlockUid from "../queries/getTextByBlockUid";
-import createOverlayRender from "../util/createOverlayRender";
-import type { RoamOverlayProps } from "../util/renderOverlay";
-import BlockInput from "./BlockInput";
-import MenuItemSelect from "./MenuItemSelect";
-import PageInput from "./PageInput";
-import nanoid from "nanoid";
-import { getUids } from "../dom";
-import { InputTextNode, PullBlock } from "../types";
-import getFullTreeByParentUid from "../queries/getFullTreeByParentUid";
-import createPage from "../writes/createPage";
-import { createBlock } from "../writes";
-import AutocompleteInput from "./AutocompleteInput";
-
-type Props<T> = {
-  title?: React.ReactNode;
-  content?: React.ReactNode;
-  onSubmit?: (data: T) => Promise<unknown> | unknown;
-  submitButtonText?: string;
-  cancelButtonText?: string;
-  enforceFocus?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  fields?: Record<
-    string,
-    (
-      | {
-          defaultValue?: string;
-          type: "text";
-        }
-      | {
-          defaultValue?: string;
-          type: "info";
-        }
-      | {
-          defaultValue?: number;
-          type: "number";
-        }
-      | {
-          defaultValue?: string;
-          type: "select";
-          options?: string[];
-        }
-      | {
-          defaultValue?: string;
-          type: "page";
-        }
-      | {
-          defaultValue?: string;
-          type: "block";
-        }
-      | {
-          defaultValue?: string;
-          type: "autocomplete";
-          options?: string[];
-        }
-      | {
-          defaultValue?: boolean;
-          type: "flag";
-        }
-      | {
-          defaultValue?: InputTextNode[];
-          type: "embed";
-        }
-    ) & { label?: string; conditional?: string; conditionalValues?: string[] }
-  >;
-};
-
-const EmbedInput = ({
-  defaultValue,
-  onChange,
-  autoFocus,
-}: {
-  defaultValue?: InputTextNode[];
-  onChange: (s: () => InputTextNode[]) => void;
-  autoFocus: boolean;
-}) => {
-  const defaultEmbed = useMemo(() => defaultValue || [], [defaultValue]);
-  const elRef = useRef<HTMLDivElement>(null);
-  const parentUid = useMemo(window.roamAlphaAPI.util.generateUID, []);
-  const realFocus = useCallback(() => {
-    if (!elRef.current) return;
-    if (
-      elRef.current.contains(document.activeElement) &&
-      elRef.current !== document.activeElement
-    )
-      return;
-    const block = elRef.current.querySelector<
-      HTMLDivElement | HTMLTextAreaElement
-    >(`div[id*="block-input"],textarea[id*="block-input"]`);
-    if (block?.id === "block-input-ghost")
-      createBlock({ parentUid, node: { text: "" } }).then(() =>
-        setTimeout(realFocus, 500)
-      );
-    const { windowId, blockUid } = getUids(block);
-    if (blockUid)
-      window.roamAlphaAPI.ui.setBlockFocusAndSelection({
-        location: {
-          "block-uid": blockUid,
-          "window-id": windowId,
-        },
-      });
-  }, [elRef]);
-  useEffect(() => {
-    const el = elRef.current;
-    if (el) {
-      createPage({
-        uid: parentUid,
-        title: nanoid(),
-        tree: defaultEmbed,
-      }).then(() => {
-        window.roamAlphaAPI.ui.components.renderPage({
-          uid: parentUid,
-          el,
-          hideMentions: true,
-        });
-        if (autoFocus) realFocus();
-      });
-      // In the future, we can return the whole tree of data from `parentUid`
-      onChange(() => getFullTreeByParentUid(parentUid).children);
-      return () => {
-        window.roamAlphaAPI.deletePage({ page: { uid: parentUid } });
-      };
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }, [
-    elRef,
-    defaultEmbed,
-    autoFocus,
-    realFocus,
-    parentUid,
-    // Triggering infinite rerender
-    // onChange
-  ]);
-  return (
-    <>
-      <style>{`div.rm-autocomplete__results {
-  z-index: 1000;
-}
-.roamjs-form-embed div div:has(> h1.rm-title-display),
-.roamjs-form-embed .rm-api-render--page > div:has(.rm-reference-main) {
-  display: none;
-}`}</style>
-      <div
-        ref={elRef}
-        className="rounded-md bg-white font-normal mt-1 bp3-input h-32 overflow-scroll roamjs-form-embed py-2 px-4"
-        tabIndex={0}
-        onFocus={realFocus}
-        onKeyDown={(e) => {
-          if (e.key !== "Tab") return;
-          const { blockUid } = getUids(e.target as HTMLTextAreaElement);
-          if (!blockUid) return;
-          const { [":block/order"]: order, [":block/parents"]: parents } =
-            window.roamAlphaAPI.pull(
-              "[:block/order {:block/parents [:block/uid]}]",
-              [":block/uid", blockUid]
-            ) as PullBlock;
-          if (
-            !(
-              order === 0 &&
-              parents?.length === 1 &&
-              parents[0][":block/uid"] === parentUid
-            )
-          )
-            return;
-          e.stopPropagation();
-          e.preventDefault();
-          const label = elRef.current?.parentElement;
-          if (!label) return;
-          const nextElToFocus = e.shiftKey
-            ? label.previousElementSibling ||
-              label
-                .closest(".bp3-dialog")
-                ?.querySelector(".bp3-dialog-footer .bp3-button.roamjs-cancel")
-            : label.nextElementSibling ||
-              label
-                .closest(".bp3-dialog")
-                ?.querySelector(
-                  ".bp3-dialog-footer .bp3-button.bp3-intent-primary"
-                );
-          if (!nextElToFocus) return;
-          const focusQuery = "input,button,div.roamjs-form-embed";
-          if (nextElToFocus.matches(focusQuery))
-            (nextElToFocus as HTMLElement).focus();
-          else nextElToFocus.querySelector<HTMLElement>(focusQuery)?.focus();
-        }}
-      />
-    </>
-  );
-};
-
-const FormDialog = <T extends Record<string, unknown>>({
-  title,
-  content,
-  isOpen,
-  onClose,
-  onSubmit = () => Promise.resolve(),
-  fields = {},
-  submitButtonText = "Submit",
-  cancelButtonText = "Cancel",
-  enforceFocus,
-  className,
-  style,
-}: RoamOverlayProps<Props<T>>) => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [data, setData] = useState<T>(
-    () =>
-      Object.fromEntries(
-        Object.entries(fields)
-          .filter(([, meta]) => typeof meta.defaultValue !== "undefined")
-          .map(([key, meta]) => [key, meta.defaultValue])
-      ) as T
-  );
-  const onClick = useCallback(
-    () =>
-      Promise.resolve(
-        onSubmit(
-          Object.fromEntries(
-            Object.entries(data)
-              .filter(([key]) => {
-                const { conditional } = fields[key];
-                return !conditional || !!data[conditional];
-              })
-              .map(
-                ([key, value]) =>
-                  [key, typeof value === "function" ? value() : value] as const
-              )
-          ) as T
-        )
-      )
-        .then(onClose)
-        .catch((e) => {
-          setError(e.message);
-          setLoading(false);
-        }),
-    [data, onClose, setError, setLoading]
-  );
-
-  const getFieldAttributes = (
-    name: string,
-    meta: { type: string; label?: string }
-  ) => {
-    const attributes: Record<string, string> = {
-      "data-field-name": name,
-      "data-field-type": meta.type,
-    };
-    if (meta.label) attributes["data-field-label"] = meta.label;
-    return attributes;
-  };
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      onClose={onClose}
-      title={title}
-      enforceFocus={!title || enforceFocus}
-      autoFocus={!title}
-      className={className}
-      style={style}
-    >
-      <div className={Classes.DIALOG_BODY}>
-        {content}
-        {Object.entries(fields).map(([name, meta], index) => {
-          const fieldClassName = `roamjs-form-field`;
-          const setValue = useCallback(
-            (value: unknown) => setData((d) => ({ ...d, [name]: value })),
-            [setData, name]
-          );
-          if (meta.conditional && !data[meta.conditional]) {
-            return <div key={name} />;
-          } else if (
-            meta.conditional &&
-            meta.conditionalValues &&
-            typeof data[meta.conditional] === "string" &&
-            !meta.conditionalValues.includes(data[meta.conditional] as string)
-          ) {
-            return <div key={name} />;
-          }
-          if (meta.type === "text") {
-            return (
-              <Label
-                key={name}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-                <InputGroup
-                  value={data[name] as string}
-                  onChange={(e) => setValue(e.target.value)}
-                  autoFocus={index === 0}
-                />
-              </Label>
-            );
-          } else if (meta.type === "number") {
-            return (
-              <Label
-                key={name}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-                <NumericInput
-                  value={data[name] as string}
-                  onValueChange={(v) => setValue(v)}
-                  autoFocus={index === 0}
-                />
-              </Label>
-            );
-          } else if (meta.type === "info") {
-            return (
-              <div
-                key={name}
-                className={`${fieldClassName} mb-4`}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-              </div>
-            );
-          } else if (meta.type === "flag") {
-            return (
-              <Checkbox
-                label={meta.label}
-                value={data[name] as string}
-                onChange={(e) =>
-                  setValue((e.target as HTMLInputElement).checked)
-                }
-                key={name}
-                autoFocus={index === 0}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              />
-            );
-          } else if (meta.type === "select") {
-            return (
-              <Label
-                key={name}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-                <MenuItemSelect
-                  activeItem={data[name] as string}
-                  onItemSelect={setValue}
-                  items={meta.options || []}
-                  ButtonProps={{
-                    autoFocus: index === 0,
-                  }}
-                />
-              </Label>
-            );
-          } else if (meta.type === "page") {
-            return (
-              <Label
-                key={name}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-                <PageInput
-                  key={name}
-                  value={data[name] as string}
-                  setValue={setValue}
-                  autoFocus={index === 0}
-                />
-              </Label>
-            );
-          } else if (meta.type === "block") {
-            return (
-              <Label
-                key={name}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-                <BlockInput
-                  value={
-                    getTextByBlockUid(data[name] as string) ||
-                    (data[name] as string)
-                  }
-                  setValue={(text, uid) =>
-                    setValue(
-                      window.roamAlphaAPI.pull("[:db/id]", [
-                        ":block/uid",
-                        uid || "",
-                      ])
-                        ? uid
-                        : text
-                    )
-                  }
-                  autoFocus={index === 0}
-                />
-              </Label>
-            );
-          } else if (meta.type === "autocomplete") {
-            return (
-              <Label
-                key={name}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-                <AutocompleteInput
-                  value={data[name] as string}
-                  options={meta.options}
-                  setValue={setValue}
-                  autoFocus={index === 0}
-                />
-              </Label>
-            );
-          } else if (meta.type === "embed") {
-            return (
-              <Label
-                key={name}
-                className={fieldClassName}
-                {...getFieldAttributes(name, meta)}
-              >
-                {meta.label}
-                <EmbedInput
-                  defaultValue={meta.defaultValue}
-                  onChange={setValue}
-                  autoFocus={index === 0}
-                />
-              </Label>
-            );
-          } else {
-            return <div key={name} />;
-          }
-        })}
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div
-          className={`${Classes.DIALOG_FOOTER_ACTIONS} items-center flex-row-reverse`}
-        >
-          <Button
-            text={submitButtonText}
-            intent={Intent.PRIMARY}
-            onClick={onClick}
-            disabled={loading}
-            className="flex-shrink-0"
-          />
-          <Button
-            text={cancelButtonText}
-            onClick={onClose}
-            disabled={loading}
-            className="flex-shrink-0 roamjs-cancel"
-          />
-          <span className="text-red-700 flex-grow">{error}</span>
-          {loading && <Spinner size={SpinnerSize.SMALL} />}
-        </div>
-      </div>
-    </Dialog>
-  );
-};
-
-export const render = createOverlayRender<Props<Record<string, unknown>>>(
-  "form-dialog",
-  FormDialog
-);
-
-export const prompt = ({
-  defaultAnswer,
-  question,
-  title,
-}: {
-  title: string;
-  question: string;
-  defaultAnswer: string;
-}) =>
-  new Promise<string>((resolve) =>
-    render({
-      onSubmit: (data) => resolve(data.value as string),
-      fields: { value: { type: "text", defaultValue: defaultAnswer } },
-      title,
-      content: (
-        <div className="whitespace-pre-wrap font-semibold text-lg mb-4">
-          {question}
-        </div>
-      ),
-    })
-  );
-
-export default FormDialog;

package/src/components/Loading.tsx

@@ -1,33 +0,0 @@
-import { Spinner, SpinnerSize } from "@blueprintjs/core";
-import React from "react";
-import ReactDOM from "react-dom";
-
-const Loading = () => {
-  return <Spinner size={SpinnerSize.SMALL} />;
-};
-
-export const renderLoading = (targetUid?: string) => {
-  const reactParent = document.createElement("div");
-  reactParent.style.position = "absolute";
-  reactParent.style.bottom = "0";
-  reactParent.style.right = "0";
-  const parent = targetUid
-    ? document.querySelector<HTMLDivElement>(
-        `.rm-block__input[id$="${targetUid}"]`
-      )?.parentElement || document.querySelector(".roam-article")
-    : document.querySelector(".roam-article");
-  if (parent) {
-    parent.appendChild(reactParent);
-    ReactDOM.render(<Loading />, reactParent);
-    return () => {
-      ReactDOM.unmountComponentAtNode(reactParent);
-      reactParent.remove();
-    };
-  } else {
-    return () => {
-      // no parent found
-    };
-  }
-};
-
-export default Loading;

package/src/components/MenuItemSelect.tsx

@@ -1,88 +0,0 @@
-import { Button, ButtonProps, MenuItem } from "@blueprintjs/core";
-import { SelectProps, Select, ICreateNewItem } from "@blueprintjs/select";
-import React, { ReactText, ButtonHTMLAttributes, ReactNode } from "react";
-
-type ActiveItem<T> = T | ICreateNewItem | null | undefined;
-type TransformItem<T> = (s: T) => ReactNode;
-type MenuItemSelectProps<T extends ReactText> = Omit<
-  SelectProps<T>,
-  "itemRenderer"
-> & {
-  ButtonProps?: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
-  emptyValueText?: string;
-  transformItem?: TransformItem<T>;
-  children?: (props: {
-    activeItem: ActiveItem<T>;
-    emptyValueText?: string;
-    transformItem?: TransformItem<T>;
-  }) => ReactNode;
-};
-
-const MenuItemSelect = <T extends ReactText>(
-  props: MenuItemSelectProps<T>
-): JSX.Element => {
-  const TypeSelect = Select.ofType<T>();
-  const itemPredicate = (query: string, item: T) => {
-    const text = props.transformItem ? props.transformItem(item) : item;
-    return String(text).toLowerCase().includes(query.toLowerCase());
-  };
-  const {
-    activeItem,
-    filterable = false,
-    children,
-    transformItem,
-    emptyValueText,
-    ...selectProps
-  } = props;
-
-  const defaultButton = (
-    <Button
-      text={
-        activeItem ? (
-          transformItem ? (
-            transformItem(activeItem as T)
-          ) : (
-            activeItem
-          )
-        ) : (
-          <span className="opacity-50 italic">
-            {emptyValueText || "Choose..."}
-          </span>
-        )
-      }
-      rightIcon="double-caret-vertical"
-      {...props.ButtonProps}
-    />
-  );
-
-  return (
-    <TypeSelect
-      {...selectProps}
-      itemRenderer={(item, { modifiers, handleClick }) => (
-        <MenuItem
-          key={item}
-          text={transformItem ? transformItem(item) : item}
-          active={modifiers.active}
-          onClick={handleClick}
-        />
-      )}
-      filterable={filterable}
-      itemPredicate={filterable ? itemPredicate : undefined}
-      popoverProps={{
-        minimal: true,
-        captureDismiss: true,
-        ...props.popoverProps,
-      }}
-    >
-      {children
-        ? children({
-            activeItem,
-            emptyValueText,
-            transformItem,
-          })
-        : defaultButton}
-    </TypeSelect>
-  );
-};
-
-export default MenuItemSelect;

package/src/components/OauthPanel.tsx

@@ -1,62 +0,0 @@
-import { Button } from "@blueprintjs/core";
-import React, { useState } from "react";
-import localStorageGet from "../util/localStorageGet";
-import { localStorageSet } from "../util/localStorageSet";
-import ExternalLogin, { ExternalLoginOptions } from "./ExternalLogin";
-
-const OauthPanel = (options: ExternalLoginOptions) => {
-  const key = `oauth-${options.service}`;
-  const [accounts, setAccounts] = useState<
-    { text: string; uid: string; data: string }[]
-  >(() => JSON.parse((localStorageGet(key) as string) || "[]"));
-  return (
-    <div className="flex flex-col gap-1" style={{ minWidth: 300 }}>
-      <ExternalLogin
-        useLocal
-        onSuccess={(acc) => setAccounts([...accounts, acc])}
-        parentUid={""}
-        loggedIn={!!accounts.length}
-        {...options}
-      />
-      {!!accounts.length && (
-        <>
-          <h5 className="margin-0">Accounts</h5>
-          <ul className="margin-0">
-            {accounts.map((act) => (
-              <li
-                key={act.uid}
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  marginTop: 8,
-                }}
-              >
-                <span style={{ minWidth: 192 }}>{act.text}</span>
-                <Button
-                  text={"Log Out"}
-                  onClick={() => {
-                    const accts = JSON.parse(
-                      localStorageGet(key) as string
-                    ) as {
-                      uid: string;
-                    }[];
-                    localStorageSet(
-                      key,
-                      JSON.stringify(accts.filter((a) => act.uid !== a.uid))
-                    );
-                    setAccounts(accounts.filter((a) => act.uid !== a.uid));
-                  }}
-                />
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-    </div>
-  );
-};
-
-OauthPanel.type = "oauth";
-
-export default OauthPanel;