create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cart-limit-message.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * The merchant's add-to-cart limit ("Maximum quantity per product"). The platform refuses a cart
+ * write past it and says why (theme-abi Cart-1: `refusal: {code: 'cart_limit_exceeded',
+ * maxQuantity}` on the `invalid` CartResult, `error.refusal` when `cart.create` is refused). The
+ * shopper reads the reason in the page's language where the failure already shows: the add-to-cart
+ * toast, the cart drawer line's alert and the cart page line's note. A platform that sends no
+ * refusal gets the generic message, never a raw code such as "invalid".
+ */
+import { act, render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { setThemeBundle } from '@tanqory/theme-kit/runtime'
+import { sectionModules } from '@tanqory/theme-kit/runtime'
+import { registerSections } from '@tanqory/theme-kit/runtime'
+import { SectionTree } from '@tanqory/theme-kit/runtime'
+import { DataProvider } from '@tanqory/theme-kit/runtime'
+import { ThemeProvider } from '@tanqory/theme-kit/runtime'
+import type { ContentNode } from '@tanqory/theme-kit/runtime'
+import { localeStrings } from '@tanqory/theme-kit/runtime'
+import { useThemeActions, type ThemeActions } from '@tanqory/theme-kit'
+import { bundle } from '../lib/bundle'
+import { AbiShell } from '@tanqory/theme-kit/runtime'
+import { AbiCartProvider, refusalOf } from '@tanqory/theme-kit/runtime'
+import type { AbiRemote, WireEnvelope } from '@tanqory/theme-kit/runtime'
+import type { PageData } from '@tanqory/theme-kit/runtime'
+import { createDataApi } from '@tanqory/theme-kit/runtime'
+import { locationOf } from '@tanqory/theme-kit/runtime'
+
+setThemeBundle(bundle)
+registerSections(Object.values(sectionModules()).map((m) => m.default))
+
+const LOCALES = Object.fromEntries(
+  Object.entries(bundle.locales).map(([path, mod]) => [path.match(/\/([^/]+)\.json$/)?.[1] ?? 'en', (mod as { default: Record<string, string> }).default]),
+)
+
+const PAGE_DATA = {
+  route: 'cart',
+  shop: { name: 'Demo', description: null, brand: null, policies: {}, primaryDomain: { host: 'demo.example', url: 'https://demo.example', sslEnabled: true } },
+  menus: {}, products: {}, collections: {}, collectionList: null, pages: {}, blogs: {}, articles: {},
+  search: null, recommendations: {}, policyHandle: null, accountUrls: null, cart: null,
+  localization: { country: { isoCode: 'US', name: 'United States', currency: { isoCode: 'USD', name: 'US Dollar', symbol: '$' } }, language: { isoCode: 'EN', name: 'English' }, availableCountries: [], availableLanguages: [] },
+  signedIn: null, unresolved: [], routeMissing: false,
+} as unknown as PageData
+
+const money = (amount: string) => ({ amount, currencyCode: 'USD' })
+const CART = {
+  id: 'c1', version: 1, checkoutUrl: '/checkout/t1', totalQuantity: 2, note: null, discountCodes: [],
+  cost: { subtotalAmount: money('24.00'), totalAmount: money('24.00') },
+  lines: [{ id: 'l1', quantity: 2, cost: { subtotalAmount: money('24.00'), totalAmount: money('24.00') }, attributes: {},
+    merchandise: { id: 'v1', title: 'Default Title', availableForSale: true, price: money('12.00'), selectedOptions: [], image: null, product: { id: 'p1', handle: 'mug', title: 'Mug', featuredImage: null } } }],
+}
+const CART_ITEMS: ContentNode[] = [{ type: 'cart-items', id: 'lines', settings: { heading: 'Cart', buttonLabel: 'Checkout' } } as unknown as ContentNode]
+
+const LIMIT_3 = { code: 'cart_limit_exceeded', maxQuantity: 3 }
+const refusedResult = (refusal?: unknown): WireEnvelope<unknown> => ({ ok: true, data: { ok: false, reason: 'invalid', ...(refusal ? { refusal } : {}) }, dataVersion: 'd1' })
+
+/** A platform that answers every action with `answer`; `cart.get` reads `cart`. */
+function remoteOf(answer: (name: string) => WireEnvelope<unknown>, cart: unknown = CART): AbiRemote & { calls: string[] } {
+  const calls: string[] = []
+  return {
+    calls,
+    data: async () => cart,
+    action: async (name) => {
+      calls.push(name)
+      return answer(name)
+    },
+  }
+}
+
+let actions: ThemeActions
+function Probe(): null {
+  actions = useThemeActions()
+  return null
+}
+
+function mount(remote: AbiRemote, { ui = 'en', initial = CART as unknown, page = false }: { ui?: string; initial?: unknown; page?: boolean } = {}) {
+  return render(
+    <DataProvider value={createDataApi(PAGE_DATA, null)}>
+      <ThemeProvider settings={{}} locale={localeStrings(ui, LOCALES)}>
+        <AbiCartProvider initial={initial as never} remote={remote}>
+          <AbiShell location={locationOf('https://demo.example/cart', {})} locale={ui} settings={{}} preview={false}>
+            <Probe />
+            {page && <SectionTree tree={CART_ITEMS} />}
+          </AbiShell>
+        </AbiCartProvider>
+      </ThemeProvider>
+    </DataProvider>,
+  )
+}
+
+const text = (el: Element | null) => el?.textContent?.replace(/\s+/g, ' ').trim() ?? null
+const toastTexts = () => [...document.querySelectorAll('.nv-toast__title')].map(text).filter(Boolean) as string[]
+
+describe('add to cart past the limit: the toast says how many the shopper can buy', () => {
+  for (const [ui, want] of [
+    ['en', 'You can buy up to 3 of this item.'],
+    ['th', 'ซื้อสินค้านี้ได้สูงสุด 3 ชิ้น'],
+    ['ar', 'الحد الأقصى لهذا المنتج هو 3.'],
+  ] as const) {
+    it(`addLines refused with cart_limit_exceeded ⇒ "${want}" (${ui})`, async () => {
+      const remote = remoteOf(() => refusedResult(LIMIT_3))
+      mount(remote, { ui })
+      let ok: boolean | undefined
+      await act(async () => {
+        ok = await actions.cart.add('v1', 2)
+      })
+      expect(ok).toBe(false)
+      expect(remote.calls).toEqual(['cart.addLines'])
+      expect(toastTexts()).toContain(want)
+      expect(LOCALES[ui]!.cartLimitReached!.replace('{max}', '3')).toBe(want)
+    })
+  }
+
+  it('a first add that creates the cart: cart.create refused with error.refusal ⇒ the same message', async () => {
+    const remote = remoteOf(() => ({ ok: false, error: { code: 'invalid_argument', requestId: 'r1', refusal: { code: 'cart_limit_exceeded', maxQuantity: 2 } } }), null)
+    mount(remote, { initial: null })
+    await act(async () => {
+      await actions.cart.add('v1', 5)
+    })
+    expect(remote.calls).toEqual(['cart.create'])
+    expect(toastTexts()).toContain('You can buy up to 2 of this item.')
+  })
+
+  it('the limit not known ⇒ "You\'ve reached the maximum quantity for this item."', async () => {
+    mount(remoteOf(() => refusedResult({ code: 'cart_limit_exceeded' })))
+    await act(async () => {
+      await actions.cart.add('v1', 2)
+    })
+    expect(toastTexts()).toContain("You've reached the maximum quantity for this item.")
+  })
+
+  it('a refusal with no reason (a platform without Cart-1), or a reason this theme does not know ⇒ the generic message, never "invalid"', async () => {
+    for (const refusal of [undefined, { code: 'something_new', maxQuantity: 3 }]) {
+      const { unmount } = mount(remoteOf(() => refusedResult(refusal)))
+      await act(async () => {
+        await actions.cart.add('v1', 2)
+      })
+      const toasts = toastTexts()
+      expect(toasts).toContain("Couldn't add. Try again.")
+      expect(toasts.join(' ')).not.toMatch(/invalid|buy up to/)
+      unmount()
+    }
+  })
+})
+
+describe('a quantity change past the limit: the line says why', () => {
+  it('cart drawer: the line\'s alert names the limit, with no "Try again" (trying again cannot succeed)', async () => {
+    let answer = refusedResult(LIMIT_3)
+    mount(remoteOf(() => answer))
+    await act(async () => actions.cart.open())
+    await act(async () => {
+      await actions.cart.setQuantity('l1', 4)
+    })
+    const alert = document.querySelector('.nv-mini-line__failed')
+    expect(text(alert)).toBe('You can buy up to 3 of this item.')
+    expect(alert?.querySelector('button')).toBeNull()
+
+    // the next change that goes through clears it
+    answer = { ok: true, data: { ok: true, cart: { ...CART, version: 2, lines: [{ ...CART.lines[0]!, quantity: 3 }], totalQuantity: 3 } }, dataVersion: 'd2' }
+    await act(async () => {
+      await actions.cart.setQuantity('l1', 3)
+    })
+    expect(document.querySelector('.nv-mini-line__failed')).toBeNull()
+  })
+
+  it('cart drawer in Thai', async () => {
+    mount(remoteOf(() => refusedResult(LIMIT_3)), { ui: 'th' })
+    await act(async () => actions.cart.open())
+    await act(async () => {
+      await actions.cart.setQuantity('l1', 4)
+    })
+    expect(text(document.querySelector('.nv-mini-line__failed'))).toBe('ซื้อสินค้านี้ได้สูงสุด 3 ชิ้น')
+  })
+
+  it('a refusal without a reason keeps today\'s behaviour: no alert on the line', async () => {
+    mount(remoteOf(() => refusedResult()))
+    await act(async () => actions.cart.open())
+    await act(async () => {
+      await actions.cart.setQuantity('l1', 4)
+    })
+    expect(document.querySelector('.nv-mini-line__failed')).toBeNull()
+  })
+
+  it('cart page: the line\'s note names the limit (en, ar)', async () => {
+    for (const [ui, want] of [['en', 'You can buy up to 3 of this item.'], ['ar', 'الحد الأقصى لهذا المنتج هو 3.']] as const) {
+      const { unmount } = mount(remoteOf(() => refusedResult(LIMIT_3)), { ui, page: true })
+      expect(document.querySelector('.nv-cart-line__note')).toBeNull()
+      await act(async () => {
+        await actions.cart.setQuantity('l1', 4)
+      })
+      const note = document.querySelector('.nv-cart-line .nv-cart-line__note')
+      expect(text(note)).toBe(want)
+      expect(note?.getAttribute('data-kind')).toBe('warning')
+      unmount()
+    }
+  })
+})
+
+describe('refusalOf: only a refusal this theme knows', () => {
+  it('cart_limit_exceeded with a whole maxQuantity ≥ 1 keeps it; anything else drops it or the whole refusal', () => {
+    expect(refusalOf({ code: 'cart_limit_exceeded', maxQuantity: 5 })).toEqual({ code: 'cart_limit_exceeded', maxQuantity: 5 })
+    for (const maxQuantity of [0, -1, 1.5, '3', null, Number.MAX_SAFE_INTEGER + 2]) expect(refusalOf({ code: 'cart_limit_exceeded', maxQuantity })).toEqual({ code: 'cart_limit_exceeded' })
+    for (const raw of [undefined, null, 'cart_limit_exceeded', {}, { code: 'other' }, [LIMIT_3]]) expect(refusalOf(raw)).toBeNull()
+  })
+  it('every locale words both forms, and the counted one takes {max}', () => {
+    for (const code of ['en', 'th', 'ar']) {
+      expect(LOCALES[code]!.cartLimitReached, code).toContain('{max}')
+      expect(LOCALES[code]!.cartLimitReachedAny, code).toBeTruthy()
+    }
+    expect(LOCALES.th!.cartLimitReached).not.toBe(LOCALES.en!.cartLimitReached)
+    expect(LOCALES.ar!.cartLimitReachedAny).not.toBe(LOCALES.en!.cartLimitReachedAny)
+  })
+})

package/templates/nova/tests/cart-link-message.test.tsx

@@ -0,0 +1,98 @@
+/**
+ * A cart permalink (`/cart/<variant>:<qty>`) the store could not open: the platform router
+ * (apps/storefront/router/cart-permalink.mjs) sends the shopper to `/cart?cart_link=<reason>`.
+ * The cart page renders from the request the way entry.abi.tsx renders it, and says why it is
+ * empty instead of a bare "Your cart is empty".
+ */
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { RenderContext } from '@tanqory/theme-abi'
+import { setThemeBundle } from '@tanqory/theme-kit/runtime'
+import { sectionModules } from '@tanqory/theme-kit/runtime'
+import { registerSections } from '@tanqory/theme-kit/runtime'
+import { SectionTree } from '@tanqory/theme-kit/runtime'
+import { DataProvider } from '@tanqory/theme-kit/runtime'
+import { ThemeProvider } from '@tanqory/theme-kit/runtime'
+import type { ContentNode } from '@tanqory/theme-kit/runtime'
+import { localeStrings } from '@tanqory/theme-kit/runtime'
+import { bundle } from '../lib/bundle'
+import { AbiShell } from '@tanqory/theme-kit/runtime'
+import { AbiCartProvider } from '@tanqory/theme-kit/runtime'
+import { pageParamsOf, searchQueryOf, type PageData } from '@tanqory/theme-kit/runtime'
+import { createDataApi } from '@tanqory/theme-kit/runtime'
+import { locationOf } from '@tanqory/theme-kit/runtime'
+
+setThemeBundle(bundle)
+registerSections(Object.values(sectionModules()).map((m) => m.default))
+
+const LOCALES = Object.fromEntries(
+  Object.entries(bundle.locales).map(([path, mod]) => [path.match(/\/([^/]+)\.json$/)?.[1] ?? 'en', (mod as { default: Record<string, string> }).default]),
+)
+
+const PAGE_DATA = {
+  route: 'cart',
+  shop: { name: 'Demo', description: null, brand: null, policies: {}, primaryDomain: { host: 'demo.example', url: 'https://demo.example', sslEnabled: true } },
+  menus: {}, products: {}, collections: {}, collectionList: null, pages: {}, blogs: {}, articles: {},
+  search: null, recommendations: {}, policyHandle: null, accountUrls: null, cart: null,
+  localization: { country: { isoCode: 'US', name: 'United States', currency: { isoCode: 'USD', name: 'US Dollar', symbol: '$' } }, language: { isoCode: 'EN', name: 'English' }, availableCountries: [], availableLanguages: [] },
+  signedIn: null, unresolved: [], routeMissing: false,
+} as unknown as PageData
+
+const CART_ITEMS: ContentNode[] = [{ type: 'cart-items', id: 'lines', settings: { heading: 'Cart', buttonLabel: 'Checkout' } } as unknown as ContentNode]
+
+/** The cart page with these route params (pageParamsOf), rendered as entry.abi.tsx renders it, as a DOM. */
+function renderCart(params: Record<string, string>, ui = 'en'): Document {
+  const location = locationOf('https://demo.example/cart', params)
+  const html = renderToString(
+    <DataProvider value={createDataApi(PAGE_DATA, null)}>
+      <ThemeProvider settings={{}} locale={localeStrings(ui, LOCALES)}>
+        <AbiCartProvider initial={null} remote={null}>
+          <AbiShell location={location} locale={ui} settings={{}} preview={false}>
+            <SectionTree tree={CART_ITEMS} />
+          </AbiShell>
+        </AbiCartProvider>
+      </ThemeProvider>
+    </DataProvider>,
+  )
+  return new DOMParser().parseFromString(html, 'text/html')
+}
+
+const EMPTY = '.nv-cart__empty'
+
+describe('the cart link reason reaches the page location, server and browser alike', () => {
+  const ctxFor = (kind: string, url: string) => ({ route: { kind, params: {}, canonical: `https://demo.example/${kind}` }, request: { url } }) as unknown as RenderContext
+  it('the cart route keeps a reason the router sends', () => {
+    const ctx = ctxFor('cart', 'https://demo.example/cart?cart_link=unavailable&utm=x')
+    expect(pageParamsOf(ctx, searchQueryOf(ctx))).toEqual({ cart_link: 'unavailable' })
+    expect(locationOf(ctx.route.canonical, pageParamsOf(ctx, null))).toBe('/cart?cart_link=unavailable')
+  })
+  it('drops a reason the router never sends, and the param on any other route', () => {
+    expect(pageParamsOf(ctxFor('cart', 'https://demo.example/cart?cart_link=<b>x</b>'), null)).toEqual({})
+    expect(pageParamsOf(ctxFor('index', 'https://demo.example/?cart_link=failed'), null)).toEqual({})
+  })
+})
+
+describe('cart page: a cart link the store could not open', () => {
+  for (const reason of ['unavailable', 'failed']) {
+    it(`says the link loaded no items (?cart_link=${reason})`, () => {
+      const empty = renderCart({ cart_link: reason }).querySelector(EMPTY)!
+      expect(empty.querySelector('h1')?.textContent).toBe('Your cart is empty')
+      expect(empty.querySelector('[role="alert"]')?.textContent).toBe(
+        'We could not load any items from this cart link. Keep shopping to add items to your cart.',
+      )
+      expect(empty.querySelector('a')?.textContent).toBe('Continue shopping')
+    })
+  }
+
+  it('says it in the shopper\'s language', () => {
+    const empty = renderCart({ cart_link: 'unavailable' }, 'th').querySelector(EMPTY)!
+    expect(empty.querySelector('[role="alert"]')?.textContent).toBe(LOCALES.th!.cartLinkEmptyHint)
+    expect(LOCALES.th!.cartLinkEmptyHint).not.toBe(LOCALES.en!.cartLinkEmptyHint)
+  })
+
+  it('an ordinary visit to an empty cart shows the usual empty cart', () => {
+    const empty = renderCart({}).querySelector(EMPTY)!
+    expect(empty.querySelector('[role="alert"]')).toBeNull()
+    expect(empty.querySelector('.nv-cart__empty-hint')?.textContent).toBe('Have a look around and find something you like.')
+  })
+})

package/templates/nova/tests/cases/components/Overview.cases.tsx

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '../../support/case'
+import { ComponentsOverview } from '../../support/ia-pages'
+
+/** Components = reusable building blocks. Components must never import Sections. */
+const meta = { title: 'Nova/02 Components/Overview', parameters: { layout: 'fullscreen' } } satisfies Meta
+export default meta
+
+export const Overview: StoryObj = { render: () => <ComponentsOverview /> }

package/templates/nova/tests/cases/components/base/Accordion.cases.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../support/case'
+import { Accordion, AccordionItem } from '../../../../src/components/base/Accordion'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Accordion',
+  component: AccordionItem,
+  tags: ['autodocs'],
+  args: { title: 'Materials & care', children: '100% stonewashed flax linen. Wash cool, line dry.', defaultOpen: false, level: 3 },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 520 }}><Accordion><S /></Accordion></div></Pad>],
+} satisfies Meta<typeof AccordionItem>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  decorators: [(S) => <S />],
+  render: () => (
+    <Accordion>
+      <AccordionItem title="Materials & care">100% stonewashed flax linen. Wash cool, line dry.</AccordionItem>
+      <AccordionItem title="Shipping & returns" defaultOpen>Tracked delivery from Chiang Mai.</AccordionItem>
+      <AccordionItem title="Sizing">Queen 230 × 220 cm.</AccordionItem>
+    </Accordion>
+  ),
+}
+export const Playground: Story = {}
+export const Stress: Story = { name: 'Stress · Thai', args: { title: 'วัสดุและการดูแล', children: 'ผ้าลินินแท้ 100% ซักน้ำเย็น ตากในที่ร่ม', defaultOpen: true }, parameters: { nova: { locale: 'th' } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · Enter / Space, aria-expanded + region',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const t = c.getByRole('button', { name: 'Materials & care' })
+    t.focus()
+    await userEvent.keyboard('{Enter}')
+    await expect(t).toHaveAttribute('aria-expanded', 'true')
+    await waitFor(() => expect(c.getByRole('region', { name: 'Materials & care' })).toBeVisible())
+    await userEvent.keyboard(' ')
+    await expect(t).toHaveAttribute('aria-expanded', 'false')
+  },
+}

