@revealui/cli 0.0.1-pre.1 → 0.3.0

package/templates/basic-blog/src/app/posts/[slug]/page.tsx

@@ -0,0 +1,66 @@
+const API_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:4000';
+
+interface Post {
+  id: string;
+  title: string;
+  slug: string;
+  content: unknown;
+  status: string;
+  publishedAt: string | null;
+}
+
+async function getPost(slug: string): Promise<Post | null> {
+  try {
+    const res = await fetch(`${API_URL}/api/posts?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 PostPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = await getPost(slug);
+
+  if (!post) {
+    return (
+      <main className="mx-auto max-w-2xl px-4 py-16">
+        <h1 className="text-2xl font-bold">Post not found</h1>
+        <p className="mt-4">
+          <a href="/posts" className="text-accent underline">
+            Back to blog
+          </a>
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-16">
+      <nav className="mb-8">
+        <a href="/posts" className="text-sm text-accent underline">
+          &larr; Back to blog
+        </a>
+      </nav>
+      <article>
+        <h1 className="mb-2 text-3xl font-bold">{post.title}</h1>
+        {post.publishedAt && (
+          <time className="mb-8 block text-sm text-gray-500">
+            {new Date(post.publishedAt).toLocaleDateString()}
+          </time>
+        )}
+        <div className="prose">
+          {typeof post.content === 'string' ? (
+            <p>{post.content}</p>
+          ) : (
+            <p className="text-gray-500">Rich text content will render here.</p>
+          )}
+        </div>
+      </article>
+    </main>
+  );
+}

package/templates/basic-blog/src/app/posts/page.tsx

@@ -0,0 +1,61 @@
+const API_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:4000';
+
+interface Post {
+  id: string;
+  title: string;
+  slug: string;
+  status: string;
+  publishedAt: string | null;
+}
+
+async function getPosts(): Promise<Post[]> {
+  try {
+    const res = await fetch(
+      `${API_URL}/api/posts?where[status][equals]=published&sort=-publishedAt`,
+      {
+        cache: 'no-store',
+      },
+    );
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.docs ?? [];
+  } catch {
+    return [];
+  }
+}
+
+export default async function PostsPage() {
+  const posts = await getPosts();
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-16">
+      <h1 className="mb-8 text-3xl font-bold">Blog</h1>
+
+      {posts.length === 0 ? (
+        <p className="text-gray-500">
+          No posts yet. Create your first post in the{' '}
+          <a href="/admin/collections/posts" 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>
+      ) : (
+        <ul className="space-y-6">
+          {posts.map((post) => (
+            <li key={post.id}>
+              <a href={`/posts/${post.slug}`} className="group block">
+                <h2 className="text-xl font-semibold group-hover:text-accent">{post.title}</h2>
+                {post.publishedAt && (
+                  <time className="text-sm text-gray-500">
+                    {new Date(post.publishedAt).toLocaleDateString()}
+                  </time>
+                )}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}

package/templates/basic-blog/src/collections/Posts.ts

@@ -0,0 +1,42 @@
+import type { CollectionConfig } from '@revealui/contracts';
+
+export const Posts: CollectionConfig = {
+  slug: 'posts',
+  labels: { singular: 'Post', plural: 'Posts' },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      unique: true,
+      admin: {
+        description: 'URL-friendly identifier (e.g. "my-first-post")',
+      },
+    },
+    {
+      name: 'content',
+      type: 'richText',
+    },
+    {
+      name: 'status',
+      type: 'select',
+      defaultValue: 'draft',
+      options: [
+        { label: 'Draft', value: 'draft' },
+        { label: 'Published', value: 'published' },
+      ],
+    },
+    {
+      name: 'publishedAt',
+      type: 'date',
+      admin: {
+        description: 'When this post was published',
+      },
+    },
+  ],
+};

package/templates/basic-blog/src/seed.ts

@@ -0,0 +1,73 @@
+/**
+ * Seed script for the basic-blog template.
+ * Creates 3 sample blog posts 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 SeedPost {
+  title: string;
+  slug: string;
+  content: string;
+  status: string;
+  publishedAt: string;
+}
+
+const posts: SeedPost[] = [
+  {
+    title: 'Getting Started with RevealUI',
+    slug: 'getting-started-with-revealui',
+    content:
+      'Welcome to your new RevealUI blog! This post was created by the seed script. Edit or delete it from the admin panel at /admin.',
+    status: 'published',
+    publishedAt: new Date().toISOString(),
+  },
+  {
+    title: 'Customizing Your Blog',
+    slug: 'customizing-your-blog',
+    content:
+      'You can customize your blog by editing the Posts collection in src/collections/Posts.ts. Add new fields, change validation rules, or add hooks to run custom logic.',
+    status: 'published',
+    publishedAt: new Date(Date.now() - 86_400_000).toISOString(),
+  },
+  {
+    title: 'Draft Post Example',
+    slug: 'draft-post-example',
+    content:
+      'This is a draft post. It will not appear on the public blog until you change its status to "published" in the admin panel.',
+    status: 'draft',
+    publishedAt: '',
+  },
+];
+
+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 blog posts to ${API_URL}...`);
+
+  for (const post of posts) {
+    try {
+      const res = await fetch(`${API_URL}/api/posts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(post),
+      });
+
+      if (res.ok) {
+        log(`  Created: ${post.title}`);
+      } else {
+        const error = await res.text();
+        logErr(`  Failed to create "${post.title}": ${error}`);
+      }
+    } catch (err) {
+      logErr(`  Error creating "${post.title}":`, err);
+    }
+  }
+
+  log('Seeding complete.');
+}
+
+seed();

package/templates/basic-blog/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@revealui/dev/ts/nextjs",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "next.config.mjs", "revealui.config.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/e-commerce/.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/e-commerce/_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/e-commerce/next.config.mjs

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

package/templates/e-commerce/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": "^0.2.0",
+    "@revealui/config": "^0.2.0",
+    "@revealui/db": "^0.2.0",
+    "@revealui/auth": "^0.2.0",
+    "@revealui/contracts": "^1.1.0",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sharp": "^0.34.0",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@revealui/dev": "^0.0.1",
+    "@tailwindcss/postcss": "^4.1.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.9.0",
+    "vitest": "^4.0.0"
+  }
+}

package/templates/e-commerce/postcss.config.mjs

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

package/templates/e-commerce/revealui.config.ts

@@ -0,0 +1,20 @@
+import config from '@revealui/config';
+import { buildConfig, universalPostgresAdapter } from '@revealui/core';
+import sharp from 'sharp';
+import { Orders } from './src/collections/Orders';
+import { Products } from './src/collections/Products';
+
+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: [Products, Orders],
+  globals: [],
+  plugins: [],
+  sharp,
+});

package/templates/e-commerce/src/app/globals.css

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

package/templates/e-commerce/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/e-commerce/src/app/page.tsx

@@ -0,0 +1,82 @@
+import Link from 'next/link';
+
+export default function HomePage() {
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-16">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          Your store is live
+        </h1>
+        <p className="mx-auto mt-4 max-w-xl text-lg text-gray-600">
+          Built with{' '}
+          <a
+            href="https://revealui.com"
+            className="font-medium text-accent hover:text-accent-hover"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            RevealUI
+          </a>
+          . Add products from the admin panel, configure Stripe for payments, and start selling.
+        </p>
+
+        <div className="mt-8 flex justify-center gap-3">
+          <Link
+            href="/products"
+            className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-hover"
+          >
+            Browse products
+          </Link>
+          <a
+            href="/admin"
+            className="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+          >
+            Admin panel
+          </a>
+        </div>
+      </div>
+
+      <div className="mt-16 grid gap-6 sm:grid-cols-3">
+        <div className="rounded-lg border border-gray-200 p-5">
+          <h3 className="font-semibold text-gray-900">Products</h3>
+          <p className="mt-1 text-sm text-gray-600">
+            Manage your catalog with custom fields, images, and pricing.
+          </p>
+        </div>
+        <div className="rounded-lg border border-gray-200 p-5">
+          <h3 className="font-semibold text-gray-900">Payments</h3>
+          <p className="mt-1 text-sm text-gray-600">
+            Stripe integration for checkout, subscriptions, and webhooks.
+          </p>
+        </div>
+        <div className="rounded-lg border border-gray-200 p-5">
+          <h3 className="font-semibold text-gray-900">Orders</h3>
+          <p className="mt-1 text-sm text-gray-600">
+            Track and manage orders with status updates and fulfillment.
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-12 rounded-lg border border-gray-200 bg-gray-50 p-6">
+        <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Quick start</h2>
+        <ol className="mt-3 space-y-2 text-sm text-gray-700">
+          <li>
+            <code className="rounded bg-gray-200 px-1.5 py-0.5 text-xs">pnpm db:seed</code> — add
+            sample products
+          </li>
+          <li>
+            Add your Stripe keys to{' '}
+            <code className="rounded bg-gray-200 px-1.5 py-0.5 text-xs">.env.local</code>
+          </li>
+          <li>
+            Visit{' '}
+            <a href="/admin" className="text-accent hover:text-accent-hover">
+              /admin
+            </a>{' '}
+            — manage products and orders
+          </li>
+        </ol>
+      </div>
+    </main>
+  );
+}

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>
+  );
+}