@fayz-ai/storefront 0.9.0 → 0.11.0

package/src/components/ProductOptionSelector.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import type { ProductOptionGroup, ProductOptionSelection } from '../product-options'
-import { TID } from '../testids'
-
-export interface ProductOptionSelectorProps {
-  groups: ProductOptionGroup[]
-  value: ProductOptionSelection
-  onChange: (value: ProductOptionSelection) => void
-}
-
-export function ProductOptionSelector({ groups, value, onChange }: ProductOptionSelectorProps) {
-  if (groups.length === 0) return null
-
-  return (
-    <div className="mt-6 space-y-4">
-      {groups.map((group) => (
-        <div key={group.id} data-testid={TID.productOptionGroup(group.id)}>
-          <div className="mb-2 flex items-center justify-between gap-3">
-            <p className="text-sm font-medium">{group.label}</p>
-            {value[group.label] && (
-              <p className="truncate text-xs text-muted-foreground">{value[group.label]}</p>
-            )}
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {group.values.map((option) => {
-              const selected = value[group.label] === option
-              return (
-                <button
-                  key={option}
-                  type="button"
-                  data-testid={TID.productOptionValue(group.id, option)}
-                  aria-pressed={selected}
-                  onClick={() => onChange({ ...value, [group.label]: option })}
-                  className={[
-                    'min-h-10 rounded-full border px-4 text-sm font-medium transition-colors',
-                    selected
-                      ? 'border-primary bg-primary text-primary-foreground'
-                      : 'border-border bg-background text-foreground hover:border-primary/60',
-                  ].join(' ')}
-                >
-                  {option}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/ProductSpecs.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import type { Product } from '@fayz-ai/shop/types'
-
-// Metadata keys that drive the option selector (size/color) are excluded here so
-// specs don't duplicate the picker; the rest are internal SDK/seed/overlay keys
-// that aren't customer-facing specs.
-const EXCLUDED_KEYS = new Set([
-  'options', 'sizes', 'colors',
-  'fayzStoreCategory', 'source', 'storeKey', 'storeName', 'tenantId', 'slug',
-])
-
-// Internal namespaced keys (fayz*, _*) are never shown as specs.
-function isInternalKey(key: string): boolean {
-  return EXCLUDED_KEYS.has(key) || key.startsWith('_') || key.startsWith('fayz')
-}
-
-// Friendly PT-BR labels for common metadata keys; unknown keys are humanized.
-const LABELS: Record<string, string> = {
-  colorway: 'Cor',
-  color: 'Cor',
-  fit: 'Caimento',
-  material: 'Material',
-  vintage: 'Safra',
-  region: 'Região',
-  grape: 'Uva',
-  pairing: 'Harmonização',
-  abv: 'Teor alcoólico',
-  volume: 'Volume',
-  brand: 'Marca',
-  origin: 'Origem',
-  warranty: 'Garantia',
-  dimensions: 'Dimensões',
-}
-
-function humanize(key: string): string {
-  if (LABELS[key]) return LABELS[key]
-  const spaced = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').trim()
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
-}
-
-function scalarToString(value: unknown): string | null {
-  if (typeof value === 'string') return value.trim() || null
-  if (typeof value === 'number') return String(value)
-  if (typeof value === 'boolean') return value ? 'Sim' : 'Não'
-  return null
-}
-
-/** Real product specs from standard fields + scalar metadata. Renders nothing
- *  when there's nothing to show. No invented data. */
-export function ProductSpecs({ product }: { product: Product }) {
-  const rows: Array<[string, string]> = []
-  if (product.sku) rows.push(['SKU', product.sku])
-  if (product.categoryName) rows.push(['Categoria', product.categoryName])
-  if (product.weight != null) rows.push(['Peso', `${product.weight} ${product.weightUnit}`])
-  for (const [key, value] of Object.entries(product.metadata ?? {})) {
-    if (isInternalKey(key)) continue
-    const str = scalarToString(value)
-    if (str) rows.push([humanize(key), str])
-  }
-  if (rows.length === 0) return null
-
-  return (
-    <section className="mt-14">
-      <h2 className="sf-heading text-xl font-semibold tracking-tight">Especificações</h2>
-      <dl className="mt-5 grid gap-x-12 sm:grid-cols-2">
-        {rows.map(([label, value]) => (
-          <div key={label} className="flex items-center justify-between gap-4 border-b py-3 text-sm">
-            <dt className="text-muted-foreground">{label}</dt>
-            <dd className="text-right font-medium">{value}</dd>
-          </div>
-        ))}
-      </dl>
-    </section>
-  )
-}

package/src/components/QuantityInput.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { Minus, Plus } from 'lucide-react'
-
-export interface QuantityInputProps {
-  value: number
-  onChange(next: number): void
-  min?: number
-  max?: number
-  testId?: string
-  incTestId?: string
-  decTestId?: string
-}
-
-export function QuantityInput({ value, onChange, min = 1, max, testId, incTestId, decTestId }: QuantityInputProps) {
-  const clamp = (n: number) => Math.max(min, max != null ? Math.min(n, max) : n)
-  return (
-    <div className="inline-flex items-center rounded-lg border">
-      <button
-        type="button"
-        data-testid={decTestId}
-        aria-label="Diminuir quantidade"
-        onClick={() => onChange(clamp(value - 1))}
-        className="px-2.5 py-1.5 text-muted-foreground hover:text-foreground disabled:opacity-40"
-        disabled={value <= min}
-      >
-        <Minus className="h-3.5 w-3.5" />
-      </button>
-      <input
-        data-testid={testId}
-        type="number"
-        value={value}
-        min={min}
-        max={max}
-        onChange={(e) => {
-          const n = parseInt(e.target.value, 10)
-          if (!isNaN(n)) onChange(clamp(n))
-        }}
-        className="w-12 border-x bg-transparent py-1.5 text-center text-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-      />
-      <button
-        type="button"
-        data-testid={incTestId}
-        aria-label="Aumentar quantidade"
-        onClick={() => onChange(clamp(value + 1))}
-        className="px-2.5 py-1.5 text-muted-foreground hover:text-foreground disabled:opacity-40"
-        disabled={max != null && value >= max}
-      >
-        <Plus className="h-3.5 w-3.5" />
-      </button>
-    </div>
-  )
-}

package/src/components/RelatedProducts.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import type { ListProductsOptions, Product } from '@fayz-ai/shop/types'
-import { useProducts } from '../hooks/useProducts'
-import { getStorefrontComponents, useStorefrontConfig } from '../config'
-import { useStorefrontActions } from '../hooks/useStorefront'
-import { ProductCard } from './ProductCard'
-
-/** "Você também pode gostar" — products from the same category, excluding the
- *  current one. Renders through the store's configured card component for visual
- *  consistency with the catalog. Hidden when there's nothing relevant. */
-export function RelatedProducts({ product }: { product: Product }) {
-  const config = useStorefrontConfig()
-  const actions = useStorefrontActions()
-  const components = getStorefrontComponents(config)
-  const Card = components.ProductCard ?? ProductCard
-  const opts: ListProductsOptions = product.categoryId
-    ? { categoryId: product.categoryId, status: 'active', limit: 5 }
-    : { status: 'active', limit: 5 }
-  const { products, loading } = useProducts(opts)
-  const related = products.filter((p) => p.id !== product.id).slice(0, 4)
-
-  if (loading || related.length === 0) return null
-
-  return (
-    <section className="mt-16">
-      <h2 className="sf-heading text-xl font-semibold tracking-tight">Você também pode gostar</h2>
-      <div className="mt-6 grid grid-cols-2 gap-5 md:grid-cols-4">
-        {related.map((p) => (
-          <Card
-            key={p.id}
-            product={p}
-            config={config}
-            commerceMode={config.commerceMode}
-            actions={actions}
-          />
-        ))}
-      </div>
-    </section>
-  )
-}

package/src/components/SignInModal.tsx

@@ -1,120 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Lock, X } from 'lucide-react'
-import { establishCustomerSession } from '../auth'
-import { useSessionStore } from '../stores/session.store'
-import { Link } from '../router'
-
-interface SignInModalProps {
-  /** Prefill the email field (e.g. from a checkout contact field). */
-  defaultEmail?: string
-  onClose: () => void
-  /** Called after a successful sign-in, with the resolved session. */
-  onSignedIn?: (session: { email: string | null; name: string | null }) => void
-}
-
-/**
- * Customer sign-in as a focused modal dialog. Used from checkout ("Já tem
- * conta? Entrar") so a returning buyer can authenticate without leaving the
- * page. Auth goes through the shared establishCustomerSession path.
- */
-export function SignInModal({ defaultEmail = '', onClose, onSignedIn }: SignInModalProps) {
-  const [email, setEmail] = useState(defaultEmail)
-  const [password, setPassword] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose() }
-    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
-  }, [onClose])
-
-  async function submit(event: React.FormEvent) {
-    event.preventDefault()
-    if (!email.trim() || !password) return
-    setBusy(true)
-    setError(null)
-    try {
-      await establishCustomerSession(email, { password })
-      const session = useSessionStore.getState()
-      onSignedIn?.({ email: session.email, name: session.name })
-      onClose()
-    } catch {
-      setError('Não foi possível entrar. Verifique seu e-mail e senha.')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-[60] flex items-center justify-center p-4"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Entrar na sua conta"
-    >
-      <div className="absolute inset-0 animate-fade-in bg-foreground/40 backdrop-blur-sm" onClick={onClose} />
-      <div
-        className="relative z-10 w-full max-w-sm animate-fade-up border bg-card p-6 shadow-2xl"
-        style={{ borderRadius: 'var(--sf-radius-card)' }}
-      >
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Fechar"
-          className="absolute right-4 top-4 rounded-full p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground"
-        >
-          <X className="h-5 w-5" />
-        </button>
-
-        <div className="flex items-center gap-2">
-          <span className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary">
-            <Lock className="h-4 w-4" />
-          </span>
-          <div>
-            <h2 className="sf-heading text-lg font-semibold leading-tight">Entrar na sua conta</h2>
-            <p className="text-xs text-muted-foreground">Use seus dados salvos e acompanhe pedidos.</p>
-          </div>
-        </div>
-
-        <form onSubmit={submit} className="mt-5 space-y-3">
-          <input
-            type="email"
-            required
-            autoFocus
-            placeholder="voce@exemplo.com"
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-            className="w-full border bg-background px-3 py-2.5 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
-            style={{ borderRadius: 'var(--sf-radius-input)' }}
-          />
-          <input
-            type="password"
-            required
-            placeholder="Senha"
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
-            className="w-full border bg-background px-3 py-2.5 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
-            style={{ borderRadius: 'var(--sf-radius-input)' }}
-          />
-          {error && <p className="text-sm text-destructive">{error}</p>}
-          <button
-            type="submit"
-            disabled={busy}
-            className="sf-cta w-full bg-primary py-3 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg disabled:opacity-60"
-            style={{ borderRadius: 'var(--sf-radius-button)' }}
-          >
-            {busy ? 'Entrando…' : 'Entrar'}
-          </button>
-        </form>
-
-        <p className="mt-4 text-center text-sm text-muted-foreground">
-          Não tem conta?{' '}
-          <Link to="/account" onClick={onClose} className="font-semibold text-primary hover:underline">
-            Criar conta
-          </Link>
-        </p>
-      </div>
-    </div>
-  )
-}

package/src/components/SmoothImage.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { useStorefrontConfigOptional, type StorefrontImageLoadingConfig } from '../config'
-
-export interface SmoothImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  imageLoading?: StorefrontImageLoadingConfig
-}
-
-export function SmoothImage({
-  imageLoading,
-  loading = 'lazy',
-  decoding = 'async',
-  onLoad,
-  style,
-  ...props
-}: SmoothImageProps) {
-  const config = useStorefrontConfigOptional()
-  const resolved = {
-    ...config?.imageLoading,
-    ...imageLoading,
-  }
-  const mode = resolved.mode ?? 'fade'
-  const durationMs = resolved.durationMs ?? 420
-  const easing = resolved.easing ?? 'cubic-bezier(0.22, 1, 0.36, 1)'
-  const blur = resolved.blur ?? true
-  const ref = React.useRef<HTMLImageElement | null>(null)
-  const [loaded, setLoaded] = React.useState(mode === 'none')
-
-  React.useEffect(() => {
-    if (mode === 'none') {
-      setLoaded(true)
-      return
-    }
-    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true)
-  }, [mode, props.src])
-
-  const revealStyle: React.CSSProperties =
-    mode === 'none'
-      ? {}
-      : {
-          opacity: loaded ? 1 : 0,
-          filter: blur && !loaded ? 'blur(10px)' : 'blur(0px)',
-          transition: `opacity ${durationMs}ms ${easing}, filter ${durationMs}ms ${easing}, transform ${durationMs}ms ${easing}`,
-        }
-
-  return (
-    <img
-      {...props}
-      ref={ref}
-      loading={loading}
-      decoding={decoding}
-      data-sf-image-loaded={loaded ? 'true' : 'false'}
-      style={{ ...style, ...revealStyle }}
-      onLoad={(event) => {
-        setLoaded(true)
-        onLoad?.(event)
-      }}
-    />
-  )
-}

package/src/components/StorefrontErrorBoundary.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-
-interface Props {
-  children: React.ReactNode
-}
-
-interface State {
-  error: Error | null
-}
-
-/**
- * Catches render/runtime errors in the storefront tree so a single thrown
- * error (e.g. a provider failure) shows a recoverable fallback instead of a
- * blank white screen. Key it by route to auto-clear on navigation.
- */
-export class StorefrontErrorBoundary extends React.Component<Props, State> {
-  state: State = { error: null }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { error }
-  }
-
-  componentDidCatch(error: Error, info: React.ErrorInfo): void {
-    // eslint-disable-next-line no-console
-    console.error('[storefront] render error:', error, info.componentStack)
-  }
-
-  render(): React.ReactNode {
-    if (!this.state.error) return this.props.children
-    return (
-      <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 px-4 py-16 text-center">
-        <h1 className="sf-heading text-xl font-semibold">Algo deu errado</h1>
-        <p className="max-w-md text-sm text-muted-foreground">
-          Ocorreu um erro ao carregar esta parte da loja. Tente recarregar a página.
-        </p>
-        <div className="flex flex-wrap justify-center gap-3">
-          <button
-            type="button"
-            onClick={() => window.location.reload()}
-            className="rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition hover:opacity-90"
-          >
-            Recarregar
-          </button>
-          <a href="#/" className="rounded-lg border px-5 py-2.5 text-sm font-semibold transition hover:bg-muted">
-            Voltar ao início
-          </a>
-        </div>
-      </div>
-    )
-  }
-}

package/src/components/StorefrontFooter.tsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import { useStorefrontConfig } from '../config'
-import { useCategories } from '../hooks/useCategories'
-import { useCatalogStore } from '../stores/catalog.store'
-import { Link, navigateTo } from '../router'
-
-export function StorefrontFooter() {
-  const config = useStorefrontConfig()
-  const { categories } = useCategories()
-  const visibleCategories = categories.slice(0, 8)
-  const hiddenCategoryCount = Math.max(categories.length - visibleCategories.length, 0)
-  const labels = {
-    categories: 'Departamentos',
-    navigation: 'Navegação',
-    contact: 'Contato',
-    viewAll: 'Ver todos',
-    purchases: 'Minhas compras',
-    privacy: 'Privacidade',
-    terms: 'Termos',
-    returns: 'Trocas e devoluções',
-    ...config.footer?.labels,
-  }
-
-  const goCategory = (categoryId: string) => {
-    useCatalogStore.getState().reset()
-    useCatalogStore.getState().setCategoryId(categoryId)
-    navigateTo(config.catalogPath)
-  }
-
-  return (
-    <footer className="mt-16 border-t bg-card">
-      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:grid-cols-2 sm:px-6 lg:grid-cols-4">
-        <div>
-          <p className="sf-heading text-lg font-bold">{config.name}</p>
-          {config.footer?.about && (
-            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{config.footer.about}</p>
-          )}
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.categories}</h3>
-          <ul className="space-y-2 text-sm">
-            {visibleCategories.map((c) => (
-              <li key={c.id}>
-                <button
-                  type="button"
-                  onClick={() => goCategory(c.id)}
-                  className="max-w-full truncate text-left transition-opacity hover:opacity-70"
-                >
-                  {c.name}
-                </button>
-              </li>
-            ))}
-            {hiddenCategoryCount > 0 && (
-              <li>
-                <Link to={config.catalogPath} className="font-medium underline-offset-2 transition-opacity hover:underline">
-                  {labels.viewAll} ({categories.length})
-                </Link>
-              </li>
-            )}
-          </ul>
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.navigation}</h3>
-          <ul className="space-y-2 text-sm">
-            {config.nav.map((link) => (
-              <li key={link.to}>
-                <Link to={link.to} className="transition-opacity hover:opacity-70">{link.label}</Link>
-              </li>
-            ))}
-            {config.features.accounts && (
-              <li>
-                <Link to="/account" className="transition-opacity hover:opacity-70">{labels.purchases}</Link>
-              </li>
-            )}
-          </ul>
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.contact}</h3>
-          <ul className="space-y-2 text-sm text-muted-foreground">
-            {config.footer?.contact?.phone && <li>{config.footer.contact.phone}</li>}
-            {config.footer?.contact?.email && <li>{config.footer.contact.email}</li>}
-            {config.footer?.contact?.address && <li>{config.footer.contact.address}</li>}
-            {config.footer?.social?.map((s) => (
-              <li key={s.href}>
-                <a href={s.href} target="_blank" rel="noreferrer" className="transition-opacity hover:opacity-70">
-                  {s.label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-      <div className="border-t">
-        <div className="mx-auto flex max-w-7xl flex-col items-center gap-3 px-4 py-5 text-xs text-muted-foreground sm:flex-row sm:justify-between sm:px-6">
-          <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
-            <Link to="/privacy" className="transition-colors hover:text-foreground">{labels.privacy}</Link>
-            <Link to="/terms" className="transition-colors hover:text-foreground">{labels.terms}</Link>
-            <Link to="/refunds" className="transition-colors hover:text-foreground">{labels.returns}</Link>
-          </nav>
-          <p className="text-center">
-            {config.footer?.credit ?? <>© {config.name} — powered by Fayz</>}
-          </p>
-        </div>
-      </div>
-    </footer>
-  )
-}