create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/sections/trust/trust-badges/TrustBadges.cases.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { TrustBadges, type TrustBadgesProps } from '../../../../../src/sections/TrustBadges/TrustBadges'
+import { trustBadgesSchema } from '../../../../../src/sections/TrustBadges/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: TrustBadgesProps = { ...defaultsOf(trustBadgesSchema), badges: sc.storyBadges }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/TrustBadges',
+  component: TrustBadges,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof TrustBadges>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(trustBadgesSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetRow, PresetCompact]} render={(x) => <TrustBadges {...x} />} /> }
+export const Playground: Story = {}
+export const PresetRow: Story = { name: 'Preset · Policy row', args: preset('badges-row') }
+export const PresetCompact: Story = { name: 'Preset · Compact', args: { ...preset('badges-compact'), badges: sc.storyBadges.slice(0, 3) } }
+export const Center: Story = { name: 'Option · alignment center', args: { alignment: 'center' } }
+export const NoDividers: Story = { name: 'Option · dividers off', args: { dividers: false } }
+export const Heading: Story = { name: 'Option · heading (optional)', args: { heading: 'Buy with confidence' } }
+export const Empty: Story = { name: 'State · no badges · editor setup', args: { badges: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · 2 × 2', globals: mobile }

package/templates/nova/tests/cases/sections/trust/ugc-gallery/UgcGallery.cases.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { UgcGallery, type UgcGalleryProps } from '../../../../../src/sections/UgcGallery/UgcGallery'
+import { ugcGallerySchema } from '../../../../../src/sections/UgcGallery/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+import * as fx from '../../../../fixtures/index'
+
+const base: UgcGalleryProps = { ...defaultsOf(ugcGallerySchema), eyebrow: '#haldenathome', heading: 'In your homes', ctaLink: 'https://www.instagram.com/', photos: sc.storyUgc.slice(0, 5) }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/UGCGallery',
+  component: UgcGallery,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof UgcGallery>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(ugcGallerySchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetGrid, PresetStrip]} render={(x) => <UgcGallery {...x} />} /> }
+export const Playground: Story = {}
+export const PresetGrid: Story = { name: 'Preset · Customer photos', args: preset('ugc-grid') }
+export const PresetStrip: Story = { name: 'Preset · Photo strip · carousel 6', args: { ...preset('ugc-strip'), photos: sc.storyUgc } }
+export const NoChips: Story = { name: 'Option · showCredit off · showProduct off', args: { showCredit: false, showProduct: false } }
+export const SoldOut: Story = { name: 'State · linked product sold out → "Sold out"', args: { photos: sc.storyUgc.slice(5, 10) } }
+export const FeedSetup: Story = { name: 'State · feed source, nothing connected · editor', args: { source: 'feed', feed: null }, parameters: { nova: { mode: 'editor' } } }
+export const Feed: Story = { name: 'Data requirement · a connected feed keeps the same tiles', args: { source: 'feed', feed: fx.ugc.slice(0, 5) } }
+export const Empty: Story = { name: 'State · no photos · editor setup', args: { photos: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · 2.2 visible', globals: mobile }

package/templates/nova/tests/cases/sections/trust/ugc-gallery/blocks/UgcImage.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { UgcGallery } from '../../../../../../src/sections/UgcGallery/UgcGallery'
+import { ugcGallerySchema } from '../../../../../../src/sections/UgcGallery/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/Blocks/UGCImage',
+  component: UgcGallery,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(ugcGallerySchema), ctaLabel: '', photos: sc.storyUgc.slice(0, 1) },
+} satisfies Meta<typeof UgcGallery>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/utility/account/Account.cases.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, within } from '../../../../support/case'
+import { Account, type AccountProps } from '../../../../../src/sections/Account/Account'
+import { accountSchema } from '../../../../../src/sections/Account/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+// The account slot's src is the Account BFF URL the platform hands the page (ctx.data.customer.accountUrl()).
+const base: AccountProps = { ...defaultsOf(accountSchema), description: "Track orders and check out faster. We'll email you a 6-digit code.", loginImage: sc.storeLoginImage, customer: null, accountUrl: 'https://account.store.example/profile' }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/Account',
+  component: Account,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Account>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(accountSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetSplit, SignedIn]} render={(x) => <Account {...x} />} /> }
+export const Playground: Story = {}
+export const PresetSplit: Story = { name: 'Preset · Account · sign-in split', args: preset('account-split') }
+export const Stacked: Story = { name: 'Option · loginLayout stacked', args: { loginLayout: 'stacked' } }
+export const NoImage: Story = { name: 'State · split without an image → stacked', args: { loginImage: null } }
+export const SignedIn: Story = { name: 'State · signed in · order history', args: { customer: sc.storeCustomer, description: '' } }
+export const NoOrders: Story = { name: 'State · signed in, no orders', args: { customer: { ...sc.storeCustomer, orders: [] }, description: '' } }
+export const Editor: Story = { name: 'State · signed in · editor note (platform blocked)', args: { customer: sc.storeCustomer, description: '' }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · stacked', globals: mobile }
+export const SignedInSlot: Story = { name: 'State · signed in · the account area in the slot', args: { signedIn: true } }
+export const Slot: Story = {
+  name: 'Platform · the account area is the account slot (sign-in never in the theme)',
+  play: async ({ canvasElement }) => {
+    const frame = canvasElement.querySelector('iframe[data-tq-slot="account"]')
+    await expect(frame).not.toBeNull()
+    await expect(frame?.getAttribute('src')).toBe('https://account.store.example/profile')
+    await expect(frame?.getAttribute('sandbox')).toBe('allow-scripts allow-forms allow-same-origin')
+    await expect(within(canvasElement).queryByRole('textbox')).toBeNull()
+    await expect(canvasElement.querySelector('form')).toBeNull()
+  },
+}

package/templates/nova/tests/cases/sections/utility/cart-items/CartItems.cases.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within, fn } from '../../../../support/case'
+import { CartItems, type CartItemsProps } from '../../../../../src/sections/CartItems/CartItems'
+import { cartItemsSchema } from '../../../../../src/sections/CartItems/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: CartItemsProps = { ...defaultsOf(cartItemsSchema), summaryNote: 'Taxes included. Discount codes at checkout.', cart: sc.storeCart, updatingLineIds: ['l3'], badges: sc.storeCartBadges, paymentMethods: sc.storePayments, emptyCollection: sc.storeNewSeason, checkoutUrl: '/checkout', onQuantity: fn(), onRemove: fn(), onUndo: fn(), onNoteChange: fn() }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/CartItems',
+  component: CartItems,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof CartItems>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(cartItemsSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetStandard, PresetSimple]} render={(x) => <CartItems {...x} />} /> }
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Cart', args: preset('cart-standard') }
+export const PresetSimple: Story = { name: 'Preset · Simple cart · summary below', args: preset('cart-simple') }
+export const Unavailable: Story = { name: 'State · an item became unavailable', args: { updatingLineIds: [], cart: { ...sc.storeCart, lines: [sc.storeCartLines[0], { ...sc.storeCartLines[2], variant: { ...sc.storeCartLines[2].variant, available: false } }] } } }
+export const OverStock: Story = { name: 'State · quantity above stock → "Only 3 available"', args: { updatingLineIds: [], cart: { ...sc.storeCart, lines: [{ ...sc.storeCartLines[1], quantity: 5 }] } } }
+export const CheckoutFailed: Story = { name: 'State · checkout failed to start', args: { checkoutError: true, updatingLineIds: [] } }
+export const Empty: Story = { name: 'State · empty cart + New this season', args: { cart: { ...sc.storeCart, lines: [], itemCount: 0 } } }
+export const EmptyNoCollection: Story = { name: 'State · empty cart, no collection chosen', args: { cart: null, emptyCollection: null } }
+export const Mobile: Story = { name: 'Responsive · 390 · summary below, pinned checkout', globals: mobile, args: { updatingLineIds: [] } }
+export const MobileEmpty: Story = { name: 'Responsive · 390 · empty cart', globals: mobile, args: { cart: null } }
+export const Remove: Story = {
+  name: 'Accessibility · Remove shows "Removed · Undo"',
+  args: { updatingLineIds: [] },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: /remove speckled stoneware mug/i }))
+    await waitFor(() => expect(c.getByRole('status')).toHaveTextContent(/removed/i))
+    await expect(c.getByRole('button', { name: 'Undo' })).toBeInTheDocument()
+  },
+}

