roamjs-components 0.85.1 → 1.0.0-beta.2

package/src/components/FormDialog.tsx

@@ -0,0 +1,517 @@
+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 } 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();
+      });
+      const updateTreeData = async () => {
+        const tree = await getFullTreeByParentUid(parentUid);
+        onChange(() => tree.children);
+      };
+      updateTreeData();
+      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={async (e) => {
+          if (e.key !== "Tab") return;
+          const { blockUid } = getUids(e.target as HTMLTextAreaElement);
+          if (!blockUid) return;
+          const { [":block/order"]: order, [":block/parents"]: parents } =
+            await window.roamAlphaAPI.pull(
+              "[:block/order {:block/parents [:block/uid]}]",
+              [":block/uid", blockUid]
+            );
+          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 AsyncBlockInput = ({
+  value,
+  setValue,
+  autoFocus,
+}: {
+  value: string;
+  setValue: (text: string, uid?: string) => Promise<void>;
+  autoFocus: boolean;
+}) => {
+  const [text, setText] = useState(value);
+  useEffect(() => {
+    getTextByBlockUid(value).then(setText);
+  }, [value]);
+  return <BlockInput value={text} setValue={setValue} autoFocus={autoFocus} />;
+};
+
+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}
+                <AsyncBlockInput
+                  value={data[name] as string}
+                  setValue={async (text, uid) => {
+                    if (!uid) return setValue(text);
+                    const result = await window.roamAlphaAPI.pull("[:db/id]", [
+                      ":block/uid",
+                      uid,
+                    ]);
+                    setValue(result ? 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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,62 @@
+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;