roamjs-components 0.85.0 → 1.0.0-beta.1

package/src/components/OauthSelect.tsx

@@ -0,0 +1,49 @@
+import { Label } from "@blueprintjs/core";
+import React, { useState, useEffect } from "react";
+import getPageUidByPageTitle from "../queries/getPageUidByPageTitle";
+import getBasicTreeByParentUid from "../queries/getBasicTreeByParentUid";
+import toFlexRegex from "../util/toFlexRegex";
+import MenuItemSelect from "./MenuItemSelect";
+
+export const useOauthAccounts = (
+  id: string
+): {
+  accountDropdown: React.ReactElement;
+  accountLabel: string;
+} => {
+  const [accountLabels, setAccountLabels] = useState<string[]>([]);
+  const [accountLabel, setAccountLabel] = useState("");
+
+  useEffect(() => {
+    const loadAccounts = async () => {
+      const pageUid = await getPageUidByPageTitle(`roam/js/${id}`);
+      const tree = await getBasicTreeByParentUid(pageUid);
+      const oauthNode = tree.find((t) => toFlexRegex("oauth").test(t.text));
+      const labels = (oauthNode?.children || [])
+        .map((t) => t.text)
+        .filter((t) => !t.startsWith("{") && !t.endsWith("}"));
+      setAccountLabels(labels);
+      setAccountLabel(labels[0] || "");
+    };
+    loadAccounts();
+  }, [id]);
+
+  const accountDropdown = (
+    <>
+      {accountLabels.length > 1 && (
+        <Label>
+          Account:
+          <MenuItemSelect
+            activeItem={accountLabel}
+            onItemSelect={(i) => setAccountLabel(i)}
+            items={accountLabels}
+          />
+        </Label>
+      )}
+    </>
+  );
+  return {
+    accountDropdown,
+    accountLabel,
+  };
+};

package/src/components/PageInput.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo, useState, useEffect } from "react";
+import getAllPageNames from "../queries/getAllPageNames";
+import AutocompleteInput, { AutocompleteInputProps } from "./AutocompleteInput";
+
+const DEFAULT_EXTRA: string[] = [];
+
+const PageInput = ({
+  extra = DEFAULT_EXTRA,
+  ...rest
+}: {
+  extra?: string[];
+} & Omit<AutocompleteInputProps, "options">): React.ReactElement => {
+  const [pageNames, setPageNames] = useState<string[]>([]);
+
+  useEffect(() => {
+    const loadPageNames = async () => {
+      try {
+        const names = await getAllPageNames();
+        setPageNames(names);
+      } catch (error) {
+        console.error("Failed to load page names:", error);
+      }
+    };
+    loadPageNames();
+  }, []);
+
+  const options = useMemo(() => [...pageNames, ...extra], [pageNames, extra]);
+  return <AutocompleteInput {...rest} options={options} />;
+};
+
+export default PageInput;

package/src/components/PageLink.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from "react";
+import getRoamUrl from "../dom/getRoamUrl";
+import getPageTitleByPageUid from "../queries/getPageTitleByPageUid";
+import openBlockInSidebar from "../writes/openBlockInSidebar";
+
+const PageLink = ({
+  uid,
+  onCtrlClick,
+  children,
+}: React.PropsWithChildren<{
+  uid: string;
+  onCtrlClick?: (e: React.MouseEvent) => void;
+}>) => {
+  const title = useMemo(
+    () => children || getPageTitleByPageUid(uid),
+    [children, uid]
+  );
+  return (
+    <a
+      className={"rm-page-ref"}
+      data-link-title={title}
+      href={getRoamUrl(uid)}
+      onMouseDown={(e) => {
+        if (e.shiftKey) {
+          openBlockInSidebar(uid);
+          e.preventDefault();
+          e.stopPropagation();
+        } else if (e.ctrlKey) {
+          onCtrlClick?.(e);
+        }
+      }}
+      onClick={(e) => {
+        if (e.shiftKey || e.ctrlKey) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }}
+      onContextMenu={(e) => {
+        if (e.ctrlKey) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }}
+    >
+      {title}
+    </a>
+  );
+};
+
+export default PageLink;