package/templates/nova/tests/cases/sections/utility/cart-items/blocks/CartBadge.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { CartItems } from '../../../../../../src/sections/CartItems/CartItems'
+import { cartItemsSchema } from '../../../../../../src/sections/CartItems/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/Blocks/CartBadge',
+  component: CartItems,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(cartItemsSchema), cart: sc.storeCart, badges: sc.storeCartBadges, paymentMethods: [] },
+} satisfies Meta<typeof CartItems>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

package/templates/nova/tests/cases/sections/utility/contact-form/ContactFormSection.cases.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within, fn } from '../../../../support/case'
+import { ContactFormSection, type ContactFormSectionProps } from '../../../../../src/sections/ContactForm/ContactForm'
+import { contactFormSchema } from '../../../../../src/sections/ContactForm/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: ContactFormSectionProps = { ...defaultsOf(contactFormSchema), heading: 'Get in touch', description: "We'll reply within one business day.", details: sc.storeContactDetails, endpoint: '/contact', onSend: fn() }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/ContactForm',
+  component: ContactFormSection,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ContactFormSection>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(contactFormSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetSplit, PresetSimple]} render={(x) => <ContactFormSection {...x} />} /> }
+export const Playground: Story = {}
+export const PresetSplit: Story = { name: 'Preset · Contact page · split', args: preset('contact-split') }
+export const PresetSimple: Story = { name: 'Preset · Simple contact', args: { ...preset('contact-simple'), details: [] } }
+export const NoEndpoint: Story = { name: 'State · no endpoint → details + Email us', args: { endpoint: '', layout: 'split' } }
+export const Setup: Story = { name: 'State · no endpoint, no details · editor setup', args: { endpoint: '', details: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · stacked', globals: mobile, args: { layout: 'split', fields: 'name,email,phone,message' } }
+export const Legacy: Story = { name: 'Legacy · subheading renders as the description', args: { ...resolveSettings(contactFormSchema, { subheading: 'We answer every message ourselves.' }).settings, heading: 'Get in touch', details: sc.storeContactDetails, endpoint: '/contact' } }
+export const Validation: Story = {
+  name: 'Accessibility · errors under fields + a summary; focus to the first',
+  args: { layout: 'split', fields: 'name,email,phone,message' },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.type(c.getByLabelText(/^email/i), 'mali@halden')
+    await userEvent.click(c.getByRole('button', { name: 'Send message' }))
+    await waitFor(() => expect(c.getByRole('alert')).toHaveTextContent(/check 3 field/i))
+    await expect(c.getByLabelText(/^name/i)).toHaveFocus()
+  },
+}
+export const Sent: Story = {
+  name: 'Accessibility · sent replaces the form (role=status)',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.type(c.getByLabelText(/^name/i), 'Mali Srisuk')
+    await userEvent.type(c.getByLabelText(/^email/i), 'mali@halden.co')
+    await userEvent.type(c.getByLabelText(/^message/i), 'My Sea Salt mug arrived with a chip on the rim.')
+    await userEvent.click(c.getByRole('button', { name: 'Send message' }))
+    await waitFor(() => expect(c.getByRole('status')).toHaveTextContent(/reply soon/i))
+  },
+}

