roamjs-components 0.85.0 → 0.85.2

package/src/components/ConfigPanels/MultiChildPanel.tsx

@@ -0,0 +1,99 @@
+import { Button, Label } from "@blueprintjs/core";
+import React, { useState } from "react";
+import getShallowTreeByParentUid from "../../queries/getShallowTreeByParentUid";
+import idToTitle from "../../util/idToTitle";
+import Description from "../Description";
+import type { FieldPanel, ArrayField } from "./types";
+
+const MultiChildPanel: FieldPanel<
+  ArrayField,
+  {
+    InputComponent: (props: {
+      value: string;
+      setValue: (s: string) => void;
+    }) => React.ReactElement;
+  }
+> = ({
+  uid: initialUid,
+  title,
+  description,
+  order,
+  parentUid,
+  InputComponent,
+}) => {
+  const [uid, setUid] = useState(initialUid);
+  const [texts, setTexts] = useState(() =>
+    uid ? getShallowTreeByParentUid(uid) : []
+  );
+  const [value, setValue] = useState("");
+  return (
+    <>
+      <Label>
+        {idToTitle(title)}
+        <Description description={description} />
+        <div style={{ display: "flex" }}>
+          <InputComponent value={value} setValue={setValue} />
+          <Button
+            icon={"plus"}
+            minimal
+            disabled={!value}
+            onClick={() => {
+              const valueUid = window.roamAlphaAPI.util.generateUID();
+              if (uid) {
+                window.roamAlphaAPI.createBlock({
+                  location: { "parent-uid": uid, order: texts.length },
+                  block: { string: value, uid: valueUid },
+                });
+              } else {
+                const newUid = window.roamAlphaAPI.util.generateUID();
+                window.roamAlphaAPI.createBlock({
+                  block: { string: title, uid: newUid },
+                  location: { order, "parent-uid": parentUid },
+                });
+                setTimeout(() => setUid(newUid));
+                window.roamAlphaAPI.createBlock({
+                  block: { string: value, uid: valueUid },
+                  location: { order: 0, "parent-uid": newUid },
+                });
+              }
+              setTexts([...texts, { text: value, uid: valueUid }]);
+              setValue("");
+            }}
+          />
+        </div>
+      </Label>
+      {texts.map((p) => (
+        <div
+          key={p.uid}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <span
+            style={{
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+            }}
+          >
+            {p.text}
+          </span>
+          <Button
+            icon={"trash"}
+            minimal
+            onClick={() => {
+              window.roamAlphaAPI.deleteBlock({ block: { uid: p.uid } });
+              setTexts(texts.filter((f) => f.uid !== p.uid));
+            }}
+          />
+        </div>
+      ))}
+    </>
+  );
+};
+
+MultiChildPanel.type = "custom";
+
+export default MultiChildPanel;

package/src/components/ConfigPanels/MultiTextPanel.tsx

@@ -0,0 +1,23 @@
+import { InputGroup } from "@blueprintjs/core";
+import React from "react";
+import MultiChildPanel from "./MultiChildPanel";
+import type { FieldPanel, MultiTextField } from "./types";
+
+const MultiTextPanel: FieldPanel<MultiTextField> = (props) => {
+  return (
+    <MultiChildPanel
+      {...props}
+      InputComponent={({ value, setValue }) => (
+        <InputGroup
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={props.options?.placeholder}
+        />
+      )}
+    />
+  );
+};
+
+MultiTextPanel.type = "multitext";
+
+export default MultiTextPanel;

package/src/components/ConfigPanels/NumberPanel.tsx

@@ -0,0 +1,36 @@
+import { Label, NumericInput } from "@blueprintjs/core";
+import React from "react";
+import idToTitle from "../../util/idToTitle";
+import Description from "../Description";
+import { FieldPanel, NumberField } from "./types";
+import useSingleChildValue from "./useSingleChildValue";
+
+const NumberPanel: FieldPanel<NumberField> = ({
+  title,
+  uid,
+  parentUid,
+  order,
+  description,
+  defaultValue = 0,
+}) => {
+  const { value, onChange } = useSingleChildValue({
+    defaultValue,
+    title,
+    uid,
+    parentUid,
+    order,
+    transform: parseInt,
+    toStr: (v) => `${v}`,
+  });
+  return (
+    <Label>
+      {idToTitle(title)}
+      <Description description={description} />
+      <NumericInput value={value} onValueChange={onChange} />
+    </Label>
+  );
+};
+
+NumberPanel.type = "number";
+
+export default NumberPanel;

package/src/components/ConfigPanels/OauthPanel.tsx

