torch-glare 2.4.5 → 2.5.0

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

@@ -0,0 +1,379 @@
+"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"],
+      )}
+    >
+      <h3 className="typography-headers-small-medium text-content-presentation-global-primary-light">
+        {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

@@ -0,0 +1,36 @@
+"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

@@ -0,0 +1,257 @@
+"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">
+          <span
+            style={{ fontFeatureSettings: "'cv05' on" }}
+            className="typography-display-medium-medium text-content-presentation-global-primary 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",
+});