@teselagen/ui 0.8.6-beta.24 → 0.8.6-beta.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.6-beta.24",
+  "version": "0.8.6-beta.26",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -19,7 +19,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@teselagen/react-table": "6.10.18",
     "classnames": "^2.3.2",
-    "color": "^3.2.1",
+    "color": "^5.0.0",
     "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.10.4",
     "dom-scroll-into-view": "^2.0.1",
@@ -30,7 +30,7 @@
     "lodash-es": "^4.17.21",
     "math-expression-evaluator": "^1.3.7",
     "mobx": "^6.10.2",
-    "nanoid": "^4.0.0",
+    "nanoid": "^5.1.5",
     "papaparse": "5.3.2",
     "qs": "^6.9.6",
     "react": "^18.3.1",

package/src/DataTable/utils/formatPasteData.ts

@@ -0,0 +1,34 @@
+import { getFieldPathToField } from "./getFieldPathToField";
+import type { Schema } from "./types/Schema";
+
+type GenericSelectValue = {
+  __strVal: string;
+  __genSelCol: string;
+};
+
+export const formatPasteData = ({
+  schema,
+  newVal,
+  path
+}: {
+  schema: Schema;
+  newVal: GenericSelectValue | string | number | boolean | null | undefined;
+  path: string;
+}) => {
+  const pathToField = getFieldPathToField(schema);
+  const column = pathToField[path];
+  if (column.type === "genericSelect") {
+    const value = newVal as GenericSelectValue;
+    if (value.__genSelCol === path) {
+      newVal = value.__strVal;
+    } else {
+      newVal = undefined;
+    }
+  } else {
+    newVal =
+      typeof newVal === "object" && newVal !== null && "__strVal" in newVal
+        ? newVal.__strVal
+        : newVal;
+  }
+  return newVal;
+};

package/src/DataTable/utils/getAllRows.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from "react";
+
+export const getAllRows = (
+  tableRef: RefObject<{ tableRef: HTMLDivElement }>
+) => {
+  const allRowEls = tableRef.current?.tableRef?.querySelectorAll(".rt-tr");
+  if (!allRowEls || !allRowEls.length) {
+    return;
+  }
+  return allRowEls;
+};

package/src/DataTable/utils/getCellCopyText.ts

@@ -0,0 +1,7 @@
+export const getCellCopyText = (cellWrapper: HTMLElement | null) => {
+  const text = cellWrapper?.getAttribute("data-copy-text");
+  const jsonText = cellWrapper?.getAttribute("data-copy-json");
+
+  const textContent = text || cellWrapper?.textContent || "";
+  return [textContent, jsonText];
+};

package/src/DataTable/utils/getCellInfo.ts

@@ -0,0 +1,46 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+import { Entity } from "./types/Entity";
+
+export const getCellInfo = <T extends Entity>({
+  columnIndex,
+  columnPath,
+  rowId,
+  schema,
+  entities,
+  rowIndex,
+  isEntityDisabled,
+  entity
+}: {
+  columnIndex: number;
+  columnPath: string;
+  rowId: string | number;
+  schema: { fields: { path: string }[] };
+  entities: T[];
+  rowIndex: number;
+  isEntityDisabled: (entity: T) => boolean;
+  entity: T;
+}) => {
+  const leftpath = schema.fields[columnIndex - 1]?.path;
+  const rightpath = schema.fields[columnIndex + 1]?.path;
+  const cellIdToLeft = leftpath && `${rowId}:${leftpath}`;
+  const cellIdToRight = rightpath && `${rowId}:${rightpath}`;
+  const rowAboveId =
+    entities[rowIndex - 1] &&
+    getIdOrCodeOrIndex(entities[rowIndex - 1], rowIndex - 1);
+  const rowBelowId =
+    entities[rowIndex + 1] &&
+    getIdOrCodeOrIndex(entities[rowIndex + 1], rowIndex + 1);
+  const cellIdAbove = rowAboveId && `${rowAboveId}:${columnPath}`;
+  const cellIdBelow = rowBelowId && `${rowBelowId}:${columnPath}`;
+
+  const cellId = `${rowId}:${columnPath}`;
+  const rowDisabled = isEntityDisabled(entity);
+  return {
+    cellId,
+    cellIdAbove,
+    cellIdToRight,
+    cellIdBelow,
+    cellIdToLeft,
+    rowDisabled
+  };
+};

