@thorprovider/create-storefront 0.1.1

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

@@ -0,0 +1,33 @@
+'use client'
+
+// Generated by Thor Commerce sf-scaffold (template: 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: () => {},
+      openProduct: () => navigate('/productos'),
+      openCategory: () => {
+        const handle = ''
+        navigate(handle ? `/categorias/${handle}` : '/categorias')
+      },
+      goHome: () => navigate('/'),
+    }
+
+    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/templates/app/lib/__STOREFRONT__/registry.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+// Generated by Thor Commerce sf-scaffold (template: templates/app/lib/__STOREFRONT__/registry.tsx)
+// Maps json-render element types to @thorprovider/blocks components and wires actions.
+// Recipe-added views extend this file.
+
+import { defineRegistry, useStateStore } from '@json-render/react'
+import {
+  Feature1,
+  Navbar1,
+  ProductCategory2,
+  ProductCard1,
+  StorefrontHero1,
+} from '@thorprovider/blocks'
+import { catalog } from './catalog'
+import { useStorefrontHandlers } from './handlers'
+
+export const { registry } = defineRegistry(catalog, {
+  components: {
+    Layout: ({ children }) => {
+      useStorefrontHandlers()
+      return <div className="flex min-h-screen flex-col">{children}</div>
+    },
+    Navbar: ({ props, emit }) => (
+      <Navbar1
+        navLinks={props.navLinks}
+        logoText={props.logoText}
+        logoHref={props.logoHref}
+        currentPath={props.currentPath}
+        signIn={props.signIn}
+        cta={props.cta}
+        cartCount={props.cartCount}
+        onOpenCart={() => emit('openCart')}
+      />
+    ),
+    StorefrontHero: ({ props, emit }) => {
+      const { set } = useStateStore()
+      return (
+        <StorefrontHero1
+          title={props.title}
+          description={props.description}
+          products={props.products}
+          titleAccent={props.titleAccent}
+          badge={props.badge}
+          primaryCta={props.primaryCta}
+          secondaryCta={props.secondaryCta}
+          onAddToCart={(product) => {
+            set('/lastClicked', product)
+            emit('addToCart')
+          }}
+          onBuyNow={(product) => {
+            set('/lastClicked', product)
+            emit('openProduct')
+          }}
+          onSelectColor={() => {}}
+        />
+      )
+    },
+    Feature: ({ props }) => (
+      <Feature1
+        items={props.items}
+        badge={props.badge}
+        title={props.title}
+        description={props.description}
+        learnMoreLabel={props.learnMoreLabel}
+        ctaLabel={props.ctaLabel}
+      />
+    ),
+    CategoryCards: ({ props, emit }) => {
+      const { set } = useStateStore()
+      return (
+        <ProductCategory2
+          title={props.title}
+          description={props.description}
+          categories={props.categories}
+          cta={props.cta}
+          onBrowse={(category) => {
+            set('/lastCategory', category.handle ?? String(category.id))
+            emit('openCategory')
+          }}
+        />
+      )
+    },
+    ProductCard: ({ props, emit }) => {
+      const { set } = useStateStore()
+      return (
+        <ProductCard1
+          products={props.products}
+          heading={props.heading}
+          maxItems={props.maxItems}
+          onAddToCart={(product) => {
+            set('/lastClicked', product)
+            emit('addToCart')
+          }}
+          onProductClick={(product) => {
+            set('/lastClicked', product)
+            emit('openProduct')
+          }}
+        />
+      )
+    },
+    Footer: ({ props }) => (
+      <footer className="mt-auto border-t bg-background">
+        <div className="mx-auto w-full max-w-7xl px-4 py-12">
+          <p className="text-lg font-semibold">{props.brandName}</p>
+          {props.brandDescription ? (
+            <p className="mt-2 max-w-prose text-sm text-muted-foreground">
+              {props.brandDescription}
+            </p>
+          ) : null}
+          <div className="mt-8 grid grid-cols-2 gap-6 sm:grid-cols-4">
+            {(props.linkColumns ?? []).map((column) => (
+              <div key={column.title}>
+                <p className="text-sm font-semibold">{column.title}</p>
+                <ul className="mt-3 space-y-2">
+                  {(column.links ?? []).map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href ?? '#'}
+                        className="text-sm text-muted-foreground hover:text-foreground"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </footer>
+    ),
+  },
+})

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

@@ -0,0 +1,25 @@
+// Generated by Thor Commerce sf-scaffold (template: templates/app/lib/__STOREFRONT__/runtime.ts)
+// Wires the json-render app to the Medusa backend via @thorprovider/adapters
+// (through @thorprovider/storefronts/commerce). Recipe-added views extend the loaders map.
+
+import type { LoaderFn } from '@json-render/next'
+import { createStorefrontApp } from '@thorprovider/storefronts/render-core/app'
+import { getCatalog } from '@thorprovider/storefronts/commerce'
+import { __STOREFRONT_CAMEL__Spec } from './spec'
+
+const loaders: Record<string, LoaderFn> = {
+  home: async () => {
+    const { products, categories } = await getCatalog()
+    return {
+      heroProducts: products.slice(0, 4),
+      categories,
+    }
+  },
+}
+
+export const __STOREFRONT_CAMEL__App = createStorefrontApp({
+  spec: __STOREFRONT_CAMEL__Spec,
+  loaders,
+})
+
+export type { LoaderFn }

package/templates/app/lib/__STOREFRONT__/spec/home.ts

@@ -0,0 +1,62 @@
+// Generated by Thor Commerce sf-scaffold (template: templates/app/lib/__STOREFRONT__/spec/home.ts)
+
+import type { StorefrontElement } from './types'
+
+export const homeElements: 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' },
+    },
+  },
+}

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

