torch-glare 2.4.5 → 2.5.0

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

@@ -0,0 +1,79 @@
+"use client";
+
+import { useId, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { ConclusionHeader } from "../../ConclusionHeader";
+import type { PanelSectionProps } from "../types";
+
+/**
+ * A titled block in the rail — and, when it has a title, a **collapsible** one.
+ *
+ * The header is `ConclusionHeader`, the same clickable section header `FormSummary` uses for its
+ * groups and the one Figma draws in this rail (`Conclusion-Header-1.0`). `Columns`, `Sort` and
+ * `SavedViews` all render through here, so they all fold from one implementation.
+ *
+ * It colours itself from `content-presentation-global-*` tokens rather than a `text-white`
+ * literal, which is what lets the same section sit in this dark rail and in the light content
+ * area without a second variant.
+ */
+export function Section({
+  title,
+  description,
+  collapsible = true,
+  defaultOpen = true,
+  children,
+  className,
+}: PanelSectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const bodyId = useId();
+  const isCollapsible = collapsible && title != null;
+  const shown = !isCollapsible || open;
+
+  return (
+    <section className={cn("flex flex-col", className)}>
+      {title != null &&
+        (isCollapsible ? (
+          <ConclusionHeader
+            label={title}
+            open={open}
+            onOpenChange={setOpen}
+            aria-controls={bodyId}
+          />
+        ) : (
+          <h3 className="text-content-presentation-global-primary text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
+            {title}
+          </h3>
+        ))}
+
+      {/* Figma groups the description with the header (a 47px block: 28px header + 18px line),
+          not with the rows — so it sits outside the fold and still reads when the group is shut. */}
+      {description != null && (
+        <p className="typography-body-small-regular text-content-presentation-global-primary">
+          {description}
+        </p>
+      )}
+
+      {/* Fold/unfold: `grid-rows-[0fr → 1fr]` animates to the body's natural height without
+          measuring it, so this stays a pure-CSS transition. The inner `overflow-hidden` is what
+          the 0fr track actually clips — it has to stay a bare wrapper. There is no flex `gap`
+          here either: a gap survives a collapsed body as dead space, so the spacing below the
+          title lives on the body instead, inside what collapses. */}
+      <div
+        id={bodyId}
+        // A collapsed body keeps its controls in the DOM, so `inert` is what takes them out of
+        // the tab order and the a11y tree — `overflow-hidden` alone would still let focus in.
+        inert={!shown}
+        aria-hidden={!shown}
+        className={cn(
+          "grid transition-[grid-template-rows,opacity] duration-200 ease-in-out",
+          "motion-reduce:transition-none",
+          shown ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className={cn("space-y-3", title != null && "pt-3")}>{children}</div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,42 @@
+"use client";
+
+import { formatPathLabel } from "../../../utils/dataViews/path";
+import { useDataViewsData, useDataViewsView } from "../context";
+import { RadioGroup } from "./controls";
+import { Section } from "./section";
+import type { PanelSortProps } from "../types";
+
+/**
+ * `DataViews.Panel.Sort` — the same intent the table headers emit, reachable from views that have
+ * no headers. Picking an option writes the sort into the root's query, which leaves through
+ * `onQueryChange`; nothing is reordered here, and this part takes no callback of its own.
+ */
+export function Sort({ title = "Default Sort", className }: PanelSortProps) {
+  const { fields } = useDataViewsData();
+  const { sort, setSort } = useDataViewsView();
+  const sortable = fields.filter((f) => f.type !== "hidden");
+
+  return (
+    <Section title={title} className={className}>
+      {sortable.length === 0 ? (
+        <p className="text-content-presentation-global-tertiary text-xs">No sortable columns.</p>
+      ) : (
+        <RadioGroup
+          value={sort?.path ?? ""}
+          onValueChange={(path) =>
+            // Re-picking the active field flips the direction, as clicking a header twice does.
+            setSort(
+              sort?.path === path && sort.direction === "asc"
+                ? { path, direction: "desc" }
+                : { path, direction: "asc" },
+            )
+          }
+          items={sortable.map((field) => ({
+            value: field.path,
+            label: field.label ?? formatPathLabel(field.path),
+          }))}
+        />
+      )}
+    </Section>
+  );
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { useDataViewsPanelTabs } from "../context";
+import type { PanelTabProps } from "../types";
+
+const TAB_MARKER = "__dvPanelTab";
+
+/**
+ * One tab in the panel. It renders its own children when it is the open tab and nothing when it
+ * is not, so a tab is declared and filled in one place:
+ *
+ * ```tsx
+ * <DataViews.Panel.Tab value="columns" label="Columns">
+ *   <DataViews.Panel.Columns />
+ * </DataViews.Panel.Tab>
+ * ```
+ */
+export function Tab({ value, children }: PanelTabProps) {
+  const { tab } = useDataViewsPanelTabs();
+  if (tab !== value) return null;
+  return <>{children}</>;
+}
+(Tab as unknown as Record<string, boolean>)[TAB_MARKER] = true;
+
+export function isTabElement(node: React.ReactNode): node is React.ReactElement<PanelTabProps> {
+  return (
+    React.isValidElement(node) &&
+    (node.type as unknown as Record<string, unknown>)?.[TAB_MARKER] === true
+  );
+}

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

@@ -0,0 +1,63 @@
+import React from "react";
+
+/**
+ * How the root recognises its children.
+ *
+ * Children are the API: rendering `<DataViews.Table/>` is what makes a table view exist, and
+ * rendering `<DataViews.Panel/>` is what puts a sidebar beside it. To lay those out the root has
+ * to tell them apart, so each part is stamped with a marker here and found with the matching
+ * guard — never `child.type === Panel`, which breaks across duplicated module instances and
+ * silently stops matching after a hot reload.
+ *
+ * Markers and guards live in this one file rather than beside their components so that the root
+ * can import all of them without importing the components themselves — otherwise `header.tsx`
+ * would have to import from `data-views.tsx`, which already imports `header.tsx`.
+ */
+
+function mark<P extends object>(component: React.ComponentType<P>, key: string) {
+  (component as unknown as Record<string, boolean>)[key] = true;
+  return component;
+}
+
+function isMarked(node: React.ReactNode, key: string) {
+  return React.isValidElement(node) && (node.type as unknown as Record<string, unknown>)?.[key] === true;
+}
+
+// ─── Views ────────────────────────────────────────────────────────────────────
+
+/** What a view is called in the switcher when the caller does not say. */
+export interface ViewMeta {
+  defaultId: string;
+  defaultLabel: string;
+}
+
+export function markView<P extends object>(component: React.ComponentType<P>, meta: ViewMeta) {
+  (component as unknown as { __dataView: ViewMeta }).__dataView = meta;
+  return component;
+}
+
+export function viewMetaOf(node: React.ReactNode): ViewMeta | undefined {
+  if (!React.isValidElement(node)) return undefined;
+  return (node.type as { __dataView?: ViewMeta })?.__dataView;
+}
+
+export type ViewElement = React.ReactElement<{
+  id?: string;
+  label?: string;
+  icon?: React.ReactNode;
+}>;
+
+export function isViewElement(node: React.ReactNode): node is ViewElement {
+  return viewMetaOf(node) !== undefined;
+}
+
+// ─── Everything else the root positions ───────────────────────────────────────
+
+export const markHeader = <P extends object>(c: React.ComponentType<P>) => mark(c, "__dvHeader");
+export const isHeaderElement = (n: React.ReactNode) => isMarked(n, "__dvHeader");
+
+export const markPanel = <P extends object>(c: React.ComponentType<P>) => mark(c, "__dvPanel");
+export const isPanelElement = (n: React.ReactNode) => isMarked(n, "__dvPanel");
+
+
+

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

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { cn } from "../../utils/cn";
+import { Skeleton } from "../Skeleton";
+
+/**
+ * The shared parts of a loading state.
+ *
+ * There is deliberately no `Empty` here. When there is nothing to show, the view shows nothing —
+ * a table keeps its header band and has no rows, a board keeps its columns and has no cards. A
+ * centred sentence in place of the view threw the chrome away and made the layout jump twice on
+ * every query, and it could not tell "no results" apart from "not fetched yet", so the first load
+ * of every page announced that nothing matched before anything had been asked for.
+ *
+ * Loading is answered per view instead, because a skeleton is only useful if it is the shape of
+ * the thing that is coming. These are the pieces the four views share so they cannot drift; the
+ * shapes themselves live with the view that owns them.
+ */
+
+/**
+ * One shimmer bar.
+ *
+ * Vary the width at the call site — a column of identical bars reads as a grid rather than as
+ * text that has not arrived.
+ */
+export function SkeletonBar({ className }: { className?: string }) {
+  return <Skeleton className={cn("h-[14px] w-full rounded-[4px]", className)} />;
+}
+
+/**
+ * `n` keys to map over.
+ *
+ * Counts are the view's own constant, not `pageSize`: they exist to fill the fold, and a skeleton
+ * that promises exactly as many rows as are coming is a promise it cannot keep — the server
+ * decides that, and it has not answered yet.
+ */
+export const skeletonKeys = (n: number) => Array.from({ length: n }, (_, i) => i);