create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/components/overlays/MarketSelector.cases.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../support/case'
+import { MarketSelector } from '../../../../src/components/overlays/MarketSelector'
+import * as fx from '../../../fixtures/index'
+
+const frame = (align: 'end' | 'start' = 'end') => (S: () => JSX.Element) => (
+  <div style={{ minHeight: 560, display: 'flex', alignItems: 'flex-end', justifyContent: align === 'end' ? 'flex-end' : 'flex-start', padding: 'var(--space-6) var(--page-gutter)', background: 'var(--color-bg-muted)' }}>
+    <S />
+  </div>
+)
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/MarketSelector',
+  component: MarketSelector,
+  tags: ['autodocs'],
+  args: { localization: fx.localization, placement: 'top-end', variant: 'field', size: 'md', block: false, defaultOpen: false, onChange: fn() },
+  decorators: [frame()],
+} satisfies Meta<typeof MarketSelector>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { name: 'Overview', args: { defaultOpen: true } }
+export const Playground: Story = {}
+export const VariantsTwoLanguages: Story = { name: 'Variants · 2 languages → segmented', args: { localization: fx.localizationTwoLanguages, defaultOpen: true } }
+export const VariantsManyLanguages: Story = { name: 'Variants · 5+ languages → searchable field', args: { localization: fx.localizationManyLanguages, defaultOpen: true } }
+export const VariantsHeader: Story = { name: 'Variants · header · compact, below', args: { variant: 'compact', placement: 'bottom-end', defaultOpen: true }, decorators: [(S) => <div style={{ minHeight: 560, display: 'flex', justifyContent: 'flex-end', padding: 'var(--space-4) var(--page-gutter)' }}><S /></div>] }
+export const StatesUnavailable: Story = {
+  name: 'States · unavailable combination (Thai not offered in Japan)',
+  args: { localization: { ...fx.localizationTwoLanguages, current: fx.markets[5], available: [fx.markets[0], fx.markets[1], fx.markets[5]] }, defaultOpen: true },
+}
+export const StatesUpdating: Story = {
+  name: 'States · updating',
+  args: { onChange: fn(() => new Promise<void>(() => {})), defaultOpen: true },
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    await userEvent.click(await doc.findByRole('radio', { name: /^ไทย/ }))
+    await userEvent.click(doc.getByRole('button', { name: 'Update' }))
+    await waitFor(() => expect(doc.getByRole('button', { name: /Updating/ })).toHaveAttribute('aria-busy', 'true'))
+  },
+}
+export const StatesError: Story = {
+  name: 'States · error',
+  args: { onChange: fn(() => Promise.reject(new Error('network'))), defaultOpen: true },
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    await userEvent.click(await doc.findByRole('radio', { name: /^ไทย/ }))
+    await userEvent.click(doc.getByRole('button', { name: 'Update' }))
+    await waitFor(() => expect(doc.getByRole('alert')).toHaveTextContent("Couldn't switch region"))
+  },
+}
+export const ResponsiveSheet: Story = { name: 'Responsive · 390 bottom sheet', args: { size: 'lg', block: true, sheet: true, defaultOpen: true }, globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const ResponsiveSecondStep: Story = {
+  name: 'Responsive · 390 · 5+ languages → second step',
+  args: { localization: fx.localizationManyLanguages, size: 'lg', block: true, sheet: true, defaultOpen: true },
+  globals: { viewport: { value: 'mobile', isRotated: false } },
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    await userEvent.click(await doc.findByRole('button', { name: 'English' }))
+    await waitFor(() => expect(doc.getByRole('heading', { name: 'Language' })).toBeVisible())
+    await expect(doc.getByRole('listbox', { name: 'Language' })).toBeInTheDocument()
+  },
+}
+export const StressThai: Story = { name: 'Stress · Thai', args: { localization: fx.localizationThai, defaultOpen: true }, parameters: { nova: { locale: 'th' } } }
+export const StressRtl: Story = { name: 'Stress · RTL', args: { localization: fx.localizationArabic, defaultOpen: true, placement: 'top-start' }, decorators: [frame('start')], parameters: { nova: { locale: 'ar' } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · choose a country with the keyboard, update, focus returns',
+  tags: ['viewport:desktop'],
+  play: async ({ canvasElement, args }) => {
+    const c = within(canvasElement)
+    const doc = within(canvasElement.ownerDocument.body)
+    const trigger = c.getByRole('button', { name: /Country \/ region/ })
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    const dialog = await doc.findByRole('dialog', { name: 'Region & language' })
+    await userEvent.click(within(dialog).getByRole('button', { name: /Thailand/ }))
+    const list = await within(dialog).findByRole('listbox', { name: 'Country / region' })
+    await userEvent.click(within(list).getByRole('option', { name: /Japan/ }))
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Update' }))
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledWith(expect.objectContaining({ countryCode: 'JP', languageCode: 'en' })))
+    await waitFor(() => expect(c.getByRole('button', { name: /Japan/ })).toHaveFocus())
+  },
+}

