torch-glare 2.4.4 → 2.5.0

package/apps/lib/components/DataViews/index.ts

@@ -1,36 +1,84 @@
-export { DataViewsLayout } from "./DataViewsLayout";
-export type { DataViewsLayoutProps } from "./DataViewsLayout";
+// Enumerated, never `export *` — the same convention as `FormBuilder/index.ts`, so what this
+// folder offers is readable in one screen.
+//
+// Almost everything is reached through the compound root: `DataViews.Table`, `DataViews.Panel`,
+// `DataViews.Filters`, and so on. The loose exports below are the pieces you need when writing a
+// part of your own.
 
-export { TableView } from "./TableView";
-export type { TableViewProps } from "./TableView";
+export { DataViews } from "./data-views";
 
-export { KanbanView } from "./KanbanView";
-export type { KanbanViewProps } from "./KanbanView";
+// The query's wire format, both directions. A page needs the first two; a route handler that
+// serves one of these lists needs `parseQuery`.
+export { emptyQuery, parseQuery, queryToParams } from "../../utils/dataViews/query";
 
-export { InboxView } from "./InboxView";
-export type { InboxViewProps } from "./InboxView";
+// Reach into the component's state from inside a custom child — a detail pane, a bespoke filter,
+// a toolbar button that clears the selection.
+export {
+  useDataViewsData,
+  useDataViewsFilters,
+  useDataViewsPanel,
+  useDataViewsPanelTabs,
+  useDataViewsView,
+} from "./context";
+export { useActiveRow } from "./hooks";
 
-export { InboxViewCard } from "./InboxViewCard";
-export type { InboxViewCardProps } from "./InboxViewCard";
+// Paint one field the way the views paint it, in your own layout.
+export { Cell } from "./cell";
 
-export { TreeView } from "./TreeView";
-export type { TreeViewProps } from "./TreeView";
+// A view of your own gets the loading state the built-in four get: read `loading` from
+// `useDataViewsData()` and lay these out in your own shape. There is no `Empty` counterpart —
+// nothing to show is shown as nothing.
+export { SkeletonBar, skeletonKeys } from "./states";
 
-export { DataViewRadio } from "./DataViewRadio";
-export type { DataViewRadioProps } from "./DataViewRadio";
+// Wrapping a part in a component of your own — a preset panel, a project-standard header — hides
+// the marker the root recognises it by, so the wrapper has to carry the marker itself:
+//
+// ```tsx
+// const AppPanel = markPanel(function AppPanel() { return <DataViews.Panel>…</DataViews.Panel>; });
+// ```
+export { markHeader, markPanel, markView } from "./slots";
+export { resolveBadgeVariant } from "./badge";
 
-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 type { ResolvedBadgeProps } from "./badge";
+export type {
+  DataContextValue,
+  FiltersContextValue,
+  PanelContextValue,
+  PanelTab,
+  PanelTabsContextValue,
+  RegisteredView,
+  ViewContextValue,
+} from "./context";
+export type * from "./types";
 
-export { renderField } from "./fieldRenderers";
-export { resolveBadgeVariant } from "./badgeAdapter";
-export type { ResolvedBadgeProps } from "./badgeAdapter";
+// The vocabulary — the shapes **you** construct and hand in: a row, a field, the query, a tree of
+// nodes, a board's groups. They live in `utils/dataViews` because the route handler that serves
+// these lists imports them too, and are re-exported here so that one import line is enough:
+// every prop above is typed in terms of them.
+export type {
+  BadgeVariant,
+  ColumnColor,
+  ColumnState,
+  CurrencyOptions,
+  DataViewsQuery,
+  FieldConfig,
+  FieldType,
+  FilterFieldDescriptor,
+  FilterState,
+  FilterValue,
+  MoveIntent,
+  Path,
+  Preset,
+  Row,
+  RowGroup,
+  Sort,
+  TreeNode,
+} from "../../utils/dataViews/types";
 
-export * from "./types";
+// Reading a value the way `Cell` reads it — dotted paths included — and the id rule the component
+// falls back to. A custom view or a `renderCell` that has to reach a second field needs these.
+export { defaultGetRowId, formatPathLabel, getByPath, getString } from "../../utils/dataViews/path";
 
-export { useDataViewsState } from "../../hooks/useDataViewsState";
-export type { UseDataViewsStateOptions } from "../../hooks/useDataViewsState";
+// The board's card body, so a card of your own — in the board or the tree's pane — is built from
+// the same pairs the built-in one uses.
+export { buildCardRows } from "./views/card-rows";

