@fayz-ai/storefront 0.9.0 → 0.10.0

package/src/stores/session.store.ts

@@ -1,28 +0,0 @@
-import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
-
-// Customer session state. Identity is established through the shared
-// @fayz-ai/auth AuthAdapter (see ../auth.ts) — this store only mirrors the
-// linked ShopCustomer for synchronous UI access.
-
-export interface SessionState {
-  customerId: string | null
-  email: string | null
-  name: string | null
-  setSession(session: { customerId: string; email: string; name?: string | null }): void
-  signOut(): void
-}
-
-export const useSessionStore = create<SessionState>()(
-  persist(
-    (set) => ({
-      customerId: null,
-      email: null,
-      name: null,
-      setSession: ({ customerId, email, name }) =>
-        set({ customerId, email, name: name ?? null }),
-      signOut: () => set({ customerId: null, email: null, name: null }),
-    }),
-    { name: 'fayz.storefront.session.v1' },
-  ),
-)

package/src/stores/toast.store.ts

@@ -1,43 +0,0 @@
-import { create } from 'zustand'
-
-export type ToastVariant = 'success' | 'error' | 'info'
-
-export interface Toast {
-  id: string
-  title: string
-  description?: string
-  variant: ToastVariant
-  durationMs: number
-}
-
-interface ToastState {
-  toasts: Toast[]
-  push(input: { title: string; description?: string; variant?: ToastVariant; durationMs?: number }): string
-  dismiss(id: string): void
-}
-
-let seq = 0
-
-export const useToastStore = create<ToastState>((set) => ({
-  toasts: [],
-  push: (input) => {
-    const id = `toast-${++seq}-${Date.now()}`
-    const toast: Toast = {
-      id,
-      title: input.title,
-      description: input.description,
-      variant: input.variant ?? 'info',
-      durationMs: input.durationMs ?? 3400,
-    }
-    set((s) => ({ toasts: [...s.toasts, toast] }))
-    return id
-  },
-  dismiss: (id) => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
-}))
-
-/** Imperative toast API — callable from components, store actions, or workflows. */
-export const toast = {
-  success: (title: string, description?: string) => useToastStore.getState().push({ title, description, variant: 'success' }),
-  error: (title: string, description?: string) => useToastStore.getState().push({ title, description, variant: 'error' }),
-  info: (title: string, description?: string) => useToastStore.getState().push({ title, description, variant: 'info' }),
-}

package/src/testids.ts

