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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.6-beta.25",
+  "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/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;

package/src/utils/isBeingCalledExcessively.ts

@@ -0,0 +1,37 @@
+const keyCount: { [key: string]: number | null } = {};
+const timeout: { [key: string]: NodeJS.Timeout | null } = {};
+
+// if this function is hit more than 20 times in a row in 2 seconds with the same uniqName then throw an error
+export const isBeingCalledExcessively = ({
+  uniqName
+}: {
+  uniqName: string;
+}) => {
+  if (process.env["NODE_ENV"] !== "development") {
+    return;
+  }
+  if (!uniqName) {
+    throw new Error("uniqName is required");
+  }
+  // Initialize the count if it doesn't exist
+  keyCount[uniqName] = keyCount[uniqName] || 0;
+  (keyCount[uniqName] as number)++;
+
+  // Only set the timeout if it doesn't exist already to ensure it runs exactly once every 2 seconds
+  if (!timeout[uniqName]) {
+    timeout[uniqName] = setTimeout(() => {
+      keyCount[uniqName] = 0;
+      timeout[uniqName] = null;
+    }, 2000);
+  }
+
+  if ((keyCount[uniqName] as number) > 20) {
+    keyCount[uniqName] = 0;
+    // Also clear the timeout when throwing an error
+    if (timeout[uniqName]) {
+      clearTimeout(timeout[uniqName]);
+      timeout[uniqName] = null;
+    }
+    throw new Error(`isBeingCalledExcessively: ${uniqName}`);
+  }
+};

package/utils/browserUtils.d.ts

@@ -1 +1 @@
-export const isSafari: boolean;
+export declare const isSafari: boolean;

package/utils/determineBlackOrWhiteTextColor.d.ts

@@ -1 +1 @@
-export default function determineBlackOrWhiteTextColor(c: any): "#000000" | "#FFFFFF";
+export default function determineBlackOrWhiteTextColor(c: string): "#000000" | "#FFFFFF";

package/utils/getTextFromEl.d.ts

@@ -1 +1,8 @@
-export default function getTextFromEl(el: any, options?: {}): any;
+import { default as React } from '../../../../node_modules/react';
+type Node = React.ReactElement<{
+    children?: Node[] | Node;
+}> | string | number;
+export default function getTextFromEl<T extends Node>(el: T, options?: {
+    lowerCase?: boolean;
+}): string;
+export {};

package/utils/handlerHelpers.d.ts

@@ -1,10 +1,10 @@
-export function onEnterHelper(callback: any): {
-    onKeyDown: (event: any) => void;
+export declare const onEnterHelper: (callback: (event: React.KeyboardEvent<Element>) => void) => {
+    onKeyDown: (event: React.KeyboardEvent<Element>) => void;
 };
-export function onBlurHelper(callback: any): {
-    onBlur: (event: any) => void;
+export declare const onBlurHelper: (callback: (event: React.FocusEvent<Element>) => void) => {
+    onBlur: (event: React.FocusEvent<Element>) => void;
 };
-export function onEnterOrBlurHelper(callback: any): {
-    onKeyDown: (event: any) => void;
-    onBlur: (event: any) => void;
+export declare const onEnterOrBlurHelper: (callback: (event: React.KeyboardEvent<Element> | React.FocusEvent<Element>) => void) => {
+    onKeyDown: (event: React.KeyboardEvent<Element>) => void;
+    onBlur: (event: React.FocusEvent<Element>) => void;
 };

package/utils/hooks/useDeepEqualMemo.d.ts

@@ -1,2 +1 @@
-export function useDeepEqualMemo(value: any): undefined;
-export function useDeepEqualEffect(effect: any, deps: any): void;
+export declare const useDeepEqualMemo: (value: unknown) => unknown;

package/utils/hooks/useStableReference.d.ts

@@ -1 +1 @@
-export function useStableReference(value: any): import('../../../../../node_modules/react').MutableRefObject<undefined>;
+export declare const useStableReference: (value: unknown) => import('../../../../../node_modules/react').MutableRefObject<unknown>;

package/utils/hotkeyUtils.d.ts

@@ -1,4 +1,21 @@
-export function comboToLabel(def: any, useSymbols?: boolean): any;
-export function hotkeysById(hotkeys: any, mode?: string): (id: any) => any;
-export function getHotkeyProps(def: any, id: any): any;
-export function withHotkeys(hotkeys: any, handlers: any): ({ children }?: {}) => import("react/jsx-runtime").JSX.Element;
+import { default as React } from '../../../../node_modules/react';
+type Out = {
+    combo: string;
+    label: string;
+    [key: string]: unknown;
+    global?: boolean;
+};
+type Hotkeys = {
+    [key: string]: string | [string, string, object] | Out;
+};
+export declare function comboToLabel(def: string | {
+    combo: string;
+}, useSymbols?: boolean): string;
+export declare const hotkeysById: (hotkeys: Hotkeys, mode?: string) => (id: string) => string;
+export declare const getHotkeyProps: (def: string | [string, string, object] | Out, id?: string) => Out;
+export declare const withHotkeys: (hotkeys: Hotkeys, handlers: {
+    [key: string]: (e: KeyboardEvent) => void;
+}) => ({ children }?: {
+    children?: React.ReactElement;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/utils/isBeingCalledExcessively.d.ts

@@ -1,3 +1,3 @@
-export function isBeingCalledExcessively({ uniqName }: {
-    uniqName: any;
-}): void;
+export declare const isBeingCalledExcessively: ({ uniqName }: {
+    uniqName: string;
+}) => void;