package/src/components/ProgressDialog.tsx

@@ -0,0 +1,85 @@
+import { Dialog } from "@blueprintjs/core";
+import React, { useState, useEffect, useCallback } from "react";
+import createOverlayRender from "../util/createOverlayRender";
+
+type Props = {
+  id: string;
+  timeout: number;
+};
+
+export const ID = "roamjs-progress-dialog-root";
+
+const ProgressDialog = ({
+  onClose,
+  ...props
+}: {
+  onClose: () => void;
+} & Props) => {
+  const [maxTimeout, setMaxtimeout] = useState(props.timeout);
+  const [now, setNow] = useState(new Date());
+  const onId = useCallback(
+    (props: Props) => {
+      window.roamjs.actions[props.id] = props.timeout;
+      setMaxtimeout(props.timeout);
+    },
+    [setMaxtimeout]
+  );
+  useEffect(() => {
+    const element = document.getElementById(ID);
+    if (element) {
+      element.addEventListener("log", ((e: CustomEvent) => {
+        onId(e.detail as Props);
+      }) as EventListener);
+      onId(props);
+    }
+    const interval = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(interval);
+  }, [onId, setTimeout, props]);
+  const numActions = Object.keys(window.roamjs.actions).length;
+  useEffect(() => {
+    if (numActions === 0) onClose();
+  }, [numActions]);
+  return (
+    <>
+      <style>{`.roamjs-progress-dialog {
+  right: 8px;
+  margin: 0;
+  position: absolute;
+  bottom: 8px;
+}
+.roamjs-progress-dialog-portal .bp3-dialog-container,
+.roamjs-progress-dialog-portal .bp3-overlay {
+  pointer-events: none;
+}
+.roamjs-progress-dialog-portal .bp3-overlay-backdrop {
+  display: none;
+}`}</style>
+      <Dialog
+        isOpen={true}
+        onClose={onClose}
+        portalClassName={"roamjs-progress-dialog-portal"}
+        className={"roamjs-progress-dialog"}
+        canOutsideClickClose={false}
+        canEscapeKeyClose={false}
+        hasBackdrop={false}
+        enforceFocus={false}
+      >
+        <div style={{ padding: 16 }}>
+          <h4>Performing Writes to Roam...</h4>
+          <p>
+            Still have <b>{Object.keys(window.roamjs.actions).length}</b>{" "}
+            actions to write. Expected to finish the last one in{" "}
+            {Math.ceil((maxTimeout - now.valueOf()) / 1000)} seconds...
+          </p>
+        </div>
+      </Dialog>
+    </>
+  );
+};
+
+export const render = createOverlayRender<Props>(
+  "progress-dialog",
+  ProgressDialog
+);
+
+export default ProgressDialog;

