@charcuterie/ui 4.13.0 → 4.14.0

package/src/ScheduleBoard/ScheduleItem.tsx

@@ -0,0 +1,88 @@
+import type { CategoricalIndex } from "@charcuterie/tokens"
+import type { ReactNode } from "react"
+
+import {
+  CATEGORICAL_APPEARANCE_CLASS,
+  CATEGORICAL_HOVER_CLASS,
+} from "../categoricalStyles.ts"
+import { FOCUS_RING_CLASS } from "../intentStyles.ts"
+import { toClassName } from "../toClassName.ts"
+
+export type ScheduleEntry = {
+  key: string
+  dayKey: string
+  title: string
+  timeLabel: string
+  sourceLabel: string
+  sourceMarker?: string
+  categorical?: CategoricalIndex
+  /** Minutes since the start of this displayed day. Null is the untimed row. */
+  startMinute: number | null
+  endMinute: number | null
+}
+
+export const ScheduleItem = ({
+  item,
+  isClipped = false,
+  onSelect,
+}: {
+  item: ScheduleEntry
+  isClipped?: boolean
+  onSelect?: (key: string) => void
+}): ReactNode => {
+  const categorical = item.categorical ?? 1
+  const label = `${item.timeLabel}, ${item.title}, ${item.sourceLabel}`
+  const content = (
+    <>
+      <span className="flex items-baseline justify-between gap-1">
+        <strong className="min-w-0 wrap-anywhere text-sm leading-tight tabular-nums">
+          {item.timeLabel}
+        </strong>
+        {item.sourceMarker ? (
+          <span aria-hidden="true" className="text-xs">
+            {item.sourceMarker}
+          </span>
+        ) : null}
+      </span>
+      <span
+        className={
+          isClipped
+            ? "line-clamp-2 text-sm leading-tight"
+            : "wrap-anywhere text-sm leading-tight"
+        }
+      >
+        {item.title}
+      </span>
+    </>
+  )
+  const className = toClassName(
+    "flex w-full min-w-0 flex-col gap-1 overflow-hidden rounded-md border p-2 text-start",
+    isClipped ? "h-full" : undefined,
+    CATEGORICAL_APPEARANCE_CLASS[categorical].soft,
+    onSelect
+      ? CATEGORICAL_HOVER_CLASS[categorical].soft
+      : undefined,
+    FOCUS_RING_CLASS,
+  )
+  return onSelect ? (
+    <button
+      aria-label={label}
+      className={className}
+      onClick={() => {
+        onSelect(item.key)
+      }}
+      title={label}
+      type="button"
+    >
+      {content}
+    </button>
+  ) : (
+    <article
+      aria-label={label}
+      className={className}
+      title={label}
+    >
+      {content}
+    </article>
+  )
+}

package/src/ScheduleBoard/scheduleGeometry.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from "vitest"
+import { placeScheduleIntervals } from "./scheduleGeometry.ts"
+
+test("a chained overlap cluster shares its maximum width, then resets", () => {
+  const placed = placeScheduleIntervals([
+    { key: "a", startMinute: 540, endMinute: 660 },
+    { key: "b", startMinute: 600, endMinute: 720 },
+    { key: "c", startMinute: 660, endMinute: 780 },
+    { key: "d", startMinute: 780, endMinute: 840 },
+  ])
+  expect(
+    placed.map(({ key, column, columnCount }) => [
+      key,
+      column,
+      columnCount,
+    ]),
+  ).toEqual([
+    ["a", 0, 2],
+    ["b", 1, 2],
+    ["c", 0, 2],
+    ["d", 0, 1],
+  ])
+})

package/src/ScheduleBoard/scheduleGeometry.ts

@@ -0,0 +1,56 @@
+export type ScheduleInterval = {
+  key: string
+  startMinute: number
+  endMinute: number
+}
+
+export type PlacedScheduleInterval = ScheduleInterval & {
+  column: number
+  columnCount: number
+}
+
+/** Pack each connected overlap cluster independently; adjacent intervals share first column. */
+export const placeScheduleIntervals = (
+  items: readonly ScheduleInterval[],
+): PlacedScheduleInterval[] => {
+  const result: PlacedScheduleInterval[] = []
+  let cluster: PlacedScheduleInterval[] = []
+  let ends: number[] = []
+  let clusterEnd = -1
+  const flush = () => {
+    result.push(
+      ...cluster.map((item) => ({
+        ...item,
+        columnCount: ends.length,
+      })),
+    )
+    cluster = []
+    ends = []
+  }
+  for (const item of [...items].sort(
+    (first, second) =>
+      first.startMinute - second.startMinute ||
+      second.endMinute - first.endMinute ||
+      first.key.localeCompare(second.key),
+  )) {
+    if (item.startMinute >= clusterEnd) flush()
+    const free = ends.findIndex(
+      (end) => end <= item.startMinute,
+    )
+    const column = free < 0 ? ends.length : free
+    const endMinute = Math.max(
+      item.startMinute + 1,
+      item.endMinute,
+    )
+    ends[column] = endMinute
+    clusterEnd = Math.max(...ends)
+    cluster.push({
+      ...item,
+      endMinute,
+      column,
+      columnCount: 1,
+    })
+  }
+  flush()
+  return result
+}