@@ -0,0 +1,59 @@
+// Generated by Thor Commerce sf-scaffold (template: templates/app/lib/__STOREFRONT__/spec/index.ts)
+// Assembles the json-render app spec. Recipe-added views extend `routes`.
+
+import type { NextAppSpec } from '@json-render/next'
+import { homeElements } from './home'
+import type { StorefrontElement } from './types'
+
+export type { StorefrontElement }
+
+const pageRoot = (
+  id: string,
+  children: string[],
+  elements: Record<string, StorefrontElement>,
+) => ({
+  page: {
+    root: id,
+    elements: {
+      [id]: { type: 'Layout', props: {}, children },
+      ...elements,
+    },
+  },
+})
+
+export const __STOREFRONT_CAMEL__Spec: NextAppSpec = {
+  metadata: {
+    title: {
+      default: '__SITE_NAME__',
+      template: '%s · __SITE_NAME__',
+    },
+    description: 'Tienda online de __SITE_NAME__.',
+  },
+  state: {},
+  layouts: {
+    default: {
+      layout: {
+        root: 'layout',
+        elements: {
+          layout: {
+            type: 'Layout',
+            props: {},
+            slots: { header: [], footer: [] },
+            children: [],
+          },
+        },
+      },
+    },
+  },
+  routes: {
+    '/': {
+      layout: 'default',
+      loader: 'home',
+      metadata: {
+        title: 'Inicio',
+        description: 'Descubre los productos de __SITE_NAME__.',
+      },
+      ...pageRoot('home', ['home.hero', 'home.benefits', 'home.categories'], homeElements),
+    },
+  },
+}

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

@@ -0,0 +1,14 @@
+// Generated by Thor Commerce sf-scaffold (template: templates/app/lib/__STOREFRONT__/spec/types.ts)
+// Adapted from the Thor Commerce storefront reference (read-only).
+
+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/templates/app/lib/__STOREFRONT__/state.ts

@@ -0,0 +1,35 @@
+// Generated by Thor Commerce sf-scaffold (template: 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,
+}