@datarecce/ui 0.1.40 → 0.2.0

package/recce-source/js/src/lib/mergeKeys.ts

@@ -1,86 +0,0 @@
-export function mergeKeys(_base: string[], _curr: string[]) {
-  // Merge keys from base, target tables. Unlike default union, it preserves the order for column rename, added, removed.
-  const base = [..._base];
-  const curr = [..._curr];
-
-  const results: string[] = [];
-  while (base.length > 0 && curr.length > 0) {
-    if (results.includes(base[0])) {
-      base.shift();
-    } else if (results.includes(curr[0])) {
-      curr.shift();
-    } else if (base[0] === curr[0]) {
-      results.push(base[0]);
-      base.shift();
-      curr.shift();
-    } else if (curr.includes(base[0])) {
-      const idx = curr.indexOf(base[0]);
-      for (let i = 0; i < idx; i++) {
-        if (!results.includes(curr[i])) {
-          results.push(curr[i]);
-        }
-      }
-      results.push(base[0]);
-      base.shift();
-      curr.splice(0, idx + 1);
-    } else {
-      results.push(base[0]);
-      base.shift();
-    }
-  }
-
-  base.forEach((key) => {
-    if (!results.includes(key)) {
-      results.push(key);
-    }
-  });
-
-  curr.forEach((key) => {
-    if (!results.includes(key)) {
-      results.push(key);
-    }
-  });
-
-  return results;
-}
-
-type MergeStatus = "added" | "removed" | "reordered" | undefined;
-
-export function mergeKeysWithStatus(
-  _base: string[],
-  _curr: string[],
-): Record<string, MergeStatus> {
-  const merged = mergeKeys(_base, _curr);
-  const result: ReturnType<typeof mergeKeysWithStatus> = {};
-
-  for (const item of merged) {
-    if (!_base.includes(item)) {
-      result[item] = "added";
-    } else if (!_curr.includes(item)) {
-      result[item] = "removed";
-    } else {
-      result[item] = undefined;
-    }
-  }
-
-  // reorder case
-  const baseIndexMap: Record<string, number | undefined> = {};
-  _base.forEach((item, index) => {
-    baseIndexMap[item] = index;
-  });
-  let last = -1;
-  for (const item of merged) {
-    const curr = baseIndexMap[item];
-    if (curr == null) {
-      continue;
-    }
-
-    if (curr > last) {
-      last = curr;
-    } else {
-      result[item] = "reordered";
-    }
-  }
-
-  return result;
-}

package/recce-source/js/src/lib/result/ResultErrorFallback.tsx

@@ -1,9 +0,0 @@
-import MuiAlert from "@mui/material/Alert";
-import { FallbackRender } from "@sentry/react";
-import * as React from "react";
-
-const ResultErrorFallback: FallbackRender = (errorData) => {
-  return <MuiAlert severity="error">{String(errorData.error)}</MuiAlert>;
-};
-
-export default ResultErrorFallback;

package/recce-source/js/src/lib/utils/formatTime.ts

@@ -1,84 +0,0 @@
-/**
- * Time formatting utilities for idle timeout display
- */
-
-export type TimeFormatStyle = "compact" | "verbose";
-
-interface TimeComponents {
-  hours: number;
-  minutes: number;
-  seconds: number;
-}
-
-/**
- * Break down seconds into hours, minutes, seconds
- */
-function getTimeComponents(totalSeconds: number): TimeComponents {
-  const seconds = Math.floor(totalSeconds);
-  return {
-    hours: Math.floor(seconds / 3600),
-    minutes: Math.floor((seconds % 3600) / 60),
-    seconds: seconds % 60,
-  };
-}
-
-/**
- * Format time in compact style (MM:SS or HH:MM:SS)
- * Used for countdown badges where space is limited
- */
-function formatCompact({ hours, minutes, seconds }: TimeComponents): string {
-  if (hours > 0) {
-    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-  }
-  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-}
-
-/**
- * Format time in verbose style (human-readable)
- * Used for messages where clarity is more important than brevity
- *
- * Examples:
- * - Less than 1 minute: "30 seconds"
- * - Exact minutes: "5 mins"
- * - Minutes with seconds: "2 mins 30 seconds"
- * - With hours: "1 hour 30 mins"
- */
-function formatVerbose({ hours, minutes, seconds }: TimeComponents): string {
-  const parts: string[] = [];
-
-  // Add hours if present
-  if (hours > 0) {
-    parts.push(`${hours} hour${hours !== 1 ? "s" : ""}`);
-  }
-
-  // Add minutes if present (or if hours present and minutes > 0)
-  if (minutes > 0) {
-    parts.push(`${minutes} min${minutes !== 1 ? "s" : ""}`);
-  }
-
-  // Add seconds only if no hours (keep message concise for long durations)
-  // or if it's the only component
-  if (hours === 0 && (parts.length === 0 || seconds > 0)) {
-    parts.push(`${seconds} second${seconds !== 1 ? "s" : ""}`);
-  }
-
-  return parts.join(" ");
-}
-
-/**
- * Format seconds into human-readable time string
- *
- * @param totalSeconds - Total seconds to format
- * @param style - "compact" for MM:SS, "verbose" for human-readable
- */
-export function formatDuration(
-  totalSeconds: number,
-  style: TimeFormatStyle = "verbose",
-): string {
-  const components = getTimeComponents(totalSeconds);
-
-  if (style === "compact") {
-    return formatCompact(components);
-  }
-  return formatVerbose(components);
-}

