torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/DataViews/SettingsPanel.tsx

@@ -1,25 +1,21 @@
-"use client"
+"use client";
 
-import { useMemo, useState } from "react"
-import { X, GripVertical, ArrowUp, ArrowDown, Minus } from "lucide-react"
-import type {
-  ViewConfig,
-  ViewType,
-  FieldConfig,
-} from "./types"
-import { Button } from "../Button"
-import { Switch } from "../Switch"
-import { Divider } from "../Divider"
-import { Label } from "../Label"
-import { RadioGroup, Radio } from "../Radio"
+import { useMemo, useState } from "react";
+import { X, GripVertical, ArrowUp, ArrowDown, Minus } from "lucide-react";
+import type { ViewConfig, ViewType, FieldConfig } from "./types";
+import { Button } from "../Button";
+import { Switch } from "../Switch";
+import { Divider } from "../Divider";
+import { Label } from "../Label";
+import { RadioGroup, Radio } from "../Radio";
 
 type SettingsPanelProps = {
-  config: ViewConfig
-  onConfigChange: (config: Partial<ViewConfig>) => void
-  onClose: () => void
-  currentView: ViewType
-  fields: FieldConfig[]
-}
+  config: ViewConfig;
+  onConfigChange: (config: Partial<ViewConfig>) => void;
+  onClose: () => void;
+  currentView: ViewType;
+  fields: FieldConfig[];
+};
 
 export function SettingsPanel({
   config,
@@ -28,58 +24,49 @@ export function SettingsPanel({
   currentView,
   fields,
 }: SettingsPanelProps) {
-  const visibleFields = useMemo(
-    () => fields.filter((f) => f.type !== "hidden"),
-    [fields],
-  )
+  const visibleFields = useMemo(() => fields.filter((f) => f.type !== "hidden"), [fields]);
 
-  const groupableFields = useMemo(
-    () => fields.filter((f) => f.type === "enum-badge"),
-    [fields],
-  )
+  const groupableFields = useMemo(() => fields.filter((f) => f.type === "enum-badge"), [fields]);
 
-  const visiblePaths = useMemo(
-    () => new Set(visibleFields.map((f) => f.path)),
-    [visibleFields],
-  )
+  const visiblePaths = useMemo(() => new Set(visibleFields.map((f) => f.path)), [visibleFields]);
   const fieldByPath = useMemo(
     () => new Map(visibleFields.map((f) => [f.path, f])),
     [visibleFields],
-  )
+  );
   const orderedColumns = useMemo(
     () =>
       [...config.tableColumns]
         .filter((c) => visiblePaths.has(c.id))
         .sort((a, b) => a.order - b.order),
     [config.tableColumns, visiblePaths],
-  )
+  );
 
   const toggleColumnVisibility = (path: string) => {
     const next = config.tableColumns.map((c) =>
       c.id === path ? { ...c, visible: !c.visible } : c,
-    )
-    onConfigChange({ tableColumns: next })
-  }
+    );
+    onConfigChange({ tableColumns: next });
+  };
 