package/src/WeekdayIndicator/WeekdayIndicator.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
+import * as Stories from "./WeekdayIndicator.stories";
+
+<Meta of={Stories} />
+
+# WeekdayIndicator
+
+Seven labeled circles in Monday-first order. Pass zero-based weekday offsets (Monday 0, Sunday 6). The accessible name spells out selected days. The app decides whether the pattern is a recurrence rule or only the weekdays observed in the displayed period, and supplies the label accordingly. This is a display, not a weekday picker.
+
+<Canvas of={Stories.Playground} />
+
+## Props
+
+<Controls />
+
+## Layouts and states
+
+<Canvas of={Stories.AllVariants} />
+<Canvas of={Stories.AllStates} />
+
+## Narrow containers
+
+<Canvas of={Stories.Responsive} />
+
+## Keyboard interaction
+
+Tab reaches each action. Enter or Space activates it. The display itself adds no tab stops.
+
+<Canvas of={Stories.Interactive} />

package/src/WeekdayIndicator/WeekdayIndicator.stories.tsx

@@ -0,0 +1,71 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Button } from "../Button/Button.tsx"
+import { ContainerBoard } from "../board.storyHelpers.tsx"
+import { WeekdayIndicator } from "./WeekdayIndicator.tsx"
+
+const meta = {
+  title: "Components/Data/WeekdayIndicator",
+  component: WeekdayIndicator,
+  args: { days: [0, 1, 2, 3], label: "Repeats" },
+  argTypes: {
+    categorical: {
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    },
+  },
+} satisfies Meta<typeof WeekdayIndicator>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
+export const AllVariants: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {([1, 3, 5, 7, 9] as const).map((categorical) => (
+        <WeekdayIndicator
+          {...args}
+          categorical={categorical}
+          key={categorical}
+        />
+      ))}
+    </div>
+  ),
+}
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <WeekdayIndicator days={[]} />
+      <WeekdayIndicator days={[0, 1, 2, 3, 4, 5, 6]} />
+      <WeekdayIndicator days={[5, 6]} />
+    </div>
+  ),
+}
+export const Responsive: Story = {
+  render: (args) => (
+    <ContainerBoard>
+      <WeekdayIndicator {...args} />
+    </ContainerBoard>
+  ),
+}
+export const Interactive: Story = {
+  render: () => {
+    const [isWeekend, setIsWeekend] = useState(false)
+    return (
+      <div className="flex flex-col items-start gap-3">
+        <Button
+          onClick={() => {
+            setIsWeekend(!isWeekend)
+          }}
+        >
+          Switch pattern
+        </Button>
+        <WeekdayIndicator
+          days={isWeekend ? [5, 6] : [0, 1, 2, 3, 4]}
+        />
+      </div>
+    )
+  },
+}

package/src/WeekdayIndicator/WeekdayIndicator.test.tsx

@@ -0,0 +1,34 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent } from "storybook/test"
+import { test } from "vitest"
+
+import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./WeekdayIndicator.stories.tsx"
+
+const { Playground, Interactive } = composeStories(stories)
+test("the pattern reads Monday first and exposes the filled days in words", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Playground)
+  const pattern = expectAgentDrivable(canvas, {
+    role: "img",
+    name: "Repeats: Monday, Tuesday, Wednesday, Thursday",
+  })
+  await expect(pattern.textContent).toBe("MTWTFSS")
+  await expectNoAxeViolations(canvasElement)
+})
+test("a changed pattern updates its accessible description", async () => {
+  const { canvas } = await mountStory(Interactive)
+  const button = expectAgentDrivable(canvas, {
+    role: "button",
+    name: "Switch pattern",
+  })
+  button.focus()
+  await userEvent.keyboard("{Enter}")
+  await expect(
+    canvas.getByRole("img", {
+      name: "Repeats: Saturday, Sunday",
+    }),
+  ).toBeInTheDocument()
+})

package/src/WeekdayIndicator/WeekdayIndicator.tsx