package/templates/nova/tests/cases/components/base/Badge.cases.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Badge } from '../../../../src/components/base/Badge'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  args: { tone: 'sale', children: '−21%' },
+  decorators: [(S) => <Pad surface="muted"><S /></Pad>],
+} satisfies Meta<typeof Badge>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const all = (
+  <Row>
+    <Badge tone="sale">−21%</Badge>
+    <Badge tone="sale">Sale</Badge>
+    <Badge tone="new">New</Badge>
+    <Badge tone="sold-out">Sold out</Badge>
+    <Badge tone="low-stock">Only 3 left</Badge>
+    <Badge tone="custom">Bestseller</Badge>
+  </Row>
+)
+export const Overview: Story = { render: () => all }
+export const Playground: Story = {}
+export const VariantsSquare: Story = { name: 'Variants · badgeShape square', render: () => all, parameters: { nova: { theme: { badgeShape: 'square' } } } }
+export const VariantsPill: Story = { name: 'Variants · badgeShape pill', render: () => all, parameters: { nova: { theme: { badgeShape: 'pill' } } } }
+export const VariantsOutline: Story = { name: 'Variants · badgeStyle outline', render: () => all, parameters: { nova: { theme: { badgeStyle: 'outline' } } } }
+export const Stress: Story = { name: 'Stress · Thai', render: () => <Row><Badge tone="low-stock">เหลือ 3 ชิ้น</Badge><Badge tone="sold-out">สินค้าหมด</Badge></Row>, parameters: { nova: { locale: 'th' } } }