package/apps/lib/components/DataViews/panel/columns.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React from "react";
+import { cn } from "../../../utils/cn";
+import { DragList, useDragDrop, useDragItem } from "../../../hooks/useDragDrop";
+import { formatPathLabel } from "../../../utils/dataViews/path";
+import type { ColumnState } from "../../../utils/dataViews/types";
+import { useDataViewsData, useDataViewsView } from "../context";
+import { DataViewsSwitch } from "./controls";
+import { Section } from "./section";
+import type { PanelColumnsProps } from "../types";
+
+/** The 2×3 grip dots on a draggable column row. Hand-drawn — there is no icon for this shape. */
+function GripDots() {
+  return (
+    <svg aria-hidden width="16" height="16" viewBox="0 0 16 16" className="text-white/60" fill="currentColor">
+      {[5.33, 9.33].flatMap((cx) =>
+        [3.33, 8, 12.67].map((cy) => <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r="1" />),
+      )}
+    </svg>
+  );
+}
+
+/** The insertion line shown between rows while dragging one. */
+function DropLine() {
+  return (
+    <div className="pointer-events-none relative h-0">
+      <div className="absolute -top-[1px] left-0 right-0 h-[2px] rounded-full bg-[#005ECC]" />
+    </div>
+  );
+}
+
+/**
+ * `DataViews.Panel.Columns` — show/hide and reorder the columns.
+ *
+ * The column list is the root's, read and written through `useDataViewsView()` — this part takes
+ * no `value`/`onValueChange` of its own. The root is what turns `columns` into the ordered
+ * `visibleFields` every view paints from, so hiding a column here also retitles the board's cards. When `columns` has never been set, the list is seeded from
+ * `fields` on first edit, so you are not forced to declare a redundant array to get this working.
+ */
+export function Columns({
+  title = "Table Columns",
+  // Figma writes this line under the header; it is the section's own words, so it is the default
+  // rather than something every caller has to remember to pass.
+  description = "Show or hide columns in table view",
+  className,
+}: PanelColumnsProps) {
+  const { fields } = useDataViewsData();
+  const { columns, setColumns } = useDataViewsView();
+
+  // What the panel shows: the user's arrangement if there is one, otherwise the declared fields.
+  const current: ColumnState[] =
+    columns.length > 0
+      ? columns.slice()
+      : fields
+          .filter((f) => f.type !== "hidden")
+          .map((f) => ({
+            path: f.path,
+            label: f.label ?? formatPathLabel(f.path),
+            visible: f.visible !== false,
+          }));
+
+  // Rows are identified by path — the same key the table and every other view uses.
+  const ids = current.map((c) => c.path);
+
+  const { DndContext, contextProps, activeId, overId } = useDragDrop({
+    mode: "list",
+    onMove: ({ id, to }) => {
+      const from = ids.indexOf(id);
+      const target = ids.indexOf(String(to));
+      if (from < 0 || target < 0 || from === target) return;
+      const next = current.slice();
+      const [moved] = next.splice(from, 1);
+      next.splice(target, 0, moved);
+      setColumns(next);
+    },
+  });
+
+  const toggle = (path: string) =>
+    setColumns(current.map((c) => (c.path === path ? { ...c, visible: !c.visible } : c)));
+
+  return (
+    <Section title={title} description={description} className={className}>
+      <DndContext {...contextProps}>
+        <DragList ids={ids}>
+          <div data-theme="dark" className="flex flex-col gap-2">
+            {current.map((column, index) => (
+              <ColumnRow
+                key={`${column.path}-${index}`}
+                column={column}
+                onToggle={() => toggle(column.path)}
+                showDropLine={overId === column.path && activeId !== null && activeId !== column.path}
+              />
+            ))}
+          </div>
+        </DragList>
+      </DndContext>
+    </Section>
+  );
+}
+
+/**
+ * One column row.
+ *
+ * A separate component because `useDragItem` is a hook, and a hook cannot be called inside the
+ * `.map()` that paints the list.
+ */
+function ColumnRow({
+  column,
+  onToggle,
+  showDropLine,
+}: {
+  column: ColumnState;
+  onToggle: () => void;
+  showDropLine: boolean;
+}) {
+  const { ref, handleProps, style, isDragging } = useDragItem(column.path);
+
+  return (
+    <React.Fragment>
+      {showDropLine && <DropLine />}
+      <div
+        ref={ref}
+        style={style}
+        {...handleProps}
+        className={cn(
+                // SB-Column-Item: a standalone #1C1D1F pill with a #252729 border, rounded hard
+                // on the trailing edge and softly on the leading one.
+                "flex cursor-grab items-center gap-2 rounded-e-[99px] rounded-s-[60px] border",
+                "border-[#252729] bg-[#1C1D1F] p-[8.8px] transition-colors active:cursor-grabbing",
+          isDragging ? "opacity-50" : "hover:bg-[#252729]",
+        )}
+      >
+        <span className="flex shrink-0 items-center justify-center">
+          <GripDots />
+        </span>
+        <span className="flex-1 text-[14px] text-white">{column.label}</span>
+        {/* Stop the switch from starting a drag: the row is the handle, and a press on the
+            toggle is not a press on the row. */}
+        <span
+          className="flex shrink-0 items-center"
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <DataViewsSwitch
+            checked={column.visible}
+            onCheckedChange={onToggle}
+            aria-label={`Show ${column.label}`}
+          />
+        </span>
+      </div>
+    </React.Fragment>
+  );
+}

