@charcuterie/ui 4.26.2 → 4.27.0

package/src/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,289 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ReactNode } from "react"
+import { useState } from "react"
+import { userEvent, within } from "storybook/test"
+
+import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
+import {
+  ContainerBoard,
+  StoryRow,
+  StorySection,
+} from "../board.storyHelpers.tsx"
+import { Field } from "../Field/Field.tsx"
+import type { ColorPreset } from "./ColorPicker.tsx"
+import { ColorPicker } from "./ColorPicker.tsx"
+import { parseHexColor } from "./parseHexColor.ts"
+
+/**
+ * A palette with several shades of one hue on purpose: the case that
+ * made this a searchable list is a family where every child wants a
+ * different pink.
+ */
+const PRESETS: ColorPreset[] = [
+  { name: "Red", value: "#E63946" },
+  {
+    keywords: ["pink", "red"],
+    name: "Raspberry",
+    value: "#DB2777",
+  },
+  {
+    keywords: ["pink"],
+    name: "Hot Pink",
+    value: "#FF006E",
+  },
+  { keywords: ["pink"], name: "Blush", value: "#FB7185" },
+  {
+    keywords: ["pink"],
+    name: "Bubblegum",
+    value: "#FF69B4",
+  },
+  {
+    keywords: ["pink"],
+    name: "Cotton Candy",
+    value: "#F9A8D4",
+  },
+  {
+    keywords: ["purple"],
+    name: "Lavender",
+    value: "#A78BFA",
+  },
+  { name: "Purple", value: "#8338EC" },
+  { name: "Blue", value: "#3A86FF" },
+  {
+    keywords: ["green", "blue"],
+    name: "Teal",
+    value: "#2A9D8F",
+  },
+  { name: "Green", value: "#22C55E" },
+  { name: "Yellow", value: "#FFBE0B" },
+  { name: "Orange", value: "#FB5607" },
+  { name: "Brown", value: "#B5651D" },
+]
+
+/**
+ * A stand-in for an app's own rule. This one refuses grays and
+ * near-whites, the way a reader board that draws the color on a dark
+ * panel would.
+ */
+const getStoryColorError = (hex: string): null | string => {
+  const digits = (parseHexColor(hex) ?? "").slice(1)
+  const channels = [0, 2, 4].map(
+    (start) =>
+      Number.parseInt(digits.slice(start, start + 2), 16) /
+      255,
+  )
+  const highest = Math.max(...channels)
+  const lowest = Math.min(...channels)
+
+  if (highest - lowest < 0.2) {
+    return "Pick a color with more hue. Gray, white, and black do not show on the board."
+  }
+
+  return null
+}
+
+const meta = {
+  title: "Components/Controls/ColorPicker",
+  component: ColorPicker,
+  parameters: { layout: "padded" },
+  argTypes: {
+    size: controlSizeArgType,
+  },
+  args: {
+    isCustomAllowed: true,
+    label: "Color",
+    onChange: () => {},
+    presets: PRESETS,
+  },
+} satisfies Meta<typeof ColorPicker>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const ColorPickerHarness = ({
+  hasColorRule = false,
+  initialValue,
+  isCustomAllowed = true,
+  label,
+}: {
+  hasColorRule?: boolean
+  initialValue?: string
+  isCustomAllowed?: boolean
+  label: string
+}): ReactNode => {
+  const [value, setValue] = useState(initialValue)
+
+  return (
+    <div className="flex flex-col gap-2">
+      <ColorPicker
+        getColorError={
+          hasColorRule ? getStoryColorError : undefined
+        }
+        isCustomAllowed={isCustomAllowed}
+        label={label}
+        onChange={setValue}
+        presets={PRESETS}
+        value={value}
+      />
+      <p className="text-content-muted text-xs">
+        Value: {value ?? "none"}
+      </p>
+    </div>
+  )
+}
+
+/** A preset chosen, custom colors allowed, and an app rule. */
+export const Playground: Story = {
+  parameters: playgroundParameters,
+  render: () => (
+    <ColorPickerHarness
+      hasColorRule
+      initialValue="#FF006E"
+      label="Color"
+    />
+  ),
+}
+
+/** The three sizes, each reading a density-aware control height. */
+export const AllVariants: Story = {
+  render: () => (
+    <StorySection title="Sizes">
+      <StoryRow>
+        {(["sm", "md", "lg"] as const).map((size) => (
+          <ColorPicker
+            key={size}
+            label={`Color ${size}`}
+            onChange={() => {}}
+            presets={PRESETS}
+            size={size}
+            value="#3A86FF"
+          />
+        ))}
+      </StoryRow>
+    </StorySection>
+  ),
+}
+
+/**
+ * A preset, a custom color (the trigger reads the code), nothing chosen
+ * yet, presets only, and disabled.
+ */
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <StorySection title="A preset">
+        <StoryRow>
+          <ColorPickerHarness
+            initialValue="#FF69B4"
+            label="Preset color"
+          />
+        </StoryRow>
+      </StorySection>
+
+      <StorySection title="A custom color reads its code">
+        <StoryRow>
+          <ColorPickerHarness
+            initialValue="#C2185B"
+            label="Custom color"
+          />
+        </StoryRow>
+      </StorySection>
+
+      <StorySection title="Nothing chosen">
+        <StoryRow>
+          <ColorPickerHarness label="Empty color" />
+        </StoryRow>
+      </StorySection>
+
+      <StorySection title="Presets only">
+        <StoryRow>
+          <ColorPickerHarness
+            initialValue="#22C55E"
+            isCustomAllowed={false}
+            label="Presets-only color"
+          />
+        </StoryRow>
+      </StorySection>
+
+      <StorySection title="Disabled">
+        <StoryRow>
+          <ColorPicker
+            isDisabled
+            label="Disabled color"
+            onChange={() => {}}
+            presets={PRESETS}
+            value="#8338EC"
+          />
+        </StoryRow>
+      </StorySection>
+    </div>
+  ),
+}
+
+/**
+ * The custom panel, opened: the browser's color wheel beside a hex
+ * field, and an app rule refusing a gray.
+ */
+export const CustomPanel: Story = {
+  render: () => (
+    <ColorPickerHarness
+      hasColorRule
+      initialValue="#808080"
+      label="Rule color"
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(
+      canvas.getByRole("button", {
+        name: "Rule color: #808080",
+      }),
+    )
+
+    await userEvent.click(
+      within(canvasElement.ownerDocument.body).getByRole(
+        "option",
+        { name: "Custom color…" },
+      ),
+    )
+  },
+}
+
+/**
+ * Drive it: open, type "pink" to narrow the list, choose one, then
+ * choose "Custom color…" and apply a code of your own.
+ */
+export const Interactive: Story = {
+  render: () => (
+    <ColorPickerHarness
+      hasColorRule
+      initialValue="#3A86FF"
+      label="Interactive color"
+    />
+  ),
+}
+
+/**
+ * Inside a `Field` the trigger stretches to the container, and a long
+ * name truncates rather than pushing the chevron out.
+ */
+export const Responsive: Story = {
+  render: () => (
+    <ContainerBoard>
+      {(width) => (
+        <Field label={`Color at ${width}`}>
+          <ColorPicker
+            isCustomAllowed
+            label={`Color at ${width}`}
+            onChange={() => {}}
+            presets={PRESETS}
+            value="#F9A8D4"
+          />
+        </Field>
+      )}
+    </ContainerBoard>
+  ),
+}

