torch-glare 2.4.4 → 2.5.0

package/apps/lib/components/DataViews/filters/RangeSliderWithInputs.tsx

@@ -1,165 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import * as Slider from "@radix-ui/react-slider";
-import { cn } from "../../../utils/cn";
-import type { FieldConfig, NumericRangeFilter } from "../types";
-import type { NumericExtremes } from "../../../utils/dataViews/rangeUtils";
-
-type Props = {
-  field: FieldConfig;
-  extremes: NumericExtremes;
-  step: number;
-  value: NumericRangeFilter | undefined;
-  onChange: (next: NumericRangeFilter) => void;
-};
-
-export function RangeSliderWithInputs({ field, extremes, step, value, onChange }: Props) {
-  const min = field.rangeMin ?? extremes.min;
-  const max = field.rangeMax ?? extremes.max;
-
-  const lo = value?.min ?? min;
-  const hi = value?.max ?? max;
-
-  const [loInput, setLoInput] = useState(formatForInput(lo, field));
-  const [hiInput, setHiInput] = useState(formatForInput(hi, field));
-
-  useEffect(() => {
-    setLoInput(formatForInput(lo, field));
-  }, [lo, field]);
-  useEffect(() => {
-    setHiInput(formatForInput(hi, field));
-  }, [hi, field]);
-
-  const commit = (rawLo: number, rawHi: number) => {
-    let nlo = clamp(rawLo, min, max);
-    let nhi = clamp(rawHi, min, max);
-    if (nlo > nhi) [nlo, nhi] = [nhi, nlo];
-    const atFloor = nlo === min;
-    const atCeil = nhi === max;
-    onChange({
-      kind: "number",
-      min: atFloor ? undefined : nlo,
-      max: atCeil ? undefined : nhi,
-    });
-  };
-
-  const handleSliderChange = (vals: number[]) => {
-    if (vals.length !== 2) return;
-    commit(vals[0], vals[1]);
-  };
-
-  const commitFromInputs = () => {
-    const nlo = parseFloat(loInput);
-    const nhi = parseFloat(hiInput);
-    commit(Number.isFinite(nlo) ? nlo : lo, Number.isFinite(nhi) ? nhi : hi);
-  };
-
-  const prefix = useMemo(() => prefixFor(field), [field]);
-  const suffix = useMemo(() => suffixFor(field), [field]);
-
-  return (
-    <div className="space-y-3">
-      <Slider.Root
-        className="relative flex items-center select-none touch-none w-full h-5"
-        min={min}
-        max={max}
-        step={step}
-        value={[lo, hi]}
-        onValueChange={handleSliderChange}
-        minStepsBetweenThumbs={0}
-      >
-        <Slider.Track className="bg-background-presentation-form-field-primary relative grow rounded-full h-1">
-          <Slider.Range className="absolute bg-content-presentation-action-primary rounded-full h-full" />
-        </Slider.Track>
-        <Slider.Thumb
-          aria-label="Minimum"
-          className="block w-4 h-4 bg-white border-2 border-content-presentation-action-primary rounded-full shadow hover:bg-background-presentation-body-overlay-primary focus:outline-none focus:ring-2 focus:ring-content-presentation-action-primary"
-        />
-        <Slider.Thumb
-          aria-label="Maximum"
-          className="block w-4 h-4 bg-white border-2 border-content-presentation-action-primary rounded-full shadow hover:bg-background-presentation-body-overlay-primary focus:outline-none focus:ring-2 focus:ring-content-presentation-action-primary"
-        />
-      </Slider.Root>
-
-      <div className="flex items-center gap-2">
-        <NumberCell
-          label="Min"
-          value={loInput}
-          onChange={setLoInput}
-          onCommit={commitFromInputs}
-          prefix={prefix}
-          suffix={suffix}
-        />
-        <span className="text-xs text-content-presentation-global-tertiary">–</span>
-        <NumberCell
-          label="Max"
-          value={hiInput}
-          onChange={setHiInput}
-          onCommit={commitFromInputs}
-          prefix={prefix}
-          suffix={suffix}
-        />
-      </div>
-    </div>
-  );
-}
-
-function NumberCell({
-  label,
-  value,
-  onChange,
-  onCommit,
-  prefix,
-  suffix,
-}: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  onCommit: () => void;
-  prefix?: string;
-  suffix?: string;
-}) {
-  return (
-    <label className="flex-1 flex items-center gap-1 text-xs bg-background-presentation-body-primary border border-border-presentation-global-primary rounded-md px-2 py-1.5 focus-within:border-content-presentation-action-primary">
-      <span className="sr-only">{label}</span>
-      {prefix && <span className="text-content-presentation-global-tertiary">{prefix}</span>}
-      <input
-        inputMode="decimal"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onCommit}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
-        }}
-        className={cn(
-          "w-full bg-transparent outline-none tabular-nums text-content-presentation-global-primary",
-        )}
-      />
-      {suffix && <span className="text-content-presentation-global-tertiary">{suffix}</span>}
-    </label>
-  );
-}
-
-function clamp(n: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, n));
-}
-
-function formatForInput(n: number, field: FieldConfig): string {
-  if (!Number.isFinite(n)) return "";
-  if (field.type === "star-rating") return n.toFixed(1);
-  if (Number.isInteger(n)) return String(n);
-  return String(n);
-}
-
-function prefixFor(field: FieldConfig): string | undefined {
-  if (field.type !== "currency") return undefined;
-  if (typeof field.currency === "string") return "$";
-  return field.currency?.symbol ?? "$";
-}
-
-function suffixFor(field: FieldConfig): string | undefined {
-  if (field.type === "progress-bar") return "%";
-  if (field.type === "star-rating") return "★";
-  return undefined;
-}

