torch-glare 2.5.6 → 2.6.0

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

@@ -1,144 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-import type {
-  ColumnState,
-  FieldConfig,
-  FilterFieldDescriptor,
-  FilterState,
-  Row,
-  Sort,
-} from "../../utils/dataViews/types";
-
-/**
- * Every context DataViews uses. As in `FormBuilder`, this is the only file that calls
- * `createContext` — a part never invents its own provider, so there is one place to look when
- * asking "where does this part get its data".
- */
-
-// ─── Data ─────────────────────────────────────────────────────────────────────
-
-export interface DataContextValue {
-  /** The rows to paint, exactly as handed in. Already filtered and sorted by the app. */
-  rows: readonly Row[];
-  /** How to paint each field. */
-  fields: readonly FieldConfig[];
-  /** The visible fields, in the order the user arranged them. Resolved once by the root. */
-  visibleFields: readonly FieldConfig[];
-  /** Stable identity for a row — selection and drag both key off this. */
-  getRowId: (row: Row, index: number) => string;
-  loading: boolean;
-  /** True while the *next* page is in flight — `loading` is the first one. */
-  loadingMore: boolean;
-  /** Whether there is a next page: derived from `rows.length < total`, never passed in. */
-  hasMore: boolean;
-  /** Ask for the next page. Undefined when the caller did not opt into scroll loading. */
-  onLoadMore?: () => void;
-}
-
-export const DataContext = createContext<DataContextValue | null>(null);
-
-export function useDataViewsData(): DataContextValue {
-  const ctx = useContext(DataContext);
-  if (!ctx) throw new Error("DataViews parts must be rendered inside <DataViews>.");
-  return ctx;
-}
-
-// ─── View ─────────────────────────────────────────────────────────────────────
-
-/** One entry in the switcher. Registered by rendering the view, never by a visibility map. */
-export interface RegisteredView {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-}
-
-/** The root's interaction state — everything the user can change that is not a row. */
-export interface ViewContextValue {
-  view: string;
-  setView: (id: string) => void;
-  /** In the order the views were rendered. */
-  views: readonly RegisteredView[];
-  search: string;
-  setSearch: (q: string) => void;
-  sort: Sort;
-  setSort: (sort: Sort) => void;
-  selection: readonly string[];
-  setSelection: (ids: readonly string[]) => void;
-  /** The row the detail pane is showing, for the views that have one. */
-  activeId: string | null;
-  setActiveId: (id: string | null) => void;
-  /** Column visibility and order. The panel edits these; the root paints from them. */
-  columns: readonly ColumnState[];
-  setColumns: (columns: readonly ColumnState[]) => void;
-}
-
-export const ViewContext = createContext<ViewContextValue | null>(null);
-
-export function useDataViewsView(): ViewContextValue {
-  const ctx = useContext(ViewContext);
-  if (!ctx) throw new Error("DataViews parts must be rendered inside <DataViews>.");
-  return ctx;
-}
-
-// ─── Panel ────────────────────────────────────────────────────────────────────
-
-/**
- * Whether the settings panel is showing. Provided by the **root**, not by `Panel` — the toggle
- * lives in the header, which is `Panel`'s sibling, so neither can own the state the other needs.
- */
-export interface PanelContextValue {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-export const PanelContext = createContext<PanelContextValue | null>(null);
-
-export function useDataViewsPanel(): PanelContextValue {
-  const ctx = useContext(PanelContext);
-  if (!ctx) throw new Error("DataViews parts must be rendered inside <DataViews>.");
-  return ctx;
-}
-
-/** One entry in the panel's tab strip, registered by rendering a `DataViews.Panel.Tab`. */
-export interface PanelTab {
-  value: string;
-  label: string;
-  icon?: React.ReactNode;
-}
-
-/** Which tab the panel is on. Owned by `Panel`, because only its own children care. */
-export interface PanelTabsContextValue {
-  tab: string;
-  setTab: (tab: string) => void;
-  tabs: readonly PanelTab[];
-}
-
-export const PanelTabsContext = createContext<PanelTabsContextValue | null>(null);
-
-export function useDataViewsPanelTabs(): PanelTabsContextValue {
-  const ctx = useContext(PanelTabsContext);
-  if (!ctx) throw new Error("DataViews.Panel parts must be rendered inside <DataViews.Panel>.");
-  return ctx;
-}
-
-// ─── Filters ──────────────────────────────────────────────────────────────────
-
-export interface FiltersContextValue {
-  filters: FilterState;
-  setFilters: (filters: FilterState) => void;
-  /**
-   * What each filter control is, read off the `FormBuilder` children of `DataViews.Filters` —
-   * never derived from the rows. The root collects them as well, so a consumer such as
-   * `Filters.Presets` can resolve a field by path even when it is rendered outside `Filters`.
-   */
-  filterFields: readonly FilterFieldDescriptor[];
-}
-
-export const FiltersContext = createContext<FiltersContextValue | null>(null);
-
-export function useDataViewsFilters(): FiltersContextValue {
-  const ctx = useContext(FiltersContext);
-  if (!ctx) throw new Error("DataViews.Filters parts must be rendered inside <DataViews.Filters>.");
-  return ctx;
-}

package/apps/lib/components/DataViews/data-views.tsx

@@ -1,395 +0,0 @@
-"use client";
-
-import React, { Children, useCallback, useEffect, useMemo, useState } from "react";
-import { cn } from "../../utils/cn";
-import { defaultGetRowId } from "../../utils/dataViews/path";
-import { emptyQuery } from "../../utils/dataViews/query";
-import type {
-  ColumnState,
-  DataViewsQuery,
-  FieldConfig,
-  FilterState,
-  Sort,
-} from "../../utils/dataViews/types";
-import {
-  DataContext,
-  FiltersContext,
-  PanelContext,
-  ViewContext,
-  type RegisteredView,
-} from "./context";
-import { Actions, Header, PanelToggle, Search, ViewSwitch } from "./header";
-import { Empty } from "./states";
-import {
-  isEmptyElement,
-  isHeaderElement,
-  isPanelElement,
-  isViewElement,
-  viewMetaOf,
-} from "./slots";
-import { collectFilterFields, Filters } from "./filters";
-import { Panel } from "./panel";
-import { BoardView } from "./views/board-view";
-import { Detail, InboxView } from "./views/inbox-view";
-import { TableView } from "./views/table-view";
-import { TreeView } from "./views/tree-view";
-import { useControllable } from "./hooks/useControllable";
-import type { DataViewsRootProps } from "./types";
-
-/**
- * A cheap identity for a node used only as a memo key. React elements have no stable identity
- * across renders, so an inline `<i className="ri-table-line"/>` would look new every time; the
- * element's props are what actually distinguish one icon from another.
- */
-function iconKey(icon: React.ReactNode): string {
-  if (icon === null || icon === undefined || typeof icon === "boolean") return "";
-  if (React.isValidElement(icon)) return JSON.stringify(icon.props ?? {});
-  return String(icon);
-}
-
-// ─── Root ─────────────────────────────────────────────────────────────────────
-
-/**
- * Resolve which fields to paint and in what order.
- *
- * The old code sorted `visibleFields` at five call sites with subtly different tie-breaks. There
- * is one rule now: if `columns` is supplied it decides both visibility and order; anything not
- * mentioned in it keeps its declaration order at the end.
- */
-function resolveVisibleFields(
-  fields: readonly FieldConfig[],
-  columns: readonly ColumnState[] | undefined,
-): FieldConfig[] {
-  if (!columns || columns.length === 0) {
-    return fields.filter((f) => f.visible !== false && f.type !== "hidden");
-  }
-  const byPath = new Map(fields.map((f) => [f.path, f]));
-  const ordered: FieldConfig[] = [];
-  for (const col of columns) {
-    const field = byPath.get(col.path);
-    if (field && col.visible) ordered.push(field);
-    byPath.delete(col.path);
-  }
-  for (const field of byPath.values()) {
-    if (field.visible !== false && field.type !== "hidden") ordered.push(field);
-  }
-  return ordered;
-}
-
-function DataViewsRoot({
-  rows,
-  fields,
-  children,
-  getRowId = defaultGetRowId,
-  total = 0,
-  loading = false,
-  onLoadMore,
-  loadingMore = false,
-  query,
-  onQueryChange,
-  defaultQuery,
-  defaultView,
-  defaultPanelOpen = false,
-  onViewChange,
-  onSelectionChange,
-  onActiveIdChange,
-  theme,
-  className,
-}: DataViewsRootProps) {
-  const childArray = Children.toArray(children);
-
-  // A view exists because you rendered it. `Children.toArray` drops `false`/`null`, so
-  // `{canSeeTree && <DataViews.Tree/>}` un-registers that view — which is the intent.
-  const viewElements = childArray.filter(isViewElement);
-  const headerEl = childArray.find(isHeaderElement);
-  const panelEl = childArray.find(isPanelElement);
-  // Anything the root does not position itself — a `Filters` bar, a toolbar of your own — sits
-  // between the header and the views, in the order you wrote it.
-  // LOCAL PATCH (Contact Center): the empty slot. It must be excluded from `extras` too --
-  // `extras` is the negative-space bucket, so without this the element would render twice:
-  // once above the view and once as the body.
-  const emptyEl = childArray.find(isEmptyElement);
-  const extras = childArray.filter(
-    (n) =>
-      !isViewElement(n) && !isHeaderElement(n) && !isPanelElement(n) && !isEmptyElement(n),
-  );
-
-  // `viewElements` is a fresh array on every render, so memoising on its identity would never
-  // hit. Key on what actually matters instead: which views are rendered and how they present.
-  // `icon` is part of that — leave it out and swapping only an icon leaves a stale one showing.
-  const viewKey = viewElements
-    .map((el) => `${el.props.id}|${el.props.label}|${iconKey(el.props.icon)}`)
-    .join(",");
-  const registered = useMemo<RegisteredView[]>(
-    () =>
-      viewElements.map((el) => {
-        const meta = viewMetaOf(el)!;
-        return {
-          id: el.props.id ?? meta.defaultId,
-          label: el.props.label ?? meta.defaultLabel,
-          icon: el.props.icon,
-        };
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on `viewKey`, see above
-    [viewKey],
-  );
-
-  const firstId = registered[0]?.id ?? "";
-
-  // ── The query: the only state that leaves ──────────────────────────────────
-  const [currentQuery, setQuery] = useControllable<DataViewsQuery>(
-    query,
-    onQueryChange,
-    emptyQuery(defaultQuery),
-  );
-
-  /**
-   * Change part of the query.
-   *
-   * Anything that changes *which* rows match starts a new result set, so the page goes back to 1 —
-   * filter down to three rows while sitting on page 4 and there is no page 4 to stay on. Only the
-   * component can do this: by the time a caller sees the change, the two have already been
-   * conflated into one object.
-   */
-  const patchQuery = useCallback(
-    (patch: Partial<DataViewsQuery>) => {
-      setQuery((prev) => {
-        const changesResultSet =
-          ("search" in patch && patch.search !== prev.search) ||
-          ("filters" in patch && patch.filters !== prev.filters) ||
-          ("sort" in patch && patch.sort !== prev.sort) ||
-          ("pageSize" in patch && patch.pageSize !== prev.pageSize);
-        return { ...prev, ...patch, ...(changesResultSet ? { page: 1 } : null) };
-      });
-    },
-    [setQuery],
-  );
-
-  // ── UI state: never leaves, so it is held rather than passed ───────────────
-  const [currentView, setCurrentView] = useState(defaultView ?? firstId);
-  const [currentColumns, setColumns] = useState<readonly ColumnState[]>([]);
-  const [currentSelection, setSelectionState] = useState<readonly string[]>([]);
-  const [currentActiveId, setActiveIdState] = useState<string | null>(null);
-  const [isPanelOpen, setPanelOpen] = useState(defaultPanelOpen);
-
-  // The observers are told, not asked: they report what the component decided, so an app can act
-  // on a selection or follow the open row without owning either.
-  const setSelection = useCallback(
-    (ids: readonly string[]) => {
-      setSelectionState(ids);
-      onSelectionChange?.(ids);
-    },
-    [onSelectionChange],
-  );
-  const setActiveId = useCallback(
-    (id: string | null) => {
-      setActiveIdState(id);
-      onActiveIdChange?.(id);
-    },
-    [onActiveIdChange],
-  );
-  const setView = useCallback(
-    (id: string) => {
-      setCurrentView(id);
-      onViewChange?.(id);
-    },
-    [onViewChange],
-  );
-
-  // If the active view stops being rendered, converge on the first one — in an effect, never
-  // during render, so a controlled consumer's state actually catches up.
-  const known = registered.some((v) => v.id === currentView);
-  useEffect(() => {
-    if (!known && firstId) setView(firstId);
-  }, [known, firstId, setView]);
-
-  const activeView = known ? currentView : firstId;
-  const activeElement = viewElements.find(
-    (el) => (el.props.id ?? viewMetaOf(el)!.defaultId) === activeView,
-  );
-
-  const visibleFields = useMemo(
-    () => resolveVisibleFields(fields, currentColumns),
-    [fields, currentColumns],
-  );
-
-  const dataValue = useMemo(
-    () => ({
-      rows,
-      fields,
-      visibleFields,
-      getRowId,
-      loading,
-      loadingMore,
-      // Derived, never passed: the component has both halves already, and a `hasMore` prop that
-      // disagreed with the rows on screen would be a second source of truth for the same fact.
-      hasMore: rows.length < total,
-      onLoadMore,
-    }),
-    [rows, fields, visibleFields, getRowId, loading, loadingMore, total, onLoadMore],
-  );
-
-  const setSearch = useCallback((search: string) => patchQuery({ search }), [patchQuery]);
-  const setSort = useCallback((sort: Sort) => patchQuery({ sort }), [patchQuery]);
-
-  const viewValue = useMemo(
-    () => ({
-      view: activeView,
-      setView,
-      views: registered,
-      search: currentQuery.search,
-      setSearch,
-      sort: currentQuery.sort,
-      setSort,
-      selection: currentSelection,
-      setSelection,
-      activeId: currentActiveId,
-      setActiveId,
-      columns: currentColumns,
-      setColumns,
-    }),
-    [
-      activeView,
-      setView,
-      registered,
-      currentQuery.search,
-      setSearch,
-      currentQuery.sort,
-      setSort,
-      currentSelection,
-      setSelection,
-      currentActiveId,
-      setActiveId,
-      currentColumns,
-      setColumns,
-    ],
-  );
-
-  const panelValue = useMemo(
-    () => ({ open: isPanelOpen, setOpen: setPanelOpen }),
-    [isPanelOpen, setPanelOpen],
-  );
-
-  // The descriptors as well as the value: a consumer such as `Filters.Presets` resolves a field by
-  // path, and may be rendered outside `Filters` — above the table, in a toolbar — where it cannot
-  // reach the context `Filters` provides to its own children.
-  const filterFields = useMemo(() => collectFilterFields(children), [children]);
-
-  const setFilters = useCallback(
-    (filters: FilterState) => patchQuery({ filters }),
-    [patchQuery],
-  );
-
-  const filtersValue = useMemo(
-    () => ({ filters: currentQuery.filters, setFilters, filterFields }),
-    [currentQuery.filters, setFilters, filterFields],
-  );
-
-  // The active view is what renders, unless a `DataViews.Empty` was supplied and the query has
-  // SETTLED on nothing — then the caller's empty state takes the view's place entirely.
-  //
-  // LOCAL PATCH (Contact Center). `!loading` is the whole reason this is safe: rows are empty
-  // while the first page is still in flight, so without it the empty state would replace the
-  // view's skeleton and announce "nothing matched" before anything had been asked for — the
-  // exact failure that made upstream ship no `Empty` at all (see `states.tsx`). Loading is still
-  // answered by the view's own skeleton; only a settled empty result swaps the body.
-  const body = emptyEl && !loading && rows.length === 0 ? emptyEl : activeElement;
-
-  return (
-    <DataContext.Provider value={dataValue}>
-      <ViewContext.Provider value={viewValue}>
-        <PanelContext.Provider value={panelValue}>
-          <FiltersContext.Provider value={filtersValue}>
-            <div
-              data-theme={theme}
-              className={cn(
-                // The shell is always black: the dark header and the config rail sit on it, and
-                // the Master Container is the light surface inside. `overflow-hidden` traps child
-                // overflow — without it a tall panel body escapes and adds a page-level scrollbar
-                // on top of the panel's own.
-                "flex h-full min-h-0 gap-2 overflow-hidden bg-black",
-                "text-content-presentation-global-primary",
-                className,
-              )}
-            >
-              {/* Left column: header + content. Shrinks as the panel expands. */}
-              <div className="flex min-w-0 flex-1 flex-col gap-2">
-                {headerEl}
-                <main className="flex min-h-0 flex-1 overflow-hidden">
-                  {/* Master Container. It carries the surface — a form base and a 16px radius —
-                      so views paint over it where they want a different colour (the board reads
-                      grey, the split views black) and anything the root positions around one
-                      inherits it rather than landing on the black shell.
-
-                      No border: Figma draws one, but every view already brings its own edge — the
-                      table and the split views each draw their own panel border — so it only ever
-                      read as a second outline around the first. */}
-                  <div className="bg-background-presentation-form-base flex flex-1 overflow-hidden rounded-[16px]">
-                    {/* Clip the scrollable surface to the parent radius minus its 1px border
-                        (16 − 1). At the full 16px the opaque view background sits flush with the
-                        outer edge and bleeds past it as a hairline on the straight sides. */}
-                    <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[15px]">
-                      {/* Anything the root does not position itself — a `Filters` bar, a toolbar
-                          of your own — sits above the view and *inside* the light surface, since
-                          its controls are host-themed and would be stranded on the black shell. */}
-                      {extras.length > 0 && (
-                        <div className="bg-background-presentation-form-base shrink-0">{extras}</div>
-                      )}
-                      {/* A column, so the active view stretches to the full width. As a row it
-                          would size each view to its content and leave the shell showing beside
-                          a narrow one. */}
-                      <div className="flex min-h-0 flex-1 flex-col overflow-auto">{body}</div>
-                    </div>
-                  </div>
-                </main>
-              </div>
-
-              {/* The rail is a sibling of the content, not a layer over it, so opening it narrows
-                  the view rather than covering it. */}
-              {panelEl}
-            </div>
-          </FiltersContext.Provider>
-        </PanelContext.Provider>
-      </ViewContext.Provider>
-    </DataContext.Provider>
-  );
-}
-
-/**
- * DataViews — a compound, composition-based multi-view data surface. Author a screen as JSX:
- *
- * ```tsx
- * <DataViews rows={rows} fields={fields} total={total} onQueryChange={setQuery}>
- *   <DataViews.Header title="Orders">
- *     <DataViews.ViewSwitch />
- *     <DataViews.Search />
- *   </DataViews.Header>
- *   <DataViews.Table />
- *   <DataViews.Board groups={groups} />
- * </DataViews>
- * ```
- *
- * A view exists **iff you render it** — there is no visibility map. DataViews is pure UI: it
- * never filters, searches, sorts, groups or mutates. Hand it rows and it paints them; it hands
- * you back what the user did so you can go and query.
- */
-export const DataViews = Object.assign(DataViewsRoot, {
-  // shell
-  Header,
-  ViewSwitch,
-  Search,
-  Actions,
-  PanelToggle,
-  // panels
-  Panel,
-  Filters,
-  // views
-  Table: TableView,
-  Board: BoardView,
-  Inbox: InboxView,
-  Tree: TreeView,
-  Detail,
-  // states
-  Empty,
-  // paging
-});

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

@@ -1,98 +0,0 @@
-"use client";
-
-import React from "react";
-import { fieldKindOf } from "../../FormBuilder";
-import type { FilterFieldDescriptor } from "../../../utils/dataViews/types";
-import { toName } from "./values";
-import { Labelled } from "./labelled";
-
-/** How a FormBuilder field's value becomes a filter. Fields not listed here are not filters. */
-const AS_FILTER = {
-  text: { kind: "text" } as const,
-  choice: { kind: "choice", single: true } as const,
-  multiChoice: { kind: "choice", single: false } as const,
-  date: { kind: "date" } as const,
-  slider: { kind: "number" } as const,
-};
-
-/**
- * Walk the children and describe every FormBuilder field among them.
- *
- * This is what `fields` used to be, except it is read from the controls you wrote rather than
- * declared twice. The walk follows `props.children`, so a field stays visible through a plain
- * wrapper; it cannot see through a component that builds the element itself, which is the same
- * limitation the layout markers have.
- *
- * `Checkbox`, `Number`, `File` and friends have no filter meaning — a boolean is not a query and a
- * file is not a value you can filter by — so they render but contribute nothing. `Filters.Custom`
- * is the way to drive a filter no FormBuilder field covers.
- */
-export function collectFilterFields(children: React.ReactNode): FilterFieldDescriptor[] {
-  const out: FilterFieldDescriptor[] = [];
-  const seen = new Set<string>();
-
-  const walk = (node: React.ReactNode) => {
-    if (Array.isArray(node)) {
-      node.forEach(walk);
-      return;
-    }
-    if (!React.isValidElement(node)) return;
-
-    const props = node.props as {
-      name?: string;
-      label?: React.ReactNode;
-      min?: number;
-      max?: number;
-      children?: React.ReactNode;
-    };
-    const kind = fieldKindOf(node);
-    const as = kind ? AS_FILTER[kind as keyof typeof AS_FILTER] : undefined;
-
-    if (as && props.name && !seen.has(props.name)) {
-      seen.add(props.name);
-      out.push({
-        path: props.name,
-        label: typeof props.label === "string" ? props.label : undefined,
-        ...as,
-        ...(as.kind === "number" ? { min: props.min ?? 0, max: props.max ?? 100 } : null),
-      });
-    }
-
-    walk(props.children);
-  };
-
-  walk(children);
-  return out;
-}
-
-/**
- * Render the children, with two changes to every field.
- *
- * The `name` is escaped, because RHF reads `customer.name` as object nesting — the author writes
- * the real path and `FilterState` stays keyed by it. Anything calling `setValue` on a filter has
- * to use `toName(path)` for the same reason.
- *
- * The `label` moves out of the field and into `Labelled` above it: `"bare"` mode exists precisely
- * to drop `FieldSection`'s label row, so a label left on the field would simply vanish.
- */
-export function renderFields(children: React.ReactNode): React.ReactNode {
-  return React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) return child;
-
-    const props = child.props as { name?: string; label?: React.ReactNode; children?: React.ReactNode };
-
-    if (fieldKindOf(child) && props.name) {
-      return (
-        <Labelled label={props.label}>
-          {React.cloneElement(child, { name: toName(props.name), label: undefined } as never)}
-        </Labelled>
-      );
-    }
-
-    // Not a field — recurse so a control inside a wrapper still gets its name escaped.
-    if (props.children) {
-      return React.cloneElement(child, {} as never, renderFields(props.children));
-    }
-    return child;
-  });
-}

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

