@thorprovider/storefront 0.3.1 → 0.4.0-mvp.0

package/assets/templates/views/product/schema.ts

@@ -0,0 +1,108 @@
+// Thor Commerce view schema fragment: product
+// Zod mirrors of the block contracts for this view — the single source for the
+// catalog entries and the client-side registry parsing (json-render does not
+// validate props against the catalog itself, so the registry parses here).
+// Kept free of React and server imports so the Server Component module and the
+// 'use client' registry can share one contract. Block zod contracts are
+// mirrored, not imported: @thorprovider/blocks ships zod v3 while the scaffold
+// runs zod v4 and cross-major schema assignment breaks the catalog contract.
+
+import { z } from 'zod'
+
+const imageSchema = z.object({
+  id: z.string().optional(),
+  url: z.string(),
+  altText: z.string(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+})
+
+// Canonical Money: a decimal string in major units ("69.99"), never cents.
+const moneySchema = z.object({
+  amount: z.string(),
+  currencyCode: z.string(),
+})
+
+const selectedOptionSchema = z.object({
+  name: z.string(),
+  value: z.string(),
+})
+
+// Mirrors ProductDetailVariant: `price` is absent/null when the backend has no
+// resolved price (the block disables purchase); a valid zero stays "0".
+const productDetailVariantSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  sku: z.string().optional(),
+  availableForSale: z.boolean(),
+  selectedOptions: z.array(selectedOptionSchema),
+  price: moneySchema.nullish(),
+  compareAtPrice: moneySchema.optional(),
+  image: imageSchema.optional(),
+})
+
+// Mirrors ProductDetailProduct (the ProductOverview1 block contract).
+export const productDetailProductSchema = z.object({
+  id: z.string(),
+  handle: z.string().optional(),
+  title: z.string(),
+  description: z.string().optional(),
+  vendor: z.string().optional(),
+  options: z.array(z.object({ id: z.string(), name: z.string(), values: z.array(z.string()) })),
+  variants: z.array(productDetailVariantSchema),
+  images: z.array(imageSchema),
+  featuredImage: imageSchema.optional(),
+})
+
+export const productOverviewPropsSchema = z.object({
+  product: productDetailProductSchema,
+  selectedVariantId: z.string().nullable().optional(),
+  quantity: z.number().optional(),
+  sizesLabel: z.string().optional(),
+  variantLabel: z.string().optional(),
+  reviewsLabel: z.string().optional(),
+  addToCartLabel: z.string().optional(),
+  outOfStockLabel: z.string().optional(),
+  unavailablePriceLabel: z.string().optional(),
+  selectVariantLabel: z.string().optional(),
+  quantityLabel: z.string().optional(),
+})
+
+// Mirrors ReviewRating1Review (real reviews only; never seeded).
+export const reviewSchema = z.object({
+  id: z.number(),
+  userName: z.string(),
+  userAvatar: z.string().optional(),
+  date: z.string(),
+  rating: z.number(),
+  content: z.string(),
+  likes: z.number().optional(),
+  comments: z.number().optional(),
+})
+
+export const reviewFormSchema = z.object({
+  title: z.string(),
+  description: z.string(),
+  nameLabel: z.string(),
+  emailLabel: z.string(),
+  reviewLabel: z.string(),
+  namePlaceholder: z.string(),
+  emailPlaceholder: z.string(),
+  reviewPlaceholder: z.string(),
+  submitButtonText: z.string(),
+  submittingButtonText: z.string(),
+})
+
+export const reviewsPropsSchema = z.object({
+  pageTitle: z.string(),
+  pageDescription: z.string().optional(),
+  reviews: z.array(reviewSchema),
+  form: reviewFormSchema.optional(),
+  reviewsPerPage: z.number().optional(),
+})
+
+export type ProductDetailProductSpec = z.infer<typeof productDetailProductSchema>
+export type ProductOverviewProps = z.infer<typeof productOverviewPropsSchema>
+export type Review = z.infer<typeof reviewSchema>
+export type ReviewForm = z.infer<typeof reviewFormSchema>
+export type ReviewsProps = z.infer<typeof reviewsPropsSchema>

package/assets/templates/views/static/content.ts

