torch-glare 2.4.0 → 2.4.1

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

@@ -1,50 +1,37 @@
-"use client"
-
-import type { ReactNode } from "react"
-import { Badge } from "../Badge"
-import { Avatar, AvatarFallback, AvatarImage } from "../Avatar"
-import { cn } from "../../utils/cn"
-import type {
-  CurrencyOptions,
-  DynamicRecord,
-  FieldConfig,
-  FieldType,
-} from "./types"
-import { getByPath } from "../../utils/dataViews/pathUtils"
-import { resolveBadgeVariant } from "./badgeAdapter"
+"use client";
+
+import type { ReactNode } from "react";
+import { Badge } from "../Badge";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar";
+import { cn } from "../../utils/cn";
+import type { CurrencyOptions, DynamicRecord, FieldConfig, FieldType } from "./types";
+import { getByPath } from "../../utils/dataViews/pathUtils";
+import { resolveBadgeVariant } from "./badgeAdapter";
 
 type RenderArgs = {
-  value: any
-  field: FieldConfig
-  row: DynamicRecord
-}
+  value: unknown;
+  field: FieldConfig;
+  row: DynamicRecord;
+};
 
-const NULL_PLACEHOLDER = (
-  <span className="text-content-presentation-global-tertiary">-</span>
-)
+const NULL_PLACEHOLDER = <span className="text-content-presentation-global-tertiary">-</span>;
 
-export function renderField(
-  value: any,
-  field: FieldConfig,
-  row: DynamicRecord,
-): ReactNode {
-  if (field.render) return field.render(value, row)
+export function renderField(value: unknown, field: FieldConfig, row: DynamicRecord): ReactNode {
+  if (field.render) return field.render(value, row);
 
-  const type = field.type ?? "text"
-  if (type === "hidden") return null
+  const type = field.type ?? "text";
+  if (type === "hidden") return null;
 
   if (value == null && type !== "boolean" && type !== "progress-bar") {
-    return NULL_PLACEHOLDER
+    return NULL_PLACEHOLDER;
   }
 
-  const renderer = RENDERERS[type] ?? renderText
-  return renderer({ value, field, row })
+  const renderer = RENDERERS[type] ?? renderText;
+  return renderer({ value, field, row });
 }
 
 function renderText({ value }: RenderArgs): ReactNode {
-  return (
-    <span className="text-content-presentation-global-primary">{String(value)}</span>
-  )
+  return <span className="text-content-presentation-global-primary">{String(value)}</span>;
 }
 
 function renderNumber({ value }: RenderArgs): ReactNode {
@@ -52,107 +39,96 @@ function renderNumber({ value }: RenderArgs): ReactNode {
     <span className="font-mono text-content-presentation-global-primary">
       {typeof value === "number" ? value.toLocaleString() : String(value)}
     </span>
-  )
+  );
 }
 
 function renderDate({ value }: RenderArgs): ReactNode {
-  return <span className="text-content-presentation-global-primary">{String(value)}</span>
+  return <span className="text-content-presentation-global-primary">{String(value)}</span>;
 }
 
 function renderDateFormat({ value, field }: RenderArgs): ReactNode {
-  const opts = field.dateFormat
-  let formatted = String(value)
+  const opts = field.dateFormat;
+  let formatted = String(value);
   try {
-    const d = value instanceof Date ? value : new Date(value)
+    const d = value instanceof Date ? value : new Date(value as string | number);
     if (!isNaN(d.getTime())) {
       if (typeof opts === "object" && opts) {
-        formatted = new Intl.DateTimeFormat(undefined, opts).format(d)
+        formatted = new Intl.DateTimeFormat(undefined, opts).format(d);
       } else if (typeof opts === "string") {
-        formatted = formatWithToken(d, opts)
+        formatted = formatWithToken(d, opts);
       } else {
         formatted = new Intl.DateTimeFormat(undefined, {
           year: "numeric",
           month: "short",
           day: "numeric",
-        }).format(d)
+        }).format(d);
       }
     }
   } catch {
     /* fall through to raw string */
   }