package/src/ColorPicker/ColorPicker.test.tsx

@@ -0,0 +1,385 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, waitFor } 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 "./ColorPicker.stories.tsx"
+import { parseHexColor } from "./parseHexColor.ts"
+
+const {
+  AllStates,
+  AllVariants,
+  CustomPanel,
+  Interactive,
+  Playground,
+  Responsive,
+} = composeStories(stories)
+
+const openInteractive = async () => {
+  const mounted = await mountStory(Interactive)
+
+  await userEvent.click(
+    expectAgentDrivable(mounted.canvas, {
+      name: "Interactive color: Blue",
+      role: "button",
+    }),
+  )
+
+  const input = expectAgentDrivable(mounted.body, {
+    role: "combobox",
+  })
+
+  await waitFor(() => {
+    expect(input).toHaveFocus()
+  })
+
+  return { ...mounted, input }
+}
+
+test("the trigger names the preset and shows its swatch", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Playground)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Color: Hot Pink",
+    role: "button",
+  })
+
+  await expect(trigger).toHaveTextContent("Hot Pink")
+
+  const swatchDot = trigger.querySelector(
+    '[role="img"] > span',
+  ) as HTMLElement
+
+  await expect(
+    getComputedStyle(swatchDot).backgroundColor,
+  ).toBe("rgb(255, 0, 110)")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("typing a name narrows the list to that family", async () => {
+  const { body, input } = await openInteractive()
+
+  await userEvent.type(input, "pink")
+
+  await waitFor(() => {
+    const names = body
+      .getAllByRole("option")
+      .map((option: HTMLElement) =>
+        // The tick is drawn in every row and shown on the chosen one.
+        option.textContent?.replace("✓", "").trim(),
+      )
+
+    // "Hot Pink" by its name, the rest by their `keywords`.
+    expect(names).toStrictEqual([
+      "Raspberry",
+      "Hot Pink",
+      "Blush",
+      "Bubblegum",
+      "Cotton Candy",
+      "Custom color…",
+    ])
+  })
+})
+
+test("a hex code finds its preset", async () => {
+  const { body, input } = await openInteractive()
+
+  await userEvent.type(input, "#ff69")
+
+  await waitFor(() => {
+    body.getByRole("option", { name: "Bubblegum" })
+  })
+})
+
+test("choosing a preset changes the value and the trigger", async () => {
+  const { body, canvas } = await openInteractive()
+
+  await userEvent.click(
+    body.getByRole("option", { name: "Raspberry" }),
+  )
+
+  await waitFor(() => {
+    expectAgentDrivable(canvas, {
+      name: "Interactive color: Raspberry",
+      role: "button",
+    })
+  })
+
+  await expect(
+    canvas.getByText("Value: #DB2777"),
+  ).toBeInTheDocument()
+})
+
+test("a custom color is applied from the hex field and the trigger reads its code", async () => {
+  const { body, canvas } = await openInteractive()
+
+  await userEvent.click(
+    body.getByRole("option", { name: "Custom color…" }),
+  )
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await waitFor(() => {
+    expect(hexInput).toHaveFocus()
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "c2185b{Enter}")
+
+  await waitFor(() => {
+    expectAgentDrivable(canvas, {
+      name: "Interactive color: #C2185B",
+      role: "button",
+    })
+  })
+
+  await expect(
+    canvas.getByText("Value: #C2185B"),
+  ).toBeInTheDocument()
+
+  // Applying closes the panel and returns focus to the trigger.
+  await expect(
+    canvas.queryByRole("textbox", { name: "Hex code" }),
+  ).toBeNull()
+})
+
+test("a hex typed into the search seeds the custom panel", async () => {
+  const { body, canvas, input } = await openInteractive()
+
+  await userEvent.type(input, "7b1fa2")
+
+  await userEvent.click(
+    body.getByRole("option", {
+      name: "Custom color #7B1FA2…",
+    }),
+  )
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Hex code",
+      role: "textbox",
+    }),
+  ).toHaveValue("#7B1FA2")
+})
+
+test("the app's rule blocks a custom color with its own message", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await expect(hexInput).toHaveAttribute(
+    "aria-invalid",
+    "true",
+  )
+
+  await expect(
+    canvas.getByText(/Gray, white, and black/),
+  ).toBeInTheDocument()
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Use color",
+      role: "button",
+    }),
+  ).toBeDisabled()
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "E040FB")
+
+  await waitFor(() => {
+    expect(hexInput).not.toHaveAttribute("aria-invalid")
+  })
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Use color",
+      role: "button",
+    }),
+  ).toBeEnabled()
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("an unreadable code explains itself and cannot be applied", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "12345")
+
+  await expect(
+    canvas.getByText(/three or six hex digits/),
+  ).toBeInTheDocument()
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Use color",
+      role: "button",
+    }),
+  ).toBeDisabled()
+})
+
+test("the color wheel follows the hex field", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "#0af")
+
+  await expect(
+    canvas.getByLabelText("Rule color: color wheel"),
+  ).toHaveValue("#00aaff")
+})
+
+test("Escape and Cancel drop the draft and keep the value", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "E040FB{Escape}")
+
+  await expect(
+    canvas.queryByRole("textbox", { name: "Hex code" }),
+  ).toBeNull()
+
+  await expect(
+    canvas.getByText("Value: #808080"),
+  ).toBeInTheDocument()
+})
+
+test("every state is named and has no axe violations", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllStates)
+
+  expectAgentDrivable(canvas, {
+    name: "Preset color: Bubblegum",
+    role: "button",
+  })
+  expectAgentDrivable(canvas, {
+    name: "Custom color: #C2185B",
+    role: "button",
+  })
+  expectAgentDrivable(canvas, {
+    name: "Empty color: Choose a color",
+    role: "button",
+  })
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Disabled color: Purple",
+      role: "button",
+    }),
+  ).toBeDisabled()
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("presets only offers no custom row", async () => {
+  const { body, canvas } = await mountStory(AllStates)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Presets-only color: Green",
+      role: "button",
+    }),
+  )
+
+  await waitFor(() => {
+    expect(
+      body.getAllByRole("option").length,
+    ).toBeGreaterThan(0)
+  })
+
+  await expect(
+    body.queryByRole("option", { name: "Custom color…" }),
+  ).toBeNull()
+})
+
+test("every size renders a named trigger", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllVariants)
+
+  for (const size of ["sm", "md", "lg"]) {
+    expectAgentDrivable(canvas, {
+      name: `Color ${size}: Blue`,
+      role: "button",
+    })
+  }
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a stretched trigger keeps its chevron inside", async () => {
+  const { canvas } = await mountStory(Responsive)
+
+  for (const trigger of canvas.getAllByRole("button", {
+    name: /^Color at .*: Cotton Candy$/,
+  })) {
+    const triggerBox = trigger.getBoundingClientRect()
+    const chevronBox = (
+      trigger.querySelector("svg") as SVGElement
+    ).getBoundingClientRect()
+
+    await expect(trigger.scrollWidth).toBe(
+      trigger.clientWidth,
+    )
+    await expect(chevronBox.right).toBeLessThanOrEqual(
+      triggerBox.right,
+    )
+  }
+})
+
+test.each([
+  ["3a86ff", "#3A86FF"],
+  ["#3A86FF", "#3A86FF"],
+  [" #38f ", "#3388FF"],
+  ["abc", "#AABBCC"],
+  ["12345", null],
+  ["#GGGGGG", null],
+  ["#3A86FF80", null],
+  ["", null],
+])("parseHexColor(%j) is %j", (text, expected) => {
+  expect(parseHexColor(text)).toBe(expected)
+})