package/recce-source/js/src/lib/utils/urls.ts

@@ -1,16 +0,0 @@
-import { RECCE_SUPPORT_CALENDAR_URL } from "@/constants/urls";
-import { RecceInstanceInfo } from "@/lib/api/instanceInfo";
-
-/**
- * Generate the settings URL based on instance info
- * @param instanceInfo - Recce instance information containing web_url and organization_name
- * @returns Absolute URL to settings page or fallback to calendar booking
- */
-export function getSettingsUrl(instanceInfo?: RecceInstanceInfo): string {
-  if (instanceInfo?.organization_name && instanceInfo.web_url) {
-    // Use absolute URL from Recce Cloud
-    return `${instanceInfo.web_url}/organizations/${instanceInfo.organization_name}/settings`;
-  }
-  // Fallback to calendar booking if not in cloud environment
-  return RECCE_SUPPORT_CALENDAR_URL;
-}

package/recce-source/js/src/utils/DropdownValuesInput.tsx

@@ -1,297 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Chip from "@mui/material/Chip";
-import Divider from "@mui/material/Divider";
-import InputBase from "@mui/material/InputBase";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import MuiTooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import _ from "lodash";
-import React, { type MouseEvent, useRef, useState } from "react";
-
-export interface DropdownValuesInputProps {
-  unitName: string;
-  suggestionList?: string[];
-  defaultValues?: string[];
-  onValuesChange: (values: string[]) => void;
-  className?: string;
-  size?: "2xs" | "xs" | "sm" | "md" | "lg";
-  width?: string | number;
-  placeholder?: string;
-  disabled?: boolean;
-}
-
-export const DropdownValuesInput = (props: DropdownValuesInputProps) => {
-  const { defaultValues, suggestionList, onValuesChange, className } = props;
-  const [values, setValues] = useState<string[]>(defaultValues ?? []);
-  const [filter, setFilter] = useState<string>("");
-  const [isTyping, setIsTyping] = useState<boolean>(false);
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const open = Boolean(anchorEl);
-
-  const showNumberOfValuesSelected = (tags: string[]) => {
-    if (tags.length > 1) {
-      return `${tags.length} ${props.unitName}s selected`;
-    } else if (tags.length === 1) {
-      return tags[0];
-    }
-    return "";
-  };
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-    // Focus input after menu opens
-    setTimeout(() => inputRef.current?.focus(), 100);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-    setIsTyping(false);
-  };
-
-  const handleSelect = (value: string) => {
-    if (!values.includes(value)) {
-      setFilter("");
-      setValues([...values, value]);
-      onValuesChange([...values, value]);
-    }
-  };
-
-  const handleClear = () => {
-    setFilter("");
-    setValues([]);
-    onValuesChange([]);
-  };
-
-  const handleRemoveValue = (value: string) => {
-    setValues(values.filter((v) => v !== value));
-    onValuesChange(values.filter((v) => v !== value));
-  };
-
-  // Filter the suggestion list without case sensitivity based on the current input
-  const lowerCaseFilter = filter.toLowerCase();
-  const filteredList =
-    suggestionList
-      ?.filter(
-        (value) =>
-          lowerCaseFilter === "" ||
-          value.toLowerCase().includes(lowerCaseFilter),
-      )
-      .filter((value) => !values.includes(value)) ?? [];
-  const limit = 10;
-
-  // Size mapping for font sizes
-  const getFontSize = () => {
-    switch (props.size) {
-      case "2xs":
-        return "0.625rem";
-      case "xs":
-        return "0.75rem";
-      case "sm":
-        return "0.875rem";
-      default:
-        return "0.875rem";
-    }
-  };
-
-  const getHeight = () => {
-    switch (props.size) {
-      case "2xs":
-        return 24;
-      case "xs":
-        return 28;
-      case "sm":
-        return 32;
-      default:
-        return 36;
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        width: props.width,
-      }}
-      className={className}
-    >
-      <Button
-        variant="outlined"
-        color="neutral"
-        size="small"
-        onClick={handleClick}
-        disabled={props.disabled}
-        sx={{
-          width: "100%",
-          height: getHeight(),
-          justifyContent: "space-between",
-          textTransform: "none",
-          fontSize: getFontSize(),
-          fontWeight: "normal",
-          px: 1,
-        }}
-      >
-        <Typography
-          component="span"
-          sx={{
-            fontSize: getFontSize(),
-            color: values.length > 0 ? "text.primary" : "text.secondary",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {showNumberOfValuesSelected(values) || props.placeholder || ""}
-        </Typography>
-        {values.length > 0 && (
-          <Typography
-            component="span"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleClear();
-            }}
-            sx={{
-              fontSize: getFontSize(),
-              color: "primary.main",
-              cursor: "pointer",
-              ml: 1,
-              "&:hover": { textDecoration: "underline" },
-            }}
-          >
-            Clear
-          </Typography>
-        )}
-      </Button>
-
-      <Menu
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        slotProps={{
-          paper: {
-            sx: {
-              width: props.width,
-              fontSize: getFontSize(),
-            },
-          },
-        }}
-      >
-        {/* Input Filter & Show Tags */}
-        <Box sx={{ px: 0.5, py: 0.5 }}>
-          <Box
-            sx={{
-              border: "1px solid",
-              borderColor: "divider",
-              borderRadius: 1,
-              p: 0.5,
-              display: "flex",
-              flexWrap: "wrap",
-              gap: 0.5,
-              alignItems: "center",
-            }}
-            className="no-track-pii-safe"
-          >
-            {values.map((value) => (
-              <Chip
-                key={value}
-                label={value}
-                size="small"
-                onDelete={() => handleRemoveValue(value)}
-                sx={{ height: 22, fontSize: getFontSize() }}
-              />
-            ))}
-            <InputBase
-              inputRef={inputRef}
-              placeholder="Filter or add custom keys"
-              value={filter}
-              onChange={(e) => {
-                setFilter(e.target.value);
-                setIsTyping(true);
-              }}
-              onKeyDown={(e) => {
-                // Stop propagation to prevent MUI Menu's typeahead navigation
-                // from intercepting key presses (except Escape to close menu)
-                if (e.key !== "Escape") {
-                  e.stopPropagation();
-                }
-
-                const target = e.target as HTMLInputElement;
-                const newText = target.value.trim().replace(",", "");
-                switch (e.key) {
-                  case ",":
-                  case "Enter":
-                    e.preventDefault();
-                    if (newText) {
-                      handleSelect(newText);
-                      setFilter("");
-                    }
-                    break;
-                  case "Backspace":
-                    if (target.value === "" && values.length > 0) {
-                      setValues(values.slice(0, -1));
-                      onValuesChange(values.slice(0, -1));
-                    }
-                    break;
-                  default:
-                    break;
-                }
-              }}
-              onBlur={() => {
-                if (inputRef.current && isTyping) {
-                  inputRef.current.focus();
-                }
-              }}
-              sx={{
-                flex: 1,
-                minWidth: 120,
-                fontSize: getFontSize(),
-                "& input": {
-                  p: 0.5,
-                },
-              }}
-            />
-          </Box>
-        </Box>
-
-        <Divider />
-
-        {/* Suggestion List */}
-        {filter !== "" && !suggestionList?.includes(filter) && (
-          <MenuItem
-            onClick={() => {
-              handleSelect(filter);
-              setIsTyping(false);
-            }}
-            sx={{ fontSize: getFontSize() }}
-          >
-            Add &apos;{filter}&apos; to the list
-          </MenuItem>
-        )}
-        {filteredList.slice(0, limit).map((value, cid) => (
-          <MenuItem
-            key={_.uniqueId(`option-${cid}`)}
-            onClick={() => {
-              handleSelect(value);
-            }}
-            sx={{ fontSize: getFontSize() }}
-          >
-            {value}
-          </MenuItem>
-        ))}
-        {filteredList.length > limit && (
-          <MuiTooltip
-            title="Please use filter to find more items"
-            placement="top"
-          >
-            <Box px={1.5} py={0.5} color="text.secondary" fontSize="8pt">
-              and {filteredList.length - limit} more items...
-            </Box>
-          </MuiTooltip>
-        )}
-      </Menu>
-    </Box>
-  );
-};