@charcuterie/ui 4.13.1 → 4.15.0

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>
+  )
+}

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/VirtualizedGrid/VirtualizedGrid.stories.tsx

@@ -286,6 +286,12 @@ export const Responsive: Story = {
   args: {
     blockSizeResolver: fixedBlockSize(600),
     minColumnInlineSize: 160,
+    // Every row mounted. This story is about the column count, not
+    // the window, and the VRT shot of the whole root is taller than
+    // the viewport: the grids re-window while it is taken, so which
+    // rows were drawn depended on the runner's timing (release PR
+    // #319 drew 13 rows where the baseline drew 5).
+    overscanRows: 60,
   },
   render: (gridProps) => (
     <div className="flex flex-wrap items-start gap-6">

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>
+    )
+  },
+}