package/apps/lib/components/DataViews/tree/TreeDrawer.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import { Drawer } from "vaul";
-import { Menu, X } from "lucide-react";
-import type { ReactNode } from "react";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  children: ReactNode;
-};
-
-export function TreeDrawer({ open, onOpenChange, children }: Props) {
-  return (
-    <Drawer.Root open={open} onOpenChange={onOpenChange} direction="left">
-      <Drawer.Portal>
-        <Drawer.Overlay className="fixed inset-0 bg-black/40 z-40" />
-        <Drawer.Content className="fixed inset-y-0 left-0 z-50 w-72 bg-background-presentation-body-overlay-primary border-r border-border-presentation-global-primary outline-none flex flex-col">
-          <div className="flex items-center justify-between p-3 border-b border-border-presentation-global-primary">
-            <Drawer.Title className="text-sm font-semibold text-content-presentation-global-primary">
-              Tree
-            </Drawer.Title>
-            <button
-              type="button"
-              onClick={() => onOpenChange(false)}
-              aria-label="Close tree"
-              className="p-1 rounded text-content-presentation-global-tertiary hover:text-content-presentation-global-primary"
-            >
-              <X className="w-4 h-4" />
-            </button>
-          </div>
-          <div className="flex-1 overflow-y-auto p-2">{children}</div>
-        </Drawer.Content>
-      </Drawer.Portal>
-    </Drawer.Root>
-  );
-}
-
-export function TreeDrawerTrigger({ onClick }: { onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-label="Open tree"
-      className="inline-flex items-center justify-center h-8 w-8 rounded-md border border-border-presentation-global-primary text-content-presentation-global-secondary hover:text-content-presentation-global-primary"
-    >
-      <Menu className="w-4 h-4" />
-    </button>
-  );
-}