package/templates/nova/tests/cases/sections/utility/contact-form/blocks/ContactDetail.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ContactFormSection } from '../../../../../../src/sections/ContactForm/ContactForm'
+import { contactFormSchema } from '../../../../../../src/sections/ContactForm/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/Blocks/ContactDetail',
+  component: ContactFormSection,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(contactFormSchema), heading: 'Get in touch', details: sc.storeContactDetails.slice(0, 1) },
+} satisfies Meta<typeof ContactFormSection>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/utility/newsletter/NewsletterSection.cases.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within, fn } from '../../../../support/case'
+import { NewsletterSection, type NewsletterSectionProps } from '../../../../../src/sections/Newsletter/Newsletter'
+import { newsletterSchema } from '../../../../../src/sections/Newsletter/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+
+const base: NewsletterSectionProps = { ...defaultsOf(newsletterSchema), heading: 'Letters from the studio', body: '<p>New glazes, restocks and recipes — once a month.</p>', note: 'Unsubscribe any time.', endpoint: '/contact#newsletter', onSubscribe: fn() }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/Newsletter',
+  component: NewsletterSection,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof NewsletterSection>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(newsletterSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetBand, PresetCard, PresetSplit]} render={(x) => <NewsletterSection {...x} />} /> }
+export const Playground: Story = {}
+export const PresetBand: Story = { name: 'Preset · Newsletter band', args: preset('nl-band') }
+export const PresetCard: Story = { name: 'Preset · Newsletter card · primary', args: { ...preset('nl-card'), background: 'primary', note: '' } }
+export const PresetSplit: Story = { name: 'Preset · Newsletter split · primary', args: preset('nl-split') }
+export const Consent: Story = { name: 'Option · showConsent', args: { showConsent: true } }
+export const LinkOut: Story = { name: 'State · no endpoint → sign-up link', args: { endpoint: '', buttonUrl: 'https://example.com/list', buttonLabel: 'Subscribe on our list', note: '' } }
+export const Setup: Story = { name: 'State · no endpoint, no link · editor setup', args: { endpoint: '' }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · stacked input + button', globals: mobile }
+export const Invalid: Story = {
+  name: 'Accessibility · invalid email → inline error, value kept',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const field = c.getByRole('textbox')
+    await userEvent.type(field, 'mali@halden')
+    await userEvent.click(c.getByRole('button', { name: 'Subscribe' }))
+    await waitFor(() => expect(c.getByText(/enter a full email address/i)).toBeInTheDocument())
+    await expect(field).toHaveValue('mali@halden')
+  },
+}
+export const Subscribed: Story = {
+  name: 'Accessibility · subscribed replaces the form (role=status)',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.type(c.getByRole('textbox'), 'mali@halden.co')
+    await userEvent.click(c.getByRole('button', { name: 'Subscribe' }))
+    await waitFor(() => expect(c.getByRole('status')).toHaveTextContent('Thanks for subscribing!'))
+  },
+}
+
+// ── The platform's native form (theme-abi §1): `endpoint` from the platform, no `onSubscribe` ──
+const platform = { endpoint: '/', onSubscribe: undefined }
+export const PlatformForm: Story = {
+  name: 'Platform form · data-tq-form="newsletter" with the honeypot, no gateway fields of its own',
+  args: platform,
+  play: async ({ canvasElement }) => {
+    const form = canvasElement.querySelector('form')!
+    await expect(form.getAttribute('data-tq-form')).toBe('newsletter')
+    await expect(form.getAttribute('method')).toBe('post')
+    // no gateway delivered this page: nothing of the gateway's is rendered
+    await expect(form.querySelector('input[name="_tq_form"]')).toBeNull()
+    await expect(form.querySelector('input[name="website"]')?.getAttribute('tabindex')).toBe('-1')
+  },
+}
+export const PlatformMerchantAction: Story = {
+  name: 'Platform form · a merchant URL is never posted as the platform form',
+  args: { ...platform, action: 'https://lists.example.com/join' },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement.querySelector('form')!.hasAttribute('data-tq-form')).toBe(false)
+  },
+}
+export const PlatformThanks: Story = {
+  name: 'Platform form · accepted post → "Thanks for subscribing!" (role=status)',
+  args: { ...platform, formResult: { formId: 'newsletter', status: 'ok' } },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole('status')).toHaveTextContent('Thanks for subscribing!')
+  },
+}
+export const PlatformInvalid: Story = {
+  name: 'Platform form · refused address → inline error, the address kept',
+  args: { ...platform, formResult: { formId: 'newsletter', status: 'invalid', email: 'mali@halden' } },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await expect(c.getByText(/enter a full email address/i)).toBeInTheDocument()
+    await expect(c.getByRole('textbox')).toHaveValue('mali@halden')
+  },
+}
+export const PlatformLimited: Story = {
+  name: 'Platform form · rate limited → too many attempts (role=alert)',
+  args: { ...platform, formResult: { formId: 'newsletter', status: 'rate_limited', email: 'mali@halden.co' } },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole('alert')).toHaveTextContent(/too many sign-up attempts/i)
+  },
+}
+export const PlatformUnavailable: Story = {
+  name: 'Platform form · service unavailable → try again later (role=alert)',
+  args: { ...platform, formResult: { formId: 'newsletter', status: 'unavailable' } },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole('alert')).toHaveTextContent(/couldn't sign you up right now/i)
+  },
+}
+export const PlatformOtherForm: Story = {
+  name: "Platform form · another form's outcome is not this form's",
+  args: { ...platform, formResult: { formId: 'contact', status: 'ok' } },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).queryByRole('status')).toBeNull()
+  },
+}