package/templates/nova/tests/cases/components/overlays/Menu.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { ActionMenu } from '../../../../src/components/overlays/Menu'
+import { IconButton } from '../../../../src/components/base/IconButton'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/ActionMenu',
+  component: ActionMenu,
+  tags: ['autodocs'],
+  args: {
+    label: 'Address actions',
+    defaultOpen: true,
+    trigger: <IconButton icon="menu" label="Address actions" variant="outlined" />,
+    items: [
+      { id: 'edit', label: 'Edit', onSelect: fn() },
+      { id: 'default', label: 'Make default', onSelect: fn() },
+      { id: 'billing', label: 'Set as billing', disabled: true },
+      { id: 'delete', label: 'Delete', tone: 'danger', icon: 'trash', onSelect: fn() },
+    ],
+  },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)', minHeight: 320 }}><ActionMenu {...a} /></div>,
+} satisfies Meta<typeof ActionMenu>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Mobile: Story = { name: 'Responsive · 390 → sheet', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/overlays/MobileNavDrawer.cases.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '../../../support/case'
+import { MobileNavDrawer } from '../../../../src/components/overlays/MobileNavDrawer'
+import { IconButton } from '../../../../src/components/base/IconButton'
+import * as fx from '../../../fixtures/index'
+
+function Demo(props: Partial<React.ComponentProps<typeof MobileNavDrawer>>) {
+  const [open, setOpen] = useState(props.open ?? true)
+  return (
+    <div style={{ padding: 8 }}>
+      <IconButton icon="menu" label="Open menu" onClick={() => setOpen(true)} />
+      <MobileNavDrawer shop={fx.shop} menu={fx.mainMenu} localization={fx.localization} {...props} open={open} onClose={() => setOpen(false)} />
+    </div>
+  )
+}
+const meta = {
+  title: 'Nova/02 Components/Overlays/MobileNavDrawer',
+  component: MobileNavDrawer,
+  args: { open: true, onClose: () => {}, shop: fx.shop, menu: fx.mainMenu },
+  render: (a) => <Demo {...a} />,
+  globals: { viewport: { value: 'mobile', isRotated: false } },
+  tags: ['autodocs'],
+} satisfies Meta<typeof MobileNavDrawer>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Overview: Story = {}
+export const Playground: Story = { args: { open: true } }
+export const SearchEntry: Story = { name: 'Variants · search entry on top (Nova 13 · 2)', args: { onSearch: () => {} }, globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const StatesNested: Story = { name: 'States · nested level', args: { initialPath: [0] } }
+export const StatesSignedInLocale: Story = { name: 'States · signed in + locale', args: { customer: fx.customer, localization: fx.localization, showLocale: true } }
+export const StressThai: Story = { name: 'Stress · Thai nested', args: { shop: fx.shopThai, menu: fx.mainMenuThai, initialPath: [0] }, parameters: { nova: { locale: 'th' } } }
+export const StressArabic: Story = { name: 'Stress · RTL · Arabic', args: { shop: fx.shopArabic, menu: fx.mainMenuArabic, localization: fx.localizationArabic, showLocale: true }, parameters: { nova: { locale: 'ar' } } }

package/templates/nova/tests/cases/components/overlays/Modal.cases.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../support/case'
+import { Modal, type ModalProps } from '../../../../src/components/overlays/Modal'
+import { Button } from '../../../../src/components/base/Button'
+import { Select } from '../../../../src/components/base/Select'
+import { Pad } from '../../../support/story-helpers'
+
+function Demo({ size = 'sm', initiallyOpen = false, title = 'Choose your region' }: Partial<ModalProps> & { initiallyOpen?: boolean }) {
+  const [open, setOpen] = useState(initiallyOpen)
+  return (
+    <Pad>
+      <Button onClick={() => setOpen(true)}>Choose region</Button>
+      <Modal open={open} onClose={() => setOpen(false)} title={title} size={size} footer={<><Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button><Button onClick={() => setOpen(false)}>Update</Button></>}>
+        <p style={{ marginBottom: 16 }}>Prices and shipping options update for your region.</p>
+        <Select aria-label="Region" options={[{ value: 'th', label: 'Thailand · THB ฿' }, { value: 'sg', label: 'Singapore · SGD $' }]} />
+      </Modal>
+    </Pad>
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/Modal',
+  component: Demo,
+  tags: ['autodocs'],
+  args: { size: 'sm', initiallyOpen: true, title: 'Choose your region' },
+} satisfies Meta<typeof Demo>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Small: Story = { name: 'Variants · S 400', args: { size: 'sm', title: 'Remove item?' } }
+export const Large: Story = { name: 'Variants · L 800 · title 24', args: { size: 'lg', title: 'Quick view' } }
+export const Responsive: Story = { name: 'Responsive · 390 bottom sheet', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · Esc closes, focus returns',
+  args: { initiallyOpen: false },
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    const trigger = within(canvasElement).getByRole('button', { name: 'Choose region' })
+    await userEvent.click(trigger)
+    await doc.findByRole('dialog', { name: 'Choose your region' })
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(trigger).toHaveFocus())
+  },
+}
+
+function Typing() {
+  const [open, setOpen] = useState(true)
+  const [name, setName] = useState('')
+  return (
+    <Pad>
+      <Modal open={open} onClose={() => setOpen(false)} title="Edit address" size="sm" closeOnScrim={false} footer={<Button onClick={() => setOpen(false)}>Save</Button>}>
+        <label htmlFor="nv-demo-name" style={{ display: 'block', marginBottom: 8 }}>Full name</label>
+        <input id="nv-demo-name" className="nv-input" value={name} onChange={(e) => setName(e.target.value)} />
+      </Modal>
+    </Pad>
+  )
+}
+export const TypingKeepsFocus: Story = {
+  name: 'Accessibility · typing re-renders; focus stays in the field',
+  render: () => <Typing />,
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    const field = await doc.findByLabelText('Full name')
+    await waitFor(() => expect(field).toHaveFocus())
+    await userEvent.type(field, 'Mali')
+    await expect(field).toHaveValue('Mali')
+    await expect(field).toHaveFocus()
+  },
+}