package/apps/lib/components/DataViews/tree/TreeSidebar.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import type { FieldConfig } from "../types";
-import type { TreeNode } from "../../../utils/dataViews/treeUtils";
-import { getByPath } from "../../../utils/dataViews/pathUtils";
-import { TreeFolder } from "../../TreeFolder";
-import type { TreeFolderMoveArgs, TreeFolderNode } from "../../TreeFolder";
-
-type Props = {
-  roots: TreeNode[];
-  expanded: Set<string>;
-  selectedId: string | null;
-  labelField: FieldConfig;
-  dndEnabled: boolean;
-  onToggle: (id: string) => void;
-  onSelect: (id: string) => void;
-  onMove?: (args: TreeFolderMoveArgs) => void;
-};
-
-function toFolderNode(node: TreeNode, labelField: FieldConfig): TreeFolderNode {
-  const labelValue = getByPath(node.record, labelField.path);
-  const name = labelValue == null ? node.id : String(labelValue);
-  const children = node.children.length
-    ? node.children.map((c) => toFolderNode(c, labelField))
-    : undefined;
-  return {
-    id: node.id,
-    name,
-    type: children ? "folder" : "file",
-    data: node.record,
-    children,
-  };
-}
-
-export function TreeSidebar({
-  roots,
-  expanded,
-  selectedId,
-  labelField,
-  dndEnabled,
-  onToggle,
-  onSelect,
-  onMove,
-}: Props) {
-  const folderData = useMemo(
-    () => roots.map((r) => toFolderNode(r, labelField)),
-    [roots, labelField],
-  );
-
-  const expandedIds = useMemo(() => Array.from(expanded), [expanded]);
-
-  return (
-    <TreeFolder
-      data={folderData}
-      selectedId={selectedId}
-      onSelectionChange={(id) => {
-        if (id) onSelect(id);
-      }}
-      expandedIds={expandedIds}
-      onExpandedChange={(next) => {
-        const before = new Set(expandedIds);
-        const after = new Set(next);
-        for (const id of after) if (!before.has(id)) onToggle(id);
-        for (const id of before) if (!after.has(id)) onToggle(id);
-      }}
-      dndEnabled={dndEnabled}
-      onMove={onMove}
-      showHeader={false}
-      showBreadcrumb={true}
-      highlightAncestors={true}
-    />
-  );
-}

package/apps/lib/hooks/useDataViewsState.ts

