@charcuterie/ui 4.13.0 → 4.14.0

package/src/ScheduleBoard/ScheduleBoard.stories.tsx

@@ -0,0 +1,187 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+
+import { ContainerBoard } from "../board.storyHelpers.tsx"
+import { Dialog } from "../Dialog/Dialog.tsx"
+import { ScheduleBoard } from "./ScheduleBoard.tsx"
+
+const meta = {
+  title: "Components/Data/ScheduleBoard",
+  component: ScheduleBoard,
+  parameters: { layout: "padded" },
+  args: {
+    label: "Studio schedule",
+    days: [
+      {
+        key: "mon",
+        label: "Mon",
+        dateLabel: "6 Apr",
+        isCurrent: true,
+      },
+      { key: "tue", label: "Tue", dateLabel: "7 Apr" },
+      { key: "wed", label: "Wed", dateLabel: "8 Apr" },
+    ],
+    bands: [
+      {
+        key: "morning",
+        label: "Morning",
+        detail: "Before noon",
+        startMinute: 0,
+        endMinute: 720,
+      },
+      {
+        key: "afternoon",
+        label: "Afternoon",
+        detail: "Noon–4p",
+        startMinute: 720,
+        endMinute: 960,
+      },
+      {
+        key: "evening",
+        label: "Evening",
+        detail: "After 4p",
+        startMinute: 960,
+        endMinute: 1440,
+      },
+    ],
+    items: [
+      {
+        key: "mix",
+        dayKey: "mon",
+        title: "Mixing session",
+        timeLabel: "9a–11a",
+        sourceLabel: "Studio A",
+        sourceMarker: "A",
+        startMinute: 540,
+        endMinute: 660,
+        categorical: 1,
+      },
+      {
+        key: "review",
+        dayKey: "mon",
+        title: "Client review",
+        timeLabel: "10a–12p",
+        sourceLabel: "Studio B",
+        sourceMarker: "B",
+        startMinute: 600,
+        endMinute: 720,
+        categorical: 3,
+      },
+      {
+        key: "delivery",
+        dayKey: "tue",
+        title: "Microphone delivery",
+        timeLabel: "All day",
+        sourceLabel: "Studio A",
+        startMinute: null,
+        endMinute: null,
+        categorical: 1,
+      },
+      {
+        key: "record",
+        dayKey: "tue",
+        title:
+          "Location recording and equipment preparation",
+        timeLabel: "2p–4p",
+        sourceLabel: "Studio B",
+        startMinute: 840,
+        endMinute: 960,
+        categorical: 3,
+      },
+    ],
+    layout: "bands",
+  },
+} satisfies Meta<typeof ScheduleBoard>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: playgroundParameters,
+  render: (args) => (
+    <div style={{ inlineSize: "56rem" }}>
+      <ScheduleBoard {...args} />
+    </div>
+  ),
+}
+export const AllVariants: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-8">
+      {(["bands", "hours", "cards"] as const).map(
+        (layout) => (
+          <ScheduleBoard
+            {...args}
+            key={layout}
+            label={`Schedule ${layout}`}
+            layout={layout}
+          />
+        ),
+      )}
+    </div>
+  ),
+}
+export const AllStates: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-8">
+      <ScheduleBoard
+        {...args}
+        items={[]}
+        label="Empty schedule"
+      />
+      <ScheduleBoard
+        {...args}
+        label="Unknown schedule"
+        days={args.days.map((day) => ({
+          ...day,
+          emptyLabel: "Not read yet",
+        }))}
+        items={[]}
+        layout="cards"
+      />
+    </div>
+  ),
+}
+export const Responsive: Story = {
+  render: (args) => (
+    <ContainerBoard>
+      {(width) => (
+        <ScheduleBoard
+          {...args}
+          label={`Schedule at ${width}`}
+        />
+      )}
+    </ContainerBoard>
+  ),
+}
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<string | null>(
+      null,
+    )
+    const item = args.items.find(
+      (entry) => entry.key === selected,
+    )
+    return (
+      <>
+        <ScheduleBoard {...args} onSelect={setSelected} />
+        <Dialog
+          heading={item?.title ?? "Event"}
+          isVisible={selected !== null}
+          onClose={() => {
+            setSelected(null)
+          }}
+        >
+          {item?.timeLabel} · {item?.sourceLabel}
+        </Dialog>
+      </>
+    )
+  },
+}
+export const HourGrid: Story = {
+  args: { layout: "hours" },
+  render: (args) => (
+    <div style={{ inlineSize: "56rem" }}>
+      <ScheduleBoard {...args} />
+    </div>
+  ),
+}

package/src/ScheduleBoard/ScheduleBoard.test.tsx

