@thorprovider/storefront 0.3.1

package/skills/sf-view-gen/assets/templates/views/checkout/index.tsx

@@ -0,0 +1,192 @@
+// Thor Commerce view module: checkout
+// 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 -> "checkout".
+
+import {
+  getPaymentMethodsByRegion,
+  getRegionCountries,
+} 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'
+
+const elements: Record<string, StorefrontElement> = {
+  'checkout.view': {
+    type: 'Checkout',
+    visible: { $state: '/lastOrder', not: true },
+    props: {
+      title: 'Finalizar compra',
+      description: 'Completa tus datos para recibir tu pedido.',
+      orderSummary: {
+        items: { $state: '/cart' },
+        shipping: { $state: '/cartTotals/shipping' },
+        tax: { $state: '/cartTotals/tax' },
+        discount: { $state: '/cartTotals/discount' },
+        promoDiscount: { $state: '/cartTotals/promoDiscount' },
+      },
+      countries: { $state: '/checkoutCountries' },
+      paymentMethods: { $state: '/checkoutPaymentMethods' },
+      values: {
+        email: { $state: '/checkout/email' },
+        firstName: { $state: '/checkout/firstName' },
+        lastName: { $state: '/checkout/lastName' },
+        phone: { $state: '/checkout/phone' },
+        address: { $state: '/checkout/address' },
+        city: { $state: '/checkout/city' },
+        state: { $state: '/checkout/state' },
+        zipCode: { $state: '/checkout/zipCode' },
+        country: { $state: '/checkout/country' },
+        paymentMethod: { $state: '/checkout/paymentMethod' },
+        cardNumber: { $state: '/checkout/cardNumber' },
+        expiryDate: { $state: '/checkout/expiryDate' },
+        cvv: { $state: '/checkout/cvv' },
+        cardName: { $state: '/checkout/cardName' },
+        saveInfo: { $state: '/checkout/saveInfo' },
+        sameAsBilling: { $state: '/checkout/sameAsBilling' },
+        newsletter: { $state: '/checkout/newsletter' },
+        promoCode: { $state: '/checkout/promoCode' },
+      },
+      validation: {
+        email: {
+          validateOn: 'blur',
+          checks: [
+            { type: 'required', message: 'Ingresa tu correo electrónico.' },
+            { type: 'email', message: 'Ingresa un correo válido.' },
+          ],
+        },
+        firstName: {
+          checks: [{ type: 'required', message: 'Ingresa tu nombre.' }],
+        },
+        lastName: {
+          checks: [{ type: 'required', message: 'Ingresa tus apellidos.' }],
+        },
+        phone: {
+          checks: [
+            {
+              type: 'pattern',
+              args: { pattern: '^[+]?[0-9]{7,15}$' },
+              message: 'Ingresa un teléfono válido.',
+            },
+          ],
+        },
+        address: {
+          checks: [{ type: 'required', message: 'Ingresa tu dirección.' }],
+        },
+        city: {
+          checks: [{ type: 'required', message: 'Ingresa la ciudad.' }],
+        },
+        state: {
+          checks: [{ type: 'required', message: 'Ingresa la provincia.' }],
+        },
+        country: {
+          checks: [{ type: 'required', message: 'Selecciona tu país.' }],
+        },
+        zipCode: {
+          checks: [
+            { type: 'required', message: 'Ingresa el código postal.' },
+            {
+              type: 'pattern',
+              args: { pattern: '^[0-9]{4,5}$' },
+              message: 'Código postal inválido.',
+            },
+          ],
+        },
+        paymentMethod: {
+          checks: [{ type: 'required', message: 'Selecciona un método de pago.' }],
+        },
+      },
+      fieldDescriptions: {
+        email: 'Usaremos este correo para el seguimiento del pedido.',
+        phone: 'Te contactaremos para coordinar la entrega.',
+        promoCode: 'Aplica códigos promocionales válidos.',
+      },
+    },
+    on: { placeOrder: { action: 'placeOrder' } },
+  },
+  'checkout.confirmation': {
+    type: 'CheckoutConfirmation',
+    visible: { $state: '/lastOrder' },
+    props: {
+      order: { $state: '/lastOrder' },
+      orderLines: { $state: '/lastOrderLines' },
+      fulfilmentDetails: {
+        Confirmed: {
+          stage: 'Confirmed',
+          summary: 'Pago autorizado y el pedido fue enviado a preparación.',
+          location: 'Centro de distribución',
+          at: { $state: '/orderPlaced' },
+        },
+        Packed: {
+          stage: 'Packed',
+          summary: 'Los artículos fueron seleccionados y empacados.',
+          location: 'Centro de distribución',
+          at: null,
+        },
+        Shipped: {
+          stage: 'Shipped',
+          summary: 'El paquete fue entregado al transportista.',
+          location: 'En tránsito',
+          at: null,
+        },
+        Delivered: {
+          stage: 'Delivered',
+          summary: 'Entregado en tu dirección.',
+          location: 'Tu dirección',
+          at: null,
+        },
+      },
+    },
+    on: { continueShopping: { action: 'continueShopping' } },
+  },
+}
+
+const catalog = {
+  Checkout: {
+    props: z.record(z.string(), z.unknown()),
+    description: 'Checkout form with order summary, shipping and payment steps.',
+  },
+  CheckoutConfirmation: {
+    props: z.record(z.string(), z.unknown()),
+    description: 'Order confirmation with fulfilment progress.',
+  },
+}
+
+export const checkout: ViewModule = {
+  name: 'checkout',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/checkout',
+    loaderName: 'checkout',
+    layout: 'default',
+    metadata: {
+      title: 'Finalizar compra',
+      description: 'Completa tus datos de envío y pago para recibir tu pedido.',
+    },
+    entry: pageRoot(
+      'checkout',
+      ['checkout.view', 'checkout.confirmation'],
+      elements,
+    ),
+  },
+  loader: {
+    checkout: async () => {
+      const [countries, paymentMethods] = await Promise.all([
+        getRegionCountries(),
+        getPaymentMethodsByRegion(),
+      ])
+      return {
+        checkoutCountries: countries.map((country) => ({
+          value: country.code,
+          label: country.name,
+        })),
+        checkoutPaymentMethods: paymentMethods,
+      }
+    },
+  },
+}

