@charcuterie/ui 4.13.1 → 4.15.0

package/src/Chart/Chart.stories.tsx

@@ -0,0 +1,92 @@
+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,
+  StoryCell,
+  StoryGrid,
+} from "../board.storyHelpers.tsx"
+import { Chart } from "./Chart.tsx"
+
+const meta = {
+  title: "Components/Data/Chart",
+  component: Chart,
+  args: {
+    title: "Daily progress",
+    labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+    series: [
+      {
+        id: "net",
+        label: "Net points",
+        values: [300, 520, -50, null, 600],
+        color: "var(--color-intent-accent-solid)",
+      },
+    ],
+  },
+} satisfies Meta<typeof Chart>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
+export const AllVariants: Story = {
+  render: (props) => (
+    <StoryGrid columns={2}>
+      {(["bar", "line"] as const).map((kind) => (
+        <StoryCell align="stretch" key={kind} label={kind}>
+          <Chart {...props} kind={kind} />
+        </StoryCell>
+      ))}
+    </StoryGrid>
+  ),
+}
+export const AllStates: Story = {
+  render: (props) => (
+    <StoryGrid columns={2}>
+      {[
+        [0, 0],
+        [null, null],
+        [50, -50],
+        [20, 20],
+      ].map((values, index) => (
+        <StoryCell
+          align="stretch"
+          key={JSON.stringify(values)}
+          label={`State ${index + 1}`}
+        >
+          <Chart
+            {...props}
+            labels={["Mon", "Tue"]}
+            series={[
+              { id: "a", label: "Net points", values },
+            ]}
+          />
+        </StoryCell>
+      ))}
+    </StoryGrid>
+  ),
+}
+export const Responsive: Story = {
+  render: (props) => (
+    <ContainerBoard>
+      {() => <Chart {...props} />}
+    </ContainerBoard>
+  ),
+}
+export const Interactive: Story = {
+  render: (props) => {
+    const [isTableVisible, setIsTableVisible] =
+      useState(false)
+    return (
+      <>
+        <Button
+          onClick={() => setIsTableVisible(!isTableVisible)}
+        >
+          {isTableVisible ? "Hide values" : "Show values"}
+        </Button>
+        <Chart {...props} isTableVisible={isTableVisible} />
+      </>
+    )
+  },
+}

package/src/Chart/Chart.test.tsx

@@ -0,0 +1,37 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, within } from "storybook/test"
+import { test } from "vitest"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./Chart.stories.tsx"
+
+const { Playground, Interactive } = composeStories(stories)
+test("the plot has an accessible name and a named legend", async () => {
+  const { canvas } = await mountStory(Playground)
+  expectAgentDrivable(canvas, {
+    role: "img",
+    name: "Daily progress",
+  })
+  await expect(
+    canvas.getByRole("list", {
+      name: "Daily progress legend",
+    }),
+  ).toBeVisible()
+})
+test("the keyboard exposes all values, including missing data, in a real table", async () => {
+  const { canvas } = await mountStory(Interactive)
+  const toggle = expectAgentDrivable(canvas, {
+    role: "button",
+    name: "Show values",
+  })
+  toggle.focus()
+  await userEvent.keyboard("{Enter}")
+  const table = canvas.getByRole("table", {
+    name: "Daily progress values",
+  })
+  await expect(table).toBeVisible()
+  await expect(
+    within(table).getByText("Unavailable"),
+  ).toBeVisible()
+  await expect(within(table).getByText("-50")).toBeVisible()
+})

package/src/Chart/Chart.tsx

@@ -0,0 +1,129 @@
+// biome-ignore-all lint/security/noDangerouslySetInnerHtml: The portable renderer escapes text and restricts color references; security tests cover this boundary.
+import {
+  type ChartOptions,
+  renderChartSvg,
+} from "@charcuterie/logic/core"
+import {
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { toClassName } from "../toClassName.ts"
+
+export type ChartProps = ChartOptions & {
+  className?: string
+  /** A text table exposes every value without relying on color, hover, or SVG. */
+  isTableVisible?: boolean
+}
+
+/** The same escaped SVG renderer is available without React for kiosk/image consumers. */
+export const Chart = ({
+  className,
+  isTableVisible = false,
+  ...options
+}: ChartProps): ReactNode => {
+  const container = useRef<HTMLDivElement>(null)
+  const [measuredWidth, setMeasuredWidth] = useState(
+    options.width ?? 640,
+  )
+  useEffect(() => {
+    const element = container.current
+    if (!element || options.width !== undefined) return
+    const frame = { id: 0 }
+    const observer = new ResizeObserver(([entry]) => {
+      cancelAnimationFrame(frame.id)
+      frame.id = requestAnimationFrame(() => {
+        if (entry.contentRect.width > 0) {
+          setMeasuredWidth(entry.contentRect.width)
+        }
+      })
+    })
+    observer.observe(element)
+    return () => {
+      observer.disconnect()
+      cancelAnimationFrame(frame.id)
+    }
+  }, [options.width])
+  return (
+    <figure
+      className={toClassName(
+        "min-w-0 text-content-primary",
+        className,
+      )}
+    >
+      <figcaption className="mb-2 text-sm font-semibold">
+        {options.title}
+      </figcaption>
+      <div
+        ref={container}
+        style={{ height: options.height ?? 240 }}
+        dangerouslySetInnerHTML={{
+          __html: renderChartSvg({
+            ...options,
+            width: options.width ?? measuredWidth,
+          }),
+        }}
+      />
+      <ul
+        aria-label={`${options.title} legend`}
+        className="mt-2 flex flex-wrap gap-3 text-xs"
+      >
+        {options.series.map((entry, index) => (
+          <li
+            className="min-w-0 wrap-anywhere"
+            key={entry.id}
+          >
+            <span
+              aria-hidden="true"
+              style={{
+                color: entry.color ?? "currentColor",
+                borderTop: `3px ${index % 3 === 0 ? "solid" : index % 3 === 1 ? "dashed" : "dotted"} currentColor`,
+                display: "inline-block",
+                width: "1rem",
+                marginRight: "0.4rem",
+              }}
+            />
+            {entry.label}
+          </li>
+        ))}
+      </ul>
+      {options.description && (
+        <p className="mt-2 text-xs text-content-muted">
+          {options.description}
+        </p>
+      )}
+      {isTableVisible && (
+        <div className="mt-3 overflow-auto">
+          <table className="w-full text-start text-xs">
+            <caption className="sr-only">
+              {options.title} values
+            </caption>
+            <thead>
+              <tr>
+                <th scope="col">Period</th>
+                {options.series.map((entry) => (
+                  <th scope="col" key={entry.id}>
+                    {entry.label}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {options.labels.map((label, index) => (
+                <tr key={label}>
+                  <th scope="row">{label}</th>
+                  {options.series.map((entry) => (
+                    <td key={entry.id}>
+                      {entry.values[index] ?? "Unavailable"}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </figure>
+  )
+}

package/src/ScheduleBoard/ScheduleBoard.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
+import * as Stories from "./ScheduleBoard.stories";
+
+<Meta of={Stories} />
+
+# ScheduleBoard
+
+A schedule with aligned time bands, an exact hour axis, and day cards. The app supplies day labels, minute offsets, sources, and formatted times. Bands group by start time; their height never claims duration. The hour layout shows duration and packs overlapping entries side by side. Short items keep a minimum visible height. Full labels remain available through the accessible name and the selection callback. Multi-day entries must be split into day segments by the app. A measured minimum column width switches to day cards, without horizontal scrolling.
+
+<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/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()
+})