package/apps/lib/components/DataViews/panel/controls.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "../../../utils/cn";
+import { Switch } from "../../Switch";
+
+/**
+ * The form controls the settings rail is built from.
+ *
+ * The rail is wrapped in `data-theme="dark"`, so themed components resolve dark tokens on their
+ * own. The literals below are the exceptions — values chosen against pure black in Figma that
+ * sit outside the theme system entirely.
+ */
+
+/** The bright-green checked track from the Figma Switcher-1.0 "On" state. */
+const SWITCH_GREEN = "data-[state=checked]:bg-[#0AC713] data-[state=checked]:border-[#0AC713]";
+
+export function DataViewsSwitch(props: React.ComponentProps<typeof Switch>) {
+  return <Switch {...props} className={cn(SWITCH_GREEN, props.className)} />;
+}
+
+/**
+ * A radio row. The whole 32px row is the Radix item, so the label is part of the click target
+ * rather than something you have to hit the 14px ring for.
+ */
+export function DataViewRadio({
+  value,
+  label,
+  children,
+  className,
+}: {
+  value: string;
+  label?: string;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <RadioGroupPrimitive.Item
+      value={value}
+      className={cn(
+        "group flex h-[32px] w-full items-center gap-1.5 py-1 ps-2",
+        "cursor-pointer rounded-[8px] text-left outline-none transition-colors",
+        "hover:bg-background-presentation-action-contstyle-hover focus-visible:bg-background-presentation-action-contstyle-hover",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "flex h-[14px] w-[14px] shrink-0 items-center justify-center rounded-full",
+          // Literals so the indicator stays dark inside the rail regardless of the host theme,
+          // matching the always-dark panel chrome. Unselected ring is the CheckBox-Primary border
+          // (#626467) over the BorderStyle fill; selected is the focus blue.
+          "border border-[#626467] bg-white/5 transition-colors",
+          "group-data-[state=checked]:border-transparent",
+          "group-data-[state=checked]:bg-[#0075FF]",
+        )}
+      >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+          <span className="h-[6px] w-[6px] rounded-full bg-white" />
+        </RadioGroupPrimitive.Indicator>
+      </span>
+      <span className="typography-body-medium-regular text-content-presentation-global-primary flex-1">
+        {children ?? label}
+      </span>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+/**
+ * A `#1C1D1F` pill holding a list of radio rows, with hairlines between them.
+ *
+ * The two `:has()` rules hide the hairline above and below the row being hovered, so the hover
+ * highlight reads as one continuous block instead of being sliced by a line.
+ */
+export function RadioGroup({
+  value,
+  onValueChange,
+  items,
+  className,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  items: readonly { value: string; label: string }[];
+  className?: string;
+}) {
+  return (
+    <RadioGroupPrimitive.Root
+      value={value}
+      onValueChange={onValueChange}
+      className={cn(
+        "flex flex-col space-y-0 rounded-[12px] bg-[#1C1D1F] p-1",
+        "[&>div:has(>[role=radio]:hover)>.dv-divider]:opacity-0",
+        "[&>div:has(>[role=radio]:hover)+div>.dv-divider]:opacity-0",
+        className,
+      )}
+    >
+      {items.map((item, i) => (
+        <div key={item.value}>
+          {i > 0 && <div className="dv-divider h-px bg-[#2C2D2E]" />}
+          <DataViewRadio value={item.value} label={item.label} />
+        </div>
+      ))}
+    </RadioGroupPrimitive.Root>
+  );
+}

package/apps/lib/components/DataViews/panel/index.ts

@@ -0,0 +1,3 @@
+// The rail. `panel.tsx` assembles the compound surface; the rest is one component per file, the
+// same shape as `views/`.
+export { Panel } from "./panel";

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

@@ -0,0 +1,164 @@
+"use client";
+
+import React, { Children, useEffect, useMemo, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "../../../utils/cn";
+import { PanelTabsContext, useDataViewsPanel, type PanelTab } from "../context";
+import { markPanel } from "../slots";
+import { Columns } from "./columns";
+import { SavedViews } from "./saved-views";
+import { Section } from "./section";
+import { Sort } from "./sort";
+import { Tab, isTabElement } from "./tab";
+import type { PanelProps } from "../types";
+
+/**
+ * `DataViews.Panel` — the settings rail, opened by `DataViews.PanelToggle`.
+ *
+ * Always dark: `data-theme="dark"` on the root makes the Buttons, Switches and Radios inside
+ * resolve dark tokens against the black, even when the host app runs light. The width animates
+ * from 0 so the content beside it reflows rather than being covered.
+ *
+ * Tabs, like views, exist because you rendered them: the strip is built from the `Panel.Tab`
+ * children found here and disappears when there is only one.
+ *
+ * Open/closed lives on the root, because the toggle that drives it is in the header — this
+ * component's sibling. Which tab is showing lives here, because nothing outside this rail cares.
+ */
+function PanelRoot({ children, defaultTab, title, className }: PanelProps) {
+  const { open, setOpen } = useDataViewsPanel();
+
+  // Mount at width 0, then flip to the open width on the next frame so the transition has two
+  // values to animate between; on close, keep it mounted until the animation finishes.
+  const [mounted, setMounted] = useState(open);
+  const [expanded, setExpanded] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+      setMounted(true);
+      const raf = requestAnimationFrame(() => requestAnimationFrame(() => setExpanded(true)));
+      return () => cancelAnimationFrame(raf);
+    }
+    setExpanded(false);
+    closeTimer.current = setTimeout(() => setMounted(false), 300);
+    return () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    };
+  }, [open]);
+
+  const childArray = Children.toArray(children);
+  const tabElements = childArray.filter(isTabElement);
+  const loose = childArray.filter((n) => !isTabElement(n));
+
+  // Keyed on the tab identities rather than the (always-new) child array — same reasoning as the
+  // view registry in `data-views.tsx`.
+  const tabKey = tabElements.map((el) => `${el.props.value}|${el.props.label}`).join(",");
+  const tabs = useMemo<PanelTab[]>(
+    () =>
+      tabElements.map((el) => ({ value: el.props.value, label: el.props.label, icon: el.props.icon })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on `tabKey`, see above
+    [tabKey],
+  );
+
+  const [currentTab, setTab] = useState(defaultTab ?? "");
+  const known = tabs.some((t) => t.value === currentTab);
+  const fallbackTab = tabs[0]?.value ?? "";
+  // A tab that stops being rendered falls back to the first, which also covers the first render
+  // when no `defaultTab` was given.
+  const activeTab = known ? currentTab : fallbackTab;
+
+  const value = useMemo(() => ({ tab: activeTab, setTab, tabs }), [activeTab, setTab, tabs]);
+
+  if (!mounted) return null;
+
+  return (
+    <PanelTabsContext.Provider value={value}>
+      <div
+        className={cn(
+          "shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out",
+          expanded ? "w-[260px]" : "w-0",
+        )}
+      >
+        <aside
+          data-theme="dark"
+          data-state={expanded ? "open" : "closed"}
+          className={cn(
+            "flex h-full w-[260px] flex-col overflow-hidden rounded-[16px] bg-black",
+            "transition-opacity duration-200 ease-in-out",
+            expanded ? "opacity-100" : "opacity-0",
+            className,
+          )}
+        >
+          <div className="flex items-center gap-2 px-3 py-3">
+            {tabs.length > 1 ? (
+              <div className="flex flex-1 items-center gap-[2px] rounded-[10px] bg-[#252729] p-[2px] shadow-[inset_0_0_5px_0_rgba(0,0,0,0.16)]">
+                {tabs.map((t) => {
+                  const active = t.value === activeTab;
+                  return (
+                    <button
+                      key={t.value}
+                      type="button"
+                      role="tab"
+                      aria-selected={active}
+                      onClick={() => setTab(t.value)}
+                      className={cn(
+                        "flex h-6 flex-1 items-center justify-center gap-1 rounded-[8px] px-3",
+                        "text-[14px] font-[510] leading-none transition-all duration-200 ease-in-out",
+                        active
+                          ? "bg-white text-black shadow-[0_0_10px_2px_rgba(0,0,0,0.25)]"
+                          : "bg-transparent text-white hover:bg-white/5",
+                      )}
+                    >
+                      {t.icon && (
+                        <span className="flex h-[14px] w-[14px] items-center justify-center [&_svg]:h-[14px] [&_svg]:w-[14px]">
+                          {t.icon}
+                        </span>
+                      )}
+                      {t.label}
+                    </button>
+                  );
+                })}
+              </div>
+            ) : (
+              <span className="flex-1 text-[18px] font-[510] leading-[1.32] tracking-[-0.01em] text-white">
+                {title ?? tabs[0]?.label ?? ""}
+              </span>
+            )}
+
+            <button
+              type="button"
+              aria-label="Close settings panel"
+              onClick={() => setOpen(false)}
+              className="hover:bg-background-presentation-state-negative-primary flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] bg-white/[0.15] text-white transition-colors hover:text-white"
+            >
+              <X className="h-[18px] w-[18px]" />
+            </button>
+          </div>
+
+          <div className="h-px w-full bg-[#2C2D2E]" />
+
+          <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-3 py-4">
+            {tabElements}
+            {loose}
+          </div>
+        </aside>
+      </div>
+    </PanelTabsContext.Provider>
+  );
+}
+
+
+markPanel(PanelRoot);
+
+/**
+ * The rail's compound surface, assembled in one place so what it offers is readable at a glance.
+ */
+export const Panel = Object.assign(PanelRoot, {
+  Tab,
+  Section,
+  Columns,
+  Sort,
+  SavedViews,
+});

