torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/DataTable.tsx

@@ -1,233 +1,213 @@
-'use client'
+"use client";
 
-import * as React from "react"
-import { CSS } from '@dnd-kit/utilities'
+import * as React from "react";
+import { CSS } from "@dnd-kit/utilities";
 import {
-    ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    getSortedRowModel,
-    Row,
-    SortingState,
-    useReactTable,
-    getPaginationRowModel,
-    getFilteredRowModel,
-} from "@tanstack/react-table"
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+  getPaginationRowModel,
+  getFilteredRowModel,
+} from "@tanstack/react-table";
 import {
-    DndContext,
-    closestCenter,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors,
-    DragEndEvent,
-} from '@dnd-kit/core'
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
 import {
-    arrayMove,
-    SortableContext,
-    sortableKeyboardCoordinates,
-    useSortable,
-    verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
 
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "./Table"
-import { Checkbox } from "./Checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./Table";
+import { Checkbox } from "./Checkbox";
 
 interface DataTableProps<TData extends { id: string | number }, TValue> {
-    columns: ColumnDef<TData, TValue>[]
-    data: TData[]
-    theme?: "dark" | "light" | "default"
-    onRowReorder?: (newData: TData[]) => void
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  theme?: "dark" | "light" | "default";
+  onRowReorder?: (newData: TData[]) => void;
 }
 
 export function DataTable<TData extends { id: string | number }, TValue>({
-    columns,
-    data,
-    theme = "default",
-    onRowReorder,
+  columns,
+  data,
+  theme = "default",
+  onRowReorder,
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = React.useState<SortingState>([])
-    const [items, setItems] = React.useState<TData[]>(data)
-    const [rowSelection, setRowSelection] = React.useState({})
-
-    const sensors = useSensors(
-        useSensor(PointerSensor),
-        useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates,
-        })
-    )
-
-    const table = useReactTable({
-        data: items,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: setSorting,
-        onRowSelectionChange: setRowSelection,
-        enableRowSelection: true,
-        enableMultiRowSelection: true,
-        state: {
-            sorting,
-            rowSelection,
-        },
-    })
-
-    const handleDragEnd = (event: DragEndEvent) => {
-        const { active, over } = event
-
-        if (over && active.id !== over.id) {
-            const oldIndex = items.findIndex((item: any) => item.id === active.id)
-            const newIndex = items.findIndex((item: any) => item.id === over.id)
-
-            const newItems = arrayMove(items, oldIndex, newIndex)
-            setItems(newItems)
-
-            // Update row selection to maintain correct mapping after reorder
-            const newRowSelection: Record<string, boolean> = {}
-            Object.keys(rowSelection).forEach((rowIndex) => {
-                const oldRowIndex = parseInt(rowIndex)
-                const row = table.getRowModel().rows[oldRowIndex]
-                if (row) {
-                    const newRowIndex = newItems.findIndex((item: any) => item.id === (row.original as any).id)
-                    if (newRowIndex !== -1) {
-                        newRowSelection[newRowIndex.toString()] = true
-                    }
-                }
-            })
-            setRowSelection(newRowSelection)
-
-            onRowReorder?.(newItems)
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [items, setItems] = React.useState<TData[]>(data);
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    state: {
+      sorting,
+      rowSelection,
+    },
+  });
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item: TData) => item.id === active.id);
+      const newIndex = items.findIndex((item: TData) => item.id === over.id);
+
+      const newItems = arrayMove(items, oldIndex, newIndex);
+      setItems(newItems);
+
+      // Update row selection to maintain correct mapping after reorder
+      const newRowSelection: Record<string, boolean> = {};
+      Object.keys(rowSelection).forEach((rowIndex) => {
+        const oldRowIndex = parseInt(rowIndex);
+        const row = table.getRowModel().rows[oldRowIndex];
+        if (row) {
+          const newRowIndex = newItems.findIndex((item: TData) => item.id === row.original.id);
+          if (newRowIndex !== -1) {
+            newRowSelection[newRowIndex.toString()] = true;
+          }
         }
-    }
+      });
+      setRowSelection(newRowSelection);
 
