npm - @vitrine-kit/vitrine - Versions diffs - 0.3.1 → 0.4.0 - Mend

@vitrine-kit/vitrine 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/kit/templates/base/files/app/(frontend)/layout.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+// Root storefront layout (route group (frontend)). The Payload admin lives in
+// its own route group (payload) with its own layout — so there's no root app/layout,
+// and each group renders its own <html> (the Payload 3 + Next pattern).
+import type { ReactNode } from 'react';
+import type { Metadata } from 'next';
+import '../globals.css';
+import { siteConfig } from '@/site.config';
+import { registerSlots } from '@/lib/slots';
+import { Slot } from '@vitrine-kit/core/react';
+import { SiteHeader } from '@/components/layout/SiteHeader';
+import { SiteFooter } from '@/components/layout/SiteFooter';
+// Register installed features' slots (lib/slots.ts is generated by the CLI).
+registerSlots();
+export const metadata: Metadata = {
+  title: { default: 'Vitrine', template: '%s · Vitrine' },
+};
+export default function FrontendLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang={siteConfig.i18n.defaultLocale}>
+      <body className="min-h-screen bg-bg font-sans text-fg antialiased">
+        <Slot name="global.banner-top" />
+        <SiteHeader />
+        <main className="mx-auto w-full max-w-container px-gutter py-section">{children}</main>
+        <SiteFooter />
+        <Slot name="global.body-end" />
+      </body>
+    </html>
+  );
+}

package/kit/templates/base/files/app/(frontend)/page.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+// Storefront home: catalog listing. Data via the CatalogSource contract
+// (backend-agnostic); the grid is the catalog feature's component.
+import { Slot } from '@vitrine-kit/core/react';
+import { getCatalogSource } from '@/lib/adapter';
+import { loadProducts } from '@/lib/catalog/data';
+import { ProductGrid } from '@/components/catalog/ProductGrid';
+export default async function HomePage() {
+  const source = await getCatalogSource();
+  const products = await loadProducts(source, { perPage: 12 });
+  return (
+    <div className="flex flex-col gap-section">
+      <Slot name="home.hero" />
+      <section aria-labelledby="catalog-heading" className="flex flex-col gap-gutter">
+        <h1 id="catalog-heading" className="font-heading text-fg">
+          Catalog
+        </h1>
+        <Slot name="catalog.grid-top" />
+        <ProductGrid products={products} />
+        <Slot name="catalog.grid-bottom" />
+      </section>
+      <Slot name="home.sections" />
+      <Slot name="home.bottom" />
+    </div>
+  );
+}

package/kit/templates/base/files/app/(frontend)/products/[slug]/page.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+// Product page. ProductView (the product-page feature) hosts the product.* slots.
+// Metadata and JSON-LD come from the seo feature.
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getCatalogSource } from '@/lib/adapter';
+import { loadProduct } from '@/lib/catalog/data';
+import { ProductView } from '@/components/product/ProductView';
+import { buildProductMetadata } from '@/lib/seo/metadata';
+import { productJsonLd } from '@/lib/seo/jsonld';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { baseUrl } from '@/lib/site';
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const source = await getCatalogSource();
+  const product = await loadProduct(source, slug);
+  if (!product) return {};
+  const meta = buildProductMetadata(product, { baseUrl });
+  return {
+    title: meta.title,
+    description: meta.description,
+    alternates: meta.canonical ? { canonical: meta.canonical } : undefined,
+    openGraph: meta.openGraph,
+  };
+}
+export default async function ProductPage({ params }: PageProps) {
+  const { slug } = await params;
+  const source = await getCatalogSource();
+  const product = await loadProduct(source, slug);
+  if (!product) notFound();
+  return (
+    <>
+      <JsonLd data={productJsonLd(product, { baseUrl })} />
+      <ProductView product={product} />
+    </>
+  );
+}

package/kit/templates/base/files/app/globals.css ADDED Viewed

@@ -0,0 +1,6 @@
+/* The client's token values are set by the design step (vitrine design apply). */
+@import '../theme/client.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/kit/templates/base/files/components/layout/SiteFooter.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+// Storefront footer. Hosts the global.footer slot.
+import { Slot } from '@vitrine-kit/core/react';
+export function SiteFooter() {
+  return (
+    <footer className="mt-section border-t border-border">
+      <div className="mx-auto max-w-container px-gutter py-section text-muted-fg">
+        <Slot
+          name="global.footer"
+          fallback={<p>© {new Date().getFullYear()}</p>}
+        />
+      </div>
+    </footer>
+  );
+}

