@inshorts/glint-ui 0.5.3 → 0.6.0

package/src/data-table.tsx

@@ -1,190 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-/**
- * The list table every feature panel was hand-rolling.
- *
- * Seventeen files repeated the same wrapper string
- * (`border-border bg-background/80 overflow-x-auto rounded-lg border`) and the
- * header had already drifted into two incompatible looks, so Campaigns and
- * Targets did not resemble each other. Both are kept as `variant` rather than
- * unified here: collapsing them is a visual change to ten panels and belongs in
- * its own reviewable diff, not smuggled in with a refactor.
- *
- * The column contract deliberately echoes `GridColumn` in
- * `spreadsheet-grid.tsx` — `key`, `title`, a renderer, an optional class — so
- * the repo has one shape to learn. It drops that type's `value: (row) => string`
- * because there is no clipboard or CSV here; nothing would keep it honest, and
- * a required field nobody reads gets filled in with lies.
- *
- * **Not for every table.** `GroupTable` renders parent and child rows with
- * different column counts, and `BusinessTable`'s rows are dnd-kit sortables that
- * own their own refs and transforms. `PublishModal`, `BulkCreateModal` and the
- * clone queue in `MetaAdSetsPanel` are grids of inputs rather than lists of
- * values — every cell is an editable control, and they size their header and
- * body rows differently on purpose. All five are legitimately tables of a
- * different kind; bending this component around them would cost more than it
- * saves.
- */
-export type TableColumn<Row> = {
-  key: string;
-  /** Node, not string: a header can carry a select-all box or a sort control. */
-  title: React.ReactNode;
-  cell: (row: Row, index: number) => React.ReactNode;
-  align?: "left" | "right" | "center";
-  /**
-   * Set on a sortable column so a screen reader announces the current sort.
-   * Only the sorted column says `ascending`/`descending`; the rest say `none`,
-   * which is what marks them as sortable at all.
-   */
-  ariaSort?: "ascending" | "descending" | "none";
-  /** Extra classes for this column's `<td>`. */
-  className?: string;
-  /** Extra classes for this column's `<th>`. */
-  headerClassName?: string;
-};
-
-export interface DataTableProps<Row> {
-  columns: TableColumn<Row>[];
-  rows: Row[];
-  /** Stable React key per row. */
-  rowKey: (row: Row, index: number) => string;
-  /**
-   * `uppercase` — the tinted small-caps header (campaigns, showcase, filters).
-   * `plain` — the quieter left-aligned header (ads, targets, creatives).
-   */
-  variant?: "uppercase" | "plain";
-  /**
-   * `comfortable` — the roomy default, for tables of a handful of columns.
-   * `compact` — what every table of eight columns or more had already chosen by
-   * hand, because the roomy padding pushes them into a horizontal scroll.
-   */
-  density?: "comfortable" | "compact";
-  /** Pins the header for a table inside its own scroll container. */
-  stickyHeader?: boolean;
-  rowClassName?: (row: Row, index: number) => string | undefined;
-  /** Rendered in place of `<tbody>` rows when there are none. */
-  emptyMessage?: React.ReactNode;
-  /**
-   * Rows for a `<tfoot>` — a totals line, typically. The caller supplies the
-   * `<tr>` itself because a summary row rarely lines up with the columns above
-   * it; designer-counts spans its first two.
-   */
-  footer?: React.ReactNode;
-  /** Names the table for screen readers when no visible caption fits. */
-  ariaLabel?: string;
-  /** Classes for the scroll wrapper. */
-  className?: string;
-  /** Classes for the `<table>`. */
-  tableClassName?: string;
-}
-
-const HEADER_VARIANTS = {
-  uppercase:
-    "border-border bg-muted/40 text-muted-foreground border-b text-xs tracking-wide uppercase",
-  plain: "text-muted-foreground border-border border-b text-left",
-} as const;
-
-const DENSITY = {
-  comfortable: "px-4 py-3",
-  compact: "px-3 py-2",
-} as const;
-
-const ALIGN = {
-  left: "text-left",
-  right: "text-right",
-  center: "text-center",
-} as const;
-
-export function DataTable<Row>({
-  columns,
-  rows,
-  rowKey,
-  variant = "uppercase",
-  density = "comfortable",
-  stickyHeader = false,
-  rowClassName,
-  emptyMessage,
-  footer,
-  ariaLabel,
-  className,
-  tableClassName,
-}: DataTableProps<Row>) {
-  return (
-    <div
-      className={cn(
-        "border-border bg-background/80 overflow-x-auto rounded-lg border",
-        className,
-      )}
-    >
-      <table
-        aria-label={ariaLabel}
-        className={cn("min-w-full text-left text-sm", tableClassName)}
-      >
-        <thead
-          className={cn(
-            HEADER_VARIANTS[variant],
-            stickyHeader && "bg-muted sticky top-0 z-10",
-          )}
-        >
-          <tr>
-            {columns.map((column) => (
-              <th
-                key={column.key}
-                scope="col"
-                aria-sort={column.ariaSort}
-                className={cn(
-                  DENSITY[density],
-                  "font-medium",
-                  ALIGN[column.align ?? "left"],
-                  column.headerClassName,
-                )}
-              >
-                {column.title}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.length === 0 && emptyMessage != null ? (
-            <tr>
-              {/* One cell across the whole width — a short row would otherwise
-                  leave the message sitting under the first column. */}
-              <td
-                colSpan={columns.length}
-                className="text-muted-foreground px-4 py-6 text-center text-sm"
-              >
-                {emptyMessage}
-              </td>
-            </tr>
-          ) : (
-            rows.map((row, index) => (
-              <tr
-                key={rowKey(row, index)}
-                className={cn(
-                  "border-border/70 border-b last:border-0",
-                  rowClassName?.(row, index),
-                )}
-              >
-                {columns.map((column) => (
-                  <td
-                    key={column.key}
-                    className={cn(
-                      DENSITY[density],
-                      ALIGN[column.align ?? "left"],
-                      column.className,
-                    )}
-                  >
-                    {column.cell(row, index)}
-                  </td>
-                ))}
-              </tr>
-            ))
-          )}
-        </tbody>
-        {footer != null ? <tfoot>{footer}</tfoot> : null}
-      </table>
-    </div>
-  );
-}

package/src/date-range-picker/dateRange.ts

@@ -1,142 +0,0 @@
-/**
- * Date helpers for the range picker, all in local time.
- *
- * Deliberately not `toISOString()`: that converts to UTC first, so on any
- * negative-offset day it returns yesterday's date and the picker highlights the
- * wrong cell. Every value here is built and read as the local calendar day the
- * user is actually looking at.
- */
-
-/** `YYYY-MM-DD`, the value shape the filters store. */
-export type IsoDate = string;
-
-const pad = (n: number) => String(n).padStart(2, "0");
-
-export function toIsoDate(date: Date): IsoDate {
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
-
-/** Parses `YYYY-MM-DD` into a local midnight Date; null for anything else. */
-export function fromIsoDate(value: string | null | undefined): Date | null {
-  if (!value) return null;
-  const trimmed = value.trim();
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
-  if (!match) return null;
-  const date = new Date(
-    Number(match[1]),
-    Number(match[2]) - 1,
-    Number(match[3]),
-  );
-  // Rejects 2026-02-31, which would otherwise roll silently into March.
-  return toIsoDate(date) === trimmed ? date : null;
-}
-
-export function startOfMonth(date: Date): Date {
-  return new Date(date.getFullYear(), date.getMonth(), 1);
-}
-
-export function addMonths(date: Date, count: number): Date {
-  return new Date(date.getFullYear(), date.getMonth() + count, 1);
-}
-
-export function addDays(date: Date, count: number): Date {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + count);
-}
-
-export function isSameDay(a: Date | null, b: Date | null): boolean {
-  if (!a || !b) return false;
-  return toIsoDate(a) === toIsoDate(b);
-}
-
-/**
- * The six-week grid for a month, Sunday-first, padded with the neighbouring
- * months so every row has seven cells.
- *
- * Always six rows, never five: a grid that changes height as you page through
- * months makes everything below it jump.
- */
-export function monthGrid(month: Date): Date[] {
-  const first = startOfMonth(month);
-  const start = addDays(first, -first.getDay());
-  return Array.from({ length: 42 }, (_, index) => addDays(start, index));
-}
-
-export function monthLabel(month: Date, locale = "en-IN"): string {
-  return month.toLocaleDateString(locale, { month: "long", year: "numeric" });
-}
-
-/** Human form for the trigger — "22 Aug 2026". */
-export function formatDisplay(value: string, locale = "en-IN"): string {
-  const date = fromIsoDate(value);
-  if (!date) return "";
-  return date.toLocaleDateString(locale, {
-    day: "numeric",
-    month: "short",
-    year: "numeric",
-  });
-}
-
-export function startOfDayMs(value: string): number {
-  const date = fromIsoDate(value);
-  return date ? date.getTime() : 0;
-}
-
-/**
- * The end of a day as milliseconds.
- *
- * A range picked as whole days has to include everything created on the last
- * day, so "to" means 23:59:59.999 rather than that morning's midnight — which
- * would drop a whole day of cards without saying so.
- */
-export function endOfDayMs(value: string): number {
-  const date = fromIsoDate(value);
-  if (!date) return 0;
-  return new Date(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate(),
-    23,
-    59,
-    59,
-    999,
-  ).getTime();
-}
-
-/**
- * 11:59 PM on that local day, as 23:59:59.
- *
- * The next midnight is already the following date, and the feed includes that
- * whole day — so the 28th through the 28th came back with the 29th. Stopping
- * at 11:59 PM keeps the end on the day that was picked.
- */
-export function endAt2359Ms(value: string): number {
-  const date = fromIsoDate(value);
-  if (!date) return 0;
-  return new Date(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate(),
-    23,
-    59,
-    59,
-    0,
-  ).getTime();
-}
-
-/**
- * Created-date window for the feed.
- *
- * A blank end means the start day, so one selected date is that whole day.
- * `end_time` is 11:59 PM on the end date.
- */
-export function createdRangeMs(
-  from: string,
-  to: string,
-): { start_time: number; end_time: number } {
-  const startDate = from.trim() || to.trim();
-  const endDate = to.trim() || from.trim();
-  return {
-    start_time: startOfDayMs(startDate),
-    end_time: endAt2359Ms(endDate),
-  };
-}

package/src/date-range-picker/index.tsx

@@ -1,366 +0,0 @@
-"use client";
-
-import { CalendarDays, ChevronLeft, ChevronRight, X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../utils";
-import {
-  addDays,
-  addMonths,
-  formatDisplay,
-  fromIsoDate,
-  isSameDay,
-  monthGrid,
-  monthLabel,
-  startOfMonth,
-  toIsoDate,
-} from "./dateRange";
-
-export type DateRangeValue = { from: string; to: string };
-
-/**
- * A two-month range calendar.
- *
- * Two separate date fields cost two columns and read as two unrelated
- * questions when they are one: which window. They also let the pair be set
- * backwards, which returns nothing and looks like a broken filter.
- *
- * Two months rather than one because almost every range anyone picks here
- * crosses a month boundary — "last week of July into the first of August" is a
- * single gesture with two months visible and a paging exercise with one.
- *
- * Presets are the useful half. The common ranges are the same handful every
- * time, and picking "Last 7 days" out of a list beats counting backwards on a
- * grid.
- */
-const PRESETS: { label: string; range: () => DateRangeValue }[] = [
-  {
-    label: "Today",
-    range: () => {
-      const today = toIsoDate(new Date());
-      return { from: today, to: today };
-    },
-  },
-  {
-    label: "Yesterday",
-    range: () => {
-      const day = toIsoDate(addDays(new Date(), -1));
-      return { from: day, to: day };
-    },
-  },
-  {
-    label: "Last 7 days",
-    range: () => ({
-      from: toIsoDate(addDays(new Date(), -6)),
-      to: toIsoDate(new Date()),
-    }),
-  },
-  {
-    label: "Last 30 days",
-    range: () => ({
-      from: toIsoDate(addDays(new Date(), -29)),
-      to: toIsoDate(new Date()),
-    }),
-  },
-  {
-    label: "This month",
-    range: () => ({
-      from: toIsoDate(startOfMonth(new Date())),
-      to: toIsoDate(new Date()),
-    }),
-  },
-];
-
-const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-
-export interface DateRangePickerProps {
-  value: DateRangeValue;
-  onChange: (next: DateRangeValue) => void;
-  disabled?: boolean;
-  placeholder?: string;
-  className?: string;
-  /** Names the trigger for screen readers when there is no visible label. */
-  ariaLabel?: string;
-}
-
-export function DateRangePicker({
-  value,
-  onChange,
-  disabled,
-  placeholder = "Any date",
-  className,
-  ariaLabel = "Date range",
-}: DateRangePickerProps) {
-  const [open, setOpen] = React.useState(false);
-  const [hovered, setHovered] = React.useState<Date | null>(null);
-  /** Set while choosing the second end, so the range can preview under the cursor. */
-  const [pendingFrom, setPendingFrom] = React.useState<Date | null>(null);
-  const rootRef = React.useRef<HTMLDivElement>(null);
-
-  const from = fromIsoDate(value.from);
-  const to = fromIsoDate(value.to);
-
-  const [viewMonth, setViewMonth] = React.useState<Date>(() =>
-    startOfMonth(from ?? new Date()),
-  );
-
-  React.useEffect(() => {
-    if (!open) return undefined;
-    const onPointerDown = (event: MouseEvent) => {
-      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
-    };
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-
-  /**
-   * Reopening lands on the current selection rather than wherever the view was
-   * left. Done here rather than in an effect: it is a response to an event, and
-   * setting state from an effect is what `react-hooks/set-state-in-effect`
-   * rejects — correctly, since it costs an extra render every open.
-   */
-  function openPicker() {
-    setViewMonth(startOfMonth(fromIsoDate(value.from) ?? new Date()));
-    setPendingFrom(null);
-    setHovered(null);
-    setOpen(true);
-  }
-
-  const anchor = pendingFrom ?? (to ? null : from);
-  const previewEnd = pendingFrom ? hovered : null;
-
-  function rangeBounds(): [Date | null, Date | null] {
-    if (pendingFrom) {
-      if (!previewEnd) return [pendingFrom, pendingFrom];
-      return previewEnd.getTime() < pendingFrom.getTime()
-        ? [previewEnd, pendingFrom]
-        : [pendingFrom, previewEnd];
-    }
-    return [from, to];
-  }
-
-  const [rangeStart, rangeEnd] = rangeBounds();
-
-  function selectDay(day: Date) {
-    if (!anchor) {
-      // Starting a new range. Keeping only `from` means the next click closes
-      // it, whichever side of the anchor it lands on.
-      setPendingFrom(day);
-      onChange({ from: toIsoDate(day), to: "" });
-      return;
-    }
-    const [start, end] =
-      day.getTime() < anchor.getTime() ? [day, anchor] : [anchor, day];
-    onChange({ from: toIsoDate(start), to: toIsoDate(end) });
-    setPendingFrom(null);
-    setHovered(null);
-    setOpen(false);
-  }
-
-  /** Arrow keys move by day/week across both months, as a calendar should. */
-  function onGridKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
-    const offsets: Record<string, number> = {
-      ArrowLeft: -1,
-      ArrowRight: 1,
-      ArrowUp: -7,
-      ArrowDown: 7,
-    };
-    const offset = offsets[event.key];
-    if (offset === undefined) return;
-    const focused = document.activeElement as HTMLElement | null;
-    const iso = focused?.dataset?.day;
-    const current = fromIsoDate(iso);
-    if (!current) return;
-    event.preventDefault();
-    const next = addDays(current, offset);
-    const nextIso = toIsoDate(next);
-    // Page the view when the move lands outside what is rendered.
-    if (!rootRef.current?.querySelector(`[data-day="${nextIso}"]`)) {
-      setViewMonth(startOfMonth(offset < 0 ? next : addMonths(next, -1)));
-    }
-    window.requestAnimationFrame(() => {
-      rootRef.current
-        ?.querySelector<HTMLElement>(`[data-day="${nextIso}"]`)
-        ?.focus();
-    });
-  }
-
-  const label =
-    value.from || value.to
-      ? `${formatDisplay(value.from) || "Any"} → ${formatDisplay(value.to) || "Any"}`
-      : placeholder;
-
-  const today = new Date();
-
-  function renderMonth(month: Date) {
-    return (
-      <div key={monthLabel(month)} className="w-[15.75rem] shrink-0">
-        <div className="text-foreground mb-2 text-center text-sm font-medium whitespace-nowrap">
-          {monthLabel(month)}
-        </div>
-        <div className="text-muted-foreground grid grid-cols-7 text-center text-[11px]">
-          {WEEKDAYS.map((day) => (
-            <div key={day} className="grid size-9 place-items-center">
-              {day}
-            </div>
-          ))}
-        </div>
-        <div className="grid grid-cols-7">
-          {monthGrid(month).map((day) => {
-            const iso = toIsoDate(day);
-            const outside = day.getMonth() !== month.getMonth();
-            const isStart = isSameDay(day, rangeStart);
-            const isEnd = isSameDay(day, rangeEnd);
-            const inRange =
-              rangeStart != null &&
-              rangeEnd != null &&
-              day.getTime() > rangeStart.getTime() &&
-              day.getTime() < rangeEnd.getTime();
-            const isToday = isSameDay(day, today);
-
-            return (
-              <button
-                key={iso}
-                type="button"
-                data-day={iso}
-                // Outside days stay clickable — clicking one is how you reach
-                // the neighbouring month without paging.
-                onClick={() => selectDay(day)}
-                onMouseEnter={() => setHovered(day)}
-                aria-label={day.toDateString()}
-                aria-pressed={isStart || isEnd}
-                className={cn(
-                  "focus-visible:ring-ring relative grid size-9 place-items-center rounded-md text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none",
-                  outside ? "text-muted-foreground/50" : "text-foreground",
-                  inRange && "bg-primary/10 rounded-none",
-                  (isStart || isEnd) &&
-                    "bg-primary text-primary-foreground font-medium",
-                  // Square off the inner edge so a range reads as one bar
-                  // rather than two pills with a gap.
-                  isStart && rangeEnd && !isEnd && "rounded-r-none",
-                  isEnd && rangeStart && !isStart && "rounded-l-none",
-                  !isStart && !isEnd && "hover:bg-muted",
-                  isToday &&
-                    !isStart &&
-                    !isEnd &&
-                    "ring-border font-semibold ring-1",
-                )}
-              >
-                {day.getDate()}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div ref={rootRef} className={cn("relative", className)}>
-      <div
-        className={cn(
-          "border-border bg-background flex items-center rounded-md border",
-          "focus-within:ring-ring/50 focus-within:border-ring focus-within:ring-2",
-          disabled && "opacity-50",
-        )}
-      >
-        <button
-          type="button"
-          disabled={disabled}
-          aria-haspopup="dialog"
-          aria-expanded={open}
-          aria-label={ariaLabel}
-          onClick={() => (open ? setOpen(false) : openPicker())}
-          className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left text-sm"
-        >
-          <CalendarDays
-            className="text-muted-foreground size-4 shrink-0"
-            aria-hidden
-          />
-          <span
-            className={cn(
-              "truncate",
-              !value.from && !value.to && "text-muted-foreground",
-            )}
-          >
-            {label}
-          </span>
-        </button>
-        {(value.from || value.to) && !disabled ? (
-          <button
-            type="button"
-            aria-label="Clear date range"
-            onClick={() => {
-              onChange({ from: "", to: "" });
-              setPendingFrom(null);
-            }}
-            className="text-muted-foreground hover:text-foreground shrink-0 px-2"
-          >
-            <X className="size-3.5" aria-hidden />
-          </button>
-        ) : null}
-      </div>
-
-      {open ? (
-        <div
-          role="dialog"
-          aria-label={ariaLabel}
-          // `w-max` so the calendar sets its own width instead of inheriting
-          // the filter column, which squeezed the months until the numbers ran
-          // together. Anchored right because this sits in the last column and
-          // would otherwise open off the edge of the viewport.
-          className="border-border bg-background absolute top-full right-0 z-50 mt-1 flex w-max rounded-lg border p-3 shadow-lg"
-        >
-          <div className="border-border mr-3 flex w-32 shrink-0 flex-col gap-0.5 border-r pr-3">
-            {PRESETS.map((preset) => (
-              <button
-                key={preset.label}
-                type="button"
-                className="hover:bg-muted text-foreground rounded-md px-2 py-1.5 text-left text-xs"
-                onClick={() => {
-                  onChange(preset.range());
-                  setPendingFrom(null);
-                  setOpen(false);
-                }}
-              >
-                {preset.label}
-              </button>
-            ))}
-          </div>
-
-          <div onKeyDown={onGridKeyDown}>
-            <div className="mb-2 flex items-center justify-between">
-              <button
-                type="button"
-                aria-label="Previous month"
-                className="hover:bg-muted text-muted-foreground hover:text-foreground rounded-md p-1.5"
-                onClick={() => setViewMonth(addMonths(viewMonth, -1))}
-              >
-                <ChevronLeft className="size-4" aria-hidden />
-              </button>
-              <button
-                type="button"
-                aria-label="Next month"
-                className="hover:bg-muted text-muted-foreground hover:text-foreground rounded-md p-1.5"
-                onClick={() => setViewMonth(addMonths(viewMonth, 1))}
-              >
-                <ChevronRight className="size-4" aria-hidden />
-              </button>
-            </div>
-            <div className="flex gap-5" onMouseLeave={() => setHovered(null)}>
-              {renderMonth(viewMonth)}
-              {renderMonth(addMonths(viewMonth, 1))}
-            </div>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}