torch-glare 2.1.0 → 2.1.2

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

@@ -0,0 +1,334 @@
+"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
+}
+
+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)
+
+  const type = field.type ?? "text"
+  if (type === "hidden") return null
+
+  if (value == null && type !== "boolean" && type !== "progress-bar") {
+    return NULL_PLACEHOLDER
+  }
+
+  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>
+  )
+}
+
+function renderNumber({ value }: RenderArgs): ReactNode {
+  return (
+    <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>
+}
+
+function renderDateFormat({ value, field }: RenderArgs): ReactNode {
+  const opts = field.dateFormat
+  let formatted = String(value)
+  try {
+    const d = value instanceof Date ? value : new Date(value)
+    if (!isNaN(d.getTime())) {
+      if (typeof opts === "object" && opts) {
+        formatted = new Intl.DateTimeFormat(undefined, opts).format(d)
+      } else if (typeof opts === "string") {
+        formatted = formatWithToken(d, opts)
+      } else {
+        formatted = new Intl.DateTimeFormat(undefined, {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        }).format(d)
+      }
+    }
+  } catch {
+    /* fall through to raw string */
+  }
+  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")
+  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()))
+}
+
+function renderBoolean({ value, field }: RenderArgs): ReactNode {
+  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"}
+      size="S"
+     
+    />
+  )
+}
+
+function renderEnumBadge({ value, field }: RenderArgs): ReactNode {
+  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" />
+}
+
+function renderBadgeArray({ value, field }: RenderArgs): ReactNode {
+  const badgeProps = resolveBadgeVariant(field.variant ?? "blue")
+  if (!Array.isArray(value)) {
+    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")
+  return (
+    <div className="flex flex-wrap gap-1">
+      {head.map((v, i) => (
+        <Badge
+          key={i}
+          {...badgeProps}
+          label={String(v)}
+          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 opts: CurrencyOptions =
+    typeof field.currency === "string"
+      ? { code: field.currency }
+      : field.currency ?? {}
+
+  let formatted: string
+  if (opts.code) {
+    try {
+      formatted = new Intl.NumberFormat(opts.locale, {
+        style: "currency",
+        currency: opts.code,
+        minimumFractionDigits: opts.decimals,
+        maximumFractionDigits: opts.decimals,
+      }).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>
+}
+
+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>
+}
+
+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"
+
+  return (
+    <div className="flex items-center gap-2 min-w-[120px]">
+      <div className="flex-1 h-2 rounded-full bg-background-presentation-form-field-primary overflow-hidden">
+        <div className={cn("h-full transition-all", color)} style={{ width: `${pct}%` }} />
+      </div>
+      <span className="text-xs font-medium tabular-nums text-content-presentation-global-primary w-10 text-right">
+        {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)))
+
+  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>
+        ))}
+      </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"
+  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>
+}
+
+function renderTwoLine({ value, field, row }: RenderArgs): ReactNode {
+  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>
+      {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 ?? "?")
+
+  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("") || "?"
+}
+
+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}`
+
+  return (
+    <a
+      href={href}
+      target={field.linkType === "url" ? "_blank" : undefined}
+      rel={field.linkType === "url" ? "noopener noreferrer" : undefined}
+      className="text-blue-600 hover:underline"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {v}
+    </a>
+  )
+}
+
+function renderImage({ value }: RenderArgs): ReactNode {
+  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,
+  "enum-badge": renderEnumBadge,
+  "badge-array": renderBadgeArray,
+  "currency": renderCurrency,
+  "number-format": renderNumberFormat,
+  "progress-bar": renderProgressBar,
+  "star-rating": renderStarRating,
+  "icon-text": renderIconText,
+  "two-line": renderTwoLine,
+  "avatar": renderAvatar,
+  "link": renderLink,
+  "image": renderImage,
+  "date-format": renderDateFormat,
+}

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

@@ -0,0 +1,113 @@
+"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"
+
+type Props = {
+  value: DateRangeFilter | undefined
+  onChange: (next: DateRangeFilter) => void
+  presets: FieldConfig["presets"]
+}
+
+export function DateRangePopover({ value, onChange, presets }: Props) {
+  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,
+        }
+      : undefined
+
+  const label =
+    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,
+    })
+  }
+
+  const isActive = !!(value?.from || value?.to)
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "flex items-center gap-2 w-full text-xs px-2.5 py-2 rounded-md border bg-background-presentation-body-primary text-left",
+            isActive
+              ? "border-content-presentation-action-primary text-content-presentation-global-primary"
+              : "border-border-presentation-global-primary text-content-presentation-global-secondary hover:text-content-presentation-global-primary",
+          )}
+        >
+          <Calendar className="w-3.5 h-3.5 shrink-0" />
+          <span className="flex-1 truncate">{label}</span>
+          {isActive && (
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label="Clear date filter"
+              onClick={(e) => {
+                e.stopPropagation()
+                onChange({ kind: "date" })
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  onChange({ kind: "date" })
+                }
+              }}
+              className="text-content-presentation-global-tertiary hover:text-content-presentation-global-primary cursor-pointer"
+            >
+              <X className="w-3 h-3" />
+            </span>
+          )}
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align="start"
+          sideOffset={6}
+          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} />
+          )}
+          <DayPicker
+            mode="range"
+            selected={range}
+            onSelect={handleSelect}
+            numberOfMonths={1}
+            showOutsideDays
+            className="rdp-glare"
+          />
+          <div className="flex justify-end pt-1 border-t border-border-presentation-global-primary">
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              className="text-xs px-3 py-1 rounded-md bg-content-presentation-action-primary text-white hover:opacity-90"
+            >
+              Done
+            </button>
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}

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

@@ -0,0 +1,45 @@
+"use client"
+
+import { cn } from "../../../utils/cn"
+import type { FieldPreset, FilterValue } from "../types"
+import { isPresetActive, presetToFilterValue } from "../../../utils/dataViews/rangeUtils"
+
+type PresetChipsProps = {
+  presets: FieldPreset[]
+  current: FilterValue | undefined
+  onSelect: (value: FilterValue) => void
+}
+
+export function PresetChips({ presets, current, onSelect }: PresetChipsProps) {
+  if (!presets || presets.length === 0) return null
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {presets.map((p) => {
+        const active = isPresetActive(p, current)
+        return (
+          <button
+            key={p.label}
+            type="button"
+            onClick={() => {
+              if (active) {
+                const v = presetToFilterValue(p)
+                onSelect(v.kind === "number" ? { kind: "number" } : { kind: "date" })
+              } else {
+                onSelect(presetToFilterValue(p))
+              }
+            }}
+            className={cn(
+              "text-xs px-2 py-1 rounded-md border transition-colors whitespace-nowrap",
+              active
+                ? "bg-content-presentation-action-primary text-white border-content-presentation-action-primary"
+                : "bg-background-presentation-form-field-primary border-border-presentation-global-primary text-content-presentation-global-secondary hover:text-content-presentation-global-primary",
+            )}
+          >
+            {p.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,154 @@
+"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/index.ts

@@ -0,0 +1,30 @@
+export { DataViewsLayout } from "./DataViewsLayout"
+export type { DataViewsLayoutProps } from "./DataViewsLayout"
+
+export { TableView } from "./TableView"
+export type { TableViewProps } from "./TableView"
+
+export { KanbanView } from "./KanbanView"
+export type { KanbanViewProps } from "./KanbanView"
+
+export { InboxView } from "./InboxView"
+export type { InboxViewProps } from "./InboxView"
+
+export { TreeView } from "./TreeView"
+export type { TreeViewProps } from "./TreeView"
+
+export { FilterPanel } from "./FilterPanel"
+export { SettingsPanel } from "./SettingsPanel"
+export { DataViewsHeader } from "./DataViewsHeader"
+export type { DataViewsHeaderView } from "./DataViewsHeader"
+export { DataViewsConfigPanel } from "./DataViewsConfigPanel"
+export type { DataViewsConfigPanelProps } from "./DataViewsConfigPanel"
+
+export { renderField } from "./fieldRenderers"
+export { resolveBadgeVariant } from "./badgeAdapter"
+export type { ResolvedBadgeProps } from "./badgeAdapter"
+
+export * from "./types"
+
+export { useDataViewsState } from "../../hooks/useDataViewsState"
+export type { UseDataViewsStateOptions } from "../../hooks/useDataViewsState"