package/templates/nova/tests/cases/components/overlays/Popover.cases.tsx

@@ -0,0 +1,50 @@
+import { useRef, useState } from 'react'
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../support/case'
+import { Popover } from '../../../../src/components/overlays/Popover'
+import { ActionMenuList } from '../../../../src/components/overlays/Menu'
+import { Button } from '../../../../src/components/base/Button'
+import { Icon } from '../../../../src/styles/Icon'
+
+function Demo({ initiallyOpen = true, align = 'end' }: { initiallyOpen?: boolean; align?: 'start' | 'end' }) {
+  const [open, setOpen] = useState(initiallyOpen)
+  const [sort, setSort] = useState('featured')
+  const anchor = useRef<HTMLButtonElement>(null)
+  const labels: Record<string, string> = { featured: 'Featured', best: 'Best selling', asc: 'Price, low to high', desc: 'Price, high to low', new: 'Newest' }
+  return (
+    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: align === 'end' ? 'flex-end' : 'flex-start', padding: '48px var(--page-gutter)', minHeight: 420 }}>
+      <Button ref={anchor} variant="secondary" aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen((o) => !o)} iconEnd={<Icon name="chevron-down" size="sm" />}>
+        Sort: {labels[sort]}
+      </Button>
+      <Popover open={open} onClose={() => setOpen(false)} anchor={anchor} label="Sort by" align={align} width={220} role="none">
+        <ActionMenuList label="Sort by" items={Object.entries(labels).map(([id, label]) => ({ id, label, checked: sort === id, onSelect: () => setSort(id) }))} onDone={() => { setOpen(false); anchor.current?.focus() }} />
+      </Popover>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/Popover',
+  component: Demo,
+  tags: ['autodocs'],
+  args: { initiallyOpen: true, align: 'end' },
+} satisfies Meta<typeof Demo>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Mobile: Story = { name: 'Responsive · 390 → sheet', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Keyboard: Story = {
+  name: 'Accessibility · arrows move, Enter chooses, focus returns',
+  tags: ['viewport:desktop'],
+  args: { initiallyOpen: false },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const doc = within(canvasElement.ownerDocument.body)
+    const trigger = c.getByRole('button', { name: /sort: featured/i })
+    await userEvent.click(trigger)
+    await waitFor(() => expect(doc.getByRole('menuitemradio', { name: 'Featured' })).toHaveFocus())
+    await userEvent.keyboard('{ArrowDown}{Enter}')
+    await waitFor(() => expect(c.getByRole('button', { name: /sort: best selling/i })).toHaveFocus())
+  },
+}