@@ -0,0 +1,99 @@
+// Thor Commerce view content: static
+// User-owned content — reconcile seeds this file once and never rewrites it, so
+// your edits survive `storefront sync`. Declare the pages this store serves and
+// the ordered sections each one renders. The derived view builds one fixed route
+// per declared page, so an undeclared path falls through to the not-found
+// response.
+//
+// Neutral, truthful copy only: these pages make no delivery, shipping, or price
+// promise and invent no company facts. Replace the copy with your own before
+// publishing.
+
+import type { StaticPageContent } from './schema'
+
+export const staticPagesContent: StaticPageContent[] = [
+  {
+    path: '/contacto',
+    title: 'Contacto',
+    description: 'Cómo comunicarte con la tienda.',
+    sections: [
+      { kind: 'heading', text: 'Contacto' },
+      {
+        kind: 'paragraph',
+        text: 'Esta tienda atiende en línea. Usa los canales de atención que la tienda publique para resolver tus dudas sobre productos, pedidos y pagos.',
+      },
+      {
+        kind: 'list',
+        items: [
+          'Consulta el estado de tu pedido desde tu cuenta.',
+          'Escríbenos por el canal de atención que la tienda publique.',
+          'Revisa las preguntas frecuentes antes de escribirnos.',
+        ],
+      },
+    ],
+  },
+  {
+    path: '/terminos',
+    title: 'Términos y condiciones',
+    description: 'Condiciones de uso de la tienda en línea.',
+    sections: [
+      { kind: 'heading', text: 'Términos y condiciones' },
+      {
+        kind: 'paragraph',
+        text: 'Al usar esta tienda en línea aceptas estas condiciones de uso. Léelas con atención antes de realizar una compra.',
+      },
+      {
+        kind: 'paragraph',
+        text: 'La tienda puede actualizar estos términos para reflejar cambios en el servicio. La versión vigente es la publicada en esta página.',
+      },
+      {
+        kind: 'list',
+        items: [
+          'Usa la tienda de forma lícita y con información veraz.',
+          'El catálogo, los precios y la disponibilidad se muestran en la tienda y pueden cambiar.',
+          'El proceso de compra se completa siguiendo los pasos indicados en el sitio.',
+        ],
+      },
+    ],
+  },
+  {
+    path: '/privacidad',
+    title: 'Política de privacidad',
+    description: 'Cómo se tratan los datos en la tienda en línea.',
+    sections: [
+      { kind: 'heading', text: 'Política de privacidad' },
+      {
+        kind: 'paragraph',
+        text: 'Esta política describe cómo la tienda trata la información que proporcionas al navegar y al comprar.',
+      },
+      {
+        kind: 'paragraph',
+        text: 'Usamos tus datos para gestionar tu cuenta, procesar tus pedidos y darte soporte. No los usamos para fines distintos sin tu consentimiento.',
+      },
+      {
+        kind: 'list',
+        items: [
+          'Proporciona solo la información necesaria para completar tu compra.',
+          'Puedes solicitar la actualización o eliminación de tus datos por los canales de atención.',
+          'Conserva tus credenciales de acceso de forma segura.',
+        ],
+      },
+    ],
+  },
+  {
+    path: '/sobre-nosotros',
+    title: 'Sobre nosotros',
+    description: 'Información sobre la tienda.',
+    sections: [
+      { kind: 'heading', text: 'Sobre nosotros' },
+      {
+        kind: 'paragraph',
+        text: 'Somos una tienda en línea que ofrece un catálogo de productos para tu hogar y tu negocio.',
+      },
+      {
+        kind: 'paragraph',
+        text: 'Trabajamos para que encuentres lo que buscas y para acompañarte durante todo el proceso de compra a través de esta tienda.',
+      },
+    ],
+  },
+]

package/assets/templates/views/static/index.tsx