@@ -1,136 +0,0 @@
-// Single source of truth for e2e selectors. Components import from here;
-// Playwright specs assert against the same constants — they cannot drift.
-export const TID = {
-  // header
-  headerSearch: 'header-search',
-  headerSearchToggle: 'header-search-toggle',
-  cartButton: 'cart-button',
-  cartCount: 'cart-count',
-  accountLink: 'account-link',
-  accountDropdown: 'account-dropdown',
-  announcementBar: 'announcement-bar',
-  navLink: (label: string) => `nav-${label.toLowerCase().replace(/\s+/g, '-')}`,
-  navCategory: (slug: string) => `nav-cat-${slug}`,
-  accountName: 'account-name',
-  // home sections
-  hero: 'home-hero',
-  heroPrev: 'hero-prev',
-  heroNext: 'hero-next',
-  mediaCarousel: 'media-carousel',
-  mediaCarouselPrev: 'media-carousel-prev',
-  mediaCarouselNext: 'media-carousel-next',
-  productSlider: 'product-slider',
-  productSliderViewport: 'product-slider-viewport',
-  productSliderPrev: 'product-slider-prev',
-  productSliderNext: 'product-slider-next',
-  categoryShowcase: 'category-showcase',
-  productRail: 'product-rail',
-  benefits: 'benefits-row',
-  promoBanner: 'promo-banner',
-  manifesto: 'manifesto',
-  testimonials: 'testimonials',
-  newsletter: 'newsletter',
-  newsletterEmail: 'newsletter-email',
-  newsletterSubmit: 'newsletter-submit',
-  newsletterDone: 'newsletter-done',
-  // catalog
-  productGrid: 'product-grid',
-  productCard: 'product-card',
-  productCardName: 'product-card-name',
-  productCardPrice: 'product-card-price',
-  productCardAdd: 'product-card-add',
-  badgeSale: 'badge-sale',
-  badgeSoldout: 'badge-soldout',
-  // filters
-  filterCategory: (slug: string) => `filter-category-${slug}`,
-  filterPriceMin: 'filter-price-min',
-  filterPriceMax: 'filter-price-max',
-  filterInstock: 'filter-instock',
-  sortSelect: 'sort-select',
-  filtersClear: 'filters-clear',
-  // product detail
-  pdpName: 'pdp-name',
-  pdpPrice: 'pdp-price',
-  pdpComparePrice: 'pdp-compare-price',
-  pdpDescription: 'pdp-description',
-  productOptionGroup: (id: string) => `product-option-${id.toLowerCase().replace(/\s+/g, '-')}`,
-  productOptionValue: (id: string, value: string) => `product-option-${id.toLowerCase().replace(/\s+/g, '-')}-${value.toLowerCase().replace(/\s+/g, '-')}`,
-  pdpQtyInput: 'pdp-qty-input',
-  pdpAddToCart: 'pdp-add-to-cart',
-  pdpRoot: 'pdp-root',
-  pdpGallery: 'pdp-gallery',
-  pdpGalleryImage: 'pdp-gallery-image',
-  pdpGalleryThumbs: 'pdp-gallery-thumbs',
-  pdpGalleryThumb: 'pdp-gallery-thumb',
-  pdpActions: 'pdp-actions',
-  pdpEnquiryButton: 'pdp-enquiry-button',
-  enquiryForm: 'enquiry-form',
-  enquiryName: 'enquiry-name',
-  enquiryEmail: 'enquiry-email',
-  enquiryPhone: 'enquiry-phone',
-  enquirySubject: 'enquiry-subject',
-  enquiryMessage: 'enquiry-message',
-  enquirySubmit: 'enquiry-submit',
-  enquirySuccess: 'enquiry-success',
-  enquiryError: 'enquiry-error',
-  // cart
-  cartDrawer: 'cart-drawer',
-  cartLine: 'cart-line',
-  lineQty: 'line-qty',
-  lineInc: 'line-inc',
-  lineDec: 'line-dec',
-  lineRemove: 'line-remove',
-  cartSubtotal: 'cart-subtotal',
-  discountInput: 'discount-input',
-  discountApply: 'discount-apply',
-  discountRow: 'discount-row',
-  discountError: 'discount-error',
-  cartShipping: 'cart-shipping',
-  shippingProgress: 'shipping-progress',
-  cartTotal: 'cart-total',
-  goCheckout: 'go-checkout',
-  cartEmpty: 'cart-empty',
-  // delivery estimate (product page + cart)
-  deliveryEstimator: 'delivery-estimator',
-  deliveryCepInput: 'delivery-cep-input',
-  deliveryCepSubmit: 'delivery-cep-submit',
-  deliveryOption: 'delivery-option',
-  deliveryUnserved: 'delivery-unserved',
-  deliveryError: 'delivery-error',
-  deliveryAddress: 'delivery-address',
-  deliveryClear: 'delivery-clear',
-  // checkout
-  checkoutEmail: 'checkout-email',
-  checkoutName: 'checkout-name',
-  checkoutStreet: 'checkout-street',
-  checkoutCity: 'checkout-city',
-  checkoutZip: 'checkout-zip',
-  checkoutCard: 'checkout-card',
-  checkoutExpiry: 'checkout-expiry',
-  checkoutCvc: 'checkout-cvc',
-  placeOrder: 'place-order',
-  checkoutError: 'checkout-error',
-  checkoutProcessing: 'checkout-processing',
-  // confirmation
-  orderNumber: 'order-number',
-  orderStatus: 'order-status',
-  orderTracking: 'order-tracking',
-  orderTrackingStep: (step: string) => `order-tracking-step-${step}`,
-  orderTotal: 'order-total',
-  viewPurchases: 'view-purchases',
-  // account
-  customerAccountShell: 'customer-account-shell',
-  customerAccountMenu: 'customer-account-menu',
-  orderDetail: 'order-detail',
-  authTabSignin: 'auth-tab-signin',
-  authTabSignup: 'auth-tab-signup',
-  signinEmail: 'signin-email',
-  signinPassword: 'signin-password',
-  signinName: 'signin-name',
-  signinSubmit: 'signin-submit',
-  authError: 'auth-error',
-  purchasesList: 'purchases-list',
-  purchaseItem: 'purchase-item',
-  purchasesEmpty: 'purchases-empty',
-  signout: 'signout',
-} as const

package/src/theme.ts