@@ -0,0 +1,57 @@
+import type { CategoricalIndex } from "@charcuterie/tokens"
+import type { ReactNode } from "react"
+
+import { CATEGORICAL_APPEARANCE_CLASS } from "../categoricalStyles.ts"
+import { toClassName } from "../toClassName.ts"
+
+export type WeekdayIndicatorProps = {
+  /** Monday is 0, Sunday is 6. These are observed weekdays, not an RRULE. */
+  days: readonly number[]
+  categorical?: CategoricalIndex
+  className?: string
+  label?: string
+}
+
+const DAYS = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const
+
+/** A named, noninteractive seven-day pattern, with letters as well as color. */
+export const WeekdayIndicator = ({
+  days,
+  categorical = 1,
+  className,
+  label = "Repeats",
+}: WeekdayIndicatorProps): ReactNode => (
+  <span
+    aria-label={`${label}: ${DAYS.filter((_day, index) => days.includes(index)).join(", ") || "no weekdays"}`}
+    className={toClassName(
+      "inline-flex flex-wrap gap-1",
+      className,
+    )}
+    role="img"
+    title={`${label}: ${DAYS.filter((_day, index) => days.includes(index)).join(", ") || "no weekdays"}`}
+  >
+    {DAYS.map((day, index) => (
+      <span
+        aria-hidden="true"
+        className={toClassName(
+          "flex size-6 items-center justify-center rounded-full border text-xs font-medium",
+          days.includes(index)
+            ? CATEGORICAL_APPEARANCE_CLASS[categorical]
+                .solid
+            : "border-border-subtle text-content-muted",
+        )}
+        key={day}
+      >
+        {day.slice(0, 1)}
+      </span>
+    ))}
+  </span>
+)

package/src/index.ts

@@ -417,6 +417,14 @@ export type {
 export { getIsRoutedHref } from "./RouterLink/routerLink.ts"
 export type { UnstyledLinkProps } from "./RouterLink/UnstyledLink.tsx"
 export { UnstyledLink } from "./RouterLink/UnstyledLink.tsx"
+export type {
+  ScheduleBand,
+  ScheduleBoardProps,
+  ScheduleDay,
+  ScheduleLayout,
+} from "./ScheduleBoard/ScheduleBoard.tsx"
+export { ScheduleBoard } from "./ScheduleBoard/ScheduleBoard.tsx"
+export type { ScheduleEntry } from "./ScheduleBoard/ScheduleItem.tsx"
 export type { SearchInputProps } from "./SearchInput/SearchInput.tsx"
 export { SearchInput } from "./SearchInput/SearchInput.tsx"
 export type {
@@ -542,3 +550,5 @@ export type { VirtualizedGridProps } from "./VirtualizedGrid/VirtualizedGrid.tsx
 export { VirtualizedGrid } from "./VirtualizedGrid/VirtualizedGrid.tsx"
 export type { VisuallyHiddenProps } from "./VisuallyHidden/VisuallyHidden.tsx"
 export { VisuallyHidden } from "./VisuallyHidden/VisuallyHidden.tsx"
+export type { WeekdayIndicatorProps } from "./WeekdayIndicator/WeekdayIndicator.tsx"
+export { WeekdayIndicator } from "./WeekdayIndicator/WeekdayIndicator.tsx"

package/src/markdownEditorCodeMirror/MarkdownView.test.tsx

@@ -157,6 +157,10 @@ test("it renders what the editor renders", async () => {
 test("a link is a real anchor in the tab order", async () => {
   const { canvas } = await mountStory(Interactive)
 
+  // Markdown decorations arrive after the editor's asynchronous parse.
+  // Wait for the link before checking its accessibility and keyboard behavior.
+  await canvas.findByRole("link", { name: "the runbook" })
+
   const link = expectAgentDrivable(canvas, {
     name: "the runbook",
     role: "link",

package/src/sourceRules.test.ts

@@ -253,6 +253,7 @@ test("a container-query component is never storied in a shrink-to-fit cell", ()
     "PortraitTiles",
     // Metrics query the space remaining beside the media, not the entire card.
     "ProgressCard",
+    "ScheduleBoard",
     // `Stepper`'s container is the one that decides whether a
     // `horizontal` sequence is actually horizontal. Below `--cq-md`
     // it falls back to the vertical column, because four steps side
@@ -618,7 +619,7 @@ test("the barrel is the only place components are re-exported", async () => {
   // Breadcrumbs composes TextLink for the path back up a hierarchy.
   // ActionMenu composes IconButton and Menu for the overflow control.
   // ValuePairs owns compact label-over-value summaries.
-  expect(componentNames.length).toBe(70)
+  expect(componentNames.length).toBe(72)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)