-    return (
-        <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-        >
-            <Table theme={theme}>
-                <TableHeader>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                            <TableHead isDummy ></TableHead>
-                            <TableHead isDummy >
-                                <Checkbox
-                                    checked={table.getIsAllRowsSelected()}
-                                    onCheckedChange={(checked) => {
-                                        table.toggleAllRowsSelected(!!checked)
-                                    }}
-                                />
-                            </TableHead>
-                            {headerGroup.headers.map((header) => {
-                                const sortHandler = header.column.getToggleSortingHandler()
-                                return (
-                                    <TableHead
-                                        key={header.id}
-                                        onSort={sortHandler ? () => sortHandler({}) : undefined}
-                                        sortType={header.column.getIsSorted() as "asc" | "desc" | undefined}
-                                    >
-                                        {header.isPlaceholder
-                                            ? null
-                                            : flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                    </TableHead>
-                                )
-                            })}
-                        </TableRow>
-                    ))}
-                </TableHeader>
-                <TableBody>
-                    {table.getRowModel().rows?.length ? (
-                        <SortableContext
-                            items={table.getRowModel().rows.map(row => row.original)}
-                            strategy={verticalListSortingStrategy}
-                        >
-                            {table.getRowModel().rows.map((row, i) => (
-                                <SortableRow key={i + "row"} row={row} state={row.getIsSelected() ? "selected" : undefined}>
-                                    <TableCell isDummy >
-                                        <Checkbox
-                                            checked={row.getIsSelected()}
-                                            onCheckedChange={(checked) => {
-                                                row.toggleSelected(!!checked)
-                                            }}
-                                        />
-                                    </TableCell>
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </TableCell>
-                                    ))}
-                                    <TableCell isDummy className="w-full" ></TableCell>
-                                </SortableRow>
-                            ))}
-                        </SortableContext>
-                    ) : (
-                        <TableRow>
-                            <TableCell colSpan={columns.length} className="h-24 text-center">
-                                No results.
-                            </TableCell>
-                        </TableRow>
-                    )}
-                </TableBody>
-            </Table>
-        </DndContext>
-    )
+      onRowReorder?.(newItems);
+    }
+  };
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <Table theme={theme}>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              <TableHead isDummy></TableHead>
+              <TableHead isDummy>
+                <Checkbox
+                  checked={table.getIsAllRowsSelected()}
+                  onCheckedChange={(checked) => {
+                    table.toggleAllRowsSelected(!!checked);
+                  }}
+                />
+              </TableHead>
+              {headerGroup.headers.map((header) => {
+                const sortHandler = header.column.getToggleSortingHandler();
+                return (
+                  <TableHead
+                    key={header.id}
+                    onSort={sortHandler ? () => sortHandler({}) : undefined}
+                    sortType={header.column.getIsSorted() as "asc" | "desc" | undefined}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            <SortableContext
+              items={table.getRowModel().rows.map((row) => row.original)}
+              strategy={verticalListSortingStrategy}
+            >
+              {table.getRowModel().rows.map((row, i) => (
+                <SortableRow
+                  key={i + "row"}
+                  row={row}
+                  state={row.getIsSelected() ? "selected" : undefined}
+                >
+                  <TableCell isDummy>
+                    <Checkbox
+                      checked={row.getIsSelected()}
+                      onCheckedChange={(checked) => {
+                        row.toggleSelected(!!checked);
+                      }}
+                    />
+                  </TableCell>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                  <TableCell isDummy className="w-full"></TableCell>
+                </SortableRow>
+              ))}
+            </SortableContext>
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </DndContext>
+  );
 }
 
-
-
-
-interface SortableRowProps<TData> {
-    row: Row<TData>
-    children: React.ReactNode
-    state?: "delete" | "update" | "add" | "selected" | "open"
+interface SortableRowProps<TData extends { id: string | number }> {
+  row: Row<TData>;
+  children: React.ReactNode;
+  state?: "delete" | "update" | "add" | "selected" | "open";
 }
 
-function SortableRow<TData>({ row, children, state }: SortableRowProps<TData>) {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({
-        id: (row.original as any).id,
-    })
-
-    const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0.5 : 1,
-    }
-
-    return (
-        <TableRow
-            ref={setNodeRef}
-            style={style}
-            state={state}
-        >
-            <TableCell
-                {...attributes}
-                {...listeners}
-                className="cursor-grab active:cursor-grabbing"
-                isDummy
-            >
-                <i className="ri-draggable text-[18px]" />
-            </TableCell>
-            {children}
-        </TableRow>
-    )
-} 
+function SortableRow<TData extends { id: string | number }>({
+  row,
+  children,
+  state,
+}: SortableRowProps<TData>) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: row.original.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <TableRow ref={setNodeRef} style={style} state={state}>
+      <TableCell
+        {...attributes}
+        {...listeners}
+        className="cursor-grab active:cursor-grabbing"
+        isDummy
+      >
+        <i className="ri-draggable text-[18px]" />
+      </TableCell>
+      {children}
+    </TableRow>
+  );
+}

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

