roamjs-components 0.85.2 → 0.85.4

package/src/components/OauthSelect.tsx

@@ -1,40 +0,0 @@
-import { Label } from "@blueprintjs/core";
-import React, { useState } 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 = (
-    getBasicTreeByParentUid(getPageUidByPageTitle(`roam/js/${id}`)).find((t) =>
-      toFlexRegex("oauth").test(t.text)
-    )?.children || []
-  )
-    .map((t) => t.text)
-    .filter((t) => !t.startsWith("{") && !t.endsWith("}"));
-  const [accountLabel, setAccountLabel] = useState(accountLabels[0] || "");
-  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

@@ -1,17 +0,0 @@
-import React, { useMemo } 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 options = useMemo(() => [...getAllPageNames(), ...extra], [extra]);
-  return <AutocompleteInput {...rest} options={options} />;
-};
-
-export default PageInput;

package/src/components/PageLink.tsx

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

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

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

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

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

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

@@ -1,19 +0,0 @@
-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}$`
-);