package/templates/nova/tests/cases/components/base/Button.cases.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, within } from '../../../support/case'
+import { Button, type ButtonProps } from '../../../../src/components/base/Button'
+import { Icon } from '../../../../src/styles/Icon'
+import { Pad, Row } from '../../../support/story-helpers'
+
+// Button is button | link (union props); stories type against the button form.
+const ButtonC = Button as (p: ButtonProps) => JSX.Element
+
+const meta = {
+  title: 'Nova/02 Components/Base/Button',
+  component: ButtonC,
+  tags: ['autodocs'],
+  args: { children: 'Add to cart', variant: 'primary', size: 'md', loading: false, disabled: false, block: false, onClick: fn() },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof ButtonC>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <>
+      {(['primary', 'secondary', 'tertiary', 'ghost'] as const).map((v) => (
+        <Row key={v} label={v}>
+          <Button variant={v}>{v === 'primary' ? 'Add to cart' : v === 'tertiary' ? 'Learn more' : 'View all'}</Button>
+          <Button variant={v} loading>Loading</Button>
+          <Button variant={v} disabled>{v === 'primary' ? 'Sold out' : 'Disabled'}</Button>
+        </Row>
+      ))}
+    </>
+  ),
+}
+export const Playground: Story = {}
+export const Variants: Story = {
+  render: () => (
+    <>
+      <Row label="sm 36 · md 44 · lg 52 · with icon">
+        <Button size="sm">sm 36</Button>
+        <Button>md 44</Button>
+        <Button size="lg">lg 52 · px 28</Button>
+        <Button variant="secondary" iconStart={<Icon name="plus" size="sm" />}>With icon</Button>
+        <Button href="/collections/all">As a link</Button>
+      </Row>
+    </>
+  ),
+}
+export const StatesOnInverse: Story = { name: 'States · on inverse surface', decorators: [(S) => <Pad surface="inverse"><S /></Pad>], render: () => <Row><Button>Primary</Button><Button variant="secondary">Secondary</Button><Button variant="tertiary">Tertiary</Button></Row> }
+export const StatesLoading: Story = {
+  name: 'States · loading is busy',
+  args: { loading: true },
+  play: async ({ canvasElement }) => {
+    const b = within(canvasElement).getByRole('button')
+    await expect(b).toHaveAttribute('aria-busy', 'true')
+    await expect(b).toBeDisabled()
+  },
+}
+export const ThemeSettings: Story = {
+  name: 'Variants · theme settings (pill · uppercase · brand #0F5C4D)',
+  render: () => <Row><Button>Pill</Button><Button variant="secondary">Pill</Button></Row>,
+  parameters: { nova: { theme: { buttonRadius: 'pill', buttonTextStyle: 'uppercase', colorPrimary: '#0F5C4D' } } },
+}
+export const Stress: Story = { name: 'Stress · Thai label wraps to two lines', args: { children: 'เพิ่มลงในตะกร้าสินค้าของคุณ · สั่งเลย', style: { maxWidth: 200 } }, parameters: { nova: { locale: 'th' } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · click and Enter activate',
+  play: async ({ canvasElement, args }) => {
+    const b = within(canvasElement).getByRole('button', { name: 'Add to cart' })
+    await userEvent.click(b)
+    await expect(args.onClick).toHaveBeenCalledTimes(1)
+    b.focus()
+    await userEvent.keyboard('{Enter}')
+    await expect(args.onClick).toHaveBeenCalledTimes(2)
+  },
+}

package/templates/nova/tests/cases/components/base/Checkbox.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Checkbox } from '../../../../src/components/base/Checkbox'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  args: { label: 'Email me restocks' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Checkbox>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <Row>
+      <Checkbox label="Off" />
+      <Checkbox label="On" defaultChecked />
+      <Checkbox label="Mixed" indeterminate />
+      <Checkbox label="Disabled" disabled />
+      <Checkbox label="Required" invalid required />
+    </Row>
+  ),
+}
+export const Playground: Story = {}
+export const Stress: Story = { name: 'Stress · Thai', args: { label: 'รับข่าวสารเมื่อสินค้ากลับมา', defaultChecked: true }, parameters: { nova: { locale: 'th' } } }

