torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/DataViews/views/board-view.tsx

@@ -1,381 +0,0 @@
-"use client";
-
-import React, { useMemo } from "react";
-import { MoreHorizontal } from "lucide-react";
-import { cn } from "../../../utils/cn";
-import type { ColumnColor, RowGroup } from "../../../utils/dataViews/types";
-import { Button } from "../../Button";
-import { DataViewCard } from "../../../layouts/DataViewCard";
-import {
-  DragGhost,
-  DragList,
-  useDragDrop,
-  useDragItem,
-  useDropContainer,
-} from "../../../hooks/useDragDrop";
-import { Cell } from "../cell";
-import { SkeletonBar, skeletonKeys } from "../states";
-import { buildCardRows } from "./card-rows";
-import { useInfiniteScroll } from "../../../hooks/useInfiniteScroll";
-import { useDataViewsData, useDataViewsView } from "../context";
-import { markView } from "../slots";
-import type { BoardViewProps } from "../types";
-
-/**
- * The Figma column pills are deeply saturated dark fills (#131415, #330C69, #532200, #002F66).
- * Each is matched to the closest raw-colour token; purple has no close presentation-layer match,
- * so it stays the exact Figma hex.
- */
-const COLUMN_BG: Record<ColumnColor, string> = {
-  gray: "bg-black-900",
-  purple: "bg-[#330C69]",
-  orange: "bg-orange-900",
-  blue: "bg-blue-sparkle-900",
-  green: "bg-green-cyan-900",
-  red: "bg-red-orange-900",
-};
-
-/**
- * `DataViews.Board` — a kanban board.
- *
- * You hand it `groups`; it never groups rows itself. That is deliberate: grouping is a query, and
- * which statuses exist (including the empty ones you still want a column for) is knowledge the
- * board does not have.
- *
- * Dragging emits `onRowMove` and **does not move the card**. The card moves when you update
- * `rows`/`groups` in response — so a failed save leaves the board showing the truth instead of a
- * lie. If nothing seems to happen on drop, that round-trip is what is missing.
- */
-function BoardViewImpl({
-  groups,
-  titlePath,
-  renderCard,
-  onRowMove,
-  onColumnAction,
-  className,
-}: BoardViewProps) {
-  const { visibleFields, getRowId, loading } = useDataViewsData();
-  const { activeId, setActiveId } = useDataViewsView();
-
-  const titleField = titlePath ? visibleFields.find((f) => f.path === titlePath) : visibleFields[0];
-  const bodyFields = visibleFields.filter((f) => f.path !== titleField?.path);
-
-  /**
-   * Where every card currently sits. A drop reports only what it landed *on* — which may be a
-   * column or another card — so this is what turns that into "which column, at what index".
-   */
-  const placement = useMemo(() => {
-    const map = new Map<string, { group: string; index: number }>();
-    for (const group of groups) {
-      group.rows.forEach((row, index) => {
-        map.set(getRowId(row, index), { group: group.id, index });
-      });
-    }
-    return map;
-  }, [groups, getRowId]);
-
-  const { DndContext, contextProps, activeId: draggingId, overId } = useDragDrop({
-    mode: "board",
-    disabled: !onRowMove,
-    containerOf: (id) => placement.get(id)?.group ?? null,
-    onMove: ({ id, from, to }) => {
-      if (!to) return;
-      // Dropped on a card: take that card's column and slot in at its position. Dropped on the
-      // column itself — which is what an empty column offers — append.
-      const onCard = placement.get(to);
-      onRowMove?.({
-        id,
-        from,
-        to: onCard ? onCard.group : to,
-        ...(onCard ? { index: onCard.index } : null),
-      });
-    },
-  });
-
-  /**
-   * Which column the drop would land in. Not `useDropContainer`'s `isOver`: the nearest droppable
-   * to the pointer is almost always a *card*, so a column with anything in it would never light
-   * up. The card's own column is the answer.
-   */
-  const targetGroup = overId ? (placement.get(overId)?.group ?? overId) : null;
-
-  /** The row under the pointer, so the ghost can be the card itself rather than an outline. */
-  const dragging = draggingId
-    ? groups
-        .flatMap((group) =>
-          group.rows.map((row, index) => ({ row, group, index, id: getRowId(row, index) })),
-        )
-        .find((r) => r.id === draggingId)
-    : undefined;
-
-  return (
-    <DndContext {...contextProps}>
-      <div
-        className={cn(
-          "bg-background-presentation-body-primary h-full overflow-x-auto p-2",
-          className,
-        )}
-      >
-        <div className="flex h-full gap-4" style={{ minWidth: "max-content" }}>
-        {groups.map((group, i) => (
-          <React.Fragment key={group.id}>
-            <BoardColumn
-              group={group}
-              isTarget={targetGroup === group.id}
-              onColumnAction={onColumnAction}
-              ids={group.rows.map((row, index) => getRowId(row, index))}
-            >
-              {loading && <SkeletonCards />}
-              {!loading && group.rows.map((row, index) => {
-                // `index` is the position within this column. It only reaches `getRowId` as the
-                // last-resort fallback for rows with no id of their own — give those a stable
-                // `getRowId` if you drag them, or two columns will hand out the same key.
-                const id = getRowId(row, index);
-                return (
-                  <BoardCard
-                    key={id}
-                    id={id}
-                    draggable={Boolean(onRowMove)}
-                    isActive={activeId === id}
-                    onClick={() => setActiveId(activeId === id ? null : id)}
-                  >
-                    {(isDragging) =>
-                      renderCard ? (
-                        renderCard({
-                          row,
-                          id,
-                          index,
-                          fields: visibleFields,
-                          group,
-                          isActive: activeId === id,
-                          isDragging,
-                        })
-                      ) : (
-                        <DataViewCard
-                          title={titleField ? <Cell field={titleField} row={row} /> : undefined}
-                          rows={buildCardRows(bodyFields, row)}
-                          className={cn(
-                            onRowMove
-                              ? "cursor-grab transition-shadow hover:shadow-md active:cursor-grabbing"
-                              : "cursor-pointer",
-                            activeId === id && "border-border-presentation-state-focus",
-                          )}
-                        />
-                      )
-                    }
-                  </BoardCard>
-                );
-              })}
-            </BoardColumn>
-
-            {i < groups.length - 1 && (
-              // Starts below the column header rather than at the top of the board.
-              <div
-                aria-hidden
-                className="border-border-presentation-global-primary mt-[42px] self-stretch border-l-[2px] border-dashed"
-              />
-            )}
-          </React.Fragment>
-          ))}
-        </div>
-      </div>
-
-      {/* The ghost is the card, drawn through whatever renders the real one — a custom
-          `renderCard` included, or the ghost would announce itself as a different object. */}
-      <DragGhost>
-        {dragging && (
-          <div className="w-[271px] cursor-grabbing opacity-95 shadow-lg">
-            {renderCard ? (
-              renderCard({
-                row: dragging.row,
-                id: dragging.id,
-                index: dragging.index,
-                fields: visibleFields,
-                group: dragging.group,
-                isActive: activeId === dragging.id,
-                isDragging: true,
-              })
-            ) : (
-              <DataViewCard
-                title={titleField ? <Cell field={titleField} row={dragging.row} /> : undefined}
-                rows={buildCardRows(bodyFields, dragging.row)}
-                className="border-border-presentation-state-focus"
-              />
-            )}
-          </div>
-        )}
-      </DragGhost>
-    </DndContext>
-  );
-}
-
-/**
- * Asks for the next page when *this* column is scrolled to its end.
- *
- * Every column calls the same `onLoadMore`, because the board is fed one shared page of rows and
- * regroups them — so a short column can end up asking for more on behalf of a long one. That is
- * the trade for not having to page each column separately.
- */
-function ColumnSentinel() {
-  const { loading, loadingMore, hasMore, onLoadMore } = useDataViewsData();
-  const { sentinelRef } = useInfiniteScroll({
-    onLoadMore,
-    hasMore,
-    loading: loading || loadingMore,
-  });
-  if (!hasMore || loading) return null;
-  return (
-    <>
-      <div ref={sentinelRef as React.Ref<HTMLDivElement>} aria-hidden className="h-px shrink-0" />
-      {loadingMore && <SkeletonCards count={1} />}
-    </>
-  );
-}
-
-/** Per column. Two is enough to read as "cards are coming" without pretending to know how many. */
-const SKELETON_CARDS = 2;
-
-/**
- * The loading column.
- *
- * A real `DataViewCard` with shimmer where its text goes, so the card's radius, border and padding
- * are the ones the data will land in. The column header above keeps its label and colour — only
- * the cards are unknown.
- */
-function SkeletonCards({ count = SKELETON_CARDS }: { count?: number }) {
-  return (
-    <>
-      {skeletonKeys(count).map((i) => (
-        <DataViewCard
-          key={`skeleton-${i}`}
-          title={<SkeletonBar className="h-[18px] w-[60%]" />}
-          rows={[
-            [
-              { key: "a", label: <SkeletonBar className="w-[54px]" />, value: <SkeletonBar className="w-[64px]" /> },
-              { key: "b", label: <SkeletonBar className="w-[44px]" />, value: <SkeletonBar className="w-[72px]" /> },
-            ],
-          ]}
-        />
-      ))}
-    </>
-  );
-}
-
-/**
- * A column: a drop target in its own right, so a card can be dropped on an empty one.
- *
- * `DragList` is what lets a card be dropped *between* two others rather than only onto the column.
- */
-function BoardColumn({
-  group,
-  ids,
-  isTarget,
-  onColumnAction,
-  children,
-}: {
-  group: RowGroup;
-  ids: string[];
-  isTarget: boolean;
-  onColumnAction?: (groupId: string) => void;
-  children: React.ReactNode;
-}) {
-  const { ref, isOver, containerProps } = useDropContainer(group.id);
-
-  return (
-    <div
-      ref={ref}
-      {...containerProps}
-      className={cn(
-        // The transparent 2px border is permanent so the drop-target state costs no layout shift.
-        "flex w-[279px] flex-col gap-2 rounded-[12px] border-2 border-transparent p-1",
-        "transition-colors duration-150 ease-in-out",
-        (isOver || isTarget) &&
-          "bg-background-presentation-cardbutton-blue-hover border-border-presentation-state-focus border-dashed",
-      )}
-    >
-      <ColumnHeader group={group} onAction={onColumnAction} />
-      <div className="flex flex-col gap-2 overflow-y-auto py-1">
-        <DragList ids={ids}>{children}</DragList>
-        <ColumnSentinel />
-      </div>
-    </div>
-  );
-}
-
-/**
- * The wrapper around a card — ours whichever card is shown, because dragging and the click that
- * opens a row are board behaviour, not card decoration.
- *
- * `children` is a function so a custom card can be told whether it is the one being dragged
- * without this component knowing what it renders.
- */
-function BoardCard({
-  id,
-  draggable,
-  isActive,
-  onClick,
-  children,
-}: {
-  id: string;
-  draggable: boolean;
-  isActive: boolean;
-  onClick: () => void;
-  children: (isDragging: boolean) => React.ReactNode;
-}) {
-  const { ref, handleProps, style, isDragging } = useDragItem(id, !draggable);
-
-  return (
-    <div
-      ref={ref}
-      style={style}
-      {...handleProps}
-      onClick={onClick}
-      data-active={isActive || undefined}
-      className={cn(
-        draggable ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
-        isDragging && "opacity-40",
-      )}
-    >
-      {children(isDragging)}
-    </div>
-  );
-}
-
-/** The solid dark pill at the top of a column. No dot, no count — just the title and an action. */
-function ColumnHeader({
-  group,
-  onAction,
-}: {
-  group: RowGroup;
-  onAction?: (groupId: string) => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between rounded-[8px] px-[6px] py-[4px]",
-        COLUMN_BG[group.color ?? "gray"],
-      )}
-    >
-      {/* `min-w-0` because this is a flex item: without it the heading refuses to shrink below its
-          text and a long group name pushes the action button out of the column. */}
-      <h3 className="typography-headers-small-medium text-content-presentation-global-primary-light min-w-0 truncate">
-        {group.label}
-      </h3>
-      {onAction && (
-        <Button
-          variant="BorderStyle"
-          buttonType="icon"
-          className="text-content-presentation-global-primary-light h-5 w-5 border-0 bg-transparent hover:bg-white/10"
-          onClick={() => onAction(group.id)}
-        >
-          <MoreHorizontal className="h-3.5 w-3.5" />
-        </Button>
-      )}
-    </div>
-  );
-}
-
-export const BoardView = markView(BoardViewImpl, {
-  defaultId: "board",
-  defaultLabel: "Board",
-});