-  return <span className="text-content-presentation-global-primary">{formatted}</span>
+  return <span className="text-content-presentation-global-primary">{formatted}</span>;
 }
 
 function formatWithToken(d: Date, token: string): string {
-  const pad = (n: number) => String(n).padStart(2, "0")
+  const pad = (n: number) => String(n).padStart(2, "0");
   return token
     .replace(/YYYY/g, String(d.getFullYear()))
     .replace(/MM/g, pad(d.getMonth() + 1))
     .replace(/DD/g, pad(d.getDate()))
     .replace(/HH/g, pad(d.getHours()))
     .replace(/mm/g, pad(d.getMinutes()))
-    .replace(/ss/g, pad(d.getSeconds()))
+    .replace(/ss/g, pad(d.getSeconds()));
 }
 
 function renderBoolean({ value, field }: RenderArgs): ReactNode {
-  const isTrue = !!value
-  const variant = isTrue ? field.trueVariant ?? "green" : field.falseVariant ?? "gray"
-  const badgeProps = resolveBadgeVariant(variant)
+  const isTrue = !!value;
+  const variant = isTrue ? (field.trueVariant ?? "green") : (field.falseVariant ?? "gray");
+  const badgeProps = resolveBadgeVariant(variant);
   return (
     <Badge
       {...badgeProps}
-      label={isTrue ? field.trueLabel ?? "Yes" : field.falseLabel ?? "No"}
+      label={isTrue ? (field.trueLabel ?? "Yes") : (field.falseLabel ?? "No")}
       size="S"
-     
     />
-  )
+  );
 }
 
 function renderEnumBadge({ value, field }: RenderArgs): ReactNode {
-  const key = String(value)
-  const variant = field.variants?.[key] ?? field.defaultVariant ?? "gray"
-  const badgeProps = resolveBadgeVariant(variant)
+  const key = String(value);
+  const variant = field.variants?.[key] ?? field.defaultVariant ?? "gray";
+  const badgeProps = resolveBadgeVariant(variant);
   // Use medium size so the glare badge dot indicator is clearly visible
-  return <Badge {...badgeProps} label={key} size="S" />
+  return <Badge {...badgeProps} label={key} size="S" />;
 }
 
 function renderBadgeArray({ value, field }: RenderArgs): ReactNode {
-  const badgeProps = resolveBadgeVariant(field.variant ?? "blue")
+  const badgeProps = resolveBadgeVariant(field.variant ?? "blue");
   if (!Array.isArray(value)) {
-    return <Badge {...badgeProps} label={String(value)} size="XS" />
+    return <Badge {...badgeProps} label={String(value)} size="XS" />;
   }
-  const limit = field.limit ?? value.length
-  const head = value.slice(0, limit)
-  const overflow = value.length - head.length
-  const overflowProps = resolveBadgeVariant("gray")
+  const limit = field.limit ?? value.length;
+  const head = value.slice(0, limit);
+  const overflow = value.length - head.length;
+  const overflowProps = resolveBadgeVariant("gray");
   return (
     <div className="flex flex-wrap gap-1">
       {head.map((v, i) => (
-        <Badge
-          key={i}
-          {...badgeProps}
-          label={String(v)}
-          size="XS"
-         
-        />
+        <Badge key={i} {...badgeProps} label={String(v)} size="XS" />
       ))}
-      {overflow > 0 && (
-        <Badge {...overflowProps} label={`+${overflow}`} size="XS" />
-      )}
+      {overflow > 0 && <Badge {...overflowProps} label={`+${overflow}`} size="XS" />}
     </div>
-  )
+  );
 }
 
 function renderCurrency({ value, field }: RenderArgs): ReactNode {
-  const num = Number(value)
-  if (Number.isNaN(num)) return renderText({ value, field, row: {} as any })
+  const num = Number(value);
+  if (Number.isNaN(num)) return renderText({ value, field, row: {} as DynamicRecord });
 
   const opts: CurrencyOptions =
-    typeof field.currency === "string"
-      ? { code: field.currency }
-      : field.currency ?? {}
+    typeof field.currency === "string" ? { code: field.currency } : (field.currency ?? {});
 
-  let formatted: string
+  let formatted: string;
   if (opts.code) {
     try {
       formatted = new Intl.NumberFormat(opts.locale, {
@@ -160,39 +136,36 @@ function renderCurrency({ value, field }: RenderArgs): ReactNode {
         currency: opts.code,
         minimumFractionDigits: opts.decimals,
         maximumFractionDigits: opts.decimals,
-      }).format(num)
+      }).format(num);
     } catch {
       formatted = `${opts.symbol ?? "$"}${num.toLocaleString(opts.locale, {
         minimumFractionDigits: opts.decimals,
         maximumFractionDigits: opts.decimals,
-      })}`
+      })}`;
     }
   } else {
     formatted = `${opts.symbol ?? "$"}${num.toLocaleString(opts.locale, {
       minimumFractionDigits: opts.decimals,
       maximumFractionDigits: opts.decimals,
-    })}`
+    })}`;
   }
 