package/src/components/SimpleAlert.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useState } from "react";
+import { Alert, Checkbox, Classes } from "@blueprintjs/core";
+import createOverlayRender from "../util/createOverlayRender";
+import type Marked from "marked-react";
+import createBlock from "../writes/createBlock";
+
+type Props = {
+  content: string;
+  onConfirm?: () => void;
+  confirmText?: string;
+  onCancel?: (() => void) | true;
+  externalLink?: boolean;
+  dontShowAgain?: string;
+};
+
+const SimpleAlert =
+  (Markdown: typeof Marked) =>
+  ({
+    onClose,
+    content,
+    onConfirm,
+    onCancel,
+    externalLink,
+    confirmText = "Ok",
+    dontShowAgain,
+  }: Props & { onClose: () => void }): React.ReactElement => {
+    const alertOnClose = useCallback(
+      (confirmed: boolean) => {
+        onClose();
+        if (!confirmed && typeof onCancel === "function") onCancel();
+      },
+      [onCancel, onClose]
+    );
+    const cancelProps = onCancel
+      ? {
+          cancelButtonText: "Cancel",
+          canOutsideClickCancel: true,
+          canEscapeKeyCancel: true,
+        }
+      : {};
+    const [checked, setChecked] = useState(false);
+    const alerOnConfirm = useCallback(() => {
+      (checked && dontShowAgain
+        ? createBlock({
+            parentUid: dontShowAgain,
+            node: { text: "Do not show again" },
+          })
+        : Promise.resolve()
+      ).then(onConfirm);
+    }, [onConfirm, checked, dontShowAgain]);
+    return (
+      <Alert
+        isOpen={true}
+        onClose={alertOnClose}
+        onConfirm={alerOnConfirm}
+        confirmButtonText={confirmText}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        autoFocus={false}
+        {...cancelProps}
+      >
+        <div
+          className={Classes.ALERT_CONTENTS}
+          style={{ whiteSpace: "pre-wrap" }}
+        >
+          <Markdown
+            renderer={
+              externalLink
+                ? {
+                    link: (href, text) => (
+                      <a href={href} rel={"noreferrer"} target={"_blank"}>
+                        {text}
+                      </a>
+                    ),
+                  }
+                : {}
+            }
+          >
+            {content}
+          </Markdown>
+          {dontShowAgain && (
+            <Checkbox
+              checked={checked}
+              label="Don't show again"
+              onChange={(e) =>
+                setChecked((e.target as HTMLInputElement).checked)
+              }
+            />
+          )}
+        </div>
+      </Alert>
+    );
+  };
+
+export const render = (props: Props) =>
+  (window.RoamLazy
+    ? window.RoamLazy.MarkedReact()
+    : import("marked-react").then((r) => r.default)
+  ).then((Markdown) =>
+    createOverlayRender<Props>("simple-alert", SimpleAlert(Markdown))(props)
+  );
+
+export default SimpleAlert;

package/src/components/Toast.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  Intent,
+  IToastProps,
+  Toaster,
+  ToasterPosition,
+} from "@blueprintjs/core";
+
+type ToastBaseProps = {
+  content?: React.ReactNode;
+  timeout?: number;
+  intent?: Intent;
+  onDismiss?: IToastProps["onDismiss"];
+  action?: IToastProps["action"];
+};
+
+type ToastProps = {
+  id: string;
+  position?: ToasterPosition;
+} & ToastBaseProps;
+
+export const render = ({
+  position = "top",
+  ...props
+}: ToastProps): (() => void) => {
+  const className = `roamjs-toast-${position}`;
+  const toasterRoot = document.querySelector(
+    `.bp3-toast-container.${className}`
+  );
+  if (toasterRoot) {
+    toasterRoot.dispatchEvent(
+      new CustomEvent("roamjs-toast", { detail: props })
+    );
+    return () => toasterRoot.remove();
+  } else {
+    const toaster = Toaster.create({
+      position,
+      className,
+    });
+
+    // `import(marked-react)` is returning `window.RoamLazy.MarkedReact` instead of the module itself
+    (window.RoamLazy
+      ? window.RoamLazy.MarkedReact()
+      : import("marked-react").then((r) => r.default)
+    ).then((Markdown) => {
+      const Toast = ({
+        content = "RoamJS Notification",
+        intent = Intent.PRIMARY,
+        timeout = 5000,
+        onDismiss,
+        action,
+      }: ToastBaseProps) => {
+        const isStringContent = typeof content === "string";
+        return {
+          message: (
+            <>
+              <style>{`.${className} p { margin-bottom: 0; }`}</style>
+              {isStringContent ? <Markdown>{content}</Markdown> : content}
+            </>
+          ),
+          intent,
+          timeout,
+          onDismiss,
+          action,
+        };
+      };
+      toaster.show(Toast(props), props.id);
+      setTimeout(() => {
+        const toasterRoot = document.querySelector<HTMLDivElement>(
+          `.bp3-toast-container.${className}`
+        );
+        if (toasterRoot)
+          toasterRoot.addEventListener("roamjs-toast", ((e: CustomEvent) => {
+            const {
+              detail: { id, ...props },
+            } = e;
+            toaster.show(Toast(props), id);
+          }) as EventListener);
+      }, 1);
+    });
+    return () => toaster.dismiss(props.id);
+  }
+};
+
+export default render;

package/src/components/index.ts

