torch-glare 2.4.0 → 2.4.1

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

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  useEffect,
-  useMemo,
-  useState,
-  type ElementType,
-  type ReactNode,
-} from "react";
+import { useEffect, useMemo, useState, type ElementType, type ReactNode } from "react";
 import { Badge } from "../Badge";
 import { FilterPanel } from "./FilterPanel";
 import {
@@ -37,16 +31,9 @@ import { Avatar, AvatarFallback } from "../Avatar";
 import { Card } from "../Card";
 import { Divider } from "../Divider";
 import { renderDetailView } from "../../utils/dataViews/nestedDataUtils";
-import {
-  getByPath,
-  setByPath,
-  matchesFilterValues,
-} from "../../utils/dataViews/pathUtils";
+import { getByPath, setByPath, matchesFilterValues } from "../../utils/dataViews/pathUtils";
 import { renderField } from "./fieldRenderers";
-import {
-  resolveInboxConfig,
-  visibleFields,
-} from "../../utils/dataViews/fieldUtils";
+import { resolveInboxConfig, visibleFields } from "../../utils/dataViews/fieldUtils";
 import { useIsMobile } from "../../hooks/useIsMobile";
 import { resolveBadgeVariant } from "./badgeAdapter";
 import { InboxViewCard } from "./InboxViewCard";
@@ -62,24 +49,20 @@ export type InboxViewProps = {
   filterState?: FilterState;
   onFilterChange?: (filters: FilterState) => void;
   showFilters?: boolean;
-  itemHref?: (item: DynamicRecord, id: any) => string;
+  itemHref?: (item: DynamicRecord, id: unknown) => string;
   /**
    * Component used to render each item's link when `itemHref` 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.
    */
   linkComponent?: ElementType;
-  selectedItemId?: any;
+  selectedItemId?: unknown;
   renderDetail?: (item: DynamicRecord | null) => ReactNode;
 };
 
 type InboxFilter = "all" | "starred" | "priority";
 
-function getId(
-  item: DynamicRecord,
-  fallbackPath: string | undefined,
-  idx: number,
-): any {
+function getId(item: DynamicRecord, fallbackPath: string | undefined, idx: number): unknown {
   if (item?.id != null) return item.id;
   if (fallbackPath) {
     const v = getByPath(item, fallbackPath);
@@ -88,7 +71,7 @@ function getId(
   return idx;
 }
 
-function getInitials(name: any): string {
+function getInitials(name: unknown): string {
   const s = String(name ?? "?").trim();
   if (!s) return "?";
   return (
@@ -117,9 +100,7 @@ export function InboxView({
   renderDetail,
 }: InboxViewProps) {
   const isMobile = useIsMobile();
-  const [selectedItem, setSelectedItem] = useState<DynamicRecord | null>(
-    data[0] || null,
-  );
+  const [selectedItem, setSelectedItem] = useState<DynamicRecord | null>(data[0] || null);
   const [inboxFilter, setInboxFilter] = useState<InboxFilter>("all");
   const [internalFilters, setInternalFilters] = useState<FilterState>({});
 
@@ -186,7 +167,7 @@ export function InboxView({
     return String(v).toLowerCase() === "high";
   };
 
-  const toggleStar = (itemId: any) => {
+  const toggleStar = (itemId: unknown) => {
     if (!inboxCfg.starredField) return;
     const updatedData = data.map((item, idx) => {
       const cur = getId(item, idPath, idx);
@@ -201,11 +182,7 @@ export function InboxView({
     if (selectedItem && getId(selectedItem, idPath, -1) === itemId) {
       setSelectedItem((prev) =>
         prev && inboxCfg.starredField
-          ? setByPath(
-              prev,
-              inboxCfg.starredField,
-              !getByPath(prev, inboxCfg.starredField),
-            )
+          ? setByPath(prev, inboxCfg.starredField, !getByPath(prev, inboxCfg.starredField))
           : prev,
       );
     }
@@ -233,8 +210,8 @@ export function InboxView({
         (inboxFilter === "starred" && isStarred(item)) ||
         (inboxFilter === "priority" && isHighPriority(item));
 
-      const matchesFilters = Object.entries(activeFilters).every(
-        ([path, filterValues]) => matchesFilterValues(item, path, filterValues),
+      const matchesFilters = Object.entries(activeFilters).every(([path, filterValues]) =>
+        matchesFilterValues(item, path, filterValues),
       );
 
       return matchesInboxFilter && matchesFilters;
@@ -242,12 +219,8 @@ export function InboxView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, inboxFilter, activeFilters, inboxCfg]);
 
-  const starredCount = inboxCfg.starredField
-    ? data.filter((i) => isStarred(i)).length
-    : 0;
-  const priorityCount = inboxCfg.priorityField
-    ? data.filter((i) => isHighPriority(i)).length
-    : 0;
+  const starredCount = inboxCfg.starredField ? data.filter((i) => isStarred(i)).length : 0;
+  const priorityCount = inboxCfg.priorityField ? data.filter((i) => isHighPriority(i)).length : 0;
 
   const filtersEnabled = showFilters && config.showFilters !== false;
   const countBadge = resolveBadgeVariant("gray");
@@ -272,12 +245,7 @@ export function InboxView({
             >
               <InboxIcon className="h-4 w-4" />
               All Items
-              <Badge
-                {...countBadge}
-                label={String(data.length)}
-                className="ml-auto"
-                size="XS"
-              />
+              <Badge {...countBadge} label={String(data.length)} className="ml-auto" size="XS" />
             </TabFormItem>
             {inboxCfg.starredField && (
               <TabFormItem
@@ -350,14 +318,12 @@ export function InboxView({
           {filteredData.map((item, idx) => {
             const itemId = getId(item, idPath, idx);
             const selected =
-              (selectedItemId != null &&
-                String(selectedItemId) === String(itemId)) ||
-              (selectedItem != null &&
-                getId(selectedItem, idPath, -1) === itemId);
+              (selectedItemId != null && String(selectedItemId) === String(itemId)) ||
+              (selectedItem != null && getId(selectedItem, idPath, -1) === itemId);
 
             return (
               <InboxViewCard
-                key={itemId}
+                key={itemId as string | number}
                 item={item}
                 rowFields={displayFields}
                 selected={selected}
@@ -396,22 +362,14 @@ export function InboxView({
               <div className="flex items-start gap-4 mb-6">
                 <Avatar className="h-12 w-12">
                   <AvatarFallback className="bg-background-presentation-action-primary text-content-presentation-action-primary">
-                    {getInitials(
-                      previewField
-                        ? getByPath(selectedItem, previewField.path)
-                        : "",
-                    )}
+                    {getInitials(previewField ? getByPath(selectedItem, previewField.path) : "")}
                   </AvatarFallback>
                 </Avatar>
                 <div className="flex-1">
                   <div className="flex items-start justify-between gap-4 mb-2">
                     <div>
                       <h2 className="text-xl font-semibold text-content-presentation-global-primary mb-1">
-                        {String(
-                          titleField
-                            ? getByPath(selectedItem, titleField.path)
-                            : "",
-                        )}
+                        {String(titleField ? getByPath(selectedItem, titleField.path) : "")}
                       </h2>
                       {previewField && (
                         <p className="text-sm text-content-presentation-global-tertiary">
@@ -424,9 +382,7 @@ export function InboxView({
                     </div>
                     {inboxCfg.starredField && (
                       <button
-                        onClick={() =>
-                          toggleStar(getId(selectedItem, idPath, -1))
-                        }
+                        onClick={() => toggleStar(getId(selectedItem, idPath, -1))}
                         className="hover:text-content-presentation-badge-yellow transition-colors"
                         aria-label="Toggle star"
                       >
@@ -446,9 +402,7 @@ export function InboxView({
                       const value = getByPath(selectedItem, field.path);
                       if (value == null) return null;
                       return (
-                        <span key={field.path}>
-                          {renderField(value, field, selectedItem)}
-                        </span>
+                        <span key={field.path}>{renderField(value, field, selectedItem)}</span>
                       );
                     })}
                   </div>

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

@@ -40,97 +40,88 @@ function pickRowFields(props: InboxViewCardProps): FieldConfig[] {
   return collected;
 }
 
-function pickDateField(
-  rowFields: FieldConfig[],
-  explicit?: FieldConfig,
-): FieldConfig | undefined {
+function pickDateField(rowFields: FieldConfig[], explicit?: FieldConfig): FieldConfig | undefined {
   if (explicit) return explicit;
   return rowFields.find((f) => f.type === "date");
 }
 
-export const InboxViewCard = forwardRef<HTMLDivElement, InboxViewCardProps>(
-  (props, ref) => {
-    const { item, selected = false, onSelect, href, linkComponent, className } =
-      props;
-    const allRowFields = pickRowFields(props);
-    const dateField = pickDateField(allRowFields, props.dateField);
-    const rowFields = dateField
-      ? allRowFields.filter((f) => f.path !== dateField.path)
-      : allRowFields;
-    const dateLabel = props.dateLabel ?? "Created at:";
+export const InboxViewCard = forwardRef<HTMLDivElement, InboxViewCardProps>((props, ref) => {
+  const { item, selected = false, onSelect, href, linkComponent, className } = props;
+  const allRowFields = pickRowFields(props);
+  const dateField = pickDateField(allRowFields, props.dateField);
+  const rowFields = dateField
+    ? allRowFields.filter((f) => f.path !== dateField.path)
+    : allRowFields;
+  const dateLabel = props.dateLabel ?? "Created at:";
 
-    const cardClass = cn(
-      "flex flex-col gap-2 p-3 cursor-pointer transition-colors",
-      "bg-background-presentation-form-base",
-      "border-y-2 border-transparent",
-      !selected &&
-        "hover:bg-[image:linear-gradient(0deg,rgba(151,72,255,0.05)_0%,rgba(151,72,255,0.05)_100%)] hover:border-y-[#AE71FF]",
-      selected &&
-        "bg-[image:linear-gradient(0deg,rgba(0,117,255,0.05)_0%,rgba(0,117,255,0.05)_100%)] border-y-border-presentation-state-focus",
-      className,
-    );
-
-    const content: ReactNode = (
-      <>
-        <div className="flex flex-col gap-1 w-full">
-          {rowFields.map((field, idx) => {
-            const value = getByPath(item, field.path);
-            return (
-              <div key={field.path ?? idx} className="flex flex-col">
-                <div className="flex items-center gap-2">
-                  <span className="w-[100px] shrink-0 typography-body-large-semibold text-content-presentation-global-secondary">
-                    {field.label ?? field.path}:
-                  </span>
-                  <span className="h-full py-0.5 flex items-center">
-                    <span className="block h-full w-px bg-black-alpha-15" />
-                  </span>
-                  <span className="flex-1 min-w-0 truncate typography-body-large-medium text-content-presentation-global-primary">
-                    {renderField(value, field, item)}
-                  </span>
-                </div>
-                {idx < rowFields.length - 1 && <Divider className="mt-1" />}
-              </div>
-            );
-          })}
-        </div>
+  const cardClass = cn(
+    "flex flex-col gap-2 p-3 cursor-pointer transition-colors",
+    "bg-background-presentation-form-base",
+    "border-y-2 border-transparent",
+    !selected &&
+      "hover:bg-[image:linear-gradient(0deg,rgba(151,72,255,0.05)_0%,rgba(151,72,255,0.05)_100%)] hover:border-y-[#AE71FF]",
+    selected &&
+      "bg-[image:linear-gradient(0deg,rgba(0,117,255,0.05)_0%,rgba(0,117,255,0.05)_100%)] border-y-border-presentation-state-focus",
+    className,
+  );
 
-        {dateField && (
-          <div className="flex items-center justify-end">
-            <div className="inline-flex items-center gap-0.5 p-0.5 rounded-md bg-black-alpha-10">
-              <div className="px-1 rounded-sm">
-                <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
-                  {dateLabel}
+  const content: ReactNode = (
+    <>
+      <div className="flex flex-col gap-1 w-full">
+        {rowFields.map((field, idx) => {
+          const value = getByPath(item, field.path);
+          return (
+            <div key={field.path ?? idx} className="flex flex-col">
+              <div className="flex items-center gap-2">
+                <span className="w-[100px] shrink-0 typography-body-large-semibold text-content-presentation-global-secondary">
+                  {field.label ?? field.path}:
                 </span>
-              </div>
-              <div className="px-1 rounded-sm bg-black-alpha-075">
-                <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
-                  {renderField(getByPath(item, dateField.path), dateField, item)}
+                <span className="h-full py-0.5 flex items-center">
+                  <span className="block h-full w-px bg-black-alpha-15" />
+                </span>
+                <span className="flex-1 min-w-0 truncate typography-body-large-medium text-content-presentation-global-primary">
+                  {renderField(value, field, item)}
                 </span>
               </div>
+              {idx < rowFields.length - 1 && <Divider className="mt-1" />}
             </div>
-          </div>
-        )}
-      </>
-    );
+          );
+        })}
+      </div>
 
-    if (href) {
-      const LinkTag = (linkComponent ?? "a") as ElementType;
-      return (
-        <LinkTag
-          href={href}
-          className={cn(cardClass, "no-underline text-inherit")}
-        >
-          {content}
-        </LinkTag>
-      );
-    }
+      {dateField && (
+        <div className="flex items-center justify-end">
+          <div className="inline-flex items-center gap-0.5 p-0.5 rounded-md bg-black-alpha-10">
+            <div className="px-1 rounded-sm">
+              <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
+                {dateLabel}
+              </span>
+            </div>
+            <div className="px-1 rounded-sm bg-black-alpha-075">
+              <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
+                {renderField(getByPath(item, dateField.path), dateField, item)}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 
+  if (href) {
+    const LinkTag = (linkComponent ?? "a") as ElementType;
     return (
-      <div ref={ref} onClick={onSelect} className={cardClass}>
+      <LinkTag href={href} className={cn(cardClass, "no-underline text-inherit")}>
         {content}
-      </div>
+      </LinkTag>
     );
-  },
-);
+  }
+
+  return (
+    <div ref={ref} onClick={onSelect} className={cardClass}>
+      {content}
+    </div>
+  );
+});
 
 InboxViewCard.displayName = "InboxViewCard";

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

@@ -70,11 +70,7 @@ type KanbanColumn = {
   items: DynamicRecord[];
 };
 
-function getId(
-  item: DynamicRecord,
-  fallbackPath: string | undefined,
-  idx: number,
-): any {
+function getId(item: DynamicRecord, fallbackPath: string | undefined, idx: number): unknown {
   if (item?.id != null) return item.id;
   if (fallbackPath) {
     const v = getByPath(item, fallbackPath);
@@ -117,9 +113,7 @@ export function KanbanView({
     // palette rotation.
     const resolve = (key: string, paletteIdx: number) => ({
       title: overrides?.[key]?.label ?? key,
-      color:
-        overrides?.[key]?.color ??
-        COLUMN_PALETTE[paletteIdx % COLUMN_PALETTE.length],
+      color: overrides?.[key]?.color ?? COLUMN_PALETTE[paletteIdx % COLUMN_PALETTE.length],
     });
 
     if (groupField?.variants) {
@@ -200,12 +194,9 @@ export function KanbanView({
 
   const renderCard = (item: DynamicRecord, idx: number) => {
     const itemId = getId(item, idPath, idx);
-    const isDraggingThis =
-      draggedItem != null && getId(draggedItem.item, idPath, -1) === itemId;
+    const isDraggingThis = draggedItem != null && getId(draggedItem.item, idPath, -1) === itemId;
     const titleFieldResolved = resolvedTitleField;
-    const titleValue = titleFieldResolved
-      ? getByPath(item, titleFieldResolved.path)
-      : "";
+    const titleValue = titleFieldResolved ? getByPath(item, titleFieldResolved.path) : "";
     const bodyFields = displayFields.filter(
       (f) => f.path !== groupByField && f.path !== titleFieldResolved?.path,
     );
@@ -240,15 +231,11 @@ export function KanbanView({
 
     return (
       <DataViewCard
-        key={itemId}
+        key={itemId as string | number}
         draggable={!isMobile}
         onDragStart={
           !isMobile
-            ? () =>
-                handleDragStart(
-                  item,
-                  String(getByPath(item, groupByField) ?? "Uncategorized"),
-                )
+            ? () => handleDragStart(item, String(getByPath(item, groupByField) ?? "Uncategorized"))
             : undefined
         }
         onDragEnd={!isMobile ? handleDragEnd : undefined}
@@ -258,10 +245,7 @@ export function KanbanView({
             : "cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow",
           !isMobile && isDraggingThis && "opacity-40",
         )}
-        title={
-          titleFieldResolved &&
-          renderField(titleValue, titleFieldResolved, item)
-        }
+        title={titleFieldResolved && renderField(titleValue, titleFieldResolved, item)}
         rows={rows}
       />
     );
@@ -288,8 +272,7 @@ export function KanbanView({
     <div className="h-full overflow-x-auto p-2 bg-background-presentation-body-primary">
       <div className="flex h-full gap-4" style={{ minWidth: "max-content" }}>
         {kanbanColumns.map((column, i) => {
-          const isDropTarget =
-            draggedItem != null && dragOverColumnId === column.id;
+          const isDropTarget = draggedItem != null && dragOverColumnId === column.id;
           return (
             <Fragment key={column.id}>
               <div

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

@@ -25,8 +25,7 @@ export function RadioRow({ value, label }: { value: string; label: string }) {
 
 // Shared <Switch> with the bright-green checked track (#0AC713) from the Figma
 // Switcher-1.0 "On" state, applied regardless of the panel's dark theme scope.
-const SWITCH_GREEN =
-  "data-[state=checked]:bg-[#0AC713] data-[state=checked]:border-[#0AC713]";
+const SWITCH_GREEN = "data-[state=checked]:bg-[#0AC713] data-[state=checked]:border-[#0AC713]";
 
 type DataViewsSwitchProps = {
   checked: boolean;
@@ -35,15 +34,6 @@ type DataViewsSwitchProps = {
 
 /** Column show/hide toggle: the library <Switch> pre-styled to the panel's
  *  Figma green-checked spec. */
-export function DataViewsSwitch({
-  checked,
-  onCheckedChange,
-}: DataViewsSwitchProps) {
-  return (
-    <Switch
-      checked={checked}
-      onCheckedChange={onCheckedChange}
-      className={SWITCH_GREEN}
-    />
-  );
+export function DataViewsSwitch({ checked, onCheckedChange }: DataViewsSwitchProps) {
+  return <Switch checked={checked} onCheckedChange={onCheckedChange} className={SWITCH_GREEN} />;
 }