package/kit/templates/base/files/components/layout/SiteHeader.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+// Storefront header. Hosts the global.header-nav slot (where the catalog feature's
+// CategoryNav mounts) and passes it categories from the active CatalogSource.
+import { Slot } from '@vitrine-kit/core/react';
+import { getCatalogSource } from '@/lib/adapter';
+export async function SiteHeader() {
+  const source = await getCatalogSource();
+  const categories = await source.listCategories();
+  return (
+    <header className="border-b border-border">
+      <div className="mx-auto flex max-w-container items-center justify-between gap-gutter px-gutter py-unit">
+        <a href="/" className="font-heading text-fg">
+          <Slot name="global.header-start" fallback={<span>Vitrine</span>} />
+        </a>
+        <Slot name="global.header-nav" categories={categories} />
+        <div className="flex items-center gap-unit">
+          <Slot name="global.header-actions" />
+        </div>
+      </div>
+    </header>
+  );
+}

package/kit/templates/base/files/design/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# /design — export from Claude Design
+Drop your design export here (React/HTML/CSS, tokens, screenshots) and run
+`vitrine design apply`. The AI step reads this folder and the instruction from `CLAUDE.md`,
+then sets **only the token values** in `theme/client.css` (palette, typography, spacing, radii,
+shadows).
+This folder is isolated from behavior: its contents don't affect logic, data, routing, or a11y —
+only the look, via tokens. Re-running the design step is safe.

package/kit/templates/base/files/lib/site.ts ADDED Viewed

@@ -0,0 +1,10 @@
+// Aggregated site parameters from site.config + env. Safe to import on both
+// the server and the client (public values only).
+import { siteConfig } from '@/site.config';
+/** Base URL for canonical/OG. Overridden by NEXT_PUBLIC_SITE_URL. */
+export const baseUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000';
+export const currency = siteConfig.i18n.currency;
+export const defaultLocale = siteConfig.i18n.defaultLocale;
+export const locales = siteConfig.i18n.locales;

package/kit/templates/base/files/next.config.mjs ADDED Viewed

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+};
+// backend-payload overwrites this file (wraps it in withPayload).
+export default nextConfig;

package/kit/templates/base/files/postcss.config.mjs ADDED Viewed

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    'tailwindcss': {},
+    'autoprefixer': {},
+  },
+};

package/kit/templates/base/files/public/.gitkeep ADDED Viewed

File without changes

package/kit/templates/base/files/tailwind.config.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// The client's Tailwind: the Vitrine preset maps classes to the token contract's
+// CSS variables (--vt-*). The variable values live in theme/client.css (design step).
+import type { Config } from 'tailwindcss';
+import { vitrinePreset } from '@vitrine-kit/contracts';
+export default {
+  presets: [vitrinePreset as Partial<Config>],
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './lib/**/*.{ts,tsx}',
+  ],
+} satisfies Config;

package/kit/templates/base/files/tsconfig.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "strict": true,
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "baseUrl": ".",
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"],
+      "@payload-config": ["./payload.config.ts"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", ".vitrine"]
+}

package/kit/templates/tsconfig.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "//": "We typecheck only the pure template files (contracts + node) — the zero-config critical logic and the mappers. Files that import Next/Payload are checked when the client is instantiated (the stack is installed there).",
+  "include": [
+    "backend-payload/files/lib/adapter/db-decision.ts",
+    "backend-payload/files/lib/adapter/db-ping.ts",
+    "backend-payload/files/lib/adapter/payload-types.ts",
+    "backend-payload/files/lib/adapter/map.ts",
+    "backend-payload/files/lib/seed/demo.ts",
+    "backend-payload/files/lib/seed/guards.ts",
+    "backend-vendure/files/lib/adapter/vendure-types.ts",
+    "backend-vendure/files/lib/adapter/map.ts"
+  ]
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vitrine-kit/vitrine",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Vitrine CLI — feature install primitive, init (wizard), add, update, doctor, design apply.",
   "license": "MIT",
   "type": "module",
@@ -8,7 +8,8 @@
     "vitrine": "./dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "kit"
   ],
   "publishConfig": {
     "access": "public"
@@ -24,8 +25,8 @@
     "@vitrine-kit/contracts": "1.2.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --clean",
-    "typecheck": "tsc --noEmit",
+    "build": "node scripts/generate-kit-versions.mjs && tsup src/index.ts --format esm --clean && node scripts/copy-kit.mjs",
+    "typecheck": "node scripts/generate-kit-versions.mjs && tsc --noEmit",
     "test": "vitest run --passWithNoTests"
   }
 }