@charcuterie/ui 4.22.1 → 4.24.0

package/src/GroupedList/GroupedListRow.tsx

@@ -0,0 +1,117 @@
+import type { ReactNode } from "react"
+
+import { useIsTextClipped } from "../Badge/useIsTextClipped.ts"
+import { toClassName } from "../toClassName.ts"
+import type {
+  GroupedListItem,
+  GroupedListSize,
+} from "./GroupedList.tsx"
+
+export type GroupedListRowProps = {
+  isTextTruncated: boolean
+  item: GroupedListItem
+  size: GroupedListSize
+}
+
+const ROW_SIZE_CLASS: Record<GroupedListSize, string> = {
+  md: "px-4 py-3",
+  sm: "px-3 py-2",
+}
+
+/**
+ * Its own file because each row measures its own text, and a hook
+ * cannot run in a loop.
+ *
+ * ### The tooltip appears only while the text is clipped
+ *
+ * `useIsTextClipped` is `Badge`'s: an ellipsis leaves no trace in the
+ * DOM, so the only way to know a label is cut off is to measure it.
+ * A `title` on every row would put a tooltip on forty short names to
+ * help the one long one.
+ *
+ * ### The actions wrap; they never squeeze the text
+ *
+ * The row is a wrapping flex line. The text column asks for 12rem
+ * and grows into the rest, so in a wide list the actions sit at the
+ * inline end of the same line, and in a list narrower than the text
+ * plus the actions they drop under the text instead of crushing the
+ * label to an ellipsis and nothing. No container query: the wrap is
+ * decided by the content itself.
+ */
+export const GroupedListRow = ({
+  isTextTruncated,
+  item,
+  size,
+}: GroupedListRowProps): ReactNode => {
+  const [labelRef, clippedLabel] = useIsTextClipped()
+
+  const [descriptionRef, clippedDescription] =
+    useIsTextClipped()
+
+  const overflowClass = isTextTruncated
+    ? "truncate"
+    : "wrap-anywhere"
+
+  return (
+    <li
+      className={toClassName(
+        "flex flex-wrap items-center gap-x-3 gap-y-2",
+        ROW_SIZE_CLASS[size],
+      )}
+    >
+      <div className="flex min-w-0 flex-[1_1_12rem] flex-col gap-0.5">
+        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          <span
+            className={toClassName(
+              "min-w-0 max-w-full font-medium text-content-primary",
+              size === "sm" ? "text-sm" : "text-md",
+              overflowClass,
+            )}
+            ref={labelRef}
+            title={
+              isTextTruncated ? clippedLabel : undefined
+            }
+          >
+            {item.label}
+          </span>
+
+          {item.badges ? (
+            <span className="flex min-w-0 flex-wrap items-center gap-1">
+              {item.badges}
+            </span>
+          ) : null}
+        </div>
+
+        {item.description ? (
+          <span
+            className={toClassName(
+              "block min-w-0 text-content-secondary",
+              size === "sm" ? "text-xs" : "text-sm",
+              overflowClass,
+            )}
+            ref={descriptionRef}
+            title={
+              isTextTruncated
+                ? clippedDescription
+                : undefined
+            }
+          >
+            {item.description}
+          </span>
+        ) : null}
+
+        {item.content ? (
+          <div className="mt-1 min-w-0 wrap-anywhere text-content-secondary text-sm">
+            {item.content}
+          </div>
+        ) : null}
+      </div>
+
+      {item.actions ? (
+        <div className="flex shrink-0 items-center gap-2">
+          {item.actions}
+        </div>
+      ) : null}
+    </li>
+  )
+}

package/src/GroupedList/groupedListStickyHeading.ts

@@ -0,0 +1,24 @@
+/**
+ * The custom property a stuck heading reads its background from.
+ * Set it on any ancestor; it falls back to `--color-surface-base`.
+ */
+export const GROUPED_LIST_HEADING_SURFACE_PROPERTY =
+  "--charcuterie-grouped-list-heading-surface"
+
+/**
+ * The custom property a stuck heading reads its distance from the
+ * scroll container's top edge from. It falls back to `0px`.
+ */
+export const GROUPED_LIST_HEADING_OFFSET_PROPERTY =
+  "--charcuterie-grouped-list-heading-offset"
+
+/**
+ * Written out in full because Tailwind scans source text for whole
+ * class strings: an interpolated property name generates nothing.
+ *
+ * The heading row carries the space under it as padding rather than
+ * the group's `gap`, because a gap is transparent and the rows would
+ * show through it while the heading is stuck.
+ */
+export const STICKY_HEADING_CLASS =
+  "sticky top-[var(--charcuterie-grouped-list-heading-offset,0px)] z-[var(--layer-sticky)] bg-[color:var(--charcuterie-grouped-list-heading-surface,var(--color-surface-base))] pb-2"

package/src/index.ts