@@ -1,194 +0,0 @@
-import React, { useEffect } from 'react'
-
-// ---------------------------------------------------------------------------
-// StorefrontTheme — the storefront counterpart of SaasTheme.
-// Personalizes colors (HSL token triplets), typography (Google Fonts pairing),
-// radius and layout properties via CSS custom properties, so every @fayz-ai/ui
-// token class (bg-background, text-primary, ...) picks the brand up for free.
-//
-// Derived from the Nuvemshop template research (docs/storefront-templates-research.md):
-// the personalization axes are palette, font pairing, radius, header treatment,
-// hero style and product-card style.
-// ---------------------------------------------------------------------------
-
-export type StorefrontRadius = 'none' | 'soft' | 'round' | 'pill'
-export type HeaderVariant = 'classic' | 'centered' | 'search' | 'minimal'
-export type HeroVariant = 'banner' | 'split' | 'slider'
-export type CardStyle = 'card' | 'editorial'
-
-export interface StorefrontThemeColors {
-  /** HSL triplets, e.g. '40 20% 94%' — same convention as SaasTheme */
-  background?: string
-  foreground?: string
-  primary?: string
-  primaryForeground?: string
-  card?: string
-  cardForeground?: string
-  muted?: string
-  mutedForeground?: string
-  border?: string
-  /** Header treatment — dark headers (Brasília) set these */
-  headerBackground?: string
-  headerForeground?: string
-  /** Announcement bar */
-  announcementBackground?: string
-  announcementForeground?: string
-  /** Secondary brand accent (e.g. a gourmet gold beside the primary). Emitted
-   *  as `--sf-accent` / `--sf-accent-foreground` and the `accent` tailwind token. */
-  accent?: string
-  accentForeground?: string
-}
-
-export interface StorefrontThemeFont {
-  /** Display font for headings, e.g. 'Marcellus' */
-  heading: string
-  /** Body font, e.g. 'Rubik' */
-  body: string
-  /** Optional oversized display face for hero words (emitted as `--sf-font-display`). */
-  display?: string
-  /** Optional serif accent for quotes/editorial (emitted as `--sf-font-serif`). */
-  serif?: string
-  /** Google Fonts families to load (defaults to heading+body+display+serif) */
-  googleFonts?: string[]
-  /** Fallback stack — default sans-serif; use 'serif' for editorial themes */
-  fallback?: 'sans-serif' | 'serif'
-}
-
-export interface StorefrontTheme {
-  name: string
-  colors?: StorefrontThemeColors
-  font?: StorefrontThemeFont
-  radius?: StorefrontRadius
-  /** Layout personality */
-  header?: {
-    variant?: HeaderVariant
-    /** Uppercase nav links (premium retail tone) */
-    uppercaseNav?: boolean
-    /** Show category shortcuts after primary nav links. Default true. */
-    showCategories?: boolean
-    /** Show the storefront search in the header. Default true. */
-    showSearch?: boolean
-    /** Header search presentation: a full input ('full', default) or a compact
-     *  icon button that expands into an input on click ('icon'). */
-    searchStyle?: 'full' | 'icon'
-  }
-  productCard?: {
-    style?: CardStyle
-    imageAspect?: 'square' | 'portrait'
-  }
-  /** Uppercase CTA buttons with letter-spacing (Uyuni/Flex tone) */
-  uppercaseButtons?: boolean
-  /** Brand-token passthrough. Each entry is emitted verbatim as a `--<key>` CSS
-   *  custom property, so a store can add gradients, glows, extra colors, or
-   *  letter-spacing the fixed schema doesn't enumerate — without editing the SDK.
-   *  e.g. { 'grad-ember': 'linear-gradient(...)', 'glow-ember': '0 0 0 1px ...' }. */
-  tokens?: Record<string, string>
-}
-
-const RADIUS_MAP: Record<StorefrontRadius, { button: string; card: string; input: string }> = {
-  none: { button: '0px', card: '0px', input: '0px' },
-  soft: { button: '6px', card: '10px', input: '6px' },
-  round: { button: '10px', card: '16px', input: '10px' },
-  pill: { button: '999px', card: '20px', input: '999px' },
-}
-
-const COLOR_VAR_MAP: Record<keyof StorefrontThemeColors, string> = {
-  background: '--background',
-  foreground: '--foreground',
-  primary: '--primary',
-  primaryForeground: '--primary-foreground',
-  card: '--card',
-  cardForeground: '--card-foreground',
-  muted: '--muted',
-  mutedForeground: '--muted-foreground',
-  border: '--border',
-  headerBackground: '--sf-header-bg',
-  headerForeground: '--sf-header-fg',
-  announcementBackground: '--sf-announcement-bg',
-  announcementForeground: '--sf-announcement-fg',
-  accent: '--sf-accent',
-  accentForeground: '--sf-accent-foreground',
-}
-
-export function themeToCss(theme: StorefrontTheme): string {
-  const lines: string[] = []
-
-  for (const [key, cssVar] of Object.entries(COLOR_VAR_MAP) as [keyof StorefrontThemeColors, string][]) {
-    const value = theme.colors?.[key]
-    if (value) lines.push(`${cssVar}: ${value};`)
-  }
-  // Header defaults to the page background unless the theme sets one
-  if (!theme.colors?.headerBackground && theme.colors?.background) {
-    lines.push(`--sf-header-bg: ${theme.colors.background};`)
-  }
-  if (!theme.colors?.headerForeground && theme.colors?.foreground) {
-    lines.push(`--sf-header-fg: ${theme.colors.foreground};`)
-  }
-
-  if (theme.font) {
-    const fallback = theme.font.fallback ?? 'sans-serif'
-    lines.push(`--font-family: '${theme.font.body}', ${fallback};`)
-    lines.push(`--sf-font-heading: '${theme.font.heading}', ${fallback};`)
-    if (theme.font.display) lines.push(`--sf-font-display: '${theme.font.display}', ${fallback};`)
-    if (theme.font.serif) lines.push(`--sf-font-serif: '${theme.font.serif}', serif;`)
-  }
-
-  // Brand-token passthrough — emit each entry as a raw CSS custom property.
-  for (const [key, value] of Object.entries(theme.tokens ?? {})) {
-    const name = key.startsWith('--') ? key : `--${key}`
-    lines.push(`${name}: ${value};`)
-  }
-
-  const radius = RADIUS_MAP[theme.radius ?? 'soft']
-  lines.push(`--button-radius: ${radius.button};`)
-  lines.push(`--card-radius: ${radius.card};`)
-  lines.push(`--input-radius: ${radius.input};`)
-  lines.push(`--sf-radius-button: ${radius.button};`)
-  lines.push(`--sf-radius-card: ${radius.card};`)
-  lines.push(`--sf-radius-input: ${radius.input};`)
-
-  let css = `:root {\n  ${lines.join('\n  ')}\n}\n`
-  css += `body { font-family: var(--font-family); }\n`
-  css += `h1, h2, h3, h4, .sf-heading { font-family: var(--sf-font-heading, var(--font-family)); }\n`
-  if (theme.uppercaseButtons) {
-    css += `.sf-cta { text-transform: uppercase; letter-spacing: 0.08em; }\n`
-  }
-  if (theme.header?.uppercaseNav) {
-    css += `.sf-nav-link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }\n`
-  }
-  return css
-}
-
-function googleFontsHref(theme: StorefrontTheme): string | null {
-  if (!theme.font) return null
-  const families =
-    theme.font.googleFonts ??
-    [theme.font.heading, theme.font.body, theme.font.display, theme.font.serif].filter(
-      (f): f is string => Boolean(f),
-    )
-  const unique = [...new Set(families)]
-  const params = unique
-    .map((f) => `family=${encodeURIComponent(f).replace(/%20/g, '+')}:wght@300;400;500;600;700`)
-    .join('&')
-  return `https://fonts.googleapis.com/css2?${params}&display=swap`
-}
-
-/** Injects theme CSS variables + Google Fonts. Mount once inside the app root. */
-export function StorefrontThemeStyle({ theme }: { theme: StorefrontTheme }) {
-  const fontsHref = googleFontsHref(theme)
-
-  useEffect(() => {
-    if (!fontsHref) return
-    const id = 'sf-theme-fonts'
-    let link = document.getElementById(id) as HTMLLinkElement | null
-    if (!link) {
-      link = document.createElement('link')
-      link.id = id
-      link.rel = 'stylesheet'
-      document.head.appendChild(link)
-    }
-    link.href = fontsHref
-  }, [fontsHref])
-
-  return React.createElement('style', { 'data-sf-theme': theme.name }, themeToCss(theme))
-}