package/src/DataTable/utils/getFieldPathToField.ts

@@ -0,0 +1,10 @@
+import { Field } from "./types/Field";
+import { Schema } from "./types/Schema";
+
+export const getFieldPathToField = (schema: Schema) => {
+  const fieldPathToField: { [path: string]: Field } = {};
+  schema.fields.forEach(f => {
+    fieldPathToField[f.path] = f;
+  });
+  return fieldPathToField;
+};

package/src/DataTable/utils/getIdOrCodeOrIndex.ts

@@ -0,0 +1,14 @@
+import type { Entity } from "./types/Entity";
+
+export const getIdOrCodeOrIndex = (record: Entity, rowIndex?: number) => {
+  if ("id" in record && (record.id || record.id === 0)) {
+    return record.id;
+  } else if ("code" in record && record.code) {
+    return record.code;
+  } else {
+    if (rowIndex === undefined || rowIndex === null) {
+      throw new Error("id, code, or rowIndex must be provided");
+    }
+    return rowIndex;
+  }
+};

package/src/DataTable/utils/getLastSelectedEntity.ts

@@ -0,0 +1,15 @@
+import { Entity } from "./types/Entity";
+
+export const getLastSelectedEntity = (idMap: {
+  [id: string]: { time: number; entity: Entity };
+}) => {
+  let lastSelectedEnt;
+  let latestTime: number | null = null;
+  Object.values(idMap).forEach(({ time, entity }) => {
+    if (!latestTime || time > latestTime) {
+      lastSelectedEnt = entity;
+      latestTime = time;
+    }
+  });
+  return lastSelectedEnt;
+};

package/src/DataTable/utils/getNewEntToSelect.ts

@@ -0,0 +1,32 @@
+import { Entity } from "./types/Entity";
+
+export const getNewEntToSelect = ({
+  type,
+  lastSelectedIndex,
+  entities,
+  isEntityDisabled
+}: {
+  type: "up" | "down";
+  lastSelectedIndex: number;
+  entities: Entity[];
+  isEntityDisabled?: (entity: Entity) => boolean;
+}): Entity | undefined => {
+  let newIndexToSelect;
+  if (type === "up") {
+    newIndexToSelect = lastSelectedIndex - 1;
+  } else {
+    newIndexToSelect = lastSelectedIndex + 1;
+  }
+  const newEntToSelect = entities[newIndexToSelect];
+  if (!newEntToSelect) return;
+  if (isEntityDisabled && isEntityDisabled(newEntToSelect)) {
+    return getNewEntToSelect({
+      type,
+      lastSelectedIndex: newIndexToSelect,
+      entities,
+      isEntityDisabled
+    }) as Entity;
+  } else {
+    return newEntToSelect;
+  }
+};

package/src/DataTable/utils/initializeHasuraWhereAndFilter.ts

@@ -0,0 +1,35 @@
+type Filter = {
+  [key: string]:
+    | { _eq: string | number | boolean }
+    | { _in: (string | number | boolean)[] }
+    | { _gt: number }
+    | { _lt: number }
+    | { _gte: number }
+    | { _lte: number };
+};
+type Where = { _and?: Filter[]; _or?: Filter[] };
+type CurrentParams = object;
+
+export function initializeHasuraWhereAndFilter(
+  additionalFilter:
+    | ((where: Where, currentParams: CurrentParams) => Filter | void)
+    | Filter
+    | undefined
+    | null,
+  where: Where = {},
+  currentParams: CurrentParams
+) {
+  where._and = where._and || [];
+  where._or = where._or || [];
+  if (typeof additionalFilter === "function") {
+    const newWhere = additionalFilter(where, currentParams);
+    if (newWhere) {
+      Object.assign(where, newWhere);
+    }
+  } else if (
+    typeof additionalFilter === "object" &&
+    additionalFilter !== null
+  ) {
+    where._and.push(additionalFilter);
+  }
+}

package/src/DataTable/utils/types/Entity.ts

