@fayz-ai/storefront 0.9.0 → 0.10.0

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>
-  )
-}