package/src/ui.ts

@@ -1,5 +0,0 @@
-// Front-door re-export of @fayz-ai/ui for storefront apps.
-// Import design-system primitives from `@fayz-ai/storefront/ui` instead of
-// depending on @fayz-ai/ui directly. Own module graph keeps the UI deps out of
-// the main storefront entry.
-export * from '@fayz-ai/ui'

package/src/workflows/checkout.ts

@@ -1,119 +0,0 @@
-import { getShopProvider } from '@fayz-ai/shop/runtime'
-import type { Order, ShippingAddressInput, PaymentMethodKind } from '@fayz-ai/shop/types'
-import { establishCustomerSession } from '../auth'
-import type { ResolvedStorefrontConfig } from '../config'
-import type { CartState } from '../stores/cart.store'
-import { selectShipping } from '../stores/cart.store'
-import type { SessionState } from '../stores/session.store'
-
-export interface StorefrontCheckoutCustomer {
-  email: string
-  name: string
-}
-
-export interface StorefrontCheckoutAddress {
-  street?: string
-  city?: string
-  zip?: string
-  notes?: string
-}
-
-export interface PlaceStorefrontOrderInput {
-  config: ResolvedStorefrontConfig
-  cart: Pick<CartState, 'lines' | 'discountCode' | 'discountPercent'>
-  session?: Pick<SessionState, 'customerId' | 'email'>
-  customer: StorefrontCheckoutCustomer
-  address?: StorefrontCheckoutAddress
-  /** Structured address; without it the order keeps only the free-text note. */
-  shippingAddress?: ShippingAddressInput
-  paymentMethod?: PaymentMethodKind
-  markPaid?: boolean
-}
-
-export interface PlaceStorefrontOrderResult {
-  order: Order
-  customerId: string
-}
-
-/**
- * `notes` is the buyer's free-text message to the store — nothing else.
- *
- * It used to double as the delivery address, from back when the order had
- * nowhere structured to put one. Now that the address is a real snapshot plus a
- * row in the address book, repeating it here only creates a second copy that
- * can disagree with the first (it did: it dropped number and district). When a
- * structured address is present, notes carries only what the customer wrote.
- */
-function formatDeliveryNotes(
-  address: StorefrontCheckoutAddress | undefined,
-  shippingAddress?: ShippingAddressInput,
-): string | undefined {
-  if (address?.notes?.trim()) return address.notes.trim()
-
-  // Structured address present → the order already knows where to deliver.
-  if (shippingAddress) return undefined
-
-  if (!address) return undefined
-  const parts = [address.street, address.city, address.zip]
-    .map((part) => part?.trim())
-    .filter(Boolean)
-
-  return parts.length > 0 ? `Entrega: ${parts.join(', ')}` : undefined
-}
-
-/**
- * Storefront checkout primitive for custom/generated checkout screens.
- * It owns the order payload math and customer-session handshake so app-owned
- * routes can customize UX without copying provider/business logic.
- */
-export async function placeStorefrontOrder({
-  config,
-  cart,
-  session,
-  customer,
-  address,
-  shippingAddress,
-  paymentMethod,
-  markPaid = false,
-}: PlaceStorefrontOrderInput): Promise<PlaceStorefrontOrderResult> {
-  const email = customer.email.trim().toLowerCase()
-  const name = customer.name.trim()
-  const provider = getShopProvider()
-
-  let customerId = session?.customerId ?? null
-  if (!customerId || session?.email !== email) {
-    const established = await establishCustomerSession(email, { name })
-    customerId = established.customerId
-  }
-
-  // Trusted placement: send only product ids + quantities. The provider
-  // (shop_place_order RPC on Supabase, in-memory provider in mock) re-reads
-  // prices, validates the discount, and decrements inventory server-side.
-  const order = await provider.placeOrder({
-    customerId: customerId ?? undefined,
-    customer: { name, email },
-    currency: config.currency,
-    notes: formatDeliveryNotes(address, shippingAddress),
-    discountCode: cart.discountCode ?? undefined,
-    shippingTotal: selectShipping(cart, config),
-    // Structured address + method are what populate public.addresses and the
-    // transactions ledger. `notes` stays for backwards compatibility with
-    // checkouts that have not been updated yet.
-    shippingAddress,
-    paymentMethod,
-    items: cart.lines.map((line) => ({
-      productId: line.productId,
-      quantity: line.quantity,
-      optionsLabel: line.optionsLabel || undefined,
-    })),
-  })
-
-  if (markPaid) {
-    // Prefer the RPC seam — anon storefronts have no UPDATE grant on the
-    // orders table, so a direct updateOrder 401s on pool backends.
-    if (provider.confirmPayment) await provider.confirmPayment(order.id)
-    else await provider.updateOrder(order.id, { financialStatus: 'paid' })
-  }
-
-  return { order, customerId: customerId ?? order.customerId ?? '' }
-}