package/apps/lib/components/DataViews/panel/saved-views.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Button } from "../../Button";
+import { useDataViewsFilters, useDataViewsView } from "../context";
+import { RadioGroup } from "./controls";
+import { Section } from "./section";
+import type { PanelSavedViewsProps } from "../types";
+
+/**
+ * `DataViews.Panel.SavedViews` — pick a saved arrangement, or save the current one.
+ *
+ * Persistence is yours. `onSave` is handed the full snapshot — filters, sort and columns — which
+ * is the part the old panel got wrong: its save callback took no arguments, so there was nothing
+ * a host could actually store.
+ */
+export function SavedViews({
+  title = "Saved View",
+  views = [],
+  onValueChange,
+  onSave,
+  saveLabel = "Save a New View",
+  className,
+}: PanelSavedViewsProps) {
+  const { sort, setSort, columns, setColumns } = useDataViewsView();
+  const { filters, setFilters } = useDataViewsFilters();
+  // Which view is selected is UI state like any other — the caller stores the snapshots, not the
+  // cursor into them.
+  const [active, setActive] = useState("");
+
+  /** Selecting a view is the other half of saving one: put back exactly what was stored. */
+  const restore = (id: string) => {
+    setActive(id);
+    const snapshot = views.find((v) => v.id === id)?.snapshot;
+    if (snapshot) {
+      setColumns(snapshot.columns);
+      setSort(snapshot.sort);
+      setFilters(snapshot.filters);
+    }
+    onValueChange?.(id);
+  };
+
+  return (
+    <Section title={title} className={className}>
+      {views.length > 0 && (
+        <RadioGroup
+          value={active}
+          onValueChange={restore}
+          items={views.map((v) => ({ value: v.id, label: v.label }))}
+        />
+      )}
+      {onSave && (
+        <Button
+          type="button"
+          variant="BorderStyle"
+          size="M"
+          className="w-full"
+          onClick={() => onSave({ filters, sort, columns })}
+        >
+          <Plus className="h-4 w-4" />
+          {saveLabel}
+        </Button>
+      )}
+    </Section>
+  );
+}