package/templates/nova/tests/cases/components/overlays/PromoPopup.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { PromoPopup } from '../../../../src/components/overlays/PromoPopup'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/PromoPopup',
+  component: PromoPopup,
+  tags: ['autodocs'],
+  args: { open: true, onDismiss: fn(), preset: 'popup-offer', placement: 'center', scheme: 'surface', heading: '10% off your first order', body: '<p>Join the list for new glazes and restocks.</p>', ctaLabel: 'Shop the collection', ctaLink: '/collections/new', dismissLabel: 'No thanks' },
+} satisfies Meta<typeof PromoPopup>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Newsletter: Story = { name: 'Preset · popup-newsletter · image + form', args: { preset: 'popup-newsletter', image: sc.storyLookImage, ctaLabel: 'Get my code', endpoint: '/contact#newsletter', onSubscribe: fn() } }
+export const Offer: Story = { name: 'Preset · popup-offer · inverse', args: { scheme: 'primary' } }
+export const Announce: Story = { name: 'Preset · popup-announce · side card', args: { preset: 'popup-announce', placement: 'side', heading: 'The Sea Salt glaze is here', body: '<p>Forty pieces per run. Shop before it’s gone.</p>', ctaLabel: 'Shop Sea Salt', ctaLink: '/collections/sea-salt' } }
+export const Mobile: Story = { name: 'Responsive · 390 → sheet ≤ 70%', args: { preset: 'popup-newsletter', image: sc.storyLookImage, ctaLabel: 'Get my code', endpoint: '/contact#newsletter', onSubscribe: fn() }, globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/overlays/QuickView.cases.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { QuickView } from '../../../../src/components/overlays/QuickView'
+import * as fx from '../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/QuickView',
+  component: QuickView,
+  tags: ['autodocs'],
+  args: { open: true, onClose: fn(), product: fx.merchDuvet, onAdd: fn() },
+} satisfies Meta<typeof QuickView>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Loading: Story = { name: 'State · loading', args: { product: null, loading: true } }
+export const Error: Story = { name: 'State · failed to load', args: { product: null, error: true, productUrl: '/products/washed-linen-duvet-cover' } }
+export const Mobile: Story = { name: 'Responsive · 390 → sheet', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/overlays/SearchModal.cases.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../support/case'
+import { SearchModal, type SearchSuggestions } from '../../../../src/components/overlays/SearchModal'
+import * as sc from '../../../support/story-content'
+import * as fx from '../../../fixtures/index'
+
+const results: SearchSuggestions = {
+  products: [fx.merchDuvet, fx.merchNapkins, fx.merchThrow, fx.merchSimple],
+  collections: [{ title: 'Bedroom & Bath · Linen', url: '/collections/linen' }, { title: 'Kitchen & Table · Linen', url: '/collections/table-linen' }],
+  articles: [{ title: 'How to wash linen so it lasts twenty years', url: '/blogs/journal/how-to-wash-linen' }],
+  total: 12,
+}
+const none: SearchSuggestions = { products: [], collections: [], articles: [], total: 0 }
+
+/** The host: fetch on query (here: filter the canvas results). */
+function Live(props: { initialQuery?: string; empty?: boolean }) {
+  const [res, setRes] = useState<SearchSuggestions | null>(null)
+  return (
+    <SearchModal
+      open
+      onClose={() => {}}
+      initialQuery={props.initialQuery}
+      browse={sc.storeSuggestions}
+      noResultsLinks={sc.storeSuggestions}
+      results={res}
+      onQuery={(q) => setRes(q ? (props.empty ? none : results) : null)}
+    />
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/SearchModal',
+  component: SearchModal,
+  tags: ['autodocs'],
+  args: { open: true, onClose: fn(), initialQuery: 'lin', results, browse: sc.storeSuggestions, noResultsLinks: sc.storeSuggestions },
+} satisfies Meta<typeof SearchModal>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Start: Story = { name: 'State · empty field → Browse', args: { initialQuery: '', results: null } }
+export const Loading: Story = { name: 'State · loading (skeleton)', args: { results: null, loading: true } }
+export const NoResults: Story = { name: 'State · no results', args: { initialQuery: 'lnen duvet', results: none } }
+export const Mobile: Story = { name: 'Responsive · 390 · full screen', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Keyboard: Story = {
+  name: 'Accessibility · ↓ moves the active row; Esc clears the query first',
+  render: () => <Live />,
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    const box = await doc.findByRole('combobox')
+    await userEvent.type(box, 'linen')
+    await waitFor(() => expect(doc.getByRole('listbox')).toBeInTheDocument())
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}')
+    await waitFor(() => expect(box.getAttribute('aria-activedescendant')).toBeTruthy())
+    await expect(doc.getAllByRole('option')[1]).toHaveAttribute('aria-selected', 'true')
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(box).toHaveValue(''))
+  },
+}