@@ -11,12 +11,7 @@ export interface DataViewRadioProps {
   className?: string;
 }
 
-export function DataViewRadio({
-  value,
-  label,
-  children,
-  className,
-}: DataViewRadioProps) {
+export function DataViewRadio({ value, label, children, className }: DataViewRadioProps) {
   return (
     <RadioGroupPrimitive.Item
       value={value}

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

@@ -1,12 +1,7 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import {
-  X,
-  Settings as SettingsIcon,
-  Filter as FilterIcon,
-  Plus,
-} from "lucide-react";
+import { X, Settings as SettingsIcon, Filter as FilterIcon, Plus } from "lucide-react";
 import type {
   ViewConfig,
   ViewType,
@@ -51,17 +46,9 @@ export type DataViewsConfigPanelProps = {
   state?: "open" | "closed";
 };
 
-const DEFAULT_SAVED_VIEWS: SavedView[] = [
-  { id: "default", label: "Default View" },
-];
+const DEFAULT_SAVED_VIEWS: SavedView[] = [{ id: "default", label: "Default View" }];
 
-function SectionHeader({
-  title,
-  action,
-}: {
-  title: string;
-  action?: React.ReactNode;
-}) {
+function SectionHeader({ title, action }: { title: string; action?: React.ReactNode }) {
   return (
     <div className="flex items-center justify-between">
       <h3 className="text-[18px] font-[510] leading-[1.32] tracking-[-0.01em] text-white">
@@ -87,9 +74,7 @@ function GripDots() {
       fill="currentColor"
     >
       {[5.33, 9.33].flatMap((cx) =>
-        [3.33, 8, 12.67].map((cy) => (
-          <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r="1" />
-        )),
+        [3.33, 8, 12.67].map((cy) => <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r="1" />),
       )}
     </svg>
   );
@@ -127,23 +112,15 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
   // `onSavedViewChange` are supplied; otherwise fall back to local state so the
   // radios are still interactive (DataViewsLayout doesn't thread these props
   // yet — without this the selection would snap back every click).
-  const [internalSavedView, setInternalSavedView] = useState(
-    () => savedViews[0]?.id,
-  );
+  const [internalSavedView, setInternalSavedView] = useState(() => savedViews[0]?.id);
   const selectedSavedView = activeSavedView ?? internalSavedView;
   const handleSavedViewChange = (id: string) => {
     if (onSavedViewChange) onSavedViewChange(id);
     else setInternalSavedView(id);
   };
 
-  const visibleFields = useMemo(
-    () => fields.filter((f) => f.type !== "hidden"),
-    [fields],
-  );
-  const visiblePaths = useMemo(
-    () => new Set(visibleFields.map((f) => f.path)),
-    [visibleFields],
-  );
+  const visibleFields = useMemo(() => fields.filter((f) => f.type !== "hidden"), [fields]);
+  const visiblePaths = useMemo(() => new Set(visibleFields.map((f) => f.path)), [visibleFields]);
   const fieldByPath = useMemo(
     () => new Map(visibleFields.map((f) => [f.path, f])),
     [visibleFields],
@@ -307,10 +284,8 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                           onDragOver={(e) => {
                             e.preventDefault();
                             e.dataTransfer.dropEffect = "move";
-                            const rect =
-                              e.currentTarget.getBoundingClientRect();
-                            const before =
-                              e.clientY < rect.top + rect.height / 2;
+                            const rect = e.currentTarget.getBoundingClientRect();
+                            const before = e.clientY < rect.top + rect.height / 2;
                             const slot = before ? index : index + 1;
                             if (dropSlot !== slot) setDropSlot(slot);
                           }}
@@ -342,9 +317,7 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                           <span className="flex shrink-0 items-center">
                             <DataViewsSwitch
                               checked={col.visible}
-                              onCheckedChange={() =>
-                                toggleColumnVisibility(col.id)
-                              }
+                              onCheckedChange={() => toggleColumnVisibility(col.id)}
                             />
                           </span>
                         </div>
@@ -353,9 +326,7 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                   })}
                   {/* Drop-at-end indicator: only ever rendered when the slot
                       points past the last row, so still exactly one line. */}
-                  {dropSlot === orderedColumns.length && dragPath && (
-                    <DropLine />
-                  )}
+                  {dropSlot === orderedColumns.length && dragPath && <DropLine />}
                 </div>
               )}
             </div>
@@ -394,13 +365,8 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                       <div key={col.id}>
                         {/* Edge-to-edge divider (Figma: no horizontal
                             inset). */}
-                        {i > 0 && (
-                          <div className="dv-divider h-px bg-[#2C2D2E]" />
-                        )}
-                        <RadioRow
-                          value={col.id}
-                          label={col.label || field?.label || col.id}
-                        />
+                        {i > 0 && <div className="dv-divider h-px bg-[#2C2D2E]" />}
+                        <RadioRow value={col.id} label={col.label || field?.label || col.id} />
                       </div>
                     );
                   })}

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