package/skills/sf-view-gen/assets/templates/views/checkout/registry.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+// Thor Commerce view registry fragment: checkout
+// Client boundary for the checkout 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 {
+  CheckoutForm1 as CheckoutBlock,
+  CheckoutConfirmation as CheckoutConfirmationBlock,
+} from '@thorprovider/blocks'
+import { useStateStore } from '@json-render/react'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  Checkout: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    return (
+      <CheckoutBlock
+        title={props.title as string}
+        description={props.description as string}
+        orderSummary={props.orderSummary as never}
+        countries={props.countries as never}
+        paymentMethods={props.paymentMethods as never}
+        values={props.values as never}
+        fieldDescriptions={props.fieldDescriptions as never}
+        onChange={(field, value) => set(`/checkout/${field}`, value)}
+        onSubmit={() => emit('placeOrder')}
+        submitting={Boolean(state.checkoutPending)}
+        submitError={(state.checkoutError as string | null) ?? undefined}
+      />
+    )
+  },
+  CheckoutConfirmation: ({ props, emit }) =>
+    props.order ? (
+      <CheckoutConfirmationBlock
+        order={props.order as never}
+        orderLines={props.orderLines as never}
+        fulfilmentDetails={props.fulfilmentDetails as never}
+        continueShoppingHref="#"
+        onContinueShopping={() => emit('continueShopping')}
+      />
+    ) : null,
+}

package/skills/sf-view-gen/assets/templates/views/product/index.tsx