package/apps/lib/components/DataViews/views/card-rows.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { getByPath } from "../../../utils/dataViews/path";
-import type { FieldConfig, Row } from "../../../utils/dataViews/types";
-import type { DataViewCardRow } from "../../../layouts/DataViewCard";
-import { Cell } from "../cell";
-
-/**
- * Turn a row's fields into the `DataViewCard` body.
- *
- * Shared by the board's cards and the tree pane's, so the same row looks the same in both rather
- * than drifting into two nearly-identical builders.
- *
- * Pair the body fields two per row so the card grid keeps its rhythm even when one side is
- * missing: a lone survivor spans both columns, and fully empty pairs are dropped rather than
- * rendering a phantom row of hairlines.
- */
-export function buildCardRows(fields: readonly FieldConfig[], row: Row): DataViewCardRow[] {
-  const rows: DataViewCardRow[] = [];
-  for (let i = 0; i < fields.length; i += 2) {
-    const pair = [fields[i], fields[i + 1]];
-    const cells: DataViewCardRow = [];
-    for (const [offset, field] of pair.entries()) {
-      if (!field) continue;
-      if (getByPath(row, field.path) == null) continue;
-      cells.push({
-        // Position, not path — two fields may share one.
-        key: `${field.path}-${i + offset}`,
-        label: field.label ?? field.path,
-        value: <Cell field={field} row={row} />,
-      });
-    }
-    if (cells.length > 0) rows.push(cells);
-  }
-  return rows;
-}