@@ -0,0 +1,7 @@
+export type Entity =
+  | {
+      id?: string | number;
+    }
+  | {
+      code?: string;
+    };

package/src/DataTable/utils/types/Field.ts

@@ -0,0 +1,4 @@
+export type Field = {
+  path: string;
+  type: "genericSelect" | string;
+};

package/src/DataTable/utils/types/OrderBy.ts

@@ -0,0 +1,15 @@
+type OrderByClause<T = { id: string }> = {
+  path?: string;
+  direction?: "asc" | "desc";
+  type?: string;
+  sortFn?:
+    | ((record: T) => unknown)
+    | string
+    | Array<((record: T) => unknown) | string>;
+  getValueToFilterOn?: (record: T) => unknown;
+};
+
+export type OrderBy =
+  | OrderByClause
+  | OrderByClause[]
+  | Record<string, "asc" | "desc">;

package/src/DataTable/utils/types/Schema.ts

@@ -0,0 +1,5 @@
+import { Field } from "./Field";
+
+export type Schema = {
+  fields: Field[];
+};

package/src/DataTable/utils/utils.ts

@@ -0,0 +1,39 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+import { Entity } from "./types/Entity";
+import { Field } from "./types/Field";
+
+export const getFieldPathToIndex = (schema: { fields: Field[] }) => {
+  const fieldToIndex: { [path: string]: number } = {};
+  schema.fields.forEach((f, i) => {
+    fieldToIndex[f.path] = i;
+  });
+  return fieldToIndex;
+};
+
+export const defaultParsePaste = (str: string) => {
+  return str.split(/\r\n|\n|\r/).map(row => row.split("\t"));
+};
+
+export const getEntityIdToEntity = (entities: Entity[]) => {
+  const entityIdToEntity: { [id: string]: { e: Entity; i: number } } = {};
+  entities.forEach((e, i) => {
+    entityIdToEntity[getIdOrCodeOrIndex(e, i)] = { e, i };
+  });
+  return entityIdToEntity;
+};
+
+const endsWithNumber = (str: string) => {
+  return /[0-9]+$/.test(str);
+};
+
+export const getNumberStrAtEnd = (str: string) => {
+  if (endsWithNumber(str)) {
+    return str.match(/[0-9]+$/)?.[0];
+  }
+
+  return null;
+};
+
+export const stripNumberAtEnd = (str: string) => {
+  return str?.replace?.(getNumberStrAtEnd(str) || "", "");
+};

package/src/Timeline/TimelineEvent.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import dayjs from "dayjs";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+interface TimelineEventProps {
+  date: string | number | Date | dayjs.Dayjs;
+  children?: React.ReactNode;
+}
+
+function TimelineEvent({ date, children }: TimelineEventProps) {
+  return (
+    <div className="tg-timeline-event">
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center"
+        }}
+      >
+        <div className="tg-timeline-circle" />
+        {children}
+        <div
+          style={{ marginLeft: 5 }}
+          className={classNames(Classes.TEXT_SMALL, Classes.TEXT_MUTED)}
+        >
+          ({dayjs(date).fromNow()})
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TimelineEvent;

package/src/Timeline/index.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode, FC } from "react";
+import "./style.css";
+
+interface TimelineProps {
+  children: ReactNode;
+}
+
+const Timeline: FC<TimelineProps> = props => {
+  return (
+    <div className="tg-timeline">
+      {React.Children.count(props.children) > 1 && (
+        <div className="tg-timeline-line" />
+      )}
+      {props.children}
+    </div>
+  );
+};
+
+export { default as TimelineEvent } from "./TimelineEvent";
+
+export default Timeline;

package/src/index.js

@@ -35,7 +35,6 @@ export { default as PromptUnsavedChanges } from "./PromptUnsavedChanges";
 export { default as BlueprintError } from "./BlueprintError";
 export { default as DropdownButton } from "./DropdownButton";
 export { default as DialogFooter } from "./DialogFooter";
-export { default as adHoc } from "./utils/adHoc";
 export { default as IntentText } from "./IntentText";
 export { default as popoverOverflowModifiers } from "./utils/popoverOverflowModifiers";
 export * from "./utils/tgFormValues";

package/src/utils/browserUtils.ts