@@ -0,0 +1,60 @@
+// Thor Commerce view module: static
+// Server Component module: elements + catalog entries + routes + loader only.
+// The client-side component mapping lives in ./registry.tsx ('use client'); this
+// module imports it as data so the RSC graph never evaluates @json-render/react
+// on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "static".
+//
+// The pages are declared in the user-owned ./content.ts. This module builds one
+// fixed route per declared page (each with its own metadata); an undeclared path
+// is never declared here, so it falls through to the storefront not-found
+// response.
+
+import { getDataSource } from '../../store-context'
+import { pageRoot } from '../../spec/page-root'
+import type { StorefrontElement } from '../../spec/types'
+import type { ViewModule, ViewRoute } from '../types'
+import { registry } from './registry'
+import { staticPagesContent } from './content'
+import { staticContentPropsSchema } from './schema'
+
+// A single catalog/registry declaration for the local StaticContent element. The
+// per-route props (the page's sections) are supplied in each route's entry below.
+const elements: Record<string, StorefrontElement> = {
+  'static.content': {
+    type: 'StaticContent',
+    props: {},
+  },
+}
+
+const catalog = {
+  StaticContent: {
+    props: staticContentPropsSchema,
+    description: 'Renders declared static page sections.',
+  },
+}
+
+// A stable, unique root id per page: `/contacto` -> `static-contacto`,
+// `/` -> `static-index`.
+const pageRootId = (path: string): string =>
+  `static-${path.replace(/^\//, '').replace(/\//g, '-') || 'index'}`
+
+const route: ViewRoute[] = staticPagesContent.map((page) => ({
+  path: page.path,
+  loaderName: 'static',
+  layout: 'default',
+  metadata: { title: page.title, description: page.description },
+  entry: pageRoot(pageRootId(page.path), ['static.content'], {
+    'static.content': { type: 'StaticContent', props: { sections: page.sections } },
+  }),
+}))
+
+export const staticView: ViewModule = {
+  name: 'static',
+  elements,
+  catalog,
+  registry,
+  route,
+  loader: {
+    static: async () => ({ dataSource: getDataSource(), dataError: null }),
+  },
+}