@@ -1,175 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import type {
-  DynamicRecord,
-  DynamicColumnConfig,
-  FieldConfig,
-  FilterState,
-  TreeConfig,
-  ViewConfig,
-  ViewType,
-  ViewVisibility,
-} from "../components/DataViews/types";
-import { defaultConfig } from "../components/DataViews/types";
-import { detectColumns, mergeColumns } from "../utils/dataViews/columnUtils";
-import { detectFields, mergeFields } from "../utils/dataViews/fieldUtils";
-import { autoDetectTreeShape, flattenAll } from "../utils/dataViews/treeUtils";
-
-export type UseDataViewsStateOptions = {
-  data?: DynamicRecord[];
-  fields?: FieldConfig[];
-  columns?: Partial<DynamicColumnConfig>[];
-  config?: Partial<ViewConfig>;
-  treeConfig?: TreeConfig;
-  views?: ViewVisibility;
-  filterState?: FilterState;
-  onFilterChange?: (filters: FilterState) => void;
-};
-
-export function useDataViewsState({
-  data,
-  fields,
-  columns,
-  config: initialConfig,
-  treeConfig,
-  views,
-  filterState: externalFilterState,
-  onFilterChange,
-}: UseDataViewsStateOptions) {
-  const [currentView, setCurrentView] = useState<ViewType>(
-    initialConfig?.defaultView || defaultConfig.defaultView,
-  );
-  const [config, setConfig] = useState<ViewConfig>({ ...defaultConfig, ...initialConfig });
-  const [items, setItems] = useState<DynamicRecord[]>(data || []);
-  const [internalFilterState, setInternalFilterState] = useState<FilterState>({});
-
-  useEffect(() => {
-    setItems(data || []);
-  }, [data]);
-
-  const activeFilterState = externalFilterState ?? internalFilterState;
-
-  const treeShape = useMemo(
-    () => autoDetectTreeShape(items, treeConfig ?? {}),
-    [items, treeConfig],
-  );
-  const treeAutoAvailable = !!treeConfig || !!treeShape.childrenField || !!treeShape.parentField;
-
-  const enabledViews = useMemo<Record<ViewType, boolean>>(() => {
-    const v = views ?? {};
-    return {
-      table: v.table ?? true,
-      kanban: v.kanban ?? true,
-      inbox: v.inbox ?? true,
-      tree: v.tree ?? treeAutoAvailable,
-    };
-  }, [views, treeAutoAvailable]);
-
-  useEffect(() => {
-    if (!enabledViews[currentView]) {
-      const fallback = (Object.entries(enabledViews) as Array<[ViewType, boolean]>).find(
-        ([, on]) => on,
-      )?.[0];
-      if (fallback) setCurrentView(fallback);
-    }
-  }, [enabledViews, currentView]);
-
-  const flatItems = useMemo<DynamicRecord[]>(() => {
-    const cf = treeConfig?.childrenField ?? treeShape.childrenField;
-    if (!cf) return items;
-    return flattenAll(items, cf);
-  }, [items, treeConfig?.childrenField, treeShape.childrenField]);
-
-  const detectedFields = useMemo<FieldConfig[]>(() => {
-    if (!flatItems || flatItems.length === 0) return [];
-    const detected = detectFields(flatItems);
-    return mergeFields(detected, fields);
-  }, [flatItems, fields]);
-
-  const resolvedFields = useMemo<FieldConfig[]>(() => {
-    if (detectedFields.length === 0) return detectedFields;
-    const overrides = new Map(config.tableColumns.map((c) => [c.id, c]));
-    return detectedFields
-      .map((f) => {
-        const o = overrides.get(f.path);
-        if (!o) return f;
-        return { ...f, visible: o.visible, order: o.order };
-      })
-      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-  }, [detectedFields, config.tableColumns]);
-
-  const detectedColumns = useMemo<DynamicColumnConfig[]>(() => {
-    if (!flatItems || flatItems.length === 0) return [];
-    const detected = detectColumns(flatItems);
-    return mergeColumns(detected, columns);
-  }, [flatItems, columns]);
-
-  useEffect(() => {
-    if (detectedFields.length === 0) return;
-    setConfig((prev) => {
-      const prevByPath = new Map(prev.tableColumns.map((c) => [c.id, c]));
-      const next: typeof prev.tableColumns = [];
-      let order = 0;
-      for (const f of detectedFields) {
-        if (f.type === "hidden") continue;
-        const existing = prevByPath.get(f.path);
-        next.push({
-          id: f.path,
-          label: f.label ?? f.path,
-          visible: existing?.visible ?? f.visible !== false,
-          order: existing?.order ?? order,
-        });
-        order++;
-        prevByPath.delete(f.path);
-      }
-      const stale = Array.from(prevByPath.values());
-      const carried = [...next, ...stale].slice(0, 100);
-      if (
-        carried.length === prev.tableColumns.length &&
-        carried.every((c, i) => {
-          const p = prev.tableColumns[i];
-          return (
-            p &&
-            p.id === c.id &&
-            p.label === c.label &&
-            p.visible === c.visible &&
-            p.order === c.order
-          );
-        })
-      ) {
-        return prev;
-      }
-      return { ...prev, tableColumns: carried };
-    });
-  }, [detectedFields]);
-
-  const handleConfigChange = (newConfig: Partial<ViewConfig>) => {
-    setConfig((prev) => ({ ...prev, ...newConfig }));
-  };
-
-  const handleDataUpdate = (updatedData: DynamicRecord[]) => {
-    setItems(updatedData);
-  };
-
-  const handleFilterChange = (newFilters: FilterState) => {
-    if (onFilterChange) onFilterChange(newFilters);
-    else setInternalFilterState(newFilters);
-  };
-
-  return {
-    items,
-    flatItems,
-    resolvedFields,
-    detectedColumns,
-    config,
-    setConfig: handleConfigChange,
-    currentView,
-    setCurrentView,
-    filterState: activeFilterState,
-    setFilterState: handleFilterChange,
-    onDataUpdate: handleDataUpdate,
-    treeShape,
-    enabledViews,
-  };
-}