package/templates/nova/tests/cases/components/base/Chip.cases.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, within } from '../../../support/case'
+import { Chip } from '../../../../src/components/base/Chip'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  args: { children: 'Stoneware', selected: false, onClick: fn() },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Chip>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <Row>
+      <Chip>Default</Chip>
+      <Chip selected>Selected</Chip>
+      <Chip onRemove={() => {}} removeLabel="Remove Stoneware">Stoneware</Chip>
+      <Chip disabled>Disabled (0)</Chip>
+    </Row>
+  ),
+}
+export const Playground: Story = {}
+export const VariantsPill: Story = { name: 'Variants · inputRadius pill', render: () => <Row><Chip>Pill</Chip><Chip selected>Selected</Chip></Row>, parameters: { nova: { theme: { inputRadius: 'pill' } } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · aria-pressed',
+  args: { selected: true },
+  play: async ({ canvasElement, args }) => {
+    const chip = within(canvasElement).getByRole('button', { name: 'Stoneware' })
+    await expect(chip).toHaveAttribute('aria-pressed', 'true')
+    await userEvent.click(chip)
+    await expect(args.onClick).toHaveBeenCalled()
+  },
+}

package/templates/nova/tests/cases/components/base/Divider.cases.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Divider } from '../../../../src/components/base/Divider'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  args: { label: '', tone: 'subtle', thickness: 1 },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 720 }}><S /></div></Pad>],
+} satisfies Meta<typeof Divider>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 32 }}>
+      <Divider />
+      <Divider tone="strong" />
+      <Divider thickness={2} tone="strong" />
+      <Divider label="Chapter two" />
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const Stress: Story = { name: 'Stress · long label · Thai', render: () => <div style={{ display: 'grid', gap: 32 }}><Divider label="A considerably longer chapter label than the design recommends" /><Divider label="บทที่สอง" /></div> }