package/templates/nova/tests/cases/sections/utility/not-found/NotFound.cases.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { NotFound, type NotFoundProps } from '../../../../../src/sections/NotFound/NotFound'
+import { notFoundSchema } from '../../../../../src/sections/NotFound/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: NotFoundProps = { ...defaultsOf(notFoundSchema), body: "<p>The page you're looking for doesn't exist or was renamed.</p>", collections: sc.storeSuggestions }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/NotFound',
+  component: NotFound,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof NotFound>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(notFoundSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[Preset404, NoLinks]} render={(x) => <NotFound {...x} />} /> }
+export const Playground: Story = {}
+export const Preset404: Story = { name: 'Preset · 404', args: preset('404-standard') }
+export const NoLinks: Story = { name: 'State · no suggested collections → search + home', args: { collections: [] } }
+export const Left: Story = { name: 'Option · contentAlignment left · no search', args: { contentAlignment: 'left', showSearch: false } }
+export const Thai: Story = { name: 'Stress · Thai', args: { heading: 'ไม่พบหน้านี้แล้ว', body: '<p>หน้าที่คุณกำลังหาอาจถูกย้ายหรือเปลี่ยนชื่อ</p>', buttonLabel: 'กลับหน้าแรก' }, parameters: { nova: { locale: 'th' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · chips scroll', globals: mobile }

package/templates/nova/tests/cases/sections/utility/policy-page/PolicyPage.cases.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { PolicyPage, type PolicyPageProps } from '../../../../../src/sections/PolicyPage/PolicyPage'
+import { policyPageSchema } from '../../../../../src/sections/PolicyPage/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: PolicyPageProps = { ...defaultsOf(policyPageSchema), policy: 'refund-policy', content: sc.storeRefundPolicy, contactUrl: '/pages/contact' }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/PolicyPage',
+  component: PolicyPage,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof PolicyPage>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(policyPageSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetStandard, Updated]} render={(x) => <PolicyPage {...x} />} /> }
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Policy', args: preset('policy-standard') }
+export const Updated: Story = { name: 'Data requirement · "Last updated" with a real date', args: { content: { ...sc.storeRefundPolicy, updatedAt: '2026-08-01' } } }
+export const NoContents: Story = { name: 'Option · contents never', args: { showTableOfContents: 'never' } }
+export const Unpublished: Story = { name: 'State · policy not published', args: { content: null } }
+export const Editor: Story = { name: 'State · no policy chosen · editor setup', args: { policy: '', content: null }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · contents as a disclosure', globals: mobile }

package/templates/nova/tests/cases/sections/utility/search-results/SearchResultsSection.cases.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within, fn } from '../../../../support/case'
+import { SearchResultsSection, type SearchResultsSectionProps } from '../../../../../src/sections/SearchResults/SearchResults'
+import { searchResultsSchema } from '../../../../../src/sections/SearchResults/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+import * as fx from '../../../../fixtures/index'
+
+const base: SearchResultsSectionProps = { ...defaultsOf(searchResultsSchema), query: 'linen', results: sc.storeSearch, suggestions: sc.storeSuggestions, sortOptions: [{ id: 'relevance', label: 'Relevance' }, ...fx.merchSortOptions.slice(1)], onSort: fn() }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/SearchResults',
+  component: SearchResultsSection,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof SearchResultsSection>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(searchResultsSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetStandard, PresetProducts]} render={(x) => <SearchResultsSection {...x} />} /> }
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Search · tabs', args: preset('search-standard') }
+export const PresetProducts: Story = { name: 'Preset · Products only', args: preset('search-products') }
+export const NoTabs: Story = { name: 'Option · showTabs off → grouped', args: { showTabs: false, showSort: false } }
+export const NoQuery: Story = { name: 'State · no query yet', args: { query: '', results: null } }
+export const NoResults: Story = { name: 'State · no results → tip + chosen collections', args: { query: 'lnen', results: { query: 'lnen', products: [], articles: [], pages: [], total: 0 } } }
+export const Mobile: Story = { name: 'Responsive · 390 · 2 columns, tabs scroll', globals: mobile }
+export const Tabs: Story = {
+  name: 'Accessibility · tabs switch the result type',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('tab', { name: /articles/i }))
+    await waitFor(() => expect(c.getByRole('tab', { name: /articles/i })).toHaveAttribute('aria-selected', 'true'))
+  },
+}