@@ -0,0 +1,98 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, within } 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 "./ScheduleBoard.stories.tsx"
+
+const { Playground, Responsive, Interactive, HourGrid } =
+  composeStories(stories)
+
+test("bands align periods while retaining exact times and complete titles", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Playground)
+  expectAgentDrivable(canvas, {
+    role: "region",
+    name: "Studio schedule",
+  })
+  const morning: HTMLElement = canvas.getByRole("group", {
+    name: "Morning",
+  })
+  await expect(
+    within(morning).getByText("9a–11a"),
+  ).toBeInTheDocument()
+  await expect(
+    within(morning).getByText("Client review"),
+  ).toBeInTheDocument()
+  await expect(
+    canvas.getByText(
+      "Location recording and equipment preparation",
+    ),
+  ).toBeInTheDocument()
+  const cards = Array.from(
+    morning.querySelectorAll("article"),
+  )
+  await expect(
+    cards.every(
+      (card) => card.scrollHeight <= card.clientHeight + 1,
+    ),
+  ).toBe(true)
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("the narrow layout keeps all events inside the container", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+  const region = expectAgentDrivable(canvas, {
+    role: "region",
+    name: "Schedule at 15rem",
+  })
+  await expect(
+    within(region).getByText(
+      "Location recording and equipment preparation",
+    ),
+  ).toBeInTheDocument()
+  await expect(region.scrollWidth).toBeLessThanOrEqual(
+    region.clientWidth + 1,
+  )
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("the hour axis places overlapping items beside one another", async () => {
+  const { canvas } = await mountStory(HourGrid)
+  expectAgentDrivable(canvas, {
+    role: "region",
+    name: "Studio schedule",
+  })
+  const first = canvas
+    .getByText("Mixing session")
+    .parentElement?.getBoundingClientRect()
+  const second = canvas
+    .getByText("Client review")
+    .parentElement?.getBoundingClientRect()
+  if (!first || !second)
+    throw new Error("Both events must render")
+  await expect(second.top).toBeGreaterThan(first.top)
+  await expect(second.left).toBeGreaterThanOrEqual(
+    first.right,
+  )
+})
+
+test("keyboard selection opens the detail and returns focus on Escape", async () => {
+  const { canvas } = await mountStory(Interactive)
+  const button = expectAgentDrivable(canvas, {
+    role: "button",
+    name: "9a–11a, Mixing session, Studio A",
+  })
+  button.focus()
+  await userEvent.keyboard("{Enter}")
+  await expect(
+    within(document.body).getByRole("dialog", {
+      name: "Mixing session",
+    }),
+  ).toBeInTheDocument()
+  await userEvent.keyboard("{Escape}")
+  await expect(button).toHaveFocus()
+})

package/src/ScheduleBoard/ScheduleBoard.tsx

@@ -0,0 +1,215 @@
+import type { ReactNode } from "react"
+
+import { AdaptiveGrid } from "../AdaptiveGrid/AdaptiveGrid.tsx"
+import { useTrackMeasurements } from "../LaneTimeline/useTrackMeasurements.ts"
+import { toClassName } from "../toClassName.ts"
+import { ScheduleDayCards } from "./ScheduleDayCards.tsx"
+import { ScheduleHourGrid } from "./ScheduleHourGrid.tsx"
+import {
+  type ScheduleEntry,
+  ScheduleItem,
+} from "./ScheduleItem.tsx"
+
+export type ScheduleDay = {
+  key: string
+  label: string
+  dateLabel: string
+  isCurrent?: boolean
+  isQuiet?: boolean
+  emptyLabel?: string
+}
+
+export type ScheduleBand = {
+  key: string
+  label: string
+  detail?: string
+  startMinute: number
+  endMinute: number
+}
+export type ScheduleLayout = "bands" | "hours" | "cards"
+export type ScheduleBoardProps = {
+  label: string
+  days: readonly ScheduleDay[]
+  items: readonly ScheduleEntry[]
+  bands: readonly ScheduleBand[]
+  layout?: ScheduleLayout
+  className?: string
+  onSelect?: (key: string) => void
+  formatHour?: (minute: number) => string
+  /** Axis height, in pixels. A minimum preserves short appointments. */
+  hourGridBlockSize?: number
+}
+
+/** Aligned time bands or an exact hour axis; folds to day cards on measured width. */
+export const ScheduleBoard = ({
+  label,
+  days,
+  items,
+  bands,
+  layout = "bands",
+  className,
+  onSelect,
+  formatHour = (minute) => `${Math.floor(minute / 60)}:00`,
+  hourGridBlockSize = 480,
+}: ScheduleBoardProps): ReactNode => {
+  const { trackRef, inlineSize, fontSize, isMeasured } =
+    useTrackMeasurements()
+  const isFolded =
+    isMeasured &&
+    inlineSize < (days.length * 8 + 4) * fontSize
+  const template = `5.5rem ${days.map((day) => (day.isQuiet ? "minmax(0, .65fr)" : "minmax(0, 1fr)")).join(" ")}`
+  const dayHeader = (
+    <div
+      className="grid gap-2 border-b border-border-subtle pb-2"
+      style={{ gridTemplateColumns: template }}
+    >
+      <span />
+      {days.map((day) => (
+        <div
+          className={toClassName(
+            "min-w-0 wrap-anywhere",
+            day.isCurrent
+              ? "text-intent-accent-content"
+              : "text-content-secondary",
+          )}
+          key={day.key}
+        >
+          <span className="block text-sm">
+            {day.label}
+            {day.isCurrent ? " · Today" : ""}
+          </span>
+          <strong className="text-2xl leading-tight">
+            {day.dateLabel}
+          </strong>
+        </div>
+      ))}
+    </div>
+  )
+  const untimed = items.filter(
+    (item) => item.startMinute === null,
+  )
+  return (
+    <section
+      aria-label={label}
+      className={toClassName(
+        "@container flex min-w-0 flex-col gap-2",
+        className,
+      )}
+    >
+      <div
+        aria-hidden="true"
+        className="h-0"
+        ref={trackRef}
+      />
+      {layout === "cards" || isFolded ? (
+        <AdaptiveGrid
+          itemBlockSize={320}
+          itemCount={days.length}
+          maxColumns={7}
+          minColumnInlineSize={230}
+        >
+          {days.map((day) => (
+            <ScheduleDayCards
+              day={day}
+              items={items.filter(
+                (item) => item.dayKey === day.key,
+              )}
+              key={day.key}
+              onSelect={onSelect}
+            />
+          ))}
+        </AdaptiveGrid>
+      ) : (
+        <>
+          {dayHeader}
+          {untimed.length > 0 ? (
+            <div
+              className="grid gap-2 border-b border-border-subtle pb-2"
+              style={{ gridTemplateColumns: template }}
+            >
+              <span className="text-xs text-content-muted">
+                All day / due
+              </span>
+              {days.map((day) => (
+                <div
+                  className="flex min-w-0 flex-col gap-2"
+                  key={day.key}
+                >
+                  {untimed
+                    .filter(
+                      (item) => item.dayKey === day.key,
+                    )
+                    .map((item) => (
+                      <ScheduleItem
+                        item={item}
+                        key={item.key}
+                        onSelect={onSelect}
+                      />
+                    ))}
+                </div>
+              ))}
+            </div>
+          ) : null}
+          {layout === "hours" ? (
+            <ScheduleHourGrid
+              blockSize={hourGridBlockSize}
+              days={days}
+              formatHour={formatHour}
+              items={items}
+              onSelect={onSelect}
+              template={template}
+            />
+          ) : (
+            bands.map((band) => (
+              // biome-ignore lint/a11y/useSemanticElements: this names schedule entries, not form controls.
+              <div
+                aria-label={band.label}
+                className="grid gap-2 border-b border-border-subtle pb-2"
+                key={band.key}
+                role="group"
+                style={{ gridTemplateColumns: template }}
+              >
+                <div className="min-w-0 wrap-anywhere text-xs text-content-secondary">
+                  <strong className="block">
+                    {band.label}
+                  </strong>
+                  <span className="text-content-muted">
+                    {band.detail}
+                  </span>
+                </div>
+                {days.map((day) => (
+                  <div
+                    className="flex min-w-0 flex-col gap-2"
+                    key={day.key}
+                  >
+                    {items
+                      .filter(
+                        (item) =>
+                          item.dayKey === day.key &&
+                          item.startMinute !== null &&
+                          item.startMinute >=
+                            band.startMinute &&
+                          item.startMinute < band.endMinute,
+                      )
+                      .sort(
+                        (first, second) =>
+                          (first.startMinute ?? 0) -
+                          (second.startMinute ?? 0),
+                      )
+                      .map((item) => (
+                        <ScheduleItem
+                          item={item}
+                          key={item.key}
+                          onSelect={onSelect}
+                        />
+                      ))}
+                  </div>
+                ))}
+              </div>
+            ))
+          )}
+        </>
+      )}
+    </section>
+  )
+}

package/src/ScheduleBoard/ScheduleDayCards.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react"
+
+import { Card } from "../Card/Card.tsx"
+import type { ScheduleDay } from "./ScheduleBoard.tsx"
+import {
+  type ScheduleEntry,
+  ScheduleItem,
+} from "./ScheduleItem.tsx"
+
+export const ScheduleDayCards = ({
+  day,
+  items,
+  onSelect,
+}: {
+  day: ScheduleDay
+  items: readonly ScheduleEntry[]
+  onSelect?: (key: string) => void
+}): ReactNode => (
+  <Card padding="sm">
+    <h3 className="font-semibold text-md">
+      {day.label}, {day.dateLabel}
+      {day.isCurrent ? " · Today" : ""}
+    </h3>
+    {items.length === 0 ? (
+      <p className="text-sm text-content-muted">
+        {day.emptyLabel ?? "Nothing scheduled"}
+      </p>
+    ) : (
+      [...items]
+        .sort(
+          (first, second) =>
+            (first.startMinute ?? -1) -
+            (second.startMinute ?? -1),
+        )
+        .map((item) => (
+          <ScheduleItem
+            item={item}
+            key={item.key}
+            onSelect={onSelect}
+          />
+        ))
+    )}
+  </Card>
+)

package/src/ScheduleBoard/ScheduleHourGrid.tsx

@@ -0,0 +1,146 @@
+import type { ReactNode } from "react"
+
+import type { ScheduleDay } from "./ScheduleBoard.tsx"
+import {
+  type ScheduleEntry,
+  ScheduleItem,
+} from "./ScheduleItem.tsx"
+import { placeScheduleIntervals } from "./scheduleGeometry.ts"
+
+export const ScheduleHourGrid = ({
+  blockSize,
+  days,
+  formatHour,
+  items,
+  onSelect,
+  template,
+}: {
+  blockSize: number
+  days: readonly ScheduleDay[]
+  formatHour: (minute: number) => string
+  items: readonly ScheduleEntry[]
+  onSelect?: (key: string) => void
+  template: string
+}): ReactNode => {
+  const timed = items.filter(
+    (item) => item.startMinute !== null,
+  )
+  const start =
+    Math.floor(
+      Math.min(
+        480,
+        ...timed.map((item) => item.startMinute ?? 480),
+      ) / 60,
+    ) * 60
+  const end = Math.min(
+    1440,
+    Math.ceil(
+      Math.max(
+        1080,
+        ...timed.map(
+          (item) =>
+            item.endMinute ??
+            (item.startMinute ?? 1080) + 30,
+        ),
+      ) / 60,
+    ) * 60,
+  )
+  const height = Math.max(360, blockSize)
+  const scale = height / Math.max(60, end - start)
+  const hours = Array.from(
+    { length: (end - start) / 60 + 1 },
+    (_unused, index) => start + index * 60,
+  )
+  return (
+    <div
+      className="grid gap-2 pb-6"
+      style={{ gridTemplateColumns: template }}
+    >
+      <div
+        className="relative text-xs text-content-muted tabular-nums"
+        style={{ blockSize: height }}
+      >
+        {hours.map((minute) => (
+          <span
+            className="absolute start-0"
+            key={minute}
+            style={{
+              insetBlockStart: (minute - start) * scale,
+            }}
+          >
+            {formatHour(minute)}
+          </span>
+        ))}
+      </div>
+      {days.map((day) => {
+        const entries = timed.filter(
+          (item) => item.dayKey === day.key,
+        )
+        // Minimum painted height participates in packing, so short adjacent items cannot hide each other.
+        const placed = placeScheduleIntervals(
+          entries.map((item) => ({
+            key: item.key,
+            startMinute: item.startMinute ?? 0,
+            endMinute: Math.max(
+              item.endMinute ??
+                (item.startMinute ?? 0) + 30,
+              (item.startMinute ?? 0) + 30 / scale,
+            ),
+          })),
+        )
+        return (
+          // biome-ignore lint/a11y/useSemanticElements: this names schedule entries, not form controls.
+          <div
+            aria-label={`${day.label}, ${day.dateLabel}`}
+            className="relative min-w-0 border-s border-border-subtle"
+            key={day.key}
+            role="group"
+            style={{ blockSize: height }}
+          >
+            {hours.map((minute) => (
+              <div
+                aria-hidden="true"
+                className="absolute w-full border-t border-border-subtle"
+                key={minute}
+                style={{
+                  insetBlockStart: (minute - start) * scale,
+                }}
+              />
+            ))}
+            {placed.map((position) => {
+              const item = entries.find(
+                (entry) => entry.key === position.key,
+              )
+              return item ? (
+                <div
+                  className="absolute min-w-0 pe-1"
+                  key={item.key}
+                  style={{
+                    insetBlockStart:
+                      (position.startMinute - start) *
+                      scale,
+                    blockSize: Math.max(
+                      30,
+                      ((item.endMinute ??
+                        position.startMinute + 30) -
+                        position.startMinute) *
+                        scale,
+                    ),
+                    insetInlineStart: `${(position.column / position.columnCount) * 100}%`,
+                    inlineSize: `${100 / position.columnCount}%`,
+                  }}
+                >
+                  <ScheduleItem
+                    isClipped
+                    item={item}
+                    onSelect={onSelect}
+                  />
+                </div>
+              ) : null
+            })}
+          </div>
+        )
+      })}
+    </div>
+  )
+}