@@ -0,0 +1,127 @@
+import { Button, Checkbox } from "@blueprintjs/core";
+import React, { useCallback, useState } from "react";
+import getBasicTreeByParentUid from "../../queries/getBasicTreeByParentUid";
+import getShallowTreeByParentUid from "../../queries/getShallowTreeByParentUid";
+import localStorageGet from "../../util/localStorageGet";
+import localStorageRemove from "../../util/localStorageRemove";
+import { localStorageSet } from "../../util/localStorageSet";
+import deleteBlock from "../../writes/deleteBlock";
+import Description from "../Description";
+import ExternalLogin from "../ExternalLogin";
+import type { OauthField, FieldPanel } from "./types";
+
+const OauthPanel: FieldPanel<OauthField> = ({ uid, parentUid, options }) => {
+  const key = `oauth-${options.service}`;
+  const [useLocal, setUseLocal] = useState(!!localStorageGet(key));
+  const [accounts, setAccounts] = useState<
+    { text: string; uid: string; data: string }[]
+  >(() =>
+    useLocal
+      ? JSON.parse(localStorageGet(key) as string)
+      : uid
+      ? getBasicTreeByParentUid(uid).map((v) => ({
+          text: v.children[0]?.text ? v.text : "Default Account",
+          uid: v.uid,
+          data: v.children[0]?.text || v.text,
+        }))
+      : []
+  );
+  const onCheck = useCallback(
+    (e) => {
+      const checked = (e.target as HTMLInputElement).checked;
+      setUseLocal(checked);
+      if (checked) {
+        if (uid) {
+          getShallowTreeByParentUid(uid).forEach(({ uid: u }) =>
+            deleteBlock(u)
+          );
+        }
+        localStorageSet(key, JSON.stringify(accounts));
+      } else {
+        localStorageRemove(key);
+        if (uid) {
+          accounts.forEach(({ text, uid: u, data }, order) => {
+            window.roamAlphaAPI.createBlock({
+              location: { "parent-uid": uid, order },
+              block: { string: text, uid: u },
+            });
+            window.roamAlphaAPI.createBlock({
+              location: { "parent-uid": u, order: 0 },
+              block: { string: data },
+            });
+          });
+        }
+      }
+    },
+    [setUseLocal, accounts, uid, key]
+  );
+  return (
+    <>
+      <Checkbox
+        labelElement={
+          <>
+            Store Locally
+            <Description
+              description={
+                "If checked, sensitive authentication data will be stored locally on your machine and will require re-logging in per device. If unchecked, sensitive authentication data will be stored in your Roam Graph."
+              }
+            />
+          </>
+        }
+        checked={useLocal}
+        onChange={onCheck}
+      />
+      <ExternalLogin
+        useLocal={useLocal}
+        onSuccess={(acc) => setAccounts([...accounts, acc])}
+        parentUid={parentUid}
+        loggedIn={!!accounts.length}
+        {...options}
+      />
+      {!!accounts.length && (
+        <>
+          <h5 style={{ marginTop: 8 }}>Accounts</h5>
+          <hr />
+          <ul style={{ marginTop: 8, padding: 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={() => {
+                    if (useLocal) {
+                      const accts = JSON.parse(
+                        localStorageGet(key) as string
+                      ) as {
+                        uid: string;
+                      }[];
+                      localStorageSet(
+                        key,
+                        JSON.stringify(accts.filter((a) => act.uid !== a.uid))
+                      );
+                    } else {
+                      deleteBlock(act.uid);
+                    }
+                    setAccounts(accounts.filter((a) => act.uid !== a.uid));
+                  }}
+                />
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </>
+  );
+};
+
+OauthPanel.type = "oauth";
+
+export default OauthPanel;

package/src/components/ConfigPanels/PagesPanel.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import PageInput from "../PageInput";
+import MultiChildPanel from "./MultiChildPanel";
+import type { FieldPanel, PagesField } from "./types";
+
+const PagesPanel: FieldPanel<PagesField> = (props) => {
+  return (
+    <MultiChildPanel
+      {...props}
+      InputComponent={(inputProps) => (
+        <PageInput extra={["{all}"]} {...inputProps} />
+      )}
+    />
+  );
+};
+
+PagesPanel.type = "pages";
+
+export default PagesPanel;

package/src/components/ConfigPanels/SelectPanel.tsx

@@ -0,0 +1,46 @@
+import { Label } from "@blueprintjs/core";
+import React, { useMemo } from "react";
+import idToTitle from "../../util/idToTitle";
+import Description from "../Description";
+import MenuItemSelect from "../MenuItemSelect";
+import type { FieldPanel, SelectField } from "./types";
+import useSingleChildValue from "./useSingleChildValue";
+
+const SelectPanel: FieldPanel<SelectField> = ({
+  title,
+  uid,
+  parentUid,
+  order,
+  description,
+  defaultValue = "",
+  options: { items },
+}) => {
+  const optionItems = useMemo(
+    () => (typeof items === "function" ? items() : items),
+    [items]
+  );
+  const { value, onChange } = useSingleChildValue({
+    defaultValue: defaultValue || optionItems[0],
+    title,
+    uid,
+    parentUid,
+    order,
+    transform: (s) => s,
+    toStr: (s) => s,
+  });
+  return (
+    <Label>
+      {idToTitle(title)}
+      <Description description={description} />
+      <MenuItemSelect
+        activeItem={value}
+        onItemSelect={(e) => onChange(e)}
+        items={optionItems}
+      />
+    </Label>
+  );
+};
+
+SelectPanel.type = "select";
+
+export default SelectPanel;

package/src/components/ConfigPanels/TextPanel.tsx

@@ -0,0 +1,44 @@
+import { InputGroup, Label } from "@blueprintjs/core";
+import React from "react";
+import idToTitle from "../../util/idToTitle";
+import Description from "../Description";
+import type { FieldPanel, TextField } from "./types";
+import useSingleChildValue from "./useSingleChildValue";
+
+const TextPanel: FieldPanel<TextField> = ({
+  title,
+  uid,
+  parentUid,
+  order,
+  description,
+  defaultValue = "",
+  options: { placeholder = "", onChange: parentOnChange } = {},
+}) => {
+  const { value, onChange } = useSingleChildValue({
+    defaultValue,
+    title,
+    uid,
+    parentUid,
+    order,
+    transform: (s) => s,
+    toStr: (s) => s,
+  });
+  return (
+    <Label>
+      {idToTitle(title)}
+      <Description description={description} />
+      <InputGroup
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.value);
+          parentOnChange?.(e);
+        }}
+        placeholder={placeholder}
+      />
+    </Label>
+  );
+};
+
+TextPanel.type = "text";
+
+export default TextPanel;

package/src/components/ConfigPanels/TimePanel.tsx

@@ -0,0 +1,45 @@
+import { Label } from "@blueprintjs/core";
+import { TimePicker } from "@blueprintjs/datetime";
+import format from "date-fns/format";
+import startOfDay from "date-fns/startOfDay";
+import React from "react";
+import idToTitle from "../../util/idToTitle";
+import Description from "../Description";
+import type { FieldPanel, TimeField } from "./types";
+import useSingleChildValue from "./useSingleChildValue";
+
+const TimePanel: FieldPanel<TimeField> = ({
+  title,
+  uid,
+  parentUid,
+  order,
+  description,
+  defaultValue = startOfDay(new Date()),
+}) => {
+  const { value, onChange } = useSingleChildValue({
+    defaultValue,
+    title,
+    uid,
+    parentUid,
+    order,
+    transform: (s) => {
+      const d = new Date();
+      const [hours, minutes] = s.split(":");
+      d.setHours(Number(hours));
+      d.setMinutes(Number(minutes));
+      return d;
+    },
+    toStr: (v) => format(v, "HH:mm"),
+  });
+  return (
+    <Label>
+      {idToTitle(title)}
+      <Description description={description} />
+      <TimePicker value={value} onChange={onChange} showArrowButtons />
+    </Label>
+  );
+};
+
+TimePanel.type = "time";
+
+export default TimePanel;

package/src/components/ConfigPanels/getBrandColors.tsx

@@ -0,0 +1,31 @@
+import Color from "color";
+
+export type Brand = {
+  base: string;
+  bright: string;
+  faded: string;
+};
+
+const tryColor = (s?: string) => {
+  if (!s) return undefined;
+  try {
+    return Color(s);
+  } catch (e) {
+    return undefined;
+  }
+};
+
+const getBrandColors = (base?: string): Brand | undefined => {
+  const brandColor = tryColor(base);
+  if (!brandColor) return undefined;
+  return {
+    base: brandColor.toString(),
+    faded: brandColor
+      .alpha(0.2)
+      .lightness(brandColor.lightness() + 5)
+      .toString(),
+    bright: brandColor.lightness(brandColor.lightness() + 5).toString(),
+  };
+};
+
+export default getBrandColors;

package/src/components/ConfigPanels/types.ts

@@ -0,0 +1,111 @@
+import React from "react";
+import type { InputTextNode } from "../../types/native";
+import type { ExternalLoginOptions } from "../ExternalLogin";
+
+export type OauthField = {
+  type: "oauth";
+  defaultValue?: [];
+  options: ExternalLoginOptions;
+};
+
+export type FieldPanel<T extends UnionField, U = Record<string, unknown>> = ((
+  props: {
+    order: number;
+    uid?: string;
+    parentUid: string;
+  } & Omit<Field<T>, "Panel"> &
+    U
+) => React.ReactElement) & { type: T["type"] };
+
+export type TextField = {
+  type: "text";
+  defaultValue?: string;
+  options?: {
+    placeholder?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  };
+};
+
+export type TimeField = {
+  type: "time";
+  defaultValue?: Date;
+};
+
+export type NumberField = {
+  type: "number";
+  defaultValue?: number;
+};
+
+export type FlagField = {
+  type: "flag";
+  defaultValue?: boolean;
+  disabled?: boolean;
+  options?: {
+    onChange?: (f: boolean, e: React.FormEvent<HTMLInputElement>) => void;
+  };
+};
+
+export type MultiTextField = {
+  type: "multitext";
+  defaultValue?: string[];
+  options?: {
+    placeholder?: string;
+  };
+};
+
+export type PagesField = {
+  type: "pages";
+  defaultValue?: string[];
+};
+
+export type SelectField = {
+  type: "select";
+  defaultValue?: string;
+  options: {
+    items: string[] | (() => string[]);
+  };
+};
+
+export type BlockField = {
+  type: "block";
+  defaultValue?: InputTextNode;
+};
+
+export type BlocksField = {
+  type: "blocks";
+  defaultValue?: InputTextNode[];
+};
+
+export type CustomField = {
+  type: "custom";
+  defaultValue?: InputTextNode[];
+  options: {
+    component: React.FC<{
+      parentUid: string;
+      uid: string;
+      defaultValue: InputTextNode[];
+      title: string;
+    }>;
+  };
+};
+
+export type ArrayField =
+  | PagesField
+  | MultiTextField
+  | CustomField
+  | BlocksField;
+export type UnionField =
+  | ArrayField
+  | TextField
+  | TimeField
+  | NumberField
+  | OauthField
+  | FlagField
+  | SelectField
+  | BlockField;
+
+export type Field<T extends UnionField> = Omit<T, "type"> & {
+  title: string;
+  description: string;
+  Panel: FieldPanel<T>;
+};

package/src/components/ConfigPanels/useSingleChildValue.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useState } from "react";
+import getFirstChildUidByBlockUid from "../../queries/getFirstChildUidByBlockUid";
+import getTextByBlockUid from "../../queries/getTextByBlockUid";
+
+const useSingleChildValue = <T extends string | number | Date>({
+  defaultValue,
+  uid: initialUid,
+  title,
+  parentUid,
+  order,
+  transform,
+  toStr,
+}: {
+  title: string;
+  parentUid: string;
+  order: number;
+  uid?: string;
+  defaultValue: T;
+  transform: (s: string) => T;
+  toStr: (t: T) => string;
+}): { value: T; onChange: (v: T) => void } => {
+  const [uid, setUid] = useState(initialUid);
+  const [valueUid, setValueUid] = useState(
+    uid && getFirstChildUidByBlockUid(uid)
+  );
+  const [value, setValue] = useState(
+    (valueUid && transform(getTextByBlockUid(valueUid))) || defaultValue
+  );
+  const onChange = useCallback(
+    (v: T) => {
+      setValue(v);
+      if (valueUid) {
+        window.roamAlphaAPI.updateBlock({
+          block: { string: toStr(v), uid: valueUid },
+        });
+      } else if (uid) {
+        const newValueUid = window.roamAlphaAPI.util.generateUID();
+        window.roamAlphaAPI.createBlock({
+          block: { string: toStr(v), uid: newValueUid },
+          location: { order: 0, "parent-uid": uid },
+        });
+        setValueUid(newValueUid);
+      } else {
+        const newUid = window.roamAlphaAPI.util.generateUID();
+        window.roamAlphaAPI.createBlock({
+          block: { string: title, uid: newUid },
+          location: { order, "parent-uid": parentUid },
+        });
+        setTimeout(() => setUid(newUid));
+        const newValueUid = window.roamAlphaAPI.util.generateUID();
+        window.roamAlphaAPI.createBlock({
+          block: { string: toStr(v), uid: newValueUid },
+          location: { order: 0, "parent-uid": newUid },
+        });
+        setValueUid(newValueUid);
+      }
+    },
+    [setValue, setValueUid, title, parentUid, order, uid, valueUid, setUid]
+  );
+  return { value, onChange };
+};
+
+export default useSingleChildValue;