roamjs-components 0.85.2 → 0.85.4

package/src/components/ConfigPanels/NumberPanel.tsx

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

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

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

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

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

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

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

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

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