@ecomiq/storefront 2.0.7 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomiq/storefront",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Micro framework SSR de Ecomiq para storefronts. Páginas, datos y deploy sin configurar nada.",
   "type": "module",
   "license": "MIT",
@@ -41,6 +41,7 @@
     "./internal/checkout": "./src/pages/checkout.tsx",
     "./internal/checkout-session": "./src/pages/checkout.$checkoutId.tsx",
     "./internal/thank-you": "./src/pages/thank-you.tsx",
+    "./internal/cms-page": "./src/pages/pages.$pageSlug.tsx",
     "./package.json": "./package.json"
   },
   "files": [

package/src/codegen.mjs

@@ -57,6 +57,11 @@ const FRAMEWORK_LOCKED_PAGES = [
     routeId: '/thank-you',
     importFrom: '@ecomiq/storefront/internal/thank-you',
   },
+  {
+    rel: 'pages.$pageSlug.tsx',
+    routeId: '/pages/$pageSlug',
+    importFrom: '@ecomiq/storefront/internal/cms-page',
+  },
 ]
 
 export async function generateApp({ cwd, appDir, frameworkRoot, config }) {
@@ -487,7 +492,7 @@ function assertNoFrameworkPageOverrides(pageEntries) {
     if (!reserved.has(routeId)) continue
     throw new Error(
       `La ruta ${routeId} es reservada por Ecomiq (página cerrada). ` +
-        `Elimina pages/${entry.rel}; las páginas de checkout y thank-you viven en @ecomiq/storefront.`,
+        `Elimina pages/${entry.rel}; vive en @ecomiq/storefront (checkout, thank-you, CMS).`,
     )
   }
 }

package/src/pages/pages.$pageSlug.tsx

@@ -0,0 +1,74 @@
+/**
+ * Página CMS cerrada (`/pages/$pageSlug`).
+ * Resuelve contenido publicado vía GET /v1/pages/{slug}.
+ */
+import type { CmsPageDetailsDto } from '@ecomiq/core'
+import {
+  definePage,
+  sanitizeHtml,
+  serverApi,
+  stripHtml,
+  z,
+} from '../index'
+import { StorefrontError } from '../ui'
+
+const ContentPageSettingsSchema = z.object({
+  title: z.string().optional(),
+  html: z.string().optional(),
+  seo: z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+  }).optional(),
+}).passthrough()
+
+type ContentPageData = {
+  page: CmsPageDetailsDto
+  content: z.infer<typeof ContentPageSettingsSchema>
+}
+
+export default definePage<ContentPageData, { pageSlug: string }>({
+  loader: async ({ params }) => {
+    const page = await serverApi.getPageBySlug(params.pageSlug)
+    if (page.status !== 'published') throw new Error('Página no publicada')
+
+    return {
+      page,
+      content: ContentPageSettingsSchema.parse(page.settings ?? {}),
+    }
+  },
+
+  meta: ({ data }) => ({
+    title: data.content.seo?.title ?? data.content.title ?? data.page.name,
+    description: data.content.seo?.description ?? (
+      data.content.html
+        ? stripHtml(data.content.html).slice(0, 155)
+        : undefined
+    ),
+  }),
+
+  error: () => (
+    <StorefrontError
+      title="Página no disponible"
+      description="El contenido no existe o todavía no está publicado."
+    />
+  ),
+
+  component: ({ data }) => (
+    <article className="mx-auto w-full max-w-4xl px-4 py-10 sm:py-14">
+      <header className="mb-8 border-b pb-8">
+        <h1 className="text-balance text-3xl font-semibold tracking-[-0.02em] md:text-4xl">
+          {data.content.title ?? data.page.name}
+        </h1>
+      </header>
+
+      {data.content.html ? (
+        <div
+          className="prose prose-neutral max-w-none text-foreground prose-headings:font-semibold prose-a:text-primary"
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(data.content.html) }}
+        />
+      ) : (
+        <p className="text-muted-foreground">Contenido no disponible.</p>
+      )}
+    </article>
+  ),
+})

package/src/server.ts

@@ -86,6 +86,10 @@ const getCollectionBySlugFn = createServerFn({ method: 'GET' })
   .validator(z.object({ slug: z.string().min(1) }))
   .handler(({ data }) => getStorefrontClient().getCollectionBySlug(data.slug))
 
+const getPageBySlugFn = createServerFn({ method: 'GET' })
+  .validator(z.object({ slug: z.string().min(1) }))
+  .handler(({ data }) => getStorefrontClient().getPageBySlug(data.slug))
+
 const getProductsFn = createServerFn({ method: 'GET' })
   .validator(ProductsParamsSchema)
   .handler(({ data }) => getStorefrontClient().getProducts(data))
@@ -219,6 +223,7 @@ export const serverApi = {
   getStoreId: () => getStoreIdFn(),
   getCollections: () => getCollectionsFn(),
   getCollectionBySlug: (slug: string) => getCollectionBySlugFn({ data: { slug } }),
+  getPageBySlug: (slug: string) => getPageBySlugFn({ data: { slug } }),
   getProducts: (
     params: ProductsParamsInput = {},
     options: { signal?: AbortSignal } = {},