@@ -57,9 +57,7 @@ export function DataViewsHeader({
     >
       {/* Title pill */}
       <div className="flex h-9 shrink-0 items-center gap-2 rounded-[12px] border border-[#434446] bg-[#252729] px-[10px]">
-        <span className="text-[28px] font-[510] uppercase leading-[1.19] text-white">
-          {title}
-        </span>
+        <span className="text-[28px] font-[510] uppercase leading-[1.19] text-white">{title}</span>
       </div>
 
       {/* Divider */}

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

@@ -61,14 +61,14 @@ export type DataViewsLayoutProps = {
   onAddNew?: () => void;
   addNewLabel?: string;
 
-  inboxItemHref?: (item: DynamicRecord, id: any) => string;
+  inboxItemHref?: (item: DynamicRecord, id: unknown) => string;
   /**
    * Component used to render inbox item links when `inboxItemHref` is set.
    * Defaults to a plain `<a>` (full-page navigation). Pass your router's link
    * (e.g. Next.js `Link`, React Router `Link`) for client-side navigation.
    */
   inboxLinkComponent?: ElementType;
-  inboxSelectedId?: any;
+  inboxSelectedId?: unknown;
   inboxRenderDetail?: (item: DynamicRecord | null) => ReactNode;
 
   searchValue?: string;
@@ -79,10 +79,7 @@ export type DataViewsLayoutProps = {
   theme?: Themes;
 };
 
-const VIEW_META: Record<
-  ViewType,
-  { label: string; icon: DataViewsHeaderView["icon"] }
-> = {
+const VIEW_META: Record<ViewType, { label: string; icon: DataViewsHeaderView["icon"] }> = {
   table: { label: "List", icon: <List /> },
   kanban: { label: "Board", icon: <LayoutGrid /> },
   inbox: { label: "Inbox", icon: <InboxIcon /> },
@@ -163,9 +160,7 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
       // Mount at width 0 first, then flip to open on the next frame so the
       // width transition animates from 0 → 260px instead of snapping.
       setPanelMounted(true);
-      requestAnimationFrame(() =>
-        requestAnimationFrame(() => setPanelOpen(true)),
-      );
+      requestAnimationFrame(() => requestAnimationFrame(() => setPanelOpen(true)));
     }, []);
 
     const closePanel = useCallback(() => {
@@ -250,9 +245,7 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
                     fields={resolvedFields}
                     config={effectiveConfig}
                     onDataUpdate={onDataUpdate}
-                    onSortChange={(sortBy, sortOrder) =>
-                      setConfig({ sortBy, sortOrder })
-                    }
+                    onSortChange={(sortBy, sortOrder) => setConfig({ sortBy, sortOrder })}
                     filters={filters}
                     filterState={filterState}
                     onFilterChange={setFilterState}