-  return <span className="font-semibold text-green-600">{formatted}</span>
+  return <span className="font-semibold text-green-600">{formatted}</span>;
 }
 
 function renderNumberFormat({ value, field }: RenderArgs): ReactNode {
-  const num = Number(value)
-  if (Number.isNaN(num)) return renderText({ value, field, row: {} as any })
-  const formatted = new Intl.NumberFormat(undefined, field.format).format(num)
-  return <span className="font-mono text-content-presentation-global-primary">{formatted}</span>
+  const num = Number(value);
+  if (Number.isNaN(num)) return renderText({ value, field, row: {} as DynamicRecord });
+  const formatted = new Intl.NumberFormat(undefined, field.format).format(num);
+  return <span className="font-mono text-content-presentation-global-primary">{formatted}</span>;
 }
 
 function renderProgressBar({ value, field }: RenderArgs): ReactNode {
-  const raw = Number(value)
-  const num = Number.isFinite(raw) ? raw : 0
-  const pct = Math.max(0, Math.min(100, num))
-  const [warn, ok] = field.thresholds ?? [40, 70]
-  const color =
-    num >= ok ? "bg-green-500"
-    : num >= warn ? "bg-yellow-500"
-    : "bg-red-500"
+  const raw = Number(value);
+  const num = Number.isFinite(raw) ? raw : 0;
+  const pct = Math.max(0, Math.min(100, num));
+  const [warn, ok] = field.thresholds ?? [40, 70];
+  const color = num >= ok ? "bg-green-500" : num >= warn ? "bg-yellow-500" : "bg-red-500";
 
   return (
     <div className="flex items-center gap-2 min-w-[120px]">
@@ -203,91 +176,83 @@ function renderProgressBar({ value, field }: RenderArgs): ReactNode {
         {Math.round(num)}%
       </span>
     </div>
-  )
+  );
 }
 
 function renderStarRating({ value, field }: RenderArgs): ReactNode {
-  const num = Number(value)
-  const max = field.max ?? 5
-  const filled = Math.max(0, Math.min(max, Math.floor(num)))
+  const num = Number(value);
+  const max = field.max ?? 5;
+  const filled = Math.max(0, Math.min(max, Math.floor(num)));
 
   return (
     <div className="flex items-center gap-2">
       <div className="flex">
         {Array.from({ length: max }).map((_, i) => (
-          <span
-            key={i}
-            className={i < filled ? "text-yellow-500" : "text-gray-300"}
-            aria-hidden
-          >
+          <span key={i} className={i < filled ? "text-yellow-500" : "text-gray-300"} aria-hidden>
             ★
           </span>
         ))}
       </div>
       <span className="text-sm font-semibold tabular-nums">{Number.isFinite(num) ? num : "-"}</span>
     </div>
-  )
+  );
 }
 
 function renderIconText({ value, field }: RenderArgs): ReactNode {
-  const icon = field.icon ?? ""
-  const after = field.iconPosition === "after"
+  const icon = field.icon ?? "";
+  const after = field.iconPosition === "after";
   return (
     <span className="inline-flex items-center gap-1.5 text-content-presentation-global-primary">
       {!after && icon && <IconNode icon={icon} />}
       <span>{String(value)}</span>
       {after && icon && <IconNode icon={icon} />}
     </span>
-  )
+  );
 }
 
 function IconNode({ icon }: { icon: string }) {
-  if (/^ri-/.test(icon)) return <i className={icon} />
-  return <span aria-hidden>{icon}</span>
+  if (/^ri-/.test(icon)) return <i className={icon} />;
+  return <span aria-hidden>{icon}</span>;
 }
 
 function renderTwoLine({ value, field, row }: RenderArgs): ReactNode {
-  const secondary =
-    field.secondaryPath != null ? getByPath(row, field.secondaryPath) : null
+  const secondary = field.secondaryPath != null ? getByPath(row, field.secondaryPath) : null;
   return (
     <div className="leading-tight">
-      <div className="font-semibold text-content-presentation-global-primary">
-        {String(value)}
-      </div>
+      <div className="font-semibold text-content-presentation-global-primary">{String(value)}</div>
       {secondary != null && (
         <div className="text-xs text-content-presentation-global-secondary">
           {String(secondary)}
         </div>
       )}
     </div>
-  )
+  );
 }
 
 function renderAvatar({ value, field, row }: RenderArgs): ReactNode {
-  const src = typeof value === "string" ? value : null
-  const fallbackSource =
-    field.fallbackPath != null ? getByPath(row, field.fallbackPath) : null
-  const initials = toInitials(fallbackSource ?? src ?? "?")
+  const src = typeof value === "string" ? value : null;
+  const fallbackSource = field.fallbackPath != null ? getByPath(row, field.fallbackPath) : null;
+  const initials = toInitials(fallbackSource ?? src ?? "?");
 
   return (
     <Avatar>
       {src && <AvatarImage src={src} alt={String(initials)} />}
       <AvatarFallback>{initials}</AvatarFallback>
     </Avatar>
-  )
+  );
 }
 
 function toInitials(s: string): string {
-  if (!s) return "?"
-  const parts = String(s).trim().split(/\s+/).slice(0, 2)
-  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("") || "?"
+  if (!s) return "?";
+  const parts = String(s).trim().split(/\s+/).slice(0, 2);
+  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("") || "?";
 }
 
 function renderLink({ value, field }: RenderArgs): ReactNode {
-  const v = String(value)
-  let href = v
-  if (field.linkType === "mailto" && !v.startsWith("mailto:")) href = `mailto:${v}`
-  else if (field.linkType === "tel" && !v.startsWith("tel:")) href = `tel:${v}`
+  const v = String(value);
+  let href = v;
+  if (field.linkType === "mailto" && !v.startsWith("mailto:")) href = `mailto:${v}`;
+  else if (field.linkType === "tel" && !v.startsWith("tel:")) href = `tel:${v}`;
 
   return (
     <a
@@ -299,36 +264,36 @@ function renderLink({ value, field }: RenderArgs): ReactNode {
     >
       {v}
     </a>
-  )
+  );
 }
 
 function renderImage({ value }: RenderArgs): ReactNode {
-  if (typeof value !== "string" || !value) return NULL_PLACEHOLDER
+  if (typeof value !== "string" || !value) return NULL_PLACEHOLDER;
   return (
     <img
       src={value}
       alt=""
       className="h-10 w-10 rounded object-cover border border-border-presentation-global-primary"
     />
-  )
+  );
 }
 
 const RENDERERS: Record<FieldType, (a: RenderArgs) => ReactNode> = {
-  "text": renderText,
-  "number": renderNumber,
-  "date": renderDate,
-  "boolean": renderBoolean,
-  "hidden": () => null,
+  text: renderText,
+  number: renderNumber,
+  date: renderDate,
+  boolean: renderBoolean,
+  hidden: () => null,
   "enum-badge": renderEnumBadge,
   "badge-array": renderBadgeArray,
-  "currency": renderCurrency,
+  currency: renderCurrency,
   "number-format": renderNumberFormat,
   "progress-bar": renderProgressBar,
   "star-rating": renderStarRating,
   "icon-text": renderIconText,
   "two-line": renderTwoLine,
-  "avatar": renderAvatar,
-  "link": renderLink,
-  "image": renderImage,
+  avatar: renderAvatar,
+  link: renderLink,
+  image: renderImage,
   "date-format": renderDateFormat,
-}
+};

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