package/templates/nova/tests/cases/sections/utility/store-locator/StoreLocator.cases.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { StoreLocator, type StoreLocatorProps } from '../../../../../src/sections/StoreLocator/StoreLocator'
+import { storeLocatorSchema } from '../../../../../src/sections/StoreLocator/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: StoreLocatorProps = { ...defaultsOf(storeLocatorSchema), heading: 'Visit us', locations: sc.storeLocations }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Utility/StoreLocator',
+  component: StoreLocator,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof StoreLocator>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(storeLocatorSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetList, Photos]} render={(x) => <StoreLocator {...x} />} /> }
+export const Playground: Story = {}
+export const PresetList: Story = { name: 'Preset · Store list', args: preset('stores-list') }
+export const Photos: Story = { name: 'Option · showImage · 3 columns', args: { showImage: true, columns: '3' } }
+export const Few: Story = { name: 'State · 3 locations → no search', args: { locations: sc.storeLocations.slice(0, 3) } }
+export const Empty: Story = { name: 'State · no locations · editor setup', args: { locations: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · Call + Directions buttons', globals: mobile }
+export const Search: Story = {
+  name: 'Accessibility · search filters the list; the count updates',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.type(c.getByRole('searchbox', { name: /city or postcode/i }), 'Bangkok')
+    await waitFor(() => expect(c.getByText('2 stores')).toBeInTheDocument())
+    await userEvent.clear(c.getByRole('searchbox', { name: /city or postcode/i }))
+    await userEvent.type(c.getByRole('searchbox', { name: /city or postcode/i }), 'Phuket')
+    await waitFor(() => expect(c.getByText(/no stores match/i)).toBeInTheDocument())
+  },
+}

package/templates/nova/tests/cases/styles/Borders.cases.tsx

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '../../support/case'
+import * as pages from '../../support/foundation-pages'
+
+const meta = {
+  title: 'Nova/01 Styles/Borders',
+  parameters: { layout: 'fullscreen', },
+} satisfies Meta
+export default meta
+
+export const Overview: StoryObj = pages.Borders

package/templates/nova/tests/cases/styles/Breakpoints.cases.tsx

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '../../support/case'
+import * as pages from '../../support/foundation-pages'
+
+const meta = {
+  title: 'Nova/01 Styles/Breakpoints',
+  parameters: { layout: 'fullscreen', },
+} satisfies Meta
+export default meta
+
+export const Overview: StoryObj = pages.Breakpoints

package/templates/nova/tests/cases/styles/Colors.cases.tsx

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '../../support/case'
+import * as pages from '../../support/foundation-pages'
+
+const meta = {
+  title: 'Nova/01 Styles/Colors',
+  parameters: { layout: 'fullscreen', },
+} satisfies Meta
+export default meta
+
+export const Overview: StoryObj = pages.Colors

package/templates/nova/tests/cases/styles/Elevation.cases.tsx

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '../../support/case'
+import * as pages from '../../support/foundation-pages'
+
+const meta = {
+  title: 'Nova/01 Styles/Shadows',
+  parameters: { layout: 'fullscreen', },
+} satisfies Meta
+export default meta
+
+export const Overview: StoryObj = pages.Elevation

package/templates/nova/tests/cases/styles/Icon.cases.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '../../support/case'
+import { Icon, ICON_NAMES } from '../../../src/styles/Icon'
+import { Pad } from '../../support/story-helpers'
+
+const meta = { title: 'Nova/01 Styles/Icons',
+  tags: ['autodocs'], component: Icon, args: { name: 'search', size: 'md' }, decorators: [(S) => <Pad><S /></Pad>], } satisfies Meta<typeof Icon>
+export default meta
+type Story = StoryObj<typeof meta>
+const grid = (
+  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(96px, 1fr))', gap: 8 }}>
+    {ICON_NAMES.map((n) => (
+      <div key={n} style={{ display: 'grid', justifyItems: 'center', gap: 8, padding: 12, background: 'var(--color-bg-muted)', borderRadius: 8 }}>
+        <Icon name={n} size="lg" />
+        <code style={{ fontSize: 11 }}>{n}</code>
+      </div>
+    ))}
+  </div>
+)
+
+export const Overview: Story = { render: () => grid }
+export const Playground: Story = {}
+export const VariantsFilled: Story = { name: 'Variants · iconStyle filled (2.0)', render: () => grid, parameters: { nova: { theme: { iconStyle: 'filled' } } } }
+export const StressRtl: Story = { name: 'Stress · RTL · directional icons mirror', render: () => grid, parameters: { nova: { locale: 'ar' } } }

package/templates/nova/tests/cases/styles/Layout.cases.tsx

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '../../support/case'
+import { LayoutPage } from '../../support/ia-pages'
+
+/** Page gutter, grid and header height per breakpoint. */
+const meta = { title: 'Nova/01 Styles/Layout', parameters: { layout: 'fullscreen' } } satisfies Meta
+export default meta
+
+export const Overview: StoryObj = { render: () => <LayoutPage /> }

package/templates/nova/tests/cases/styles/Motion.cases.tsx

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '../../support/case'
+import * as pages from '../../support/foundation-pages'
+
+const meta = {
+  title: 'Nova/01 Styles/Motion',
+  parameters: { layout: 'fullscreen', },
+} satisfies Meta
+export default meta
+
+export const Overview: StoryObj = pages.Motion

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '../../support/case'
+import { StylesOverview } from '../../support/ia-pages'
+
+/** Styles = visual rules · tokens · settings. */
+const meta = { title: 'Nova/01 Styles/Overview', parameters: { layout: 'fullscreen' } } satisfies Meta
+export default meta
+
+export const Overview: StoryObj = { render: () => <StylesOverview /> }