@@ -0,0 +1,122 @@
+// Thor Commerce view module: product
+// 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 -> "product".
+
+import { getProductByHandle } 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'
+
+const elements: Record<string, StorefrontElement> = {
+  'product.overview': {
+    type: 'ProductOverview',
+    props: {
+      product: { $state: '/selectedProduct' },
+    },
+    on: { addToCart: { action: 'addToCart' } },
+  },
+  'product.reviews': {
+    type: 'Reviews',
+    props: {
+      pageTitle: 'Opiniones de clientes',
+      pageDescription: 'Lo que dicen quienes ya compraron este producto.',
+      reviews: [
+        {
+          id: 1,
+          userName: 'Carlos M.',
+          date: '2026-07-12',
+          rating: 5,
+          content: 'Excelente calidad y llegó antes de lo esperado. Muy buena compra.',
+          likes: 12,
+          comments: 2,
+        },
+        {
+          id: 2,
+          userName: 'Ana R.',
+          date: '2026-07-03',
+          rating: 4,
+          content: 'Funciona muy bien y la atención fue rápida. Lo recomiendo.',
+          likes: 7,
+          comments: 1,
+        },
+        {
+          id: 3,
+          userName: 'Luis P.',
+          date: '2026-06-28',
+          rating: 5,
+          content: 'Producto robusto, tal como aparece en la descripción.',
+          likes: 5,
+          comments: 0,
+        },
+      ],
+      form: {
+        title: 'Deja tu opinión',
+        description: 'Tu experiencia ayuda a otros clientes.',
+        nameLabel: 'Nombre',
+        emailLabel: 'Correo electrónico',
+        reviewLabel: 'Tu reseña',
+        namePlaceholder: 'Tu nombre',
+        emailPlaceholder: 'tucorreo@ejemplo.cu',
+        reviewPlaceholder: 'Cuéntanos tu experiencia...',
+        submitButtonText: 'Publicar reseña',
+        submittingButtonText: 'Publicando...',
+      },
+      reviewsPerPage: 3,
+    },
+    on: {
+      submitReview: { action: 'submitReview' },
+      toggleReviewLike: { action: 'toggleReviewLike' },
+    },
+  },
+}
+
+const catalog = {
+  ProductOverview: {
+    props: z.object({
+      product: z.record(z.string(), z.unknown()),
+      sizesLabel: z.string().optional(),
+      colorLabel: z.string().optional(),
+      reviewsLabel: z.string().optional(),
+      addToCartLabel: z.string().optional(),
+    }),
+    description: 'Detalle de producto: galería, precio, variantes y añadir al carrito.',
+  },
+  Reviews: {
+    props: z.object({
+      pageTitle: z.string().optional(),
+      pageDescription: z.string().optional(),
+      reviews: z.array(z.record(z.string(), z.unknown())),
+      form: z.record(z.string(), z.unknown()).optional(),
+      reviewsPerPage: z.number().optional(),
+    }),
+    description: 'Opiniones de clientes con resumen de valoración.',
+  },
+}
+
+export const product: ViewModule = {
+  name: 'product',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/productos/[id]',
+    loaderName: 'product',
+    layout: 'default',
+    metadata: {
+      title: 'Producto',
+      description: 'Detalles del producto seleccionado.',
+    },
+    entry: pageRoot('product', ['product.overview', 'product.reviews'], elements),
+  },
+  loader: {
+    product: async (params) => {
+      const id = Array.isArray(params.id) ? params.id[0] : params.id
+      const selectedProduct = await getProductByHandle(String(id))
+      return { selectedProduct }
+    },
+  },
+}

package/skills/sf-view-gen/assets/templates/views/product/registry.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+// Thor Commerce view registry fragment: product
+// Client boundary for the product 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 {
+  ProductOverview1 as ProductOverviewBlock,
+  ReviewRating1 as ReviewsBlock,
+} from '@thorprovider/blocks'
+import { useStateStore } from '@json-render/react'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  ProductOverview: ({ props, emit }) => {
+    const { set } = useStateStore()
+    return (
+      <ProductOverviewBlock
+        product={props.product as never}
+        onAddToCart={(product) => {
+          set('/lastClicked', product)
+          emit('addToCart')
+        }}
+        onToggleWishlist={() => {}}
+      />
+    )
+  },
+  Reviews: ({ props, emit }) => {
+    const { set } = useStateStore()
+    return (
+      <ReviewsBlock
+        pageTitle={props.pageTitle as string}
+        pageDescription={props.pageDescription as string}
+        reviews={props.reviews as never}
+        form={props.form as never}
+        reviewsPerPage={props.reviewsPerPage as number}
+        onToggleReviewLike={() => {
+          emit('toggleReviewLike')
+        }}
+        onSubmitReview={(data) => {
+          set('/lastReview', data)
+          emit('submitReview')
+        }}
+      />
+    )
+  },
+}