package/assets/templates/views/static/registry.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+// Thor Commerce view registry fragment: static
+// Client boundary for the static view. The local StaticContent component renders
+// the declared sections with semantic HTML and storefront tokens; it reads no
+// backend data, so it is a pure, Server-Component-safe client component.
+
+import type { ViewRegistry } from '../types'
+import { staticContentPropsSchema, type StaticSection } from './schema'
+
+function Section({ section }: { section: StaticSection }) {
+  switch (section.kind) {
+    case 'heading':
+      return <h2 className="text-2xl font-semibold tracking-tight">{section.text}</h2>
+    case 'paragraph':
+      return <p className="text-muted-foreground leading-relaxed">{section.text}</p>
+    case 'list':
+      return (
+        <ul className="list-disc space-y-1 pl-6">
+          {section.items.map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      )
+    case 'links':
+      return (
+        <ul className="space-y-1">
+          {section.items.map((item, index) => (
+            <li key={index}>
+              <a className="text-primary underline-offset-4 hover:underline" href={item.href}>
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )
+    case 'contact':
+      return (
+        <dl className="space-y-2">
+          {section.entries.map((entry, index) => (
+            <div key={index} className="flex flex-col">
+              <dt className="text-muted-foreground text-sm">{entry.label}</dt>
+              <dd>{entry.value}</dd>
+            </div>
+          ))}
+        </dl>
+      )
+  }
+}
+
+function StaticContent({ sections }: { sections: StaticSection[] }) {
+  return (
+    <div className="mx-auto w-full max-w-3xl px-4 py-12 sm:px-6 lg:px-8 space-y-6">
+      {sections.map((section, index) => (
+        <Section key={index} section={section} />
+      ))}
+    </div>
+  )
+}
+
+export const registry: ViewRegistry = {
+  StaticContent: ({ props }) => {
+    const parsed = staticContentPropsSchema.parse(props)
+    return <StaticContent sections={parsed.sections} />
+  },
+}

package/assets/templates/views/static/schema.ts

@@ -0,0 +1,45 @@
+// Thor Commerce view schema fragment: static
+// Zod contract for content-driven static pages. The user-owned content declares
+// each page (path, title, optional description, ordered sections); the derived
+// index builds one fixed route per page and the client registry renders the
+// sections. Kept free of React and server imports so the Server Component module
+// and the 'use client' registry share one contract.
+
+import { z } from 'zod'
+
+// One rendered block inside a static page. A discriminated union keeps each
+// section's props explicit and lets the registry switch on `kind`.
+export const staticSectionSchema = z.discriminatedUnion('kind', [
+  z.object({ kind: z.literal('heading'), text: z.string() }),
+  z.object({ kind: z.literal('paragraph'), text: z.string() }),
+  z.object({ kind: z.literal('list'), items: z.array(z.string()) }),
+  z.object({
+    kind: z.literal('links'),
+    items: z.array(z.object({ label: z.string(), href: z.string() })),
+  }),
+  z.object({
+    kind: z.literal('contact'),
+    entries: z.array(z.object({ label: z.string(), value: z.string() })),
+  }),
+])
+
+// A declared page: an absolute route path, its document metadata, and the
+// ordered sections to render.
+export const staticPageSchema = z.object({
+  path: z.string().startsWith('/'),
+  title: z.string(),
+  description: z.string().optional(),
+  sections: z.array(staticSectionSchema),
+})
+
+// The user-owned content is a list of pages.
+export const staticPagesContentSchema = z.array(staticPageSchema)
+
+// The props a single `StaticContent` element carries on a route.
+export const staticContentPropsSchema = z.object({
+  sections: z.array(staticSectionSchema),
+})
+
+export type StaticSection = z.infer<typeof staticSectionSchema>
+export type StaticPageContent = z.infer<typeof staticPageSchema>
+export type StaticContentProps = z.infer<typeof staticContentPropsSchema>

package/{skills/sf-view-gen/assets → assets}/templates/views/user-panel/index.tsx

@@ -5,11 +5,11 @@
 // on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "user-panel".
 
 import { getCatalog } from '@thorprovider/runtime/commerce'
-import { z } from 'zod'
 import { pageRoot } from '../../spec/page-root'
 import type { StorefrontElement } from '../../spec/types'
 import type { ViewModule } from '../types'
 import { registry } from './registry'
+import { appShellPropsSchema, orderHistoryPropsSchema } from './schema'
 
 const elements: Record<string, StorefrontElement> = {
   'userPanel.shell': {
@@ -55,73 +55,14 @@ const elements: Record<string, StorefrontElement> = {
   },
 }
 
-const ctaSchema = z.object({ label: z.string(), href: z.string().optional() })
-
-const appShellNavItemSchema = z.object({
-  label: z.string(),
-  href: z.string(),
-  icon: z.enum([
-    'layout-dashboard',
-    'package',
-    'user',
-    'settings',
-    'home',
-    'shopping-cart',
-    'bar-chart-3',
-    'users',
-    'folder-kanban',
-  ]),
-  active: z.boolean().optional(),
-})
-
-const appShellUserSchema = z.object({
-  name: z.string(),
-  email: z.string(),
-  initials: z.string(),
-})
-
-const breadcrumbItemSchema = z.object({
-  label: z.string(),
-  href: z.string().optional(),
-})
-
-const statSchema = z.object({
-  label: z.string(),
-  value: z.string(),
-})
-
-const orderLineSchema = z.object({
-  name: z.string(),
-  image: z.string(),
-  color: z.string(),
-  size: z.string(),
-  quantity: z.number(),
-  price: z.number(),
-  orderDate: z.string(),
-})
-
 const catalog = {
   AppShell: {
-    props: z.object({
-      brandName: z.string().optional(),
-      navGroupLabel: z.string().optional(),
-      navItems: z.array(appShellNavItemSchema).optional(),
-      user: appShellUserSchema.optional(),
-      breadcrumb: z.array(breadcrumbItemSchema).optional(),
-      pageTitle: z.string().optional(),
-      pageDescription: z.string().optional(),
-      action: ctaSchema.optional(),
-      stats: z.array(statSchema).optional(),
-    }),
+    props: appShellPropsSchema,
     slots: ['default'],
     description: 'Panel de cuenta con navegación lateral, cabecera y área de contenido.',
   },
   OrderHistory: {
-    props: z.object({
-      orders: z.array(orderLineSchema),
-      title: z.string().optional(),
-      description: z.string().optional(),
-    }),
+    props: orderHistoryPropsSchema,
     description: 'Historial de pedidos del cliente.',
   },
 }
@@ -155,14 +96,11 @@ export const userPanel: ViewModule = {
         price: product.price,
         orderDate,
       }))
-      const lastOrder = {
-        number: `TC-${placedAt.getFullYear()}0001`,
-        placedAt: placedAt.toISOString(),
-        email: 'cliente@ejemplo.com',
-        status: 'Confirmado',
-        total: lastOrderLines.reduce((sum, line) => sum + line.price * line.quantity, 0),
-      }
-      return { lastOrder, lastOrderLines, orderPlaced: lastOrderLines.length > 0 }
+      // Only lastOrderLines is bound by this view's elements. lastOrder and
+      // orderPlaced belong to the checkout contract (StorefrontOrder shape and
+      // an ISO timestamp); writing demo values in a foreign shape here would
+      // leak into /checkout state and crash CheckoutConfirmation.
+      return { lastOrderLines }
     },
   },
 }

package/{skills/sf-view-gen/assets → assets}/templates/views/user-panel/registry.tsx

@@ -11,31 +11,36 @@ import {
   OrderHistory1 as OrderHistoryBlock,
 } from '@thorprovider/blocks'
 import { useStateStore } from '@json-render/react'