@@ -1,34 +0,0 @@
-"use client";
-
-import { formatPathLabel } from "../../../utils/dataViews/path";
-import type { FilterValue } from "../../../utils/dataViews/types";
-import { useDataViewsFilters } from "../context";
-import { Labelled } from "./labelled";
-import type { FilterCustomProps } from "../types";
-
-/**
- * `Filters.Custom` — the escape hatch. Renders whatever you return against this filter's slot in
- * `FilterState`, bypassing the form entirely.
- *
- * Use it when no FormBuilder field produces the value you need — a bucket picker, a map region, a
- * tri-state toggle.
- *
- * ```tsx
- * <DataViews.Filters.Custom path="tags" render={({ value, setValue }) => (
- *   <MyTagPicker value={value as string[]} onChange={setValue} />
- * )} />
- * ```
- */
-export function Custom({ path, label, render }: FilterCustomProps) {
-  const { filters, setFilters } = useDataViewsFilters();
-  const text = label ?? formatPathLabel(path);
-
-  const setValue = (next: FilterValue | undefined) => {
-    const copy = { ...filters };
-    if (next === undefined) delete copy[path];
-    else copy[path] = next;
-    setFilters(copy);
-  };
-
-  return <Labelled label={text}>{render({ value: filters[path], setValue })}</Labelled>;
-}