@thorprovider/blocks 0.1.3 → 2.0.0

package/docs/standards/data-contracts.md

@@ -1,7 +1,7 @@
 ---
 title: "Block data contracts"
 purpose: "Warn block authors and hosts about the two boundary data-hygiene rules that prevent empty-src and duplicate-key console errors"
-lastReviewed: "2026-09-27"
+lastReviewed: "2026-10-17"
 type: standards
 tags: [blocks, contracts, data-boundary, images, react-keys]
 ---
@@ -60,6 +60,16 @@ Even with correct boundaries, blocks should render
 `src={value || undefined}` for every image prop. This is a cheap invariant
 that makes the whole catalog immune to one misbehaving host.
 
+## Canonical product card: evidence comes from the host
+
+`ProductCard` renders ratings, badges, discount labels, and stock claims only
+from host-supplied data (`rating`, `badge` copy, `compareAtPrice`); it never
+invents stars, chips, scarcity copy, or crossed-out prices, and a compare-at
+price renders only when it is valid and strictly higher. Boundaries must not
+compensate by fabricating evidence: if the host lacks a rating, the card
+renders none — do not serialize a default `5` or a stock-urgency string to
+"fill" the UI.
+
 ## Review checklist (boundary code)
 
 - [ ] No `?? ''` or `|| ''` on visual fields (image, avatar, icon) in mappers/transforms.
@@ -67,4 +77,5 @@ that makes the whole catalog immune to one misbehaving host.
 - [ ] Optional fields emit `undefined`, never `""`.
 - [ ] Arrays passed as React children have unique keys guaranteed by contract or deduped at the boundary.
 - [ ] Concatenated arrays (categories + links) are deduped before render.
-- [ ] Every `<img>`/`<AvatarImage>` in the block uses `src={expr || undefined}`.
+- [ ] Every `<img>`/`<AvatarImage>` in the block uses `src={expr || undefined}`.
+- [ ] No fabricated ratings, badges, stock claims, or crossed-out prices are serialized to fill absent evidence.

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@thorprovider/blocks",
-  "version": "0.1.3",
+  "version": "2.0.0",
   "description": "Reusable, framework-agnostic React component blocks for Thor Commerce storefronts.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "./styles.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,16 +17,23 @@
       "default": "./dist/index.mjs"
     },
     "./contracts": {
-      "types": "./dist/contracts.d.ts",
-      "development": "./dist/contracts.mjs",
-      "import": "./dist/contracts.mjs",
-      "require": "./dist/contracts.js",
-      "default": "./dist/contracts.mjs"
+      "types": "./dist/lib/contracts.d.ts",
+      "development": "./dist/lib/contracts.mjs",
+      "import": "./dist/lib/contracts.mjs",
+      "require": "./dist/lib/contracts.js",
+      "default": "./dist/lib/contracts.mjs"
     },
-    "./styles.css": "./styles.css"
+    "./styles.css": "./styles.css",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "development": "./dist/*.mjs",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js",
+      "default": "./dist/*.mjs"
+    }
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && tsc -p tsconfig.build.json && node scripts/fix-esm-extensions.mjs",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
     "test": "vitest run --config vitest.config.ts",
@@ -40,7 +51,7 @@
   "license": "MIT",
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@thorprovider/types": "^5.8.0",
+    "@thorprovider/types": "workspace:^",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cn": "^0.4.0",
@@ -54,10 +65,15 @@
     "zod": "^3.25.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10",
+    "@testing-library/react": "^16",
+    "@testing-library/user-event": "^14",
+    "@types/jsdom": "^30",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "jsdom": "^30.1.3",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.4"
   }
-}
+}

package/scripts/fix-esm-extensions.mjs