+import { appShellPropsSchema, orderHistoryPropsSchema } from './schema'
 import type { ViewRegistry } from '../types'
 
 export const registry: ViewRegistry = {
-  AppShell: ({ props, children }) => (
-    <AppShellBlock
-      brandName={props.brandName as string}
-      navGroupLabel={props.navGroupLabel as string}
-      navItems={props.navItems as never}
-      user={props.user as never}
-      breadcrumb={props.breadcrumb as never}
-      pageTitle={props.pageTitle as string}
-      pageDescription={props.pageDescription as string}
-      action={props.action as never}
-      stats={props.stats as never}
-    >
-      {children}
-    </AppShellBlock>
-  ),
+  AppShell: ({ props, children }) => {
+    const parsed = appShellPropsSchema.parse(props)
+    return (
+      <AppShellBlock
+        brandName={parsed.brandName}
+        navGroupLabel={parsed.navGroupLabel}
+        navItems={parsed.navItems}
+        user={parsed.user}
+        breadcrumb={parsed.breadcrumb}
+        pageTitle={parsed.pageTitle}
+        pageDescription={parsed.pageDescription}
+        action={parsed.action}
+        stats={parsed.stats}
+      >
+        {children}
+      </AppShellBlock>
+    )
+  },
   OrderHistory: ({ props, emit }) => {
+    const parsed = orderHistoryPropsSchema.parse(props)
     const { set } = useStateStore()
     return (
       <OrderHistoryBlock
-        orders={props.orders as never}
-        title={props.title as string}
-        description={props.description as string}
+        orders={parsed.orders}
+        title={parsed.title}
+        description={parsed.description}
         onViewDetails={() => {
           set('/orderDetailsOpen', true)
           emit('viewOrder')

package/assets/templates/views/user-panel/schema.ts

@@ -0,0 +1,79 @@
+// Thor Commerce view schema fragment: user-panel
+// Zod mirrors of the block contracts for this view — the single source for the
+// catalog entries and the client-side registry parsing (json-render does not
+// validate props against the catalog itself, so the registry parses here).
+// Kept free of React and server imports so the Server Component module and the
+// 'use client' registry can share one contract.
+
+import { z } from 'zod'
+
+export const ctaSchema = z.object({ label: z.string(), href: z.string().optional() })
+
+// Mirrors the AppShell1NavItem block contract: `icon` is a NAME of the
+// AppShell1NavIcon set — the block resolves it to a component internally.
+export const appShellNavItemSchema = z.object({
+  label: z.string(),
+  href: z.string(),
+  icon: z.enum([
+    'layout-dashboard',
+    'package',
+    'user',
+    'settings',
+    'home',
+    'shopping-cart',
+    'bar-chart-3',
+    'users',
+    'folder-kanban',
+  ]),
+  active: z.boolean().optional(),
+})
+
+export const appShellUserSchema = z.object({
+  name: z.string(),
+  email: z.string(),
+  initials: z.string(),
+})
+
+export const breadcrumbItemSchema = z.object({
+  label: z.string(),
+  href: z.string().optional(),
+})
+
+export const statSchema = z.object({
+  label: z.string(),
+  value: z.string(),
+})
+
+// Mirrors the OrderHistory1Order block contract.
+export const orderLineSchema = z.object({
+  name: z.string(),
+  image: z.string(),
+  color: z.string(),
+  size: z.string(),
+  quantity: z.number(),
+  price: z.number(),
+  orderDate: z.string(),
+})
+
+export const appShellPropsSchema = z.object({
+  brandName: z.string().optional(),
+  navGroupLabel: z.string().optional(),
+  navItems: z.array(appShellNavItemSchema).optional(),
+  user: appShellUserSchema.optional(),
+  breadcrumb: z.array(breadcrumbItemSchema).optional(),
+  pageTitle: z.string().optional(),
+  pageDescription: z.string().optional(),
+  action: ctaSchema.optional(),
+  stats: z.array(statSchema).optional(),
+})
+
+export const orderHistoryPropsSchema = z.object({
+  orders: z.array(orderLineSchema),
+  title: z.string().optional(),
+  description: z.string().optional(),
+})
+
+export type AppShellNavItem = z.infer<typeof appShellNavItemSchema>
+export type AppShellProps = z.infer<typeof appShellPropsSchema>
+export type OrderLine = z.infer<typeof orderLineSchema>
+export type OrderHistoryProps = z.infer<typeof orderHistoryPropsSchema>