@thorprovider/storefront 0.3.1

package/assets/templates/app/lib/__STOREFRONT__/handlers.ts

@@ -0,0 +1,42 @@
+'use client'
+
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/handlers.ts)
+// Registers json-render action handlers. Recipe-added views extend this file.
+
+import { useEffect } from 'react'
+import { useActions, useStateStore } from '@json-render/react'
+import { useNextApp } from '@json-render/next'
+
+export function useStorefrontHandlers() {
+  const { set } = useStateStore()
+  const { navigate } = useNextApp()
+  const { registerHandler } = useActions()
+
+  useEffect(() => {
+    const handlers: Record<string, () => void> = {
+      addToCart: () => {},
+      openCart: () => {},
+      openProduct: () => navigate('/productos'),
+      openCategory: () => {
+        const handle = ''
+        navigate(handle ? `/categorias/${handle}` : '/categorias')
+      },
+      goHome: () => navigate('/'),
+      applyFilters: () => {},
+      placeOrder: () => navigate('/checkout'),
+      continueShopping: () => navigate('/'),
+      viewOrder: () => {},
+      downloadInvoice: () => {},
+      submitReview: () => {},
+      toggleReviewLike: () => {},
+      newsletterSubmit: () => {},
+    }
+
+    for (const [name, handler] of Object.entries(handlers)) {
+      registerHandler(name, handler)
+    }
+    void set
+    // registerHandler uses functional state updates; store/navigate captured once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

package/assets/templates/app/lib/__STOREFRONT__/mappers.ts

@@ -0,0 +1,47 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/mappers.ts)
+// Data adapters between the storefront's canonical shapes and the block contracts.
+// Kept out of the views so a view module stays a pure server spec; mappers are
+// data-only and imported where the loader builds block props.
+
+import type { CardProduct, FeaturedProduct, ProductCategory2Category } from '@thorprovider/blocks'
+import type { ProductCategory } from '@thorprovider/types'
+
+export const CATEGORY_IMAGE_FALLBACK =
+  "data:image/svg+xml;charset=utf-8," +
+  encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='600' height='480'><rect width='100%' height='100%' fill='#e2e8f0'/><g fill='none' stroke='#94a3b8' stroke-width='12' stroke-linecap='round'><path d='M120 240h360M300 120v240'/><path d='M200 180h50M200 240h50M200 300h50'/><path d='M350 180h50M350 240h50M350 300h50'/></g></svg>`,
+  )
+
+/** CardProduct → FeaturedProduct (storefront-hero), with defaults for the fields
+ *  the card canon does not carry. The hero block requires every featured field
+ *  (including `colors`) to be defined at render time. */
+export function toFeaturedProduct(card: CardProduct): FeaturedProduct {
+  return {
+    id: String(card.id),
+    name: card.title,
+    brand: '',
+    price: card.price,
+    originalPrice: card.originalPrice ?? card.price,
+    rating: 0,
+    reviewCount: 0,
+    inStock: true,
+    isNew: false,
+    isOnSale: Boolean(card.originalPrice),
+    image: card.image ?? '',
+    colors: [],
+  }
+}
+
+/** ProductCategory (types canon) → ProductCategory2Category (block), with
+ *  fallbacks for description, image, and itemCount the backend may omit. */
+export function toCategoryCard(category: ProductCategory): ProductCategory2Category {
+  return {
+    id: category.id,
+    handle: category.handle,
+    name: category.name,
+    description: category.description ?? '',
+    itemCount: category.productCount ?? 0,
+    image: category.image ?? category.metadata?.image ?? CATEGORY_IMAGE_FALLBACK,
+    trending: false,
+  }
+}

package/assets/templates/app/lib/__STOREFRONT__/registry.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/registry.tsx)
+// Base registry for the app shell plus every registered view's registry fragment.
+
+import type { Components } from '@json-render/react'
+import { defineRegistry, useStateStore } from '@json-render/react'
+import { Navbar1, ProductCard1 } from '@thorprovider/blocks'
+import { catalog } from './catalog'
+import { useStorefrontHandlers } from './handlers'
+import { views } from './views'
+
+const baseComponents = {
+  Layout: ({ children }: { children?: React.ReactNode }) => {
+    useStorefrontHandlers()
+    return <div className="flex min-h-screen flex-col">{children}</div>
+  },
+  Navbar: ({ props, emit }: { props: Record<string, unknown>; emit: (event: string) => void }) => (
+    <Navbar1
+      navLinks={props.navLinks as never}
+      logoText={props.logoText as string}
+      logoHref={props.logoHref as string}
+      currentPath={props.currentPath as string}
+      signIn={props.signIn as never}
+      cta={props.cta as never}
+      cartCount={props.cartCount as number}
+      onOpenCart={() => emit('openCart')}
+    />
+  ),
+  ProductCard: ({
+    props,
+    emit,
+  }: {
+    props: Record<string, unknown>
+    emit: (event: string) => void
+  }) => {
+    const { set } = useStateStore()
+    const select = (product: unknown) => {
+      set('/lastClicked', product)
+    }
+    return (
+      <ProductCard1
+        products={props.products as never}
+        heading={props.heading as string}
+        maxItems={props.maxItems as number}
+        onAddToCart={(product) => {
+          select(product)
+          emit('addToCart')
+        }}
+        onProductClick={(product) => {
+          select(product)
+          emit('openProduct')
+        }}
+      />
+    )
+  },
+  Footer: ({ props }: { props: Record<string, unknown> }) => {
+    const brandName = props.brandName as string
+    const brandDescription = props.brandDescription as string | undefined
+    const linkColumns =
+      (props.linkColumns as { title: string; links: { label: string; href?: string }[] }[]) ?? []
+    return (
+      <footer className="mt-auto border-t bg-background">
+        <div className="mx-auto grid max-w-6xl gap-8 px-4 py-12 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="space-y-2">
+            <p className="text-lg font-semibold">{brandName}</p>
+            {brandDescription ? (
+              <p className="text-sm text-muted-foreground">{brandDescription}</p>
+            ) : null}
+          </div>
+          {linkColumns.map((column) => (
+            <div key={column.title} className="space-y-2">
+              <p className="text-sm font-medium">{column.title}</p>
+              <ul className="space-y-1">
+                {column.links.map((link) => (
+                  <li key={link.label}>
+                    <a className="text-sm text-muted-foreground hover:text-foreground" href={link.href ?? '#'}>
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </footer>
+    )
+  },
+}
+
+const viewComponents = Object.assign({}, ...views.map((view) => view.registry))
+
+export const { registry } = defineRegistry(catalog, {
+  components: {
+    ...baseComponents,
+    ...viewComponents,
+  } as unknown as Components<typeof catalog>,
+})

package/assets/templates/app/lib/__STOREFRONT__/runtime.ts

@@ -0,0 +1,17 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/runtime.ts)
+// Wires the json-render app to the Medusa backend via @thorprovider/adapters
+// (through @thorprovider/runtime/commerce). Loaders come from each view module.
+
+import type { LoaderFn } from '@json-render/next'
+import { createStorefrontApp } from '@thorprovider/runtime/render-core/app'
+import { __STOREFRONT_CAMEL__Spec } from './spec'
+import { views } from './views'
+
+const loaders: Record<string, LoaderFn> = Object.assign({}, ...views.map((view) => view.loader))
+
+export const __STOREFRONT_CAMEL__App = createStorefrontApp({
+  spec: __STOREFRONT_CAMEL__Spec,
+  loaders,
+})
+
+export type { LoaderFn }

package/assets/templates/app/lib/__STOREFRONT__/spec/index.ts

@@ -0,0 +1,48 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/spec/index.ts)
+// Assembles the json-render app spec from the registered views.
+// Routes are derived from the view barrel; adding a view never edits this file.
+
+import type { NextAppSpec } from '@json-render/next'
+import { views } from '../views'
+import type { StorefrontElement } from './types'
+
+export type { StorefrontElement }
+
+const routes = Object.fromEntries(
+  views.map((view) => [
+    view.route.path,
+    {
+      layout: view.route.layout,
+      loader: view.route.loaderName,
+      metadata: view.route.metadata,
+      ...view.route.entry,
+    },
+  ]),
+)
+
+export const __STOREFRONT_CAMEL__Spec: NextAppSpec = {
+  metadata: {
+    title: {
+      default: '__SITE_NAME__',
+      template: '%s · __SITE_NAME__',
+    },
+    description: 'Tienda online de __SITE_NAME__.',
+  },
+  state: {},
+  layouts: {
+    default: {
+      root: 'layout',
+      elements: {
+        layout: {
+          type: 'Layout',
+          props: {},
+          children: ['slot'],
+        },
+        // The page content is injected at the Slot element by @json-render/next.
+        // Without it the rendered layout drops the page and the store looks empty.
+        slot: { type: 'Slot', props: {}, children: [] },
+      },
+    },
+  },
+  routes: routes as NextAppSpec['routes'],
+}

package/assets/templates/app/lib/__STOREFRONT__/spec/page-root.ts

@@ -0,0 +1,26 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/spec/page-root.ts)
+// Builds a route's page tree. Shared by every view module so each can assemble
+// its own route entry without importing the shell spec (avoids a cycle).
+
+import type { StorefrontElement } from './types'
+
+export interface PageRoot {
+  page: {
+    root: string
+    elements: Record<string, StorefrontElement>
+  }
+}
+
+export const pageRoot = (
+  id: string,
+  children: string[],
+  elements: Record<string, StorefrontElement>,
+): PageRoot => ({
+  page: {
+    root: id,
+    elements: {
+      [id]: { type: 'Layout', props: {}, children },
+      ...elements,
+    },
+  },
+})

package/assets/templates/app/lib/__STOREFRONT__/spec/types.ts

@@ -0,0 +1,14 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/spec/types.ts)
+// Shared element contract for generated view specs.
+
+import type { VisibilityCondition } from '@json-render/core'
+
+export interface StorefrontElement {
+  type: string
+  props: Record<string, unknown>
+  children?: string[]
+  slots?: Record<string, string[]>
+  visible?: VisibilityCondition
+  repeat?: { statePath: string; key?: string }
+  on?: Record<string, { action: string }>
+}

package/assets/templates/app/lib/__STOREFRONT__/state.ts

@@ -0,0 +1,35 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/state.ts)
+// Initial storefront state. Extended by recipes as views are added.
+
+import type { CardProduct, ProductCategory2Category } from '@thorprovider/blocks'
+
+export interface StoreOverviewProduct {
+  id: string
+  brand: string
+  name: string
+  description: string
+  price: number
+  currency: string
+  rating: number
+  images: { id: number; src: string; alt: string }[]
+  sizes: number[]
+  colors: { name: string; value: string }[]
+}
+
+export interface StorefrontState {
+  heroProducts: CardProduct[]
+  categories: ProductCategory2Category[]
+  selectedProduct: StoreOverviewProduct | null
+  lastClicked: CardProduct | null
+  lastCategory: string | null
+  bannerDismissed: boolean
+}
+
+export const storefrontInitialState: StorefrontState = {
+  heroProducts: [],
+  categories: [],
+  selectedProduct: null,
+  lastClicked: null,
+  lastCategory: null,
+  bannerDismissed: false,
+}

package/assets/templates/app/lib/__STOREFRONT__/views/index.ts

@@ -0,0 +1,7 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/views/index.ts)
+// View registry (barrel). A freshly scaffolded store registers only `home`.
+// Adding a view appends one import and one entry here; shared files never change.
+
+import type { ViewModule } from './types'
+
+export const views: ViewModule[] = []

package/assets/templates/app/lib/__STOREFRONT__/views/sections/faq.tsx

@@ -0,0 +1,29 @@
+// Optional section fragment: faq (mirrors recipes/sections.json)
+
+import { FaqBlock1 as FaqBlock } from '@thorprovider/blocks'
+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.',
+    },
+  },
+  registry: {
+    Faq: ({ props }: { props: Record<string, unknown> }) => (
+      <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/assets/templates/app/lib/__STOREFRONT__/views/sections/logoCloud.tsx

@@ -0,0 +1,29 @@
+// Optional section fragment: logoCloud (mirrors recipes/sections.json)
+
+import { LogoCloud1 as LogoCloudBlock } from '@thorprovider/blocks'
+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.',
+    },
+  },
+  registry: {
+    LogoCloud: ({ props }: { props: Record<string, unknown> }) => (
+      <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/assets/templates/app/lib/__STOREFRONT__/views/sections/pricing.tsx

@@ -0,0 +1,33 @@
+// Optional section fragment: pricing (mirrors recipes/sections.json)
+
+import { PricingSection1 as PricingBlock } from '@thorprovider/blocks'
+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.',
+    },
+  },
+  registry: {
+    Pricing: ({ props }: { props: Record<string, unknown> }) => (
+      <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/assets/templates/app/lib/__STOREFRONT__/views/sections/statistics.tsx

@@ -0,0 +1,29 @@
+// Optional section fragment: statistics (mirrors recipes/sections.json)
+
+import { Statistic1 as StatisticBlock } from '@thorprovider/blocks'
+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.',
+    },
+  },
+  registry: {
+    Statistics: ({ props }: { props: Record<string, unknown> }) => (
+      <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/assets/templates/app/lib/__STOREFRONT__/views/sections/testimonials.tsx

@@ -0,0 +1,28 @@
+// Optional section fragment: testimonials (mirrors recipes/sections.json)
+
+import { Testimonial1 as TestimonialBlock } from '@thorprovider/blocks'
+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.',
+    },
+  },
+  registry: {
+    Testimonials: ({ props }: { props: Record<string, unknown> }) => (
+      <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/assets/templates/app/lib/__STOREFRONT__/views/types.ts

@@ -0,0 +1,46 @@
+// Generated by Thor Commerce storefront (template: assets/templates/app/lib/__STOREFRONT__/views/types.ts)
+// Contract every view module under views/<view>/ exports. Shared files
+// (catalog.ts, registry.tsx, runtime.ts, spec/index.ts) compose the registered
+// views; they never reference an individual view by name.
+
+import type { ReactNode } from 'react'
+import type { BaseComponentProps } from '@json-render/react'
+import type { LoaderFn } from '@json-render/next'
+import type { ZodType } from 'zod'
+import type { StorefrontElement } from '../spec/types'
+
+export interface ViewCatalogEntry {
+  props: ZodType
+  slots?: readonly string[]
+  description?: string
+}
+
+export interface ViewRoute {
+  path: string
+  loaderName: string
+  layout: string
+  metadata: { title: string; description?: string }
+  entry: { page: { root: string; elements: Record<string, StorefrontElement> } }
+}
+
+/**
+ * A view's component render functions, keyed by element `type`. Each receives
+ * `BaseComponentProps` ({ props, emit }) — the shape `defineRegistry` passes to
+ * component functions. This fragment MUST be defined in a `'use client'` module
+ * (see `views/<view>/registry.tsx`): `@json-render/react` calls `createContext`
+ * at module scope and has no `'use client'`, so importing it as a value from a
+ * Server Component module breaks the RSC graph (`createContext is not a function`).
+ */
+export type ViewRegistry = Record<
+  string,
+  (ctx: BaseComponentProps<Record<string, unknown>>) => ReactNode
+>
+
+export interface ViewModule {
+  name: string
+  elements: Record<string, StorefrontElement>
+  catalog: Record<string, ViewCatalogEntry>
+  registry: ViewRegistry
+  route: ViewRoute
+  loader: Record<string, LoaderFn>
+}