package/skills/sf-view-gen/assets/templates/views/sections/faq.client.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+// Optional section fragment: faq (mirrors recipes/sections.json) — client registry.
+// The matching server-side catalog lives in faq.tsx. @thorprovider/blocks ships a
+// 'use client' boundary, but this fragment keeps the explicit client boundary so
+// the section composes identically in any consumer graph.
+
+import { FaqBlock1 as FaqBlock } from '@thorprovider/blocks'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  Faq: ({ props }) => (
+    <FaqBlock
+      title={(props.title as string) ?? 'Preguntas frecuentes'}
+      description={props.description as string}
+      items={props.items as never}
+      accordionType={(props.accordionType as 'single' | 'multiple') ?? 'single'}
+    />
+  ),
+}

package/skills/sf-view-gen/assets/templates/views/sections/faq.tsx

@@ -0,0 +1,21 @@
+// Optional section fragment: faq (mirrors recipes/sections.json)
+// Server-side part: element type + zod catalog entry. The component mappings
+// live in faq.client.tsx ('use client') and are composed via composeSections.
+
+import { z } from 'zod'
+
+export const faqSection = {
+  elementType: 'Faq',
+  catalog: {
+    Faq: {
+      props: z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+        items: z.array(z.record(z.string(), z.unknown())),
+        accordionType: z.enum(['single', 'multiple']).optional(),
+      }),
+      description: 'Frequently asked questions accordion.',
+    },
+  },
+  registryModule: './faq.client',
+}

package/skills/sf-view-gen/assets/templates/views/sections/logoCloud.client.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+// Optional section fragment: logoCloud (mirrors recipes/sections.json) — client registry.
+// The matching server-side catalog entry lives in logoCloud.tsx.
+
+import { LogoCloud1 as LogoCloudBlock } from '@thorprovider/blocks'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  LogoCloud: ({ props }) => (
+    <LogoCloudBlock
+      title={(props.title as string) ?? 'Marcas que confían en nosotros'}
+      description={props.description as string}
+      moreLabel={props.moreLabel as string}
+      platforms={props.platforms as never}
+    />
+  ),
+}

package/skills/sf-view-gen/assets/templates/views/sections/logoCloud.tsx

@@ -0,0 +1,21 @@
+// Optional section fragment: logoCloud (mirrors recipes/sections.json)
+// Server-side part: element type + zod catalog entry. The component mappings
+// live in logoCloud.client.tsx ('use client').
+
+import { z } from 'zod'
+
+export const logoCloudSection = {
+  elementType: 'LogoCloud',
+  catalog: {
+    LogoCloud: {
+      props: z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+        moreLabel: z.string().optional(),
+        platforms: z.array(z.record(z.string(), z.unknown())),
+      }),
+      description: 'Brand or partner logo strip.',
+    },
+  },
+  registryModule: './logoCloud.client',
+}

package/skills/sf-view-gen/assets/templates/views/sections/pricing.client.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+// Optional section fragment: pricing (mirrors recipes/sections.json) — client registry.
+// The matching server-side catalog entry lives in pricing.tsx.
+
+import { PricingSection1 as PricingBlock } from '@thorprovider/blocks'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  Pricing: ({ props }) => (
+    <PricingBlock
+      sectionTitle={(props.sectionTitle as string) ?? 'Planes y precios'}
+      sectionLabel={props.sectionLabel as string}
+      currencySymbol={props.currencySymbol as string}
+      popularBadgeLabel={(props.popularBadgeLabel as string) ?? 'Popular'}
+      getStartedLabel={(props.getStartedLabel as string) ?? 'Empezar'}
+      tiers={props.tiers as never}
+    />
+  ),
+}

