@thorprovider/storefront 0.3.1 → 0.4.0-mvp.2

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

@@ -1,192 +0,0 @@
-// 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

@@ -1,45 +0,0 @@
-'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

@@ -1,122 +0,0 @@
-// 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

@@ -1,49 +0,0 @@
-'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/user-panel/index.tsx

@@ -1,168 +0,0 @@
-// Thor Commerce view module: user-panel
-// 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 -> "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'
-
-const elements: Record<string, StorefrontElement> = {
-  'userPanel.shell': {
-    type: 'AppShell',
-    props: {
-      brandName: '__SITE_NAME__',
-      navGroupLabel: 'Mi cuenta',
-      navItems: [
-        { label: 'Mis pedidos', href: '/cuenta', icon: 'package', active: true },
-        { label: 'Mi perfil', href: '/cuenta/perfil', icon: 'user' },
-        { label: 'Ajustes', href: '/cuenta/ajustes', icon: 'settings' },
-      ],
-      user: {
-        name: 'Cliente Demo',
-        email: 'cliente@ejemplo.com',
-        initials: 'CD',
-      },
-      breadcrumb: [
-        { label: 'Inicio', href: '/' },
-        { label: 'Mi cuenta' },
-      ],
-      pageTitle: 'Mi cuenta',
-      pageDescription: 'Consulta tus pedidos recientes y gestiona tu cuenta.',
-      action: { label: 'Seguir comprando', href: '/' },
-      stats: [
-        { label: 'Pedidos', value: '1' },
-        { label: 'Estado', value: 'Confirmado' },
-      ],
-    },
-    children: ['userPanel.orderHistory'],
-  },
-  'userPanel.orderHistory': {
-    type: 'OrderHistory',
-    props: {
-      orders: { $state: '/lastOrderLines' },
-      title: 'Historial de pedidos',
-      description: 'Tus compras recientes y su estado.',
-    },
-    on: {
-      viewOrder: { action: 'viewOrder' },
-      downloadInvoice: { action: 'downloadInvoice' },
-    },
-  },
-}
-
-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(),
-    }),
-    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(),
-    }),
-    description: 'Historial de pedidos del cliente.',
-  },
-}
-
-export const userPanel: ViewModule = {
-  name: 'user-panel',
-  elements,
-  catalog,
-  registry,
-  route: {
-    path: '/cuenta',
-    loaderName: 'userPanel',
-    layout: 'default',
-    metadata: {
-      title: 'Mi cuenta',
-      description: 'Consulta tu historial de pedidos y gestiona tu cuenta.',
-    },
-    entry: pageRoot('userPanel', ['userPanel.shell'], elements),
-  },
-  loader: {
-    userPanel: async () => {
-      const { products } = await getCatalog()
-      const placedAt = new Date()
-      const orderDate = placedAt.toISOString().slice(0, 10)
-      const lastOrderLines = products.slice(0, 3).map((product, index) => ({
-        name: product.title,
-        image: product.image,
-        color: 'Estándar',
-        size: 'Único',
-        quantity: index + 1,
-        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 }
-    },
-  },
-}

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

@@ -1,49 +0,0 @@
-'use client'
-
-// Thor Commerce view registry fragment: user-panel
-// Client boundary for the user-panel 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 {
-  AppShell1 as AppShellBlock,
-  OrderHistory1 as OrderHistoryBlock,
-} from '@thorprovider/blocks'
-import { useStateStore } from '@json-render/react'
-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>
-  ),
-  OrderHistory: ({ props, emit }) => {
-    const { set } = useStateStore()
-    return (
-      <OrderHistoryBlock
-        orders={props.orders as never}
-        title={props.title as string}
-        description={props.description as string}
-        onViewDetails={() => {
-          set('/orderDetailsOpen', true)
-          emit('viewOrder')
-        }}
-        onDownloadInvoice={() => {
-          emit('downloadInvoice')
-        }}
-      />
-    )
-  },
-}