@@ -0,0 +1,40 @@
+import { readdir, readFile, writeFile } from "node:fs/promises";
+import { join, extname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const distDir = fileURLToPath(new URL("../dist/", import.meta.url));
+
+const RELATIVE = /^\.{1,2}\//;
+const HAS_EXT = /\.(mjs|cjs|js|jsx|ts|tsx|css|json|svg|png|webp|jpg|jpeg|gif|woff2?)$/;
+
+const SPECIFIER =
+  /(\bfrom\s*|\bimport\s*\(|\brequire\s*\(|\bimport\s+)(["'])(\.{1,2}\/[^"']*?)\2/g;
+
+async function* walk(dir) {
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) yield* walk(full);
+    else yield full;
+  }
+}
+
+async function fixFile(file) {
+  const ext = extname(file);
+  if (ext !== ".mjs" && ext !== ".js") return 0;
+  const target = ext === ".mjs" ? ".mjs" : ".js";
+  const source = await readFile(file, "utf8");
+  let changed = 0;
+  const out = source.replace(SPECIFIER, (match, prefix, quote, spec) => {
+    if (!RELATIVE.test(spec) || HAS_EXT.test(spec)) return match;
+    changed += 1;
+    return `${prefix}${quote}${spec}${target}${quote}`;
+  });
+  if (changed > 0) await writeFile(file, out);
+  return changed;
+}
+
+let total = 0;
+for await (const file of walk(distDir)) {
+  total += await fixFile(file);
+}
+console.log(`fix-esm-extensions: rewrote ${total} relative specifier(s)`);

package/src/blocks/application/login-forms/login-page.test.tsx

@@ -0,0 +1,190 @@
+// @vitest-environment jsdom
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AtSign } from 'lucide-react'
+import * as blockExports from '../../../index'
+import { LoginPage, type LoginPageProps } from './login-page'
+
+beforeAll(() => {
+  Object.assign(SVGElement.prototype, { getTotalLength: () => 15 })
+})
+
+describe('LoginPage', () => {
+  it('is the only exported login page API', () => {
+    expect(blockExports.LoginPage).toBe(LoginPage)
+    expect('LoginPage1' in blockExports).toBe(false)
+    expect('LoginPage2' in blockExports).toBe(false)
+  })
+
+  it.each(['card', 'social'] as const)('submits the same structured credentials for the %s presentation', async presentation => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+
+    render(
+      <LoginPage
+        presentation={presentation}
+        emailLabel='Email'
+        passwordLabel='Password'
+        rememberMeLabel='Remember me'
+        signInLabel='Sign in'
+        onSubmit={onSubmit}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Email'), 'shopper@example.com')
+    await user.type(screen.getByLabelText('Password'), 'correct-horse')
+    await user.click(screen.getByRole('checkbox', { name: 'Remember me' }))
+    await user.click(screen.getByRole('button', { name: 'Sign in' }))
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      email: 'shopper@example.com',
+      password: 'correct-horse',
+      remember: true,
+    })
+  })
+
+  it('rejects a missing presentation instead of silently choosing a layout', () => {
+    expect(() => render(<LoginPage {...({} as LoginPageProps)} />)).toThrow(/presentation/i)
+  })
+
+  it('round-trips serializable provider data and reports the selected provider id', async () => {
+    const user = userEvent.setup()
+    const onProviderSelect = vi.fn()
+    const providers = JSON.parse(JSON.stringify([{ id: 'github', label: 'GitHub' }])) as LoginPageProps['providers']
+
+    render(
+      <LoginPage
+        presentation='social'
+        providers={providers}
+        providerIcons={{ github: AtSign }}
+        onProviderSelect={onProviderSelect}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'GitHub' }))
+
+    expect(onProviderSelect).toHaveBeenCalledWith('github')
+  })
+
+  it('renders provider labels when an icon is not mapped', () => {
+    render(
+      <LoginPage
+        presentation='card'
+        providers={[{ id: 'custom', label: 'Custom provider' }]}
+        onProviderSelect={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Custom provider' }).textContent).toBe('Custom provider')
+  })
+
+  it('omits the provider group when there are no providers', () => {
+    render(<LoginPage presentation='card' onProviderSelect={vi.fn()} />)
+
+    expect(screen.queryByRole('group', { name: 'O continúa con' })).toBeNull()
+  })
+
+  it('rejects duplicate provider IDs so provider React keys remain unique', () => {
+    expect(() =>
+      render(
+        <LoginPage
+          presentation='card'
+          providers={[
+            { id: 'duplicate', label: 'First' },
+            { id: 'duplicate', label: 'Second' },
+          ]}
+          onProviderSelect={vi.fn()}
+        />,
+      ),
+    ).toThrow(/provider ids must be unique/i)
+  })
+
+  it('omits optional actions and providers when their handlers are absent', () => {
+    render(
+      <LoginPage
+        presentation='card'
+        forgotPasswordLabel='Forgot password'
+        createAccountLabel='Create account'
+        providers={[{ id: 'github', label: 'GitHub' }]}
+      />,
+    )
+
+    expect(screen.queryByRole('button', { name: 'Forgot password' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Create account' })).toBeNull()
+    expect(screen.queryByRole('group', { name: 'O continúa con' })).toBeNull()
+  })
+
+  it('invokes optional action handlers', async () => {
+    const user = userEvent.setup()
+    const onForgotPassword = vi.fn()
+    const onCreateAccount = vi.fn()
+
+    render(
+      <LoginPage
+        presentation='card'
+        forgotPasswordLabel='Forgot password'
+        createAccountLabel='Create account'
+        onForgotPassword={onForgotPassword}
+        onCreateAccount={onCreateAccount}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Forgot password' }))
+    await user.click(screen.getByRole('button', { name: 'Create account' }))
+
+    expect(onForgotPassword).toHaveBeenCalledOnce()
+    expect(onCreateAccount).toHaveBeenCalledOnce()
+  })
+
+  it('updates the password toggle accessible name with its state', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <LoginPage
+        presentation='card'
+        passwordLabel='Password'
+        showPasswordAriaLabel='Show password'
+        hidePasswordAriaLabel='Hide password'
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Show password' })).toBeTruthy()
+    await user.click(screen.getByRole('button', { name: 'Show password' }))
+    expect(screen.getByRole('button', { name: 'Hide password' })).toBeTruthy()
+    expect(screen.getByLabelText('Password').getAttribute('type')).toBe('text')
+  })
+
+  it('keeps fields and secondary actions reachable in keyboard order', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <LoginPage
+        presentation='card'
+        emailLabel='Email'
+        passwordLabel='Password'
+        rememberMeLabel='Remember me'
+        forgotPasswordLabel='Forgot password'
+        signInLabel='Sign in'
+        createAccountLabel='Create account'
+        onForgotPassword={vi.fn()}
+        onCreateAccount={vi.fn()}
+      />,
+    )
+
+    const expectedFocusOrder = [
+      screen.getByLabelText('Email'),
+      screen.getByLabelText('Password'),
+      screen.getByRole('button', { name: 'Mostrar contraseña' }),
+      screen.getByRole('checkbox', { name: 'Remember me' }),
+      screen.getByRole('button', { name: 'Forgot password' }),
+      screen.getByRole('button', { name: 'Sign in' }),
+      screen.getByRole('button', { name: 'Create account' }),
+    ]
+
+    for (const element of expectedFocusOrder) {
+      await user.tab()
+      expect(document.activeElement).toBe(element)
+    }
+  })
+})

package/src/blocks/application/login-forms/login-page.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+import { useId, useState, type FormEvent } from 'react'
+import { Eye, EyeOff, Lock, type LucideIcon } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+import { Label } from '../../../ui/label'
+import { CheckboxCheck } from '../../e-commerce/checkout-forms/checkbox-check'
+
+export interface LoginPageFormData {
+  email: string
+  password: string
+  remember: boolean
+}
+
+export interface LoginPageProvider {
+  /** Must be unique within one `providers` list. */
+  id: string
+  label: string
+}
+
+export interface LoginPageProps {
+  presentation: 'card' | 'social'
+  logoText?: string
+  welcomeTitleLabel?: string
+  welcomeDescriptionLabel?: string
+  emailLabel?: string
+  emailPlaceholder?: string
+  passwordLabel?: string
+  passwordPlaceholder?: string
+  rememberMeLabel?: string
+  forgotPasswordLabel?: string
+  signInLabel?: string
+  orContinueWithLabel?: string
+  dontHaveAccountLabel?: string
+  createAccountLabel?: string
+  showPasswordAriaLabel?: string
+  hidePasswordAriaLabel?: string
+  providers?: LoginPageProvider[]
+  providerIcons?: Record<string, LucideIcon>
+  onSubmit?: (data: { email: string; password: string; remember: boolean }) => void
+  onForgotPassword?: () => void
+  onCreateAccount?: () => void
+  onProviderSelect?: (providerId: string) => void
+}
+
+export function LoginPage({
+  presentation,
+  logoText,
+  welcomeTitleLabel = 'Bienvenido de nuevo',
+  welcomeDescriptionLabel = 'Inicia sesión para continuar',
+  emailLabel = 'Correo electrónico',
+  emailPlaceholder = 'taller@correo.com',
+  passwordLabel = 'Contraseña',
+  passwordPlaceholder = '••••••••',
+  rememberMeLabel = 'Recuérdame',
+  forgotPasswordLabel = '¿Olvidaste tu contraseña?',
+  signInLabel = 'Iniciar sesión',
+  orContinueWithLabel = 'O continúa con',
+  dontHaveAccountLabel = '¿No tienes una cuenta?',
+  createAccountLabel = 'Crea una cuenta',
+  showPasswordAriaLabel = 'Mostrar contraseña',
+  hidePasswordAriaLabel = 'Ocultar contraseña',
+  providers = [],
+  providerIcons = {},
+  onSubmit,
+  onForgotPassword,
+  onCreateAccount,
+  onProviderSelect,
+}: LoginPageProps) {
+  if (presentation !== 'card' && presentation !== 'social') {
+    throw new Error('LoginPage requires a valid presentation: "card" or "social".')
+  }
+
+  const providerIds = new Set<string>()
+  for (const provider of providers ?? []) {
+    if (providerIds.has(provider.id)) {
+      throw new Error('LoginPage provider ids must be unique.')
+    }
+    providerIds.add(provider.id)
+  }
+
+  const id = useId()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [remember, setRemember] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    onSubmit?.({ email, password, remember })
+  }
+
+  const fields = (
+    <form onSubmit={handleSubmit} className='flex flex-col gap-5'>
+      <div className='flex flex-col gap-2'>
+        <Label htmlFor={`${id}-email`}>{emailLabel}</Label>
+        <Input
+          id={`${id}-email`}
+          type='email'
+          autoComplete='email'
+          placeholder={emailPlaceholder}
+          value={email}
+          onChange={event => setEmail(event.target.value)}
+        />
+      </div>
+
+      <div className='flex flex-col gap-2'>
+        <Label htmlFor={`${id}-password`}>{passwordLabel}</Label>
+        <div className='relative'>
+          <Input
+            id={`${id}-password`}
+            type={showPassword ? 'text' : 'password'}
+            autoComplete='current-password'
+            placeholder={passwordPlaceholder}
+            value={password}
+            onChange={event => setPassword(event.target.value)}
+            className='pe-10'
+          />
+          <Button
+            type='button'
+            variant='ghost'
+            size='icon'
+            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}
+            className='absolute end-0 top-1/2 size-9 -translate-y-1/2 cursor-pointer hover:bg-transparent'
+            onClick={() => setShowPassword(value => !value)}
+          >
+            {showPassword ? <EyeOff aria-hidden='true' /> : <Eye aria-hidden='true' />}
+          </Button>
+        </div>
+      </div>
+
+      <div className='flex flex-wrap items-center justify-between gap-3'>
+        <div className='flex items-center gap-2'>
+          <CheckboxCheck
+            id={`${id}-remember`}
+            checked={remember}
+            onCheckedChange={value => setRemember(value === true)}
+          />
+          <Label htmlFor={`${id}-remember`} className='text-sm font-normal text-muted-foreground'>
+            {rememberMeLabel}
+          </Label>
+        </div>
+        {onForgotPassword && (
+          <Button type='button' variant='link' className='h-auto cursor-pointer p-0 text-sm' onClick={onForgotPassword}>
+            {forgotPasswordLabel}
+          </Button>
+        )}
+      </div>
+
+      <Button type='submit' className='h-9 w-full cursor-pointer px-4 py-2'>
+        {signInLabel}
+      </Button>
+    </form>
+  )
+
+  const providerSection = providers.length > 0 && onProviderSelect && (
+    <div className='flex flex-col gap-4'>
+      <div className='flex items-center gap-3' aria-hidden='true'>
+        <span className='h-px flex-1 bg-border' />
+        <span className='text-muted-foreground text-xs uppercase'>{orContinueWithLabel}</span>
+        <span className='h-px flex-1 bg-border' />
+      </div>
+      <div
+        className={presentation === 'card' ? 'grid grid-cols-3 gap-3' : 'grid grid-cols-2 gap-4'}
+        role='group'
+        aria-label={orContinueWithLabel}
+      >
+        {providers.map(provider => {
+          const Icon = providerIcons[provider.id] as LucideIcon | undefined
+          return (
+            <Button
+              key={provider.id}
+              type='button'
+              variant='outline'
+              aria-label={provider.label}
+              className='h-9 w-full cursor-pointer px-3 py-2'
+              onClick={() => onProviderSelect(provider.id)}
+            >
+              {Icon ? <Icon aria-hidden='true' className='size-5' /> : provider.label}
+              {presentation === 'social' && Icon ? <span>{provider.label}</span> : null}
+            </Button>
+          )
+        })}
+      </div>
+    </div>
+  )
+
+  const createAccount = onCreateAccount && (
+    <p className='flex justify-center gap-1 text-center text-sm'>
+      <span>{dontHaveAccountLabel}</span>
+      <Button type='button' variant='link' className='h-auto cursor-pointer p-0 text-sm' onClick={onCreateAccount}>
+        {createAccountLabel}
+      </Button>
+    </p>
+  )
+
+  if (presentation === 'card') {
+    return (
+      <div className='w-full max-w-md'>
+        <Card className='w-full p-8 shadow-2xl'>
+          <header className='mb-8 flex flex-col items-center text-center'>
+            <div className='bg-secondary mb-4 flex size-14 items-center justify-center rounded-full border'>
+              <Lock aria-hidden='true' className='size-6' />
+            </div>
+            {logoText && <p className='text-muted-foreground mb-2 text-sm font-semibold'>{logoText}</p>}
+            <h1 className='mb-2 text-2xl font-bold tracking-tight'>{welcomeTitleLabel}</h1>
+            <p className='text-muted-foreground text-sm'>{welcomeDescriptionLabel}</p>
+          </header>
+          <div className='flex flex-col gap-6'>
+            {fields}
+            {providerSection}
+            {createAccount}
+          </div>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex w-full max-w-md flex-col gap-6'>
+      {logoText && <div className='text-center text-2xl font-medium'>{logoText}</div>}
+      <Card>
+        <CardHeader className='text-center'>
+          <CardTitle className='text-2xl font-bold text-balance'>{welcomeTitleLabel}</CardTitle>
+          <CardDescription>{welcomeDescriptionLabel}</CardDescription>
+        </CardHeader>
+        <CardContent className='flex flex-col gap-5'>
+          {fields}
+          {providerSection}
+          {createAccount}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default LoginPage

package/src/blocks/application/password-recovery/forgot-password-page-1.tsx

@@ -306,14 +306,12 @@ export function ForgotPasswordPage1({
   }
 
   return (
-    <section className="from-background to-muted/50 relative isolate flex min-h-dvh w-full items-center justify-center overflow-hidden bg-linear-to-br">
-      <div className="relative z-10 container mx-auto flex min-h-dvh items-center justify-center px-4 py-12 sm:py-16">
-        <Card className="bg-background/80 relative w-full max-w-md ring-0 p-6 shadow-2xl backdrop-blur-md sm:p-8">
-          <ForgotPasswordPage1BrandMark />
-          {renderStepContent()}
-        </Card>
-      </div>
-    </section>
+    <div className="w-full max-w-md">
+      <Card className="bg-background/80 relative w-full max-w-md ring-0 p-6 shadow-2xl backdrop-blur-md sm:p-8">
+        <ForgotPasswordPage1BrandMark />
+        {renderStepContent()}
+      </Card>
+    </div>
   )
 }