@thorprovider/storefront 0.3.1

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

@@ -0,0 +1,142 @@
+// Thor Commerce view module: home
+// Server Component module: elements + catalog entries + route + loader only.
+// The client-side component mappings live in ./registry.tsx ('use client'); this
+// module imports them as data so the RSC graph never evaluates @json-render/react
+// on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "home".
+
+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 { toFeaturedProduct } from '../../mappers'
+
+const elements: Record<string, StorefrontElement> = {
+  'home.hero': {
+    type: 'StorefrontHero',
+    props: {
+      badge: 'Bienvenido',
+      title: '__SITE_NAME__',
+      titleAccent: 'para cada proyecto',
+      description: 'Productos seleccionados con precios justos y entrega a tu puerta.',
+      products: { $state: '/heroProducts' },
+      primaryCta: { label: 'Comprar ahora' },
+      secondaryCta: { label: 'Ver categorías' },
+    },
+    on: { addToCart: { action: 'addToCart' }, openProduct: { action: 'openProduct' } },
+  },
+  'home.benefits': {
+    type: 'Feature',
+    props: {
+      badge: '__SITE_NAME__',
+      title: 'Compra con confianza',
+      description: 'Beneficios pensados para que tu compra llegue segura y a tiempo.',
+      items: [
+        {
+          id: 'entrega',
+          title: 'Entrega segura',
+          description: 'Seguimiento de tu pedido hasta la puerta de tu casa.',
+          icon: 'truck',
+        },
+        {
+          id: 'pago',
+          title: 'Pago protegido',
+          description: 'Compra con confianza, múltiples opciones de pago.',
+          icon: 'shield-check',
+        },
+        {
+          id: 'soporte',
+          title: 'Soporte local',
+          description: 'Atención personalizada en todo el país.',
+          icon: 'headphones',
+        },
+      ],
+    },
+  },
+  'home.categories': {
+    type: 'CategoryCards',
+    props: {
+      title: 'Compra por categoría',
+      description: 'Explora nuestro catálogo completo.',
+      categories: { $state: '/categories' },
+    },
+    on: { openCategory: { action: 'openCategory' } },
+  },
+}
+
+const ctaSchema = z.object({ label: z.string(), href: z.string().optional() })
+
+// Mirrors the StorefrontHero block contract (FeaturedProduct) so a product-shape
+// mismatch is a type error at the catalog boundary, not a runtime crash. The
+// block requires every field — including `colors` — to be defined at render.
+const featuredProductSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  brand: z.string(),
+  price: z.number(),
+  originalPrice: z.number(),
+  rating: z.number(),
+  reviewCount: z.number(),
+  inStock: z.boolean(),
+  isNew: z.boolean(),
+  isOnSale: z.boolean(),
+  image: z.string(),
+  colors: z.array(z.string()),
+})
+
+const catalog = {
+  StorefrontHero: {
+    props: z.object({
+      title: z.string(),
+      description: z.string(),
+      titleAccent: z.string().optional(),
+      badge: z.string().optional(),
+      products: z.array(featuredProductSchema),
+      primaryCta: ctaSchema.optional(),
+      secondaryCta: ctaSchema.optional(),
+    }),
+    description: 'Landing hero.',
+  },
+  Feature: {
+    props: z.object({
+      items: z.array(z.record(z.string(), z.unknown())),
+      badge: z.string().optional(),
+      title: z.string().optional(),
+      description: z.string().optional(),
+    }),
+    description: 'Benefit highlights.',
+  },
+  CategoryCards: {
+    props: z.object({
+      title: z.string().optional(),
+      description: z.string().optional(),
+      categories: z.array(z.record(z.string(), z.unknown())),
+      cta: ctaSchema.optional(),
+    }),
+    description: 'Category grid.',
+  },
+}
+
+export const home: ViewModule = {
+  name: 'home',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/',
+    loaderName: 'home',
+    layout: 'default',
+    metadata: {
+      title: 'Inicio',
+      description: 'Descubre los productos de __SITE_NAME__.',
+    },
+    entry: pageRoot('home', ['home.hero', 'home.benefits', 'home.categories'], elements),
+  },
+  loader: {
+    home: async () => {
+      const { products, categories } = await getCatalog()
+      return { heroProducts: products.slice(0, 4).map(toFeaturedProduct), categories }
+    },
+  },
+}

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

@@ -0,0 +1,65 @@
+'use client'
+
+// Thor Commerce view registry fragment: home
+// Client boundary for the home view. Imports value bindings from
+// @json-render/react and components from @thorprovider/blocks — both must stay
+// on the client side of the RSC graph. Kept separate from index.tsx so the view
+// spec (elements/catalog/route/loader) stays a pure Server Component module.
+
+import {
+  Feature1 as FeatureBlock,
+  ProductCategory2 as CategoryCardsBlock,
+  StorefrontHero1 as StorefrontHeroBlock,
+} from '@thorprovider/blocks'
+import type { FeaturedProduct } from '@thorprovider/blocks'
+import { useStateStore } from '@json-render/react'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  StorefrontHero: ({ props, emit }) => {
+    const { set } = useStateStore()
+    return (
+      <StorefrontHeroBlock
+        title={props.title as string}
+        description={props.description as string}
+        products={props.products as FeaturedProduct[]}
+        titleAccent={props.titleAccent as string}
+        badge={props.badge as string}
+        primaryCta={props.primaryCta as never}
+        secondaryCta={props.secondaryCta as never}
+        onAddToCart={(product) => {
+          set('/lastClicked', product)
+          emit('addToCart')
+        }}
+        onBuyNow={(product) => {
+          set('/lastClicked', product)
+          emit('openProduct')
+        }}
+        onSelectColor={() => {}}
+      />
+    )
+  },
+  Feature: ({ props }) => (
+    <FeatureBlock
+      items={props.items as never}
+      badge={props.badge as string}
+      title={props.title as string}
+      description={props.description as string}
+    />
+  ),
+  CategoryCards: ({ props, emit }) => {
+    const { set } = useStateStore()
+    return (
+      <CategoryCardsBlock
+        title={props.title as string}
+        description={props.description as string}
+        categories={props.categories as never}
+        cta={props.cta as never}
+        onBrowse={(category) => {
+          set('/lastCategory', (category.handle as string) ?? String(category.id))
+          emit('openCategory')
+        }}
+      />
+    )
+  },
+}