@thorprovider/storefront 0.3.1 → 0.4.0-mvp.2

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

@@ -0,0 +1,60 @@
+// Thor Commerce view module: static
+// Server Component module: elements + catalog entries + routes + loader only.
+// The client-side component mapping lives in ./registry.tsx ('use client'); this
+// module imports it as data so the RSC graph never evaluates @json-render/react
+// on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "static".
+//
+// The pages are declared in the user-owned ./content.ts. This module builds one
+// fixed route per declared page (each with its own metadata); an undeclared path
+// is never declared here, so it falls through to the storefront not-found
+// response.
+
+import { getDataSource } from '../../store-context'
+import { pageRoot } from '../../spec/page-root'
+import type { StorefrontElement } from '../../spec/types'
+import type { ViewModule, ViewRoute } from '../types'
+import { registry } from './registry'
+import { staticPagesContent } from './content'
+import { staticContentPropsSchema } from './schema'
+
+// A single catalog/registry declaration for the local StaticContent element. The
+// per-route props (the page's sections) are supplied in each route's entry below.
+const elements: Record<string, StorefrontElement> = {
+  'static.content': {
+    type: 'StaticContent',
+    props: {},
+  },
+}
+
+const catalog = {
+  StaticContent: {
+    props: staticContentPropsSchema,
+    description: 'Renders declared static page sections.',
+  },
+}
+
+// A stable, unique root id per page: `/contact` -> `static-contact`,
+// `/` -> `static-index`.
+const pageRootId = (path: string): string =>
+  `static-${path.replace(/^\//, '').replace(/\//g, '-') || 'index'}`
+
+const route: ViewRoute[] = staticPagesContent.map((page) => ({
+  path: page.path,
+  loaderName: 'static',
+  layout: 'default',
+  metadata: { title: page.title, description: page.description },
+  entry: pageRoot(pageRootId(page.path), ['static.content'], {
+    'static.content': { type: 'StaticContent', props: { sections: page.sections } },
+  }),
+}))
+
+export const staticView: ViewModule = {
+  name: 'static',
+  elements,
+  catalog,
+  registry,
+  route,
+  loader: {
+    static: async () => ({ dataSource: getDataSource(), dataError: null }),
+  },
+}

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

@@ -0,0 +1,66 @@
+'use client'
+
+// Thor Commerce view registry fragment: static
+// Client boundary for the static view. The local StaticContent component renders
+// the declared sections with semantic HTML and storefront tokens; it reads no
+// backend data, so it is a pure, Server-Component-safe client component.
+
+import type { ViewRegistry } from '../types'
+import { staticContentPropsSchema, type StaticSection } from './schema'
+
+function Section({ section }: { section: StaticSection }) {
+  switch (section.kind) {
+    case 'heading':
+      return <h2 className="text-2xl font-semibold tracking-tight">{section.text}</h2>
+    case 'paragraph':
+      return <p className="text-muted-foreground leading-relaxed">{section.text}</p>
+    case 'list':
+      return (
+        <ul className="list-disc space-y-1 pl-6">
+          {section.items.map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      )
+    case 'links':
+      return (
+        <ul className="space-y-1">
+          {section.items.map((item, index) => (
+            <li key={index}>
+              <a className="text-primary underline-offset-4 hover:underline" href={item.href}>
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )
+    case 'contact':
+      return (
+        <dl className="space-y-2">
+          {section.entries.map((entry, index) => (
+            <div key={index} className="flex flex-col">
+              <dt className="text-muted-foreground text-sm">{entry.label}</dt>
+              <dd>{entry.value}</dd>
+            </div>
+          ))}
+        </dl>
+      )
+  }
+}
+
+function StaticContent({ sections }: { sections: StaticSection[] }) {
+  return (
+    <div className="mx-auto w-full max-w-3xl px-4 py-12 sm:px-6 lg:px-8 space-y-6">
+      {sections.map((section, index) => (
+        <Section key={index} section={section} />
+      ))}
+    </div>
+  )
+}
+
+export const registry: ViewRegistry = {
+  StaticContent: ({ props }) => {
+    const parsed = staticContentPropsSchema.parse(props)
+    return <StaticContent sections={parsed.sections} />
+  },
+}

package/assets/templates/views/static/schema.ts

@@ -0,0 +1,45 @@
+// Thor Commerce view schema fragment: static
+// Zod contract for content-driven static pages. The user-owned content declares
+// each page (path, title, optional description, ordered sections); the derived
+// index builds one fixed route per page and the client registry renders the
+// sections. Kept free of React and server imports so the Server Component module
+// and the 'use client' registry share one contract.
+
+import { z } from 'zod'
+
+// One rendered block inside a static page. A discriminated union keeps each
+// section's props explicit and lets the registry switch on `kind`.
+export const staticSectionSchema = z.discriminatedUnion('kind', [
+  z.object({ kind: z.literal('heading'), text: z.string() }),
+  z.object({ kind: z.literal('paragraph'), text: z.string() }),
+  z.object({ kind: z.literal('list'), items: z.array(z.string()) }),
+  z.object({
+    kind: z.literal('links'),
+    items: z.array(z.object({ label: z.string(), href: z.string() })),
+  }),
+  z.object({
+    kind: z.literal('contact'),
+    entries: z.array(z.object({ label: z.string(), value: z.string() })),
+  }),
+])
+
+// A declared page: an absolute route path, its document metadata, and the
+// ordered sections to render.
+export const staticPageSchema = z.object({
+  path: z.string().startsWith('/'),
+  title: z.string(),
+  description: z.string().optional(),
+  sections: z.array(staticSectionSchema),
+})
+
+// The user-owned content is a list of pages.
+export const staticPagesContentSchema = z.array(staticPageSchema)
+
+// The props a single `StaticContent` element carries on a route.
+export const staticContentPropsSchema = z.object({
+  sections: z.array(staticSectionSchema),
+})
+
+export type StaticSection = z.infer<typeof staticSectionSchema>
+export type StaticPageContent = z.infer<typeof staticPageSchema>
+export type StaticContentProps = z.infer<typeof staticContentPropsSchema>