@@ -1,20 +1,20 @@
-"use client"
+"use client";
 
-import { type ChangeEventHandler } from "react"
-import { DatePicker } from "../../DatePicker"
-import { InputField } from "../../InputField"
-import { ActionButton } from "../../ActionButton"
-import type { DateRangeFilter } from "../types"
-import { toIsoDate } from "../../../utils/dataViews/rangeUtils"
+import { type ChangeEventHandler } from "react";
+import { DatePicker } from "../../DatePicker";
+import { InputField } from "../../InputField";
+import { ActionButton } from "../../ActionButton";
+import type { DateRangeFilter } from "../types";
+import { toIsoDate } from "../../../utils/dataViews/rangeUtils";
 
 type Props = {
-  value: DateRangeFilter | undefined
-  onChange: (next: DateRangeFilter) => void
-}
+  value: DateRangeFilter | undefined;
+  onChange: (next: DateRangeFilter) => void;
+};
 
 /** Parse an ISO `yyyy-MM-dd` string to a local Date (noon-safe, no TZ drift). */
 function parseIso(iso?: string): Date | undefined {
-  return iso ? new Date(iso + "T00:00:00") : undefined
+  return iso ? new Date(iso + "T00:00:00") : undefined;
 }
 
 /** One labeled single-date Glare DatePicker bound to one end of the range. */