package/apps/lib/components/DataViews/views/inbox-view.tsx

@@ -1,260 +0,0 @@
-"use client";
-
-import React from "react";
-import { cn } from "../../../utils/cn";
-import type { FieldConfig } from "../../../utils/dataViews/types";
-import { Divider } from "../../Divider";
-import { Cell } from "../cell";
-import { SkeletonBar, skeletonKeys } from "../states";
-import { useInfiniteScroll } from "../../../hooks/useInfiniteScroll";
-import { useDataViewsData, useDataViewsView } from "../context";
-import { useActiveRow } from "../hooks/useActiveRow";
-import { markView } from "../slots";
-import type { InboxViewProps } from "../types";
-
-/**
- * `DataViews.Inbox` — a list of record cards on the left, the one you picked on the right.
- *
- * The rows are not mail-style title/preview lines: each card is a stack of `label : value` rows
- * with a date pill in the corner, so an inbox of orders reads as orders rather than as email.
- *
- * The right pane is `children`: the inbox knows which row is active (`activeId`) but not how you
- * want it displayed, so it hands the decision back rather than inventing a detail layout.
- */
-function InboxViewImpl({
-  children,
-  renderItem,
-  titlePath,
-  datePath,
-  itemHref,
-  linkComponent,
-  placeholder,
-  className,
-}: InboxViewProps) {
-  const { rows, visibleFields, getRowId, loading, loadingMore, hasMore, onLoadMore } =
-    useDataViewsData();
-  const { sentinelRef } = useInfiniteScroll({
-    onLoadMore,
-    hasMore,
-    loading: loading || loadingMore,
-  });
-  const { activeId, setActiveId } = useDataViewsView();
-  // "Is a row open?", not "is an id set?". `activeId` is shared with the other views, so it can
-  // outlive the row it named — after a refetch, or after the tree selected a grouping node that
-  // is not a row at all. Keying off the row keeps the pane and the placeholder consistent.
-  const activeRow = useActiveRow();
-
-  const byPath = (path: string | undefined) =>
-    path ? visibleFields.find((f) => f.path === path) : undefined;
-
-  // The date is pulled out of the card body and shown as a pill; everything else becomes a
-  // label/value row.
-  const dateField = byPath(datePath) ?? visibleFields.find((f) => f.type === "date" || f.type === "date-format");
-  const titleField = byPath(titlePath);
-  const rowFields = visibleFields.filter(
-    (f) => f.path !== dateField?.path && f.type !== "hidden",
-  );
-
-  const Link = linkComponent ?? "a";
-
-  return (
-    // Split, like the tree: the gap shows the shell's black and the two panels sit on it.
-    <div className={cn("flex h-full flex-col gap-2 bg-black md:flex-row", className)}>
-      <ul
-        className={cn(
-          "border-border-presentation-global-primary flex w-full flex-col overflow-hidden rounded-[16px] border",
-          "bg-background-presentation-form-base md:w-96",
-        )}
-      >
-        <li className="border-border-presentation-global-primary border-b px-3 py-2">
-          {/* `block` before `truncate`: the parent is a plain `<li>`, so this span would otherwise
-              be inline — and `overflow` has no effect on an inline box, which would leave the
-              ellipsis silently doing nothing. */}
-          <span
-            style={{ fontFeatureSettings: "'cv05' on" }}
-            className="typography-display-medium-medium text-content-presentation-global-primary block truncate uppercase"
-          >
-            {titleField?.label ?? "inbox"}
-          </span>
-        </li>
-
-        <div className="bg-background-presentation-button-disabled flex flex-1 flex-col gap-1 overflow-y-auto py-1">
-          {loading && <SkeletonItems count={rowFields.length || 2} />}
-          {!loading && rows.map((row, index) => {
-            const id = getRowId(row, index);
-            const selected = activeId === id;
-            const href = itemHref?.(row, id);
-
-            const card = renderItem ? (
-              renderItem({ row, id, index, fields: visibleFields, isActive: selected })
-            ) : (
-              <>
-                <div className="flex w-full flex-col gap-1">
-                  {rowFields.map((field, i) => (
-                    <div key={`${field.path}-${i}`} className="flex flex-col">
-                      <div className="flex items-center gap-2">
-                        <span className="typography-body-large-semibold text-content-presentation-global-secondary w-[100px] shrink-0">
-                          {field.label ?? field.path}:
-                        </span>
-                        <span className="flex h-full items-center py-0.5">
-                          <span className="bg-black-alpha-15 block h-full w-px" />
-                        </span>
-                        <span className="typography-body-large-medium text-content-presentation-global-primary min-w-0 flex-1 truncate">
-                          <Cell field={field} row={row} />
-                        </span>
-                      </div>
-                      {i < rowFields.length - 1 && <Divider className="mt-1" />}
-                    </div>
-                  ))}
-                </div>
-
-                {dateField && (
-                  <div className="flex items-center justify-end">
-                    <div className="bg-black-alpha-10 inline-flex items-center gap-0.5 rounded-md p-0.5">
-                      <div className="rounded-sm px-1">
-                        <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
-                          {dateField.label ?? "Created at"}:
-                        </span>
-                      </div>
-                      <div className="bg-black-alpha-075 rounded-sm px-1">
-                        <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
-                          <Cell field={dateField} row={row} />
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </>
-            );
-
-            const cardClass = cn(
-              "flex cursor-pointer flex-col gap-2 p-3 transition-colors",
-              "bg-background-presentation-form-base",
-              // The transparent 2px edges are permanent so hover and selection never shift the row.
-              "border-y-2 border-transparent",
-              !selected &&
-                "hover:bg-[image:linear-gradient(0deg,rgba(151,72,255,0.05)_0%,rgba(151,72,255,0.05)_100%)] hover:border-y-[#AE71FF]",
-              selected &&
-                "bg-[image:linear-gradient(0deg,rgba(0,117,255,0.05)_0%,rgba(0,117,255,0.05)_100%)] border-y-border-presentation-state-focus",
-            );
-
-            return (
-              <li key={id}>
-                {href ? (
-                  <Link
-                    href={href}
-                    onClick={() => setActiveId(id)}
-                    className={cn(cardClass, "text-inherit no-underline")}
-                  >
-                    {card}
-                  </Link>
-                ) : (
-                  <div
-                    role="button"
-                    tabIndex={0}
-                    aria-current={selected || undefined}
-                    onClick={() => setActiveId(id)}
-                    onKeyDown={(e) => {
-                      if (e.key !== "Enter" && e.key !== " ") return;
-                      e.preventDefault();
-                      setActiveId(id);
-                    }}
-                    className={cardClass}
-                  >
-                    {card}
-                  </div>
-                )}
-              </li>
-            );
-          })}
-          {/* Asks for the next page as the list nears its end. Inside the scroller, so it is the
-              list's own scrolling that triggers it. */}
-          {hasMore && !loading && (
-            <li ref={sentinelRef as React.Ref<HTMLLIElement>} aria-hidden className="h-px" />
-          )}
-          {loadingMore && <SkeletonItems count={rowFields.length || 2} items={2} />}
-        </div>
-      </ul>
-
-      <div
-        className={cn(
-          "bg-background-presentation-form-base flex flex-1 flex-col overflow-hidden rounded-[16px]",
-          activeRow === null && "border-border-presentation-global-primary items-center justify-center border",
-        )}
-      >
-        {activeRow === null
-          ? (placeholder ?? (
-              <p className="text-content-presentation-global-tertiary">
-                Select an item to view details
-              </p>
-            ))
-          : children}
-      </div>
-    </div>
-  );
-}
-
-/** Enough items to fill the list's fold. */
-const SKELETON_ITEMS = 5;
-
-/**
- * The loading list.
- *
- * Mirrors a real item: the same `p-3` card with `border-y-2` transparent edges, and the same
- * label / divider / value row at the 100px label column — so items do not reflow when the messages
- * arrive. `count` is the number of field rows a real item will have.
- */
-function SkeletonItems({ count, items = SKELETON_ITEMS }: { count: number; items?: number }) {
-  return (
-    <>
-      {skeletonKeys(items).map((item) => (
-        <li key={`skeleton-${item}`}>
-          <div className="bg-background-presentation-form-base flex flex-col gap-2 border-y-2 border-transparent p-3">
-            <div className="flex w-full flex-col gap-1">
-              {skeletonKeys(count).map((i) => (
-                <div key={i} className="flex items-center gap-2">
-                  <SkeletonBar className="w-[100px] shrink-0" />
-                  <span className="flex h-full items-center py-0.5">
-                    <span className="bg-black-alpha-15 block h-full w-px" />
-                  </span>
-                  <SkeletonBar className={["w-[60%]", "w-[40%]", "w-[75%]"][(item + i) % 3]} />
-                </div>
-              ))}
-            </div>
-          </div>
-        </li>
-      ))}
-    </>
-  );
-}
-
-/**
- * `DataViews.Detail` — the default detail pane: every visible field as a label/value row. Drop it
- * in when you want something reasonable immediately, and replace it with your own JSX when you
- * do not.
- */
-export function Detail({ className }: { className?: string }) {
-  const { visibleFields } = useDataViewsData();
-  const row = useActiveRow();
-  if (!row) return null;
-
-  return (
-    <dl className={cn("flex flex-col gap-3 p-6", className)}>
-      {visibleFields.map((f: FieldConfig, i) => (
-        <div key={`${f.path}-${i}`} className="flex flex-col gap-[2px]">
-          <dt className="typography-body-small-regular text-content-presentation-global-tertiary">
-            {f.label ?? f.path}
-          </dt>
-          <dd className="typography-body-medium-medium text-content-presentation-global-primary">
-            <Cell field={f} row={row} />
-          </dd>
-        </div>
-      ))}
-    </dl>
-  );
-}
-
-export const InboxView = markView(InboxViewImpl, {
-  defaultId: "inbox",
-  defaultLabel: "Inbox",
-});