package/templates/nova/tests/cases/components/base/IconButton.cases.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { IconButton } from '../../../../src/components/base/IconButton'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  args: { icon: 'search', label: 'Search', variant: 'plain' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof IconButton>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <Row label="default · disabled · count · 99+ · outlined · on media">
+      <IconButton icon="search" label="Search" />
+      <IconButton icon="chevron-left" label="Previous" disabled />
+      <IconButton icon="bag" label="Cart" count={3} countLabel="Cart, 3 items" />
+      <IconButton icon="bag" label="Cart" count={128} countLabel="Cart, 128 items" />
+      <IconButton icon="chevron-right" label="Next" variant="outlined" />
+      <span style={{ padding: 12, background: 'var(--color-media-bg)' }}><IconButton icon="plus" label="Zoom" variant="on-media" /></span>
+    </Row>
+  ),
+}
+export const Playground: Story = {}
+export const StatesOnInverse: Story = { name: 'States · count on inverse (white on ink)', decorators: [(S) => <Pad surface="inverse"><S /></Pad>], args: { icon: 'bag', label: 'Cart', count: 2 } }

package/templates/nova/tests/cases/components/base/Input.cases.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Input } from '../../../../src/components/base/Input'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Input',
+  component: Input,
+  tags: ['autodocs'],
+  args: { placeholder: 'you@example.com', 'aria-label': 'Email', size: 'md' },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 360 }}><S /></div></Pad>],
+} satisfies Meta<typeof Input>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      <Input aria-label="Default" placeholder="you@example.com" />
+      <Input aria-label="Filled" defaultValue="mali@halden.co" />
+      <Input aria-label="Invalid" defaultValue="1011" aria-invalid />
+      <Input aria-label="Disabled" disabled placeholder="Not required" />
+      <Input aria-label="Search" size="lg" icon="search" placeholder="Search products" />
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const Stress: Story = { name: 'Stress · Thai', args: { 'aria-label': 'อีเมล', defaultValue: 'ที่อยู่อีเมลของคุณ' }, parameters: { nova: { locale: 'th' } } }
+export const Responsive: Story = { name: 'Responsive · 390 full width', render: () => <Row><Input aria-label="Email" placeholder="you@example.com" /></Row>, globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/base/Link.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Link } from '../../../../src/components/base/Link'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Link',
+  component: Link,
+  tags: ['autodocs'],
+  args: { href: '#', children: 'care guide', variant: 'inline' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Link>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <>
+      <p>Read our <Link href="#">care guide</Link> before first wash.</p>
+      <Row label="standalone · arrow · muted">
+        <Link href="#" variant="standalone" arrow>View all</Link>
+        <Link href="#" variant="muted">Muted link</Link>
+      </Row>
+    </>
+  ),
+}
+export const Playground: Story = {}
+export const StressRtl: Story = { name: 'Stress · RTL arrow mirrors', render: () => <Link href="#" variant="standalone" arrow>عرض الكل</Link>, parameters: { nova: { locale: 'ar' } } }