@@ -0,0 +1,3 @@
+export const isSafari = /^((?!chrome|android).)*safari/i.test(
+  navigator.userAgent
+);

package/src/utils/determineBlackOrWhiteTextColor.ts

@@ -0,0 +1,11 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import Color from "color";
+
+export default function determineBlackOrWhiteTextColor(c: string) {
+  try {
+    return Color(c).isLight() ? "#000000" : "#FFFFFF";
+  } catch (e) {
+    console.error("Error in color parsing:", e);
+    return "#000000"; // Fallback to black if color parsing fails
+  }
+}

package/src/utils/getTextFromEl.ts

@@ -0,0 +1,45 @@
+import React from "react";
+
+type Node = React.ReactElement<{ children?: Node[] | Node }> | string | number;
+
+const isReactElement = (
+  el: Node
+): el is React.ReactElement<{ children?: Node[] | Node }> => {
+  if (el) {
+    const newEl = el as React.ReactElement<{ children?: Node[] | Node }>;
+    if (newEl.props && newEl.props.children) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export default function getTextFromEl<T extends Node>(
+  el: T,
+  options: { lowerCase?: boolean } = {}
+): string {
+  const { lowerCase } = options;
+  if (React.isValidElement<{ children?: Node[] | Node }>(el)) {
+    return el && el.props && el.props.children
+      ? (Array.isArray(el.props.children)
+          ? el.props.children
+          : [el.props.children]
+        ).reduce((acc: string, child) => {
+          if (isReactElement(child)) {
+            acc += getTextFromEl(child);
+          } else if (typeof child === "string") {
+            if (lowerCase) {
+              acc += child.toLowerCase();
+            } else {
+              acc += child;
+            }
+          } else if (typeof child === "number") {
+            acc += child + "";
+          }
+          return acc;
+        }, "")
+      : "";
+  } else {
+    return el as string;
+  }
+}

package/src/utils/handlerHelpers.ts

@@ -0,0 +1,32 @@
+export const onEnterHelper = (
+  callback: (event: React.KeyboardEvent<Element>) => void
+) => ({
+  onKeyDown: (event: React.KeyboardEvent<Element>) => {
+    if (event.key === "Enter") {
+      callback(event);
+    }
+  }
+});
+
+export const onBlurHelper = (
+  callback: (event: React.FocusEvent<Element>) => void
+) => ({
+  onBlur: (event: React.FocusEvent<Element>) => {
+    callback(event);
+  }
+});
+
+export const onEnterOrBlurHelper = (
+  callback: (
+    event: React.KeyboardEvent<Element> | React.FocusEvent<Element>
+  ) => void
+) => ({
+  onKeyDown: function (event: React.KeyboardEvent<Element>) {
+    if (event.key === "Enter") {
+      callback(event);
+    }
+  },
+  onBlur: function (event: React.FocusEvent<Element>) {
+    callback(event);
+  }
+});

package/src/utils/hooks/index.ts

@@ -0,0 +1 @@
+export { useDeepEqualMemo } from "./useDeepEqualMemo";

package/src/utils/hooks/useDeepEqualMemo.ts

@@ -0,0 +1,10 @@
+import { isEqual } from "lodash-es";
+import { useRef } from "react";
+
+export const useDeepEqualMemo = (value: unknown) => {
+  const ref = useRef<unknown>();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+};

package/src/utils/hooks/useStableReference.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export const useStableReference = (value: unknown) => {
+  const ref = useRef<unknown>();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};

package/src/utils/hotkeyUtils.tsx

@@ -0,0 +1,155 @@
+import React, { useMemo } from "react";
+import { useHotkeys } from "@blueprintjs/core";
+import { startCase } from "lodash-es";
+
+type Out = {
+  combo: string;
+  label: string;
+  [key: string]: unknown;
+  global?: boolean;
+};
+type Hotkeys = {
+  [key: string]: string | [string, string, object] | Out;
+};
+
+// This has been mostly superseded by blueprint's KeyCombo component, but may
+// still be useful for cases where we need plain text
+export function comboToLabel(
+  def: string | { combo: string },
+  useSymbols = true
+) {
+  const combo = typeof def === "string" ? def : def.combo;
+
+  if (useSymbols) {
+    let parts = combo.replace("++", "+plus").split("+");
+    parts = parts.map(p =>
+      p in symbols ? symbols[p as keyof typeof symbols] : startCase(p) || p
+    );
+    return parts.join("");
+  } else {
+    return combo
+      .split("+")
+      .map(p => startCase(p) || p)
+      .join(" + ")
+      .replace("Meta", isMac ? "Cmd" : "Ctrl")
+      .replace("Mod", isMac ? "Cmd" : "Ctrl")
+      .replace("Alt", isMac ? "Option" : "Alt");
+  }
+}
+
+// HOF to get hotkey combos by id
+export const hotkeysById =
+  (hotkeys: Hotkeys, mode = "raw") =>
+  (id: string) => {
+    const def = getHotkeyProps(hotkeys[id]);
+    return (
+      def &&
+      (mode === "raw" ? def.combo : comboToLabel(def.combo, mode === "symbols"))
+    );
+  };
+
+// Translate shorthand array if needed
+export const getHotkeyProps = (
+  def: string | [string, string, object] | Out,
+  id?: string
+) => {
+  let out: Out;
+  if (typeof def === "string") {
+    out = { combo: def, label: def };
+  } else if (def instanceof Array) {
+    out = { combo: def[0], label: def[1], ...(def[2] || {}) };
+  } else {
+    out = def;
+  }
+  out.label = out.label || startCase(id);
+  return out;
+};
+
+/*
+ * HOC to add hotkey support to components. Use this instead of blueprint's one.
+ *
+ * Arguments:
+ * - hotkeySpec: either a named hotkey section previously registered, or an
+ *   object mapping command ids to hotkey definitions, where each hotkey can
+ *   be either:
+ *   - a string consisting in the key combo (e.g. 'ctrl+shift+x')
+ *   - an array holding the combo, label, and an object with any other props
+ *   - an object holding all props
+ * - handlers: an object mapping command ids to handler functions
+ * - options: an object that may specify the follownig options:
+ *   - functional: boolean indicating if the wrapped component will be a
+ *     functional stateless component instead of a class-based one
+ *
+ * Returns a function that can be invoked with a component class, or a
+ * stateless component function (if specified in the options) and returns
+ * the decorated class. It may also be invoked without arguments to generate a
+ * dummy ad-hoc component with no output.
+ *
+ */
+export const withHotkeys = (
+  hotkeys: Hotkeys,
+  handlers: { [key: string]: (e: KeyboardEvent) => void }
+) => {
+  return ({ children }: { children?: React.ReactElement } = {}) => {
+    const memoedHotkeys = useMemo(
+      () =>
+        Object.keys(hotkeys).map(id => {
+          const { ...props } = getHotkeyProps(hotkeys[id], id);
+          return {
+            key: id,
+            global: props.global !== false,
+            onKeyDown: function (e: KeyboardEvent) {
+              return handlers[id](e);
+            },
+            ...props
+          };
+        }),
+      []
+    );
+
+    const { handleKeyDown, handleKeyUp } = useHotkeys(memoedHotkeys);
+    const newProps = {
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    };
+    return children ? ( //tnr: if children are passed, we'll clone them with the new props
+      React.cloneElement(children, newProps)
+    ) : (
+      //if not, then we'll return a div that can be used
+      <div className="hotkeyHandler" {...newProps} />
+    );
+  };
+};
+
+const isMac = navigator.userAgent.includes("Mac OS X");
+
+const cmd = "⌘";
+const meta = "⌘";
+const ctrl = "⌃";
+
+// TODO maybe avoid using symbols by default when not on Mac?
+// Anyway, alternative 'Key + Key' description is provided as well
+const symbols = {
+  cmd,
+  meta,
+  ctrl,
+  alt: "⌥",
+  shift: "⇧",
+  esc: "␛", //'⎋',
+  enter: "⏎",
+  backspace: "⌫",
+  plus: "+",
+  tab: "⇥",
+  space: "␣",
+  capslock: "⇪",
+  pageup: "⇞",
+  pagedown: "⇟",
+  home: "↖",
+  end: "↘",
+  left: "←",
+  right: "→",
+  up: "↑",
+  down: "↓",
+  mod: isMac ? cmd : ctrl
+} as const;