@@ -24,10 +24,10 @@ function DateBound({
   placeholder,
   onPick,
 }: {
-  caption: string
-  iso?: string
-  placeholder: string
-  onPick: (next?: string) => void
+  caption: string;
+  iso?: string;
+  placeholder: string;
+  onPick: (next?: string) => void;
 }) {
   return (
     <label className="flex items-center gap-2">
@@ -41,10 +41,12 @@ function DateBound({
           value={parseIso(iso) ?? (undefined as never)}
           dateFormat="yyyy-MM-dd"
           // Single mode reports `{ target: { value: Date } }` (it casts internally).
-          onChange={((e: { target: { value: Date | undefined } }) => {
-            const d = e?.target?.value
-            onPick(d instanceof Date ? toIsoDate(d) : undefined)
-          }) as unknown as ChangeEventHandler<HTMLInputElement>}
+          onChange={
+            ((e: { target: { value: Date | undefined } }) => {
+              const d = e?.target?.value;
+              onPick(d instanceof Date ? toIsoDate(d) : undefined);
+            }) as unknown as ChangeEventHandler<HTMLInputElement>
+          }
         >
           <InputField
             readOnly
@@ -59,7 +61,7 @@ function DateBound({
         </DatePicker>
       </div>
     </label>
-  )
+  );
 }
 
 /**
@@ -69,12 +71,17 @@ function DateBound({
  */
 export function DatePickerRangeFilter({ value, onChange }: Props) {
   const setBound = (key: "from" | "to") => (next?: string) =>
-    onChange({ kind: "date", from: value?.from, to: value?.to, [key]: next })
+    onChange({ kind: "date", from: value?.from, to: value?.to, [key]: next });
 
   return (
     <div className="space-y-2">
-      <DateBound caption="From" iso={value?.from} placeholder="Start date" onPick={setBound("from")} />
+      <DateBound
+        caption="From"
+        iso={value?.from}
+        placeholder="Start date"
+        onPick={setBound("from")}
+      />
       <DateBound caption="To" iso={value?.to} placeholder="End date" onPick={setBound("to")} />
     </div>
-  )
+  );
 }

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

@@ -1,47 +1,50 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { DayPicker, type DateRange } from "react-day-picker"
-import "react-day-picker/style.css"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-import { Calendar, X } from "lucide-react"
-import { cn } from "../../../utils/cn"
-import type { DateRangeFilter, FieldConfig } from "../types"
-import { toIsoDate } from "../../../utils/dataViews/rangeUtils"
-import { PresetChips } from "./PresetChips"
+import { useState } from "react";
+import { DayPicker, type DateRange } from "react-day-picker";
+import "react-day-picker/style.css";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Calendar, X } from "lucide-react";
+import { cn } from "../../../utils/cn";
+import type { DateRangeFilter, FieldConfig, FilterValue } from "../types";
+import { toIsoDate } from "../../../utils/dataViews/rangeUtils";
+import { PresetChips } from "./PresetChips";
 
 type Props = {
-  value: DateRangeFilter | undefined
-  onChange: (next: DateRangeFilter) => void
-  presets: FieldConfig["presets"]
-}
+  value: DateRangeFilter | undefined;
+  onChange: (next: DateRangeFilter) => void;
+  presets: FieldConfig["presets"];
+};
 
 export function DateRangePopover({ value, onChange, presets }: Props) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
 
   const range: DateRange | undefined =
     value && (value.from || value.to)
       ? {
           from: value.from ? new Date(value.from + "T00:00:00") : undefined,
-          to:   value.to   ? new Date(value.to   + "T00:00:00") : undefined,
+          to: value.to ? new Date(value.to + "T00:00:00") : undefined,
         }