package/apps/lib/utils/dataViews/columnUtils.ts

@@ -1,132 +0,0 @@
-import type { DynamicColumnConfig, DynamicRecord } from "../../components/DataViews/types";
-import { isPlainObject } from "./nestedDataUtils";
-
-export function detectColumns(data: DynamicRecord[]): DynamicColumnConfig[] {
-  if (!data || data.length === 0) {
-    return [];
-  }
-
-  const allKeys = new Set<string>();
-  data.forEach((item) => {
-    Object.keys(item).forEach((key) => allKeys.add(key));
-  });
-
-  const columns: DynamicColumnConfig[] = [];
-  let order = 0;
-
-  allKeys.forEach((key) => {
-    if (key.startsWith("_")) return;
-
-    const firstValue = data.find((item) => item[key] != null)?.[key];
-
-    if (isPlainObject(firstValue)) return;
-    if (Array.isArray(firstValue) && firstValue.length > 0 && isPlainObject(firstValue[0])) return;
-
-    const type = inferColumnType(key, firstValue);
-
-    columns.push({
-      id: key,
-      label: formatLabel(key),
-      visible: true,
-      order: order++,
-      type,
-    });
-  });
-
-  return columns
-    .sort((a, b) => {
-      if (a.id === "id") return -1;
-      if (b.id === "id") return 1;
-      return a.label.localeCompare(b.label);
-    })
-    .map((col, idx) => ({ ...col, order: idx }));
-}
-
-function inferColumnType(
-  key: string,
-  value: unknown,
-): "text" | "number" | "date" | "badge" | "array" | "boolean" {
-  if (key.toLowerCase().includes("date") || key.toLowerCase().includes("time")) {
-    return "date";
-  }
-  if (key.toLowerCase().includes("status") || key.toLowerCase().includes("priority")) {
-    return "badge";
-  }
-  if (key.toLowerCase().includes("tag") || key.toLowerCase().includes("label")) {
-    return "array";
-  }
-
-  if (value === null || value === undefined) {
-    return "text";
-  }
-
-  if (typeof value === "boolean") {
-    return "boolean";
-  }
-
-  if (typeof value === "number") {
-    return "number";
-  }
-
-  if (Array.isArray(value)) {
-    return "array";
-  }
-
-  if (typeof value === "string") {
-    if (!isNaN(Date.parse(value)) && /^\d{4}-\d{2}-\d{2}/.test(value)) {
-      return "date";
-    }
-    return "text";
-  }
-
-  return "text";
-}
-
-function formatLabel(key: string): string {
-  if (key.includes("_")) {
-    return key
-      .split("_")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ");
-  }
-
-  return key
-    .replace(/([A-Z])/g, " $1")
-    .replace(/^./, (str) => str.toUpperCase())
-    .trim();
-}
-
-export function mergeColumns(
-  detected: DynamicColumnConfig[],
-  custom?: Partial<DynamicColumnConfig>[],
-): DynamicColumnConfig[] {
-  if (!custom || custom.length === 0) {
-    return detected;
-  }
-
-  const merged = [...detected];
-  const customMap = new Map(custom.map((col) => [col.id, col]));
-
-  merged.forEach((col, idx) => {
-    const customCol = customMap.get(col.id);
-    if (customCol) {
-      merged[idx] = { ...col, ...customCol };
-      customMap.delete(col.id);
-    }
-  });
-
-  customMap.forEach((customCol) => {
-    if (customCol.id) {
-      merged.push({
-        id: customCol.id,
-        label: customCol.label || formatLabel(customCol.id),
-        visible: customCol.visible ?? true,
-        order: customCol.order ?? merged.length,
-        type: customCol.type || "text",
-        render: customCol.render,
-      });
-    }
-  });
-
-  return merged.sort((a, b) => a.order - b.order);
-}