@@ -0,0 +1,5 @@
+throw new Error(
+  `Do not import from roamjs-components/components directly. Instead import the *component* you need directly. For example: 
+  
+import AutocompleteInput from "roamjs-components/util/AutocompleteInput;"`
+);

package/src/components.tsx

@@ -0,0 +1,242 @@
+import ReactDOM from "react-dom";
+import React, { useState, useMemo } from "react";
+import { Button, Checkbox, NumericInput, Label } from "@blueprintjs/core";
+
+import AutocompleteInput from "./components/AutocompleteInput";
+import FormDialog from "./components/FormDialog";
+import PageInput from "./components/PageInput";
+import renderToast from "./components/Toast";
+
+import renderOverlay from "./util/renderOverlay";
+import runExtension from "./util/runExtension";
+
+import { createBlock } from "./writes";
+import MenuItemSelect from "./components/MenuItemSelect";
+
+// const blockRender = (Component: React.FC) => {
+//   const block = window.roamAlphaAPI.ui.getFocusedBlock();
+//   const parent = document.getElementById(
+//     `block-input-${block?.["window-id"]}-${block?.["block-uid"]}`
+//   );
+//   ReactDOM.render(<Component />, parent);
+// };
+
+const unloads = new Set<() => void>();
+
+const rootRender = (Component: React.FC) => {
+  const root = document.querySelector(".roam-article");
+  const parent = document.createElement("div");
+  root?.insertBefore(parent, root.firstElementChild);
+  ReactDOM.render(<Component />, parent);
+  unloads.add(() => {
+    ReactDOM.unmountComponentAtNode(parent);
+    parent.remove();
+  });
+};
+
+const components = [
+  {
+    callback: () =>
+      rootRender(() => {
+        const [value, setValue] = useState("");
+        const [filterable, setFilterable] = useState(false);
+        const options = useMemo(() => ["apple", "banana", "orange"], []);
+        return (
+          <>
+            <div>Chosen value: {value}</div>
+            <Checkbox
+              checked={filterable as boolean}
+              onChange={(e) =>
+                setFilterable((e.target as HTMLInputElement).checked)
+              }
+              label={"Filterable"}
+            />
+            <MenuItemSelect
+              activeItem={value}
+              items={options}
+              onItemSelect={(item) => setValue(item)}
+              filterable={filterable}
+            />
+          </>
+        );
+      }),
+    label: "MenuItemSelect",
+  },
+  {
+    callback: () =>
+      rootRender(() => {
+        const [value, setValue] = useState("");
+        const [numResults, setNumResults] = useState(100);
+        const [disabled, setDisabled] = useState(false);
+        const [maxItemsDisplayed, setMaxItemsDisplayed] = useState(0);
+        const options = useMemo(() => {
+          const items = [];
+          for (let i = 0; i < numResults; i++) {
+            items.push(Math.random().toString(36).substring(7));
+          }
+          return items;
+        }, [numResults]);
+        return (
+          <>
+            <Label>
+              Number of Results
+              <NumericInput
+                value={numResults}
+                onValueChange={(e) => setNumResults(e)}
+                buttonPosition={"none"}
+              />
+            </Label>
+            <Label>
+              Max Items Displayed (0 for all)
+              <NumericInput
+                value={maxItemsDisplayed}
+                onValueChange={(e) => setMaxItemsDisplayed(e)}
+                buttonPosition={"none"}
+              />
+            </Label>
+            <Label>Chosen value: {value}</Label>
+            <Checkbox
+              checked={disabled}
+              onChange={(e) =>
+                setDisabled((e.target as HTMLInputElement).checked)
+              }
+              label={"Disabled"}
+            />
+            <Label>
+              Autocomplete
+              <AutocompleteInput
+                disabled={disabled}
+                value={value}
+                setValue={setValue}
+                options={options}
+                maxItemsDisplayed={
+                  maxItemsDisplayed === 0 ? undefined : maxItemsDisplayed
+                }
+              />
+            </Label>
+          </>
+        );
+      }),
+    label: "AutocompleteInput",
+  },
+  {
+    callback: () =>
+      rootRender(() => {
+        const [isOpen, setIsOpen] = useState(false);
+        return (
+          <>
+            <Button onClick={() => setIsOpen(true)} text={"Open Form"} />
+            <FormDialog
+              isOpen={isOpen}
+              onClose={() => setIsOpen(false)}
+              onSubmit={(data) =>
+                window.roamAlphaAPI.ui.mainWindow
+                  .getOpenPageOrBlockUid()
+                  .then((parentUid) =>
+                    createBlock({
+                      parentUid:
+                        parentUid ||
+                        window.roamAlphaAPI.util.dateToPageUid(new Date()),
+                      node: {
+                        text: "Response",
+                        children: Object.entries(data).map(([k, v]) => ({
+                          text: k,
+                          children: Array.isArray(v) ? v : [{ text: `${v}` }],
+                        })),
+                      },
+                    })
+                  )
+              }
+              fields={{
+                text: { type: "text", label: "Text Field" },
+                number: { type: "number", label: "Number Field" },
+                info: { type: "info", label: "Read Only Info Text" },
+                flag: { type: "flag", label: "Flag Field" },
+                conditionalText: {
+                  type: "text",
+                  label: "Conditional Text Field",
+                  conditional: "flag",
+                },
+                page: { type: "page", label: "Page Field" },
+                block: { type: "block", label: "Block Field" },
+                select: {
+                  type: "select",
+                  label: "Select Field",
+                  options: [
+                    "apple",
+                    "banana",
+                    "orange",
+                    "conditional select 1",
+                  ],
+                },
+                conditionalSelect: {
+                  type: "text",
+                  label: "Conditional Text Field",
+                  conditional: "select",
+                  conditionalValues: ["conditional select 1"],
+                },
+                autocomplete: {
+                  type: "autocomplete",
+                  label: "Autocomplete Field",
+                  options: ["apple", "banana", "orange"],
+                },
+                embed: {
+                  type: "embed",
+                  label: "Embed Field",
+                },
+              }}
+            />
+          </>
+        );
+      }),
+    label: "FormDialog",
+  },
+  {
+    callback: () =>
+      rootRender(() => {
+        const [value, setValue] = useState("");
+        const [multiline, setMultiline] = useState(false);
+        return (
+          <>
+            <PageInput
+              value={value}
+              setValue={setValue}
+              multiline={multiline}
+            />
+            <input
+              className="ml-8 inline-block"
+              checked={multiline}
+              onChange={(e) => setMultiline(e.target.checked)}
+              type={"checkbox"}
+            />
+          </>
+        );
+      }),
+    label: "PageInput",
+  },
+];
+
+export default runExtension(async (args) => {
+  components.forEach(({ callback, label }) => {
+    args.extensionAPI.ui.commandPalette.addCommand({
+      label: `Render RoamJS component ${label}`,
+      callback,
+    });
+  });
+  window.roamjs.extension.developer = {
+    components: {
+      AutocompleteInput,
+      FormDialog,
+      PageInput,
+      renderToast,
+    },
+    util: {
+      renderOverlay,
+      runExtension,
+    },
+    args,
+  };
+  return () => {
+    unloads.forEach((unload) => unload());
+  };
+});

package/src/date/constants.ts

@@ -0,0 +1,19 @@
+export const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+export const DAILY_NOTE_PAGE_REGEX =
+  /(January|February|March|April|May|June|July|August|September|October|November|December) [0-3]?[0-9](st|nd|rd|th), [0-9][0-9][0-9][0-9]/;
+export const DAILY_NOTE_PAGE_TITLE_REGEX = new RegExp(
+  `^${DAILY_NOTE_PAGE_REGEX.source}$`
+);

package/{date/index.d.ts → src/date/index.ts}

@@ -1,3 +1,3 @@
-export { default as parseNlpDate } from "./parseNlpDate";
-export { default as parseRoamDateUid } from "./parseRoamDateUid";
-export * from "./constants";
+export { default as parseNlpDate } from "./parseNlpDate";
+export { default as parseRoamDateUid } from "./parseRoamDateUid";
+export * from "./constants";