-      : undefined
+      : undefined;
 
   const label =
-    value?.from && value?.to ? `${value.from} → ${value.to}`
-    : value?.from           ? `from ${value.from}`
-    : value?.to             ? `until ${value.to}`
-    : "Any date"
+    value?.from && value?.to
+      ? `${value.from} → ${value.to}`
+      : value?.from
+        ? `from ${value.from}`
+        : value?.to
+          ? `until ${value.to}`
+          : "Any date";
 
   const handleSelect = (next: DateRange | undefined) => {
     onChange({
       kind: "date",
       from: next?.from ? toIsoDate(next.from) : undefined,
-      to:   next?.to   ? toIsoDate(next.to)   : undefined,
-    })
-  }
+      to: next?.to ? toIsoDate(next.to) : undefined,
+    });
+  };
 
-  const isActive = !!(value?.from || value?.to)
+  const isActive = !!(value?.from || value?.to);
 
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
@@ -63,14 +66,14 @@ export function DateRangePopover({ value, onChange, presets }: Props) {
               tabIndex={0}
               aria-label="Clear date filter"
               onClick={(e) => {
-                e.stopPropagation()
-                onChange({ kind: "date" })
+                e.stopPropagation();
+                onChange({ kind: "date" });
               }}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") {
-                  e.stopPropagation()
-                  e.preventDefault()
-                  onChange({ kind: "date" })
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onChange({ kind: "date" });
                 }
               }}
               className="text-content-presentation-global-tertiary hover:text-content-presentation-global-primary cursor-pointer"
@@ -87,7 +90,11 @@ export function DateRangePopover({ value, onChange, presets }: Props) {
           className="z-50 bg-background-presentation-body-primary border border-border-presentation-global-primary rounded-lg shadow-lg p-3 space-y-3"
         >
           {presets && presets.length > 0 && (
-            <PresetChips presets={presets} current={value} onSelect={onChange as any} />
+            <PresetChips
+              presets={presets}
+              current={value}
+              onSelect={onChange as (value: FilterValue) => void}
+            />
           )}
           <DayPicker
             mode="range"
@@ -109,5 +116,5 @@ export function DateRangePopover({ value, onChange, presets }: Props) {
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
-  )
+  );
 }