torch-glare 2.4.4 → 2.5.0

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

@@ -1,299 +0,0 @@
-"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: unknown;
-  field: FieldConfig;
-  row: DynamicRecord;
-};
-
-const NULL_PLACEHOLDER = <span className="text-content-presentation-global-tertiary">-</span>;
-
-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;
-
-  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 as string | number);
-    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 DynamicRecord });
-
-  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 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";
-
-  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/DatePickerRangeFilter.tsx

@@ -1,87 +0,0 @@
-"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";
-
-type Props = {
-  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;
-}
-
-/** One labeled single-date Glare DatePicker bound to one end of the range. */
-function DateBound({
-  caption,
-  iso,
-  placeholder,
-  onPick,
-}: {
-  caption: string;
-  iso?: string;
-  placeholder: string;
-  onPick: (next?: string) => void;
-}) {
-  return (
-    <label className="flex items-center gap-2">
-      <span className="w-9 shrink-0 typography-body-small-regular text-content-presentation-global-secondary">
-        {caption}
-      </span>
-      <div className="flex-1 min-w-0">
-        <DatePicker
-          mode="single"
-          size="S"
-          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>
-          }
-        >
-          <InputField
-            readOnly
-            value={iso ?? ""}
-            placeholder={placeholder}
-            childrenSide={
-              <ActionButton type="button" size="S" aria-label={`Pick ${caption} date`}>
-                <i className="ri-calendar-event-line" />
-              </ActionButton>
-            }
-          />
-        </DatePicker>
-      </div>
-    </label>
-  );
-}
-
-/**
- * Date-range filter as two separate Glare DatePickers — a "From" and a "To"
- * single-date picker. Each writes only its own bound, preserving the other, so
- * the result is still a `DateRangeFilter` ({ from, to }).
- */
-export function DatePickerRangeFilter({ value, onChange }: Props) {
-  const setBound = (key: "from" | "to") => (next?: string) =>
-    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="To" iso={value?.to} placeholder="End date" onPick={setBound("to")} />
-    </div>
-  );
-}

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

@@ -1,120 +0,0 @@
-"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, 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"];
-};
-
-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 (value: FilterValue) => void}
-            />
-          )}
-          <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

@@ -1,45 +0,0 @@
-"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>
-  );
-}