-  const [dragPath, setDragPath] = useState<string | null>(null)
-  const [dragOverPath, setDragOverPath] = useState<string | null>(null)
+  const [dragPath, setDragPath] = useState<string | null>(null);
+  const [dragOverPath, setDragOverPath] = useState<string | null>(null);
 
   const reorderColumn = (sourcePath: string, targetPath: string) => {
-    if (sourcePath === targetPath) return
-    const ids = orderedColumns.map((c) => c.id)
-    const from = ids.indexOf(sourcePath)
-    const to = ids.indexOf(targetPath)
-    if (from === -1 || to === -1) return
-    const reordered = [...ids]
-    const [moved] = reordered.splice(from, 1)
-    reordered.splice(to, 0, moved)
-    const orderByPath = new Map(reordered.map((id, i) => [id, i]))
+    if (sourcePath === targetPath) return;
+    const ids = orderedColumns.map((c) => c.id);
+    const from = ids.indexOf(sourcePath);
+    const to = ids.indexOf(targetPath);
+    if (from === -1 || to === -1) return;
+    const reordered = [...ids];
+    const [moved] = reordered.splice(from, 1);
+    reordered.splice(to, 0, moved);
+    const orderByPath = new Map(reordered.map((id, i) => [id, i]));
     const next = config.tableColumns.map((c) => {
-      const newOrder = orderByPath.get(c.id)
-      return newOrder == null ? c : { ...c, order: newOrder }
-    })
-    onConfigChange({ tableColumns: next })
-  }
+      const newOrder = orderByPath.get(c.id);
+      return newOrder == null ? c : { ...c, order: newOrder };
+    });
+    onConfigChange({ tableColumns: next });
+  };
 
   return (
     <div className="w-80 border-l border-border-presentation-global-primary bg-background-presentation-body-overlay-primary overflow-y-auto">
@@ -110,44 +97,48 @@ export function SettingsPanel({
         {currentView === "table" && (
           <>
             <div className="space-y-3">
-              <h3 className="text-sm font-medium text-content-presentation-global-primary">Table Columns</h3>
+              <h3 className="text-sm font-medium text-content-presentation-global-primary">
+                Table Columns
+              </h3>
               <p className="text-xs text-content-presentation-global-tertiary">
                 Show or hide columns in table view
               </p>
               {orderedColumns.length === 0 ? (
-                <p className="text-xs text-content-presentation-global-tertiary">No fields detected.</p>
+                <p className="text-xs text-content-presentation-global-tertiary">
+                  No fields detected.
+                </p>
               ) : (
                 <div className="space-y-2">
                   {orderedColumns.map((col) => {
-                    const field = fieldByPath.get(col.id)
-                    const isDragging = dragPath === col.id
-                    const isDropTarget = dragOverPath === col.id && dragPath !== col.id
+                    const field = fieldByPath.get(col.id);
+                    const isDragging = dragPath === col.id;
+                    const isDropTarget = dragOverPath === col.id && dragPath !== col.id;
                     return (
                       <div
                         key={col.id}
                         draggable
                         onDragStart={(e) => {
-                          setDragPath(col.id)
-                          e.dataTransfer.effectAllowed = "move"
-                          e.dataTransfer.setData("text/plain", col.id)
+                          setDragPath(col.id);
+                          e.dataTransfer.effectAllowed = "move";
+                          e.dataTransfer.setData("text/plain", col.id);
                         }}
                         onDragOver={(e) => {
-                          e.preventDefault()
-                          e.dataTransfer.dropEffect = "move"
-                          if (dragOverPath !== col.id) setDragOverPath(col.id)
+                          e.preventDefault();
+                          e.dataTransfer.dropEffect = "move";
+                          if (dragOverPath !== col.id) setDragOverPath(col.id);
                         }}
                         onDragLeave={() => {
-                          if (dragOverPath === col.id) setDragOverPath(null)
+                          if (dragOverPath === col.id) setDragOverPath(null);
                         }}
                         onDrop={(e) => {
-                          e.preventDefault()
-                          if (dragPath) reorderColumn(dragPath, col.id)
-                          setDragPath(null)
-                          setDragOverPath(null)
+                          e.preventDefault();
+                          if (dragPath) reorderColumn(dragPath, col.id);
+                          setDragPath(null);
+                          setDragOverPath(null);
                         }}
                         onDragEnd={() => {
-                          setDragPath(null)
-                          setDragOverPath(null)
+                          setDragPath(null);
+                          setDragOverPath(null);
                         }}
                         className={
                           "flex items-center gap-2 rounded-lg border p-2 cursor-grab active:cursor-grabbing transition-colors " +
@@ -167,7 +158,7 @@ export function SettingsPanel({
                           onCheckedChange={() => toggleColumnVisibility(col.id)}
                         />
                       </div>
-                    )
+                    );
                   })}
                 </div>
               )}
@@ -179,11 +170,16 @@ export function SettingsPanel({
         {currentView === "kanban" && (
           <>
             <div className="space-y-3">
-              <h3 className="text-sm font-medium text-content-presentation-global-primary">Kanban Grouping</h3>
-              <p className="text-xs text-content-presentation-global-tertiary">Group cards by field</p>
+              <h3 className="text-sm font-medium text-content-presentation-global-primary">
+                Kanban Grouping
+              </h3>
+              <p className="text-xs text-content-presentation-global-tertiary">
+                Group cards by field
+              </p>
               {groupableFields.length === 0 ? (
                 <p className="text-xs text-content-presentation-global-tertiary">
-                  No groupable fields detected. Declare a field with type "enum-badge" to enable grouping.
+                  No groupable fields detected. Declare a field with type &quot;enum-badge&quot; to
+                  enable grouping.
                 </p>
               ) : (
                 <RadioGroup
@@ -206,7 +202,9 @@ export function SettingsPanel({
         {currentView === "inbox" && (
           <>
             <div className="space-y-3">
-              <h3 className="text-sm font-medium text-content-presentation-global-primary">Inbox Layout</h3>
+              <h3 className="text-sm font-medium text-content-presentation-global-primary">
+                Inbox Layout
+              </h3>
               <div className="flex items-center justify-between">
                 <Label htmlFor="preview-pane" className="text-sm">
                   Show Preview Pane
@@ -230,21 +228,17 @@ export function SettingsPanel({
             </p>
             <div className="space-y-2">
               {orderedColumns.map((col) => {
-                const field = fieldByPath.get(col.id)
-                const isActive = config.sortBy === col.id
-                const dir: "asc" | "desc" | "none" = isActive ? config.sortOrder : "none"
+                const field = fieldByPath.get(col.id);
+                const isActive = config.sortBy === col.id;
+                const dir: "asc" | "desc" | "none" = isActive ? config.sortOrder : "none";
                 const setDir = (next: "asc" | "desc" | "none") => {
                   if (next === "none") {
-                    onConfigChange({ sortBy: "" })
+                    onConfigChange({ sortBy: "" });
                   } else {
-                    onConfigChange({ sortBy: col.id, sortOrder: next })
+                    onConfigChange({ sortBy: col.id, sortOrder: next });
                   }
-                }
-                const btn = (
-                  mode: "none" | "asc" | "desc",
-                  Icon: typeof Minus,
-                  label: string,
-                ) => (
+                };
+                const btn = (mode: "none" | "asc" | "desc", Icon: typeof Minus, label: string) => (
                   <button
                     type="button"
                     aria-label={`${label} ${col.label || col.id}`}
@@ -259,7 +253,7 @@ export function SettingsPanel({
                   >
                     <Icon className="h-3.5 w-3.5" />
                   </button>
-                )
+                );
                 return (
                   <div
                     key={col.id}
@@ -274,12 +268,12 @@ export function SettingsPanel({
                       {btn("desc", ArrowDown, "Sort descending")}
                     </div>
                   </div>
-                )
+                );
               })}
             </div>
           </div>
         )}
       </div>
     </div>
-  )
+  );
 }

package/apps/lib/components/DataViews/TableView.tsx

@@ -22,10 +22,7 @@ import {
   TableCell,
   TableCheckbox,
 } from "../Table";
-import {
-  getByPath,
-  matchesFilterValues,
-} from "../../utils/dataViews/pathUtils";
+import { getByPath, matchesFilterValues } from "../../utils/dataViews/pathUtils";
 import { renderField } from "./fieldRenderers";
 import { visibleFields } from "../../utils/dataViews/fieldUtils";
 import { useIsMobile } from "../../hooks/useIsMobile";
@@ -144,9 +141,7 @@ export function TableView({
                     <TableHead
                       key={field.path}
                       size="M"
-                      sortType={
-                        sortPath === field.path ? sortDirection : undefined
-                      }
+                      sortType={sortPath === field.path ? sortDirection : undefined}
                       onSort={() => handleSort(field.path)}
                     >
                       {field.label}
@@ -156,7 +151,7 @@ export function TableView({
               </TableHeader>
               <TableBody>
                 {filteredAndSortedData.map((item, idx) => (
-                  <TableRow key={item.id ?? idx}>
+                  <TableRow key={(item.id ?? idx) as string | number}>
                     <TableCell isDummy className="w-12">
                       <TableCheckbox id={`row-${item.id ?? idx}`} />
                     </TableCell>
@@ -168,11 +163,7 @@ export function TableView({
                             post-mount column reflow repaints cleanly instead
                             of leaving a ghosted/doubled badge frame. */}
                         <span className="isolate inline-flex transform-gpu">
-                          {renderField(
-                            getByPath(item, field.path),
-                            field,
-                            item,
-                          )}
+                          {renderField(getByPath(item, field.path), field, item)}
                         </span>
                       </TableCell>
                     ))}
@@ -185,7 +176,7 @@ export function TableView({
           <div className="flex-1 overflow-auto">
             <div className="grid gap-3">
               {filteredAndSortedData.map((item, idx) => (
-                <Card key={item.id ?? idx} className="overflow-hidden">
+                <Card key={(item.id ?? idx) as string | number} className="overflow-hidden">
                   <CardHeader className="pb-3">
                     <div className="flex items-start justify-between gap-3">
                       <div className="flex items-start gap-3 flex-1">
@@ -193,9 +184,7 @@ export function TableView({
                         <div className="flex-1">
                           {displayFields[0] && (
                             <p className="font-medium">
-                              {String(
-                                getByPath(item, displayFields[0].path) ?? "",
-                              )}
+                              {String(getByPath(item, displayFields[0].path) ?? "")}
                             </p>
                           )}
                         </div>
@@ -204,20 +193,11 @@ export function TableView({
                   </CardHeader>
                   <CardContent className="space-y-2 pt-0">
                     {displayFields.slice(1).map((field) => (
-                      <div
-                        key={field.path}
-                        className="flex items-center justify-between text-sm"
-                      >
+                      <div key={field.path} className="flex items-center justify-between text-sm">
                         <span className="text-content-presentation-global-tertiary">
                           {field.label}:
                         </span>
-                        <span>
-                          {renderField(
-                            getByPath(item, field.path),
-                            field,
-                            item,
-                          )}
-                        </span>
+                        <span>{renderField(getByPath(item, field.path), field, item)}</span>
                       </div>
                     ))}
                   </CardContent>

package/apps/lib/components/DataViews/TreeView.tsx

@@ -21,10 +21,7 @@ import {
   pruneTree,
   type TreeNode,
 } from "../../utils/dataViews/treeUtils";
-import {
-  getByPath,
-  matchesFilterValues,
-} from "../../utils/dataViews/pathUtils";
+import { getByPath, matchesFilterValues } from "../../utils/dataViews/pathUtils";
 import { visibleFields } from "../../utils/dataViews/fieldUtils";
 import { renderField } from "./fieldRenderers";
 import { useIsMobile } from "../../hooks/useIsMobile";
@@ -85,22 +82,14 @@ export function TreeView({
     return display[0] ?? { path: resolvedTree.idField, type: "text" };
   }, [resolvedTree, fields, display]);
 
-  const fullForest = useMemo(
-    () => buildTree(data, resolvedTree),
-    [data, resolvedTree],
-  );
+  const fullForest = useMemo(() => buildTree(data, resolvedTree), [data, resolvedTree]);
 
-  const filterEntries = useMemo(
-    () => Object.entries(activeFilters),
-    [activeFilters],
-  );
+  const filterEntries = useMemo(() => Object.entries(activeFilters), [activeFilters]);
 
   const visibleForest: TreeNode[] = useMemo(() => {
     if (filterEntries.length === 0) return fullForest;
     return pruneTree(fullForest, (record) =>
-      filterEntries.every(([path, value]) =>
-        matchesFilterValues(record, path, value),
-      ),
+      filterEntries.every(([path, value]) => matchesFilterValues(record, path, value)),
     );
   }, [fullForest, filterEntries]);
 
@@ -112,9 +101,7 @@ export function TreeView({
     setExpanded(initialExpansion(fullForest, resolvedTree.defaultExpanded));
   }, [fullForest, resolvedTree.defaultExpanded]);
 
-  const [selectedId, setSelectedId] = useState<string | null>(
-    () => fullForest[0]?.id ?? null,
-  );
+  const [selectedId, setSelectedId] = useState<string | null>(() => fullForest[0]?.id ?? null);
 
   useEffect(() => {
     if (selectedId && !findNodeById(visibleForest, selectedId)) {
@@ -122,9 +109,7 @@ export function TreeView({
     }
   }, [visibleForest, selectedId]);
 
-  const selectedNode = selectedId
-    ? findNodeById(visibleForest, selectedId)
-    : null;
+  const selectedNode = selectedId ? findNodeById(visibleForest, selectedId) : null;
   const recordsForRightPane = useMemo(
     () => (selectedNode ? flatten(selectedNode) : []),
     [selectedNode],
@@ -153,9 +138,7 @@ export function TreeView({
   type RightPaneMode = "table" | "card";
   const [rightPaneMode, setRightPaneMode] = useState<RightPaneMode>(
     // "details" is a deprecated alias of "card".
-    treeConfig?.defaultRightPane === "details"
-      ? "card"
-      : (treeConfig?.defaultRightPane ?? "table"),
+    treeConfig?.defaultRightPane === "details" ? "card" : (treeConfig?.defaultRightPane ?? "table"),
   );
 
   const dndEnabled = treeConfig?.dndEnabled !== false && !!onDataUpdate;
@@ -222,9 +205,7 @@ export function TreeView({
       <div className="flex-1 flex flex-col overflow-hidden rounded-[16px] border border-border-presentation-global-primary bg-background-presentation-form-base">
         <div className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border-presentation-global-primary bg-background-presentation-form-base">
           <div className="flex items-center gap-2 min-w-0">
-            {isMobile && (
-              <TreeDrawerTrigger onClick={() => setDrawerOpen(true)} />
-            )}
+            {isMobile && <TreeDrawerTrigger onClick={() => setDrawerOpen(true)} />}
             <span
               style={{ fontFeatureSettings: "'cv05' on" }}
               className="typography-display-medium-medium uppercase text-content-presentation-global-primary truncate"
@@ -256,9 +237,7 @@ export function TreeView({
               const showDivider = idx > 0 && !active && !prevActive;
               return (
                 <div key={tab.id} className="flex items-center">
-                  {showDivider && (
-                    <div className="mx-[3px] h-3 w-px bg-[#434446]" />
-                  )}
+                  {showDivider && <div className="mx-[3px] h-3 w-px bg-[#434446]" />}
                   <button
                     type="button"
                     aria-label={`${tab.label} mode`}
@@ -300,11 +279,7 @@ export function TreeView({
                 showFilters={false}
               />
             ) : (
-              <CardGrid
-                records={recordsForRightPane}
-                fields={fields}
-                labelField={labelField}
-              />
+              <CardGrid records={recordsForRightPane} fields={fields} labelField={labelField} />
             )
           ) : (
             <div className="h-full flex items-center justify-center text-sm text-content-presentation-global-tertiary">
@@ -355,7 +330,7 @@ function CardGrid({
         {records.map((record, idx) => {
           const labelValue = getByPath(record, labelField.path);
           return (
-            <Card key={record.id ?? idx} className="overflow-hidden">
+            <Card key={(record.id ?? idx) as string | number} className="overflow-hidden">
               <CardHeader className="pb-2">
                 <div className="text-xs uppercase tracking-wide text-content-presentation-global-tertiary">
                   {labelField.label ?? labelField.path}
@@ -369,10 +344,7 @@ function CardGrid({
                   const value = getByPath(record, f.path);
                   if (value == null) return null;
                   return (
-                    <div
-                      key={f.path}
-                      className="flex items-center justify-between gap-3 text-sm"
-                    >
+                    <div key={f.path} className="flex items-center justify-between gap-3 text-sm">
                       <span className="text-content-presentation-global-tertiary">
                         {f.label ?? f.path}
                       </span>

package/apps/lib/components/DataViews/badgeAdapter.ts

@@ -1,23 +1,14 @@
-import type { BadgeVariant } from "./types"
+import type { BadgeVariant } from "./types";
 
 type TorchBadgeColor =
-  | "gray"
-  | "slate"
-  | "red"
-  | "orange"
-  | "yellow"
-  | "green"
-  | "ocean"
-  | "blue"
-  | "purple"
-  | "rose"
+  "gray" | "slate" | "red" | "orange" | "yellow" | "green" | "ocean" | "blue" | "purple" | "rose";
 
-type TorchBadgeStyle = "solid" | "subtle"
+type TorchBadgeStyle = "solid" | "subtle";
 
 export type ResolvedBadgeProps = {
-  color: TorchBadgeColor
-  badgeStyle: TorchBadgeStyle
-}
+  color: TorchBadgeColor;
+  badgeStyle: TorchBadgeStyle;
+};
 
 /**
  * Map the dataviews BadgeVariant set to torch-glare Badge props.
@@ -27,19 +18,32 @@ export type ResolvedBadgeProps = {
  */
 export function resolveBadgeVariant(variant?: BadgeVariant): ResolvedBadgeProps {
   switch (variant) {
-    case "green":          return { color: "green",  badgeStyle: "subtle" }
-    case "greenLight":     return { color: "green",  badgeStyle: "subtle" }
-    case "cocktailGreen":  return { color: "green",  badgeStyle: "solid" }
-    case "yellow":         return { color: "yellow", badgeStyle: "subtle" }
-    case "redOrange":      return { color: "orange", badgeStyle: "subtle" }
-    case "redLight":       return { color: "red",    badgeStyle: "subtle" }
-    case "rose":           return { color: "rose",   badgeStyle: "subtle" }
-    case "purple":         return { color: "purple", badgeStyle: "subtle" }
-    case "bluePurple":     return { color: "purple", badgeStyle: "solid" }
-    case "blue":           return { color: "blue",   badgeStyle: "subtle" }
-    case "navy":           return { color: "blue",   badgeStyle: "solid" }
-    case "highlight":      return { color: "yellow", badgeStyle: "subtle" }
+    case "green":
+      return { color: "green", badgeStyle: "subtle" };
+    case "greenLight":
+      return { color: "green", badgeStyle: "subtle" };
+    case "cocktailGreen":
+      return { color: "green", badgeStyle: "solid" };
+    case "yellow":
+      return { color: "yellow", badgeStyle: "subtle" };
+    case "redOrange":
+      return { color: "orange", badgeStyle: "subtle" };
+    case "redLight":
+      return { color: "red", badgeStyle: "subtle" };
+    case "rose":
+      return { color: "rose", badgeStyle: "subtle" };
+    case "purple":
+      return { color: "purple", badgeStyle: "subtle" };
+    case "bluePurple":
+      return { color: "purple", badgeStyle: "solid" };
+    case "blue":
+      return { color: "blue", badgeStyle: "subtle" };
+    case "navy":
+      return { color: "blue", badgeStyle: "solid" };
+    case "highlight":
+      return { color: "yellow", badgeStyle: "subtle" };
     case "gray":
-    default:               return { color: "gray",   badgeStyle: "subtle" }
+    default:
+      return { color: "gray", badgeStyle: "subtle" };
   }
 }