package/templates/nova/tests/cases/components/overlays/Sheet.cases.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '../../../support/case'
+import { Sheet } from '../../../../src/components/overlays/Sheet'
+import { ActionMenuList } from '../../../../src/components/overlays/Menu'
+import { Button } from '../../../../src/components/base/Button'
+import { Pad } from '../../../support/story-helpers'
+
+function Demo({ initiallyOpen = true }: { initiallyOpen?: boolean }) {
+  const [open, setOpen] = useState(initiallyOpen)
+  const [sort, setSort] = useState('featured')
+  const items = [['featured', 'Featured'], ['best', 'Best selling'], ['asc', 'Price, low to high'], ['desc', 'Price, high to low'], ['new', 'Newest']].map(([id, label]) => ({ id, label, checked: sort === id, onSelect: () => setSort(id) }))
+  return (
+    <Pad>
+      <Button variant="secondary" onClick={() => setOpen(true)}>Sort by</Button>
+      <Sheet open={open} onClose={() => setOpen(false)} title="Sort by">
+        <ActionMenuList items={items} label="Sort by" onDone={() => setOpen(false)} />
+      </Sheet>
+    </Pad>
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/Sheet',
+  component: Demo,
+  tags: ['autodocs'],
+  args: { initiallyOpen: true },
+} satisfies Meta<typeof Demo>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Mobile: Story = { name: 'Responsive · 390 · sort sheet', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/overlays/SizeGuide.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../support/case'
+import { SizeGuide } from '../../../../src/components/overlays/SizeGuide'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/SizeGuide',
+  component: SizeGuide,
+  tags: ['autodocs'],
+  args: { open: true, onClose: fn(), title: 'Size guide · Duvet covers', html: sc.storeSizeGuideCm, htmlInches: sc.storeSizeGuideIn, selected: 'Queen' },
+} satisfies Meta<typeof SizeGuide>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const OneUnit: Story = { name: 'State · one table → no toggle', args: { htmlInches: undefined } }
+export const Mobile: Story = { name: 'Responsive · 390 · sheet', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Units: Story = {
+  name: 'Accessibility · the toggle switches units; the row stays highlighted',
+  play: async ({ canvasElement }) => {
+    // Wait for the settled surface (drawer on desktop, sheet on phone), then act inside it.
+    const dialog = within(await within(canvasElement.ownerDocument.body).findByRole('dialog', { name: /size guide/i }))
+    await userEvent.click(dialog.getByRole('button', { name: 'in' }))
+    await waitFor(() => expect(dialog.getByRole('button', { name: 'in' })).toHaveAttribute('aria-pressed', 'true'))
+    await waitFor(() => expect(dialog.getByText('90 in').closest('tr')).toHaveAttribute('data-selected'))
+  },
+}

package/templates/nova/tests/cases/components/overlays/Toast.cases.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../support/case'
+import { ToastProvider, ToastStack, useToast, type ToastData } from '../../../../src/components/overlays/Toast'
+import { Button } from '../../../../src/components/base/Button'
+
+const stack: ToastData[] = [
+  { id: 'a', tone: 'success', title: 'Added to cart', description: 'Washed Linen Duvet Cover', action: { label: 'View cart', href: '/cart' } },
+  { id: 'b', tone: 'info', title: 'Removed from cart', action: { label: 'Undo', onClick: () => {} } },
+  { id: 'c', tone: 'error', title: "Couldn't update your cart", description: 'Check your connection.', action: { label: 'Try again', onClick: () => {} } },
+]
+
+function Trigger() {
+  const toast = useToast()
+  return (
+    <div style={{ padding: '32px var(--page-gutter)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      <Button onClick={() => toast.show({ tone: 'success', title: 'Added to cart', description: 'Linen Napkins', action: { label: 'View cart', href: '/cart' } })}>Add to cart</Button>
+      <Button variant="secondary" onClick={() => toast.show({ tone: 'error', title: "Couldn't update your cart", description: 'Check your connection.' })}>Fail an update</Button>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/Toast',
+  component: ToastStack,
+  tags: ['autodocs'],
+  args: { toasts: stack, onDismiss: () => {} },
+  render: (a) => <div style={{ minHeight: 420 }}><ToastStack {...a} /></div>,
+} satisfies Meta<typeof ToastStack>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Mobile: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Live: Story = {
+  name: 'Accessibility · a toast is announced and can be dismissed',
+  render: () => (
+    <ToastProvider>
+      <Trigger />
+    </ToastProvider>
+  ),
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Fail an update' }))
+    await waitFor(() => expect(c.getByRole('alert')).toHaveTextContent(/couldn't update your cart/i))
+    await userEvent.click(c.getByRole('button', { name: /dismiss: couldn't update your cart/i }))
+    await waitFor(() => expect(c.queryByRole('alert')).toBeNull())
+  },
+}

package/templates/nova/tests/cases/components/overlays/Tooltip.cases.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../support/case'
+import { Tooltip } from '../../../../src/components/overlays/Tooltip'
+import { IconButton } from '../../../../src/components/base/IconButton'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  args: { content: 'Prices include VAT', children: <IconButton icon="info" label="Pricing" variant="plain" /> },
+  render: (a) => <div style={{ padding: '96px var(--page-gutter) 48px' }}><Tooltip {...a} /></div>,
+} satisfies Meta<typeof Tooltip>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Shown: Story = {
+  name: 'Variants · shown (keyboard focus)',
+  play: async ({ canvasElement }) => {
+    within(canvasElement).getByRole('button', { name: 'Pricing' }).focus()
+    await waitFor(() => expect(within(canvasElement).getByRole('tooltip', { hidden: true })).toHaveAttribute('data-shown'))
+  },
+}
+export const Focus: Story = {
+  name: 'Accessibility · focus shows it at once',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    c.getByRole('button', { name: 'Pricing' }).focus()
+    await waitFor(() => expect(c.getByRole('tooltip', { hidden: true })).toHaveAttribute('data-shown'))
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(c.getByRole('tooltip', { hidden: true })).not.toHaveAttribute('data-shown'))
+  },
+}

package/templates/nova/tests/cases/components/states/Alert.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { Alert } from '../../../../src/components/states/Alert'
+
+const meta = {
+  title: 'Nova/02 Components/States/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  args: { tone: 'info', title: 'Shipping notice', children: 'Orders placed after 1 pm ship tomorrow.' },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)', maxWidth: 560 }}><Alert {...a} /></div>,
+} satisfies Meta<typeof Alert>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ padding: '32px var(--page-gutter)', maxWidth: 560, display: 'grid', gap: 12 }}>
+      <Alert tone="info" title="Shipping notice">Orders placed after 1 pm ship tomorrow.</Alert>
+      <Alert tone="success" title="Address saved">We'll use it for your next order.</Alert>
+      <Alert tone="warning" title="Low stock">Only 2 left in Queen · Oat.</Alert>
+      <Alert tone="error" title="Payment didn't go through" action={{ label: 'Try another card', href: '#payment' }}>Your card was declined. You haven't been charged.</Alert>
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const Dismissible: Story = { name: 'Variants · dismissible', args: { tone: 'success', title: 'Address saved', children: "We'll use it for your next order.", onDismiss: fn() } }
+export const Mobile: Story = { name: 'Responsive · 390', args: { tone: 'error', title: "Payment didn't go through", children: 'Try another card or PromptPay.' }, globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/states/EditorFrame.cases.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { EditorChip, EditorFrame } from '../../../../src/components/states/EditorFrame'
+import { Button } from '../../../../src/components/base/Button'
+
+const meta = {
+  title: 'Nova/02 Components/States/EditorSetup',
+  tags: ['autodocs'],
+  component: EditorFrame,
+  args: { section: 'group', title: 'Add blocks', hint: 'Start with a heading, text, image or button.' },
+  decorators: [(S, c) => <div style={{ padding: 32, maxWidth: c.parameters.wide ? 'none' : 720 }}><S /></div>],
+} satisfies Meta<typeof EditorFrame>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Overview: Story = {}
+export const Playground: Story = {}
+export const FooterWithAction: Story = { name: 'Variants · footer · with action', args: { section: 'footer', title: 'Add a brand block and a menu', hint: undefined, action: <Button size="sm">Add block</Button> } }
+export const Compact: Story = { name: 'Variants · compact (inside chrome)', args: { section: 'announcement-bar', title: 'Add a message', hint: undefined, compact: true } }
+export const Chip: Story = { name: 'Variants · chip only', render: () => <EditorChip section="breadcrumbs" /> }
+export const Thai: Story = { name: 'Stress · Thai', args: { section: 'group', title: 'เพิ่มบล็อก', hint: 'เริ่มด้วยหัวข้อ ข้อความ รูปภาพ หรือปุ่ม' }, parameters: { nova: { locale: 'th' } } }
+export const Dark: Story = { name: 'Stress · dark scheme', parameters: { nova: { scheme: 'dark' } } }
+export const Nova14Setups: Story = {
+  name: 'Nova 14 · the eight setup states (each pairs with a storefront fallback)',
+  parameters: { wide: true },
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
+      <EditorFrame section="featured-product" title="Select a product" hint="Choose which product to feature." action={<Button size="sm">Choose product</Button>} />
+      <EditorFrame section="featured-collection" title="Select a collection" hint="Pick a collection with at least 4 products." action={<Button size="sm">Choose collection</Button>} />
+      <EditorFrame section="image-with-text" title="Add an image" hint="Recommended 2400 × 1600." action={<Button size="sm">Choose image</Button>} />
+      <EditorFrame section="group" title="Add blocks" hint="Start with a heading, text or image." action={<Button size="sm">Add block</Button>} />
+      <EditorFrame section="product-reviews" title="Connect reviews" hint="Reviews appear here when your store collects them." />
+      <EditorFrame section="store-locator" title="Configure store locations" hint="Add at least one location to show this section." action={<Button size="sm">Add location</Button>} />
+      <EditorFrame section="contact-form" title="Configure form destination" hint="Add a form endpoint or a sign-up link." action={<Button size="sm">Open settings</Button>} />
+      <EditorFrame section="recently-viewed" title="Enable platform capability" hint="Available when your plan supports browsing history." />
+    </div>
+  ),
+}

package/templates/nova/tests/cases/components/states/Empty.cases.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { StateBlock } from '../../../../src/components/states/StateBlock'
+import { Button } from '../../../../src/components/base/Button'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/States/Empty',
+  component: StateBlock,
+  tags: ['autodocs'],
+  args: { variant: 'empty', title: "No results", description: 'Try fewer filters.' },
+  decorators: [(S, c) => (c.parameters.wide ? <Pad><S /></Pad> : <Pad><div style={{ maxWidth: 320 }}><S /></div></Pad>)],
+} satisfies Meta<typeof StateBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const WithAction: Story = { name: 'Variants · with action', args: { action: <Button size="sm" variant="secondary">Clear filters</Button> } }
+export const Nova14Empties: Story = {
+  name: 'Nova 14 · expected empties speak plainly and point somewhere real',
+  parameters: { wide: true },
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16 }}>
+      <StateBlock variant="empty" title="Your cart is empty" description="Have a look at what's new this season." action={<Button size="sm" href="/collections/new">Shop new arrivals</Button>} />
+      <StateBlock variant="empty" title={'No results for "lnen"'} description="Check the spelling or try a broader word." action={<Button size="sm" variant="secondary" href="/collections/all">Browse all</Button>} />
+      <StateBlock variant="empty" title="This collection is empty right now" description="New pieces arrive every season." action={<Button size="sm" href="/collections/all">Shop all</Button>} />
+      <StateBlock variant="empty" title="No orders yet" description="When you order, you can track it here." action={<Button size="sm" href="/collections/all">Start shopping</Button>} />
+      <StateBlock variant="empty" title="No reviews yet" description="Be the first to share what you think." action={<Button size="sm" variant="secondary">Write a review</Button>} />
+    </div>
+  ),
+}