@revealui/cli 0.0.0-canary-20260402004330

package/templates/e-commerce/src/app/products/[slug]/page.tsx

@@ -0,0 +1,80 @@
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:4000';
+
+interface Product {
+  id: string;
+  name: string;
+  slug: string;
+  description: unknown;
+  price: number;
+  status: string;
+  image?: { url: string; alt?: string } | null;
+}
+
+function formatPrice(cents: number): string {
+  return `$${(cents / 100).toFixed(2)}`;
+}
+
+async function getProduct(slug: string): Promise<Product | null> {
+  try {
+    const res = await fetch(`${API_URL}/api/products?where[slug][equals]=${slug}&limit=1`, {
+      cache: 'no-store',
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data.docs?.[0] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const product = await getProduct(slug);
+
+  if (!product) {
+    return (
+      <main className="mx-auto max-w-2xl px-4 py-16">
+        <h1 className="text-2xl font-bold">Product not found</h1>
+        <p className="mt-4">
+          <a href="/products" className="text-accent underline">
+            Back to products
+          </a>
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-16">
+      <nav className="mb-8">
+        <a href="/products" className="text-sm text-accent underline">
+          &larr; Back to products
+        </a>
+      </nav>
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+        {product.image?.url && (
+          <Image
+            src={product.image.url}
+            alt={product.image.alt || product.name}
+            width={600}
+            height={600}
+            className="aspect-square w-full rounded-lg object-cover"
+          />
+        )}
+        <div>
+          <h1 className="text-3xl font-bold">{product.name}</h1>
+          <p className="mt-2 text-2xl font-bold text-gray-900">{formatPrice(product.price)}</p>
+          <div className="prose mt-6">
+            {typeof product.description === 'string' ? (
+              <p>{product.description}</p>
+            ) : (
+              <p className="text-gray-500">Product description will render here.</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/e-commerce/src/app/products/page.tsx

@@ -0,0 +1,72 @@
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:4000';
+
+interface Product {
+  id: string;
+  name: string;
+  slug: string;
+  price: number;
+  status: string;
+  image?: { url: string; alt?: string } | null;
+}
+
+function formatPrice(cents: number): string {
+  return `$${(cents / 100).toFixed(2)}`;
+}
+
+async function getProducts(): Promise<Product[]> {
+  try {
+    const res = await fetch(`${API_URL}/api/products?where[status][equals]=active&sort=name`, {
+      cache: 'no-store',
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.docs ?? [];
+  } catch {
+    return [];
+  }
+}
+
+export default async function ProductsPage() {
+  const products = await getProducts();
+
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-16">
+      <h1 className="mb-8 text-3xl font-bold">Products</h1>
+
+      {products.length === 0 ? (
+        <p className="text-gray-500">
+          No products yet. Add products in the{' '}
+          <a href="/admin/collections/products" className="text-accent underline">
+            admin panel
+          </a>
+          , or run <code className="rounded bg-gray-100 px-1">pnpm db:seed</code> to add sample
+          data.
+        </p>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {products.map((product) => (
+            <a
+              key={product.id}
+              href={`/products/${product.slug}`}
+              className="group rounded-lg border border-gray-200 p-4 transition-shadow hover:shadow-md"
+            >
+              {product.image?.url && (
+                <Image
+                  src={product.image.url}
+                  alt={product.image.alt || product.name}
+                  width={400}
+                  height={400}
+                  className="mb-4 aspect-square w-full rounded object-cover"
+                />
+              )}
+              <h2 className="font-semibold group-hover:text-accent">{product.name}</h2>
+              <p className="mt-1 text-lg font-bold text-gray-900">{formatPrice(product.price)}</p>
+            </a>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

package/templates/e-commerce/src/collections/Orders.ts

@@ -0,0 +1,63 @@
+import type { CollectionConfig } from '@revealui/contracts';
+
+export const Orders: CollectionConfig = {
+  slug: 'orders',
+  labels: { singular: 'Order', plural: 'Orders' },
+  fields: [
+    {
+      name: 'customer',
+      type: 'text',
+      required: true,
+      admin: {
+        description: 'Customer email address',
+      },
+    },
+    {
+      name: 'items',
+      type: 'array',
+      fields: [
+        {
+          name: 'product',
+          type: 'relationship',
+          relationTo: 'products',
+          required: true,
+        },
+        {
+          name: 'quantity',
+          type: 'number',
+          required: true,
+          min: 1,
+          defaultValue: 1,
+        },
+        {
+          name: 'price',
+          type: 'number',
+          required: true,
+          min: 0,
+          admin: {
+            description: 'Price at time of purchase (cents)',
+          },
+        },
+      ],
+    },
+    {
+      name: 'total',
+      type: 'number',
+      required: true,
+      min: 0,
+      admin: {
+        description: 'Order total in cents',
+      },
+    },
+    {
+      name: 'status',
+      type: 'select',
+      defaultValue: 'pending',
+      options: [
+        { label: 'Pending', value: 'pending' },
+        { label: 'Paid', value: 'paid' },
+        { label: 'Shipped', value: 'shipped' },
+      ],
+    },
+  ],
+};

package/templates/e-commerce/src/collections/Products.ts

@@ -0,0 +1,50 @@
+import type { CollectionConfig } from '@revealui/contracts';
+
+export const Products: CollectionConfig = {
+  slug: 'products',
+  labels: { singular: 'Product', plural: 'Products' },
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      unique: true,
+      admin: {
+        description: 'URL-friendly identifier (e.g. "wireless-headphones")',
+      },
+    },
+    {
+      name: 'description',
+      type: 'richText',
+    },
+    {
+      name: 'price',
+      type: 'number',
+      required: true,
+      min: 0,
+      admin: {
+        description: 'Price in cents (e.g. 2999 = $29.99)',
+      },
+    },
+    {
+      name: 'image',
+      type: 'upload',
+      relationTo: 'media',
+    },
+    {
+      name: 'status',
+      type: 'select',
+      defaultValue: 'draft',
+      options: [
+        { label: 'Draft', value: 'draft' },
+        { label: 'Active', value: 'active' },
+        { label: 'Archived', value: 'archived' },
+      ],
+    },
+  ],
+};

package/templates/e-commerce/src/seed.ts

@@ -0,0 +1,72 @@
+/**
+ * Seed script for the e-commerce template.
+ * Creates 3 sample products via the RevealUI REST API.
+ *
+ * Usage: pnpm db:seed (requires the dev server to be running)
+ */
+
+const API_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:4000';
+
+interface SeedProduct {
+  name: string;
+  slug: string;
+  description: string;
+  price: number;
+  status: string;
+}
+
+const products: SeedProduct[] = [
+  {
+    name: 'Wireless Headphones',
+    slug: 'wireless-headphones',
+    description:
+      'Premium wireless headphones with active noise cancellation and 30-hour battery life.',
+    price: 9999,
+    status: 'active',
+  },
+  {
+    name: 'Mechanical Keyboard',
+    slug: 'mechanical-keyboard',
+    description:
+      'Compact 75% mechanical keyboard with hot-swappable switches and RGB backlighting.',
+    price: 14999,
+    status: 'active',
+  },
+  {
+    name: 'USB-C Hub',
+    slug: 'usb-c-hub',
+    description: '7-in-1 USB-C hub with HDMI, USB-A, SD card reader, and 100W power delivery.',
+    price: 4999,
+    status: 'active',
+  },
+];
+
+const log = (...args: unknown[]) => process.stdout.write(`${args.join(' ')}\n`);
+const logErr = (...args: unknown[]) => process.stderr.write(`${args.join(' ')}\n`);
+
+async function seed(): Promise<void> {
+  log(`Seeding products to ${API_URL}...`);
+
+  for (const product of products) {
+    try {
+      const res = await fetch(`${API_URL}/api/products`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(product),
+      });
+
+      if (res.ok) {
+        log(`  Created: ${product.name}`);
+      } else {
+        const error = await res.text();
+        logErr(`  Failed to create "${product.name}": ${error}`);
+      }
+    } catch (err) {
+      logErr(`  Error creating "${product.name}":`, err);
+    }
+  }
+
+  log('Seeding complete.');
+}
+
+seed();

package/templates/e-commerce/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "strict": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "resolvePackageJsonExports": true,
+    "target": "ES2022",
+    "noEmit": true,
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "next-env.d.ts", "next.config.mjs", "revealui.config.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/portfolio/.env.example

@@ -0,0 +1,36 @@
+# RevealUI Environment Variables
+# Copy this file to .env.local and fill in your values before running `pnpm dev`
+
+# ─── Core ────────────────────────────────────────────────────────────────────
+# 32+ character secret used for signing sessions and tokens
+REVEALUI_SECRET=change-me-to-a-long-random-secret-at-least-32-chars
+
+# Public URL of your CMS server (must match NEXT_PUBLIC_SERVER_URL)
+REVEALUI_PUBLIC_SERVER_URL=http://localhost:4000
+NEXT_PUBLIC_SERVER_URL=http://localhost:4000
+
+# ─── Database ────────────────────────────────────────────────────────────────
+# PostgreSQL connection string (NeonDB, Supabase, or local Postgres)
+POSTGRES_URL=postgresql://postgres:postgres@localhost:5432/revealui
+
+# ─── Storage ─────────────────────────────────────────────────────────────────
+# Vercel Blob token for file uploads (optional — leave placeholder for local dev)
+BLOB_READ_WRITE_TOKEN=vercel_blob_rw_placeholder
+
+# ─── Stripe (optional) ───────────────────────────────────────────────────────
+# Use test keys during development: https://dashboard.stripe.com/test/apikeys
+STRIPE_SECRET_KEY=sk_test_placeholder
+STRIPE_WEBHOOK_SECRET=whsec_placeholder
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_placeholder
+
+# ─── Admin Bootstrap ─────────────────────────────────────────────────────────
+# Used on first run only to create the initial admin account
+REVEALUI_ADMIN_EMAIL=admin@example.com
+REVEALUI_ADMIN_PASSWORD=changeme-min-12-chars
+
+# ─── Branding (Enterprise white-label) ───────────────────────────────────────
+# Customize the admin UI for your brand. Enterprise license required for full white-label.
+# REVEALUI_BRAND_NAME=My CMS
+# REVEALUI_BRAND_LOGO_URL=https://example.com/logo.png
+# REVEALUI_BRAND_PRIMARY_COLOR=#ea580c
+# REVEALUI_SHOW_POWERED_BY=false

package/templates/portfolio/_gitignore

@@ -0,0 +1,26 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Next.js
+.next/
+out/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Turbo
+.turbo/
+
+# Misc
+.DS_Store
+*.pem
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/templates/portfolio/next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactCompiler: true,
+  // Required for RevealUI CMS admin panel
+  transpilePackages: ['@revealui/core', '@revealui/presentation'],
+}
+
+export default nextConfig

package/templates/portfolio/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --port 4000",
+    "build": "next build",
+    "start": "next start --port 4000",
+    "lint": "biome check .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "db:init": "revealui cms",
+    "db:migrate": "drizzle-kit migrate",
+    "db:seed": "tsx src/seed.ts"
+  },
+  "dependencies": {
+    "@revealui/core": "latest",
+    "@revealui/config": "latest",
+    "@revealui/db": "latest",
+    "@revealui/auth": "latest",
+    "@revealui/contracts": "latest",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sharp": "^0.34.0",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.0.0",
+    "@tailwindcss/postcss": "^4.1.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^6.0.0",
+    "vitest": "^4.0.0"
+  }
+}

package/templates/portfolio/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/templates/portfolio/revealui.config.ts

@@ -0,0 +1,19 @@
+import config from '@revealui/config';
+import { buildConfig, universalPostgresAdapter } from '@revealui/core';
+import sharp from 'sharp';
+import { Projects } from './src/collections/Projects';
+
+export default buildConfig({
+  serverURL: config.reveal.publicServerURL || 'http://localhost:4000',
+  secret: config.reveal.secret,
+  db: config.database.url
+    ? universalPostgresAdapter({ connectionString: config.database.url })
+    : universalPostgresAdapter({ provider: 'electric' }),
+  admin: {
+    user: 'users',
+  },
+  collections: [Projects],
+  globals: [],
+  plugins: [],
+  sharp,
+});

package/templates/portfolio/src/app/globals.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+@theme {
+  --color-accent: #2563eb;
+  --color-accent-hover: #1d4ed8;
+}

package/templates/portfolio/src/app/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'RevealUI App',
+  description: 'Built with RevealUI',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/portfolio/src/app/page.tsx

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+
+export default function HomePage() {
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-20">
+      <p className="text-sm font-medium text-accent">Portfolio</p>
+      <h1 className="mt-2 text-4xl font-bold tracking-tight text-gray-900">
+        Hi, I&apos;m [Your Name]
+      </h1>
+      <p className="mt-4 text-lg leading-relaxed text-gray-600">
+        I build things for the web. This portfolio is powered by{' '}
+        <a
+          href="https://revealui.com"
+          className="font-medium text-accent hover:text-accent-hover"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          RevealUI
+        </a>{' '}
+        — edit your projects from the admin panel, no code changes needed.
+      </p>
+
+      <div className="mt-8 flex gap-3">
+        <Link
+          href="/projects"
+          className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-hover"
+        >
+          View projects
+        </Link>
+        <a
+          href="/admin"
+          className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+        >
+          Admin panel
+        </a>
+      </div>
+
+      <div className="mt-16 border-t border-gray-200 pt-8">
+        <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Get started</h2>
+        <ol className="mt-3 space-y-2 text-sm text-gray-700">
+          <li>
+            Replace <code className="rounded bg-gray-200 px-1.5 py-0.5 text-xs">[Your Name]</code>{' '}
+            above with your name
+          </li>
+          <li>
+            <code className="rounded bg-gray-200 px-1.5 py-0.5 text-xs">pnpm db:seed</code> — add
+            sample projects
+          </li>
+          <li>
+            Visit{' '}
+            <a href="/admin" className="text-accent hover:text-accent-hover">
+              /admin
+            </a>{' '}
+            — add your own projects, links, and tags
+          </li>
+        </ol>
+      </div>
+    </main>
+  );
+}