package/skills/sf-view-gen/assets/templates/views/sections/pricing.tsx

@@ -0,0 +1,23 @@
+// Optional section fragment: pricing (mirrors recipes/sections.json)
+// Server-side part: element type + zod catalog entry. The component mappings
+// live in pricing.client.tsx ('use client').
+
+import { z } from 'zod'
+
+export const pricingSection = {
+  elementType: 'Pricing',
+  catalog: {
+    Pricing: {
+      props: z.object({
+        sectionTitle: z.string().optional(),
+        sectionLabel: z.string().optional(),
+        currencySymbol: z.string().optional(),
+        popularBadgeLabel: z.string().optional(),
+        getStartedLabel: z.string().optional(),
+        tiers: z.array(z.record(z.string(), z.unknown())),
+      }),
+      description: 'Pricing tiers or plans.',
+    },
+  },
+  registryModule: './pricing.client',
+}

package/skills/sf-view-gen/assets/templates/views/sections/statistics.client.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+// Optional section fragment: statistics (mirrors recipes/sections.json) — client registry.
+// The matching server-side catalog entry lives in statistics.tsx.
+
+import { Statistic1 as StatisticBlock } from '@thorprovider/blocks'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  Statistics: ({ props }) => (
+    <StatisticBlock
+      badge={props.badge as string}
+      title={(props.title as string) ?? 'Números que nos respaldan'}
+      description={props.description as string}
+      items={props.items as never}
+    />
+  ),
+}

package/skills/sf-view-gen/assets/templates/views/sections/statistics.tsx

@@ -0,0 +1,21 @@
+// Optional section fragment: statistics (mirrors recipes/sections.json)
+// Server-side part: element type + zod catalog entry. The component mappings
+// live in statistics.client.tsx ('use client').
+
+import { z } from 'zod'
+
+export const statisticsSection = {
+  elementType: 'Statistics',
+  catalog: {
+    Statistics: {
+      props: z.object({
+        title: z.string().optional(),
+        badge: z.string().optional(),
+        description: z.string().optional(),
+        items: z.array(z.record(z.string(), z.unknown())),
+      }),
+      description: 'Key metrics or trust statistics.',
+    },
+  },
+  registryModule: './statistics.client',
+}

package/skills/sf-view-gen/assets/templates/views/sections/testimonials.client.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+// Optional section fragment: testimonials (mirrors recipes/sections.json) — client registry.
+// The matching server-side catalog entry lives in testimonials.tsx.
+
+import { Testimonial1 as TestimonialBlock } from '@thorprovider/blocks'
+import type { ViewRegistry } from '../types'
+
+export const registry: ViewRegistry = {
+  Testimonials: ({ props }) => (
+    <TestimonialBlock
+      title={(props.title as string) ?? 'Lo que dicen nuestros clientes'}
+      items={props.items as never}
+      prevLabel={(props.prevLabel as string) ?? 'Anterior'}
+      nextLabel={(props.nextLabel as string) ?? 'Siguiente'}
+      slideAriaLabel={(props.slideAriaLabel as string) ?? 'Testimonio'}
+    />
+  ),
+}

package/skills/sf-view-gen/assets/templates/views/sections/testimonials.tsx

@@ -0,0 +1,19 @@
+// Optional section fragment: testimonials (mirrors recipes/sections.json)
+// Server-side part: element type + zod catalog entry. The component mappings
+// live in testimonials.client.tsx ('use client').
+
+import { z } from 'zod'
+
+export const testimonialsSection = {
+  elementType: 'Testimonials',
+  catalog: {
+    Testimonials: {
+      props: z.object({
+        title: z.string().optional(),
+        items: z.array(z.record(z.string(), z.unknown())),
+      }),
+      description: 'Customer testimonials or social proof.',
+    },
+  },
+  registryModule: './testimonials.client',
+}