@@ -235,6 +235,18 @@ export type { FieldGroupProps } from "./Field/FieldGroup.tsx"
 export { FieldGroup } from "./Field/FieldGroup.tsx"
 export type { FileDropZoneProps } from "./FileDropZone/FileDropZone.tsx"
 export { FileDropZone } from "./FileDropZone/FileDropZone.tsx"
+export type {
+  GroupedListGroup,
+  GroupedListHeadingLevel,
+  GroupedListItem,
+  GroupedListProps,
+  GroupedListSize,
+} from "./GroupedList/GroupedList.tsx"
+export { GroupedList } from "./GroupedList/GroupedList.tsx"
+export {
+  GROUPED_LIST_HEADING_OFFSET_PROPERTY,
+  GROUPED_LIST_HEADING_SURFACE_PROPERTY,
+} from "./GroupedList/groupedListStickyHeading.ts"
 export type { HeaderProps } from "./Header/Header.tsx"
 export { Header } from "./Header/Header.tsx"
 export type { IconButtonProps } from "./IconButton/IconButton.tsx"

package/src/sourceRules.test.ts

@@ -623,7 +623,10 @@ test("the barrel is the only place components are re-exported", async () => {
   // TableViewport owns readable comparisons and full-window expansion.
   // MetricCard shares prominent values and category-coloured icons through Card.
   // ComparisonChart and TableColumns share compact comparisons and column controls.
-  expect(componentNames.length).toBe(77)
+  // GroupedList owns rows under group headings; castkit, tally-marks
+  // and whereabouts each drew it by hand. `GroupedListRow.tsx` is its
+  // member and stays out of this count by the `<Name>/<Name>.tsx` rule.
+  expect(componentNames.length).toBe(78)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)

package/src/Button/Button.test.tsx

@@ -1,114 +0,0 @@
-import {
-  composeStories,
-  composeStory,
-} from "@storybook/react"
-import { expect, fn, userEvent } from "storybook/test"
-import { test } from "vitest"
-
-import { mountStory } from "../mountStory.testHelpers.ts"
-import { expectAgentDrivable } from "../testing/index.ts"
-import meta, * as stories from "./Button.stories.tsx"
-
-const { AllStates, Playground, Loading } =
-  composeStories(stories)
-
-test("is drivable by role and name", async () => {
-  const { canvas } = await mountStory(Playground)
-
-  expectAgentDrivable(canvas, {
-    name: "Start rip",
-    role: "button",
-  })
-})
-
-/**
- * The keyboard contract, asserted rather than assumed: Tab reaches
- * it, Enter activates, Space activates. Every hand-rolled
- * `<div onClick>` in the fleet fails all three.
- */
-test("Tab reaches it, and Enter and Space both activate", async () => {
-  const onClick = fn()
-
-  const { canvas } = await mountStory(
-    composeStory(
-      { args: { children: "Start rip", onClick } },
-      meta,
-    ),
-  )
-
-  const button = expectAgentDrivable(canvas, {
-    name: "Start rip",
-    role: "button",
-  })
-
-  await userEvent.tab()
-
-  await expect(button).toHaveFocus()
-
-  await userEvent.keyboard("{Enter}")
-
-  await expect(onClick).toHaveBeenCalledTimes(1)
-
-  await userEvent.keyboard(" ")
-
-  await expect(onClick).toHaveBeenCalledTimes(2)
-})
-
-test("a disabled button is skipped by Tab and ignores a click", async () => {
-  const onClick = fn()
-
-  const { canvas } = await mountStory(
-    composeStory(
-      {
-        args: {
-          children: "Start rip",
-          isDisabled: true,
-          onClick,
-        },
-      },
-      meta,
-    ),
-  )
-
-  const button = canvas.getByRole("button", {
-    name: "Start rip",
-  })
-
-  await userEvent.click(button)
-
-  // A `<div role="button">` with a guard clause looks the same and
-  // is not the same: a real `disabled` is skipped by Tab, ignored
-  // by click, and reported to AT.
-  await expect(onClick).not.toHaveBeenCalled()
-  await expect(button).toBeDisabled()
-
-  await userEvent.tab()
-
-  await expect(button).not.toHaveFocus()
-})
-
-test("loading disables the button and announces the work", async () => {
-  const { canvas } = await mountStory(Loading)
-
-  const button = expectAgentDrivable(canvas, {
-    name: /Ripping disc 3/,
-    role: "button",
-  })
-
-  await expect(button).toBeDisabled()
-  await expect(button).toHaveAttribute("aria-busy", "true")
-
-  // The spinner's label lives in a `role="status"`, so a screen
-  // reader hears the work start rather than only seeing it.
-  await expect(
-    canvas.getByRole("status"),
-  ).toBeInTheDocument()
-})
-
-test("the states board really renders a busy button", async () => {
-  const { canvas } = await mountStory(AllStates)
-
-  await expect(
-    canvas.getByRole("button", { name: /loading/i }),
-  ).toHaveAttribute("aria-busy", "true")
-})