@revealui/cli 0.0.0-canary-20260402004330

package/templates/portfolio/src/app/projects/[slug]/page.tsx

@@ -0,0 +1,95 @@
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:4000';
+
+interface Project {
+  id: string;
+  title: string;
+  slug: string;
+  description: unknown;
+  tags?: Array<{ tag: string }>;
+  link?: string;
+  image?: { url: string; alt?: string } | null;
+}
+
+async function getProject(slug: string): Promise<Project | null> {
+  try {
+    const res = await fetch(`${API_URL}/api/projects?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 ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const project = await getProject(slug);
+
+  if (!project) {
+    return (
+      <main className="mx-auto max-w-2xl px-4 py-16">
+        <h1 className="text-2xl font-bold">Project not found</h1>
+        <p className="mt-4">
+          <a href="/projects" className="text-accent underline">
+            Back to projects
+          </a>
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-16">
+      <nav className="mb-8">
+        <a href="/projects" className="text-sm text-accent underline">
+          &larr; Back to projects
+        </a>
+      </nav>
+      <article>
+        {project.image?.url && (
+          <Image
+            src={project.image.url}
+            alt={project.image.alt || project.title}
+            width={800}
+            height={450}
+            className="mb-8 aspect-video w-full rounded-lg object-cover"
+          />
+        )}
+        <h1 className="mb-2 text-3xl font-bold">{project.title}</h1>
+        {project.tags && project.tags.length > 0 && (
+          <div className="mb-6 flex flex-wrap gap-2">
+            {project.tags.map((t) => (
+              <span
+                key={t.tag}
+                className="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700"
+              >
+                {t.tag}
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="prose">
+          {typeof project.description === 'string' ? (
+            <p>{project.description}</p>
+          ) : (
+            <p className="text-gray-500">Project description will render here.</p>
+          )}
+        </div>
+        {project.link && (
+          <a
+            href={project.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-8 inline-block rounded bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700"
+          >
+            View project &rarr;
+          </a>
+        )}
+      </article>
+    </main>
+  );
+}

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

@@ -0,0 +1,85 @@
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:4000';
+
+interface Project {
+  id: string;
+  title: string;
+  slug: string;
+  description: unknown;
+  tags?: Array<{ tag: string }>;
+  link?: string;
+  image?: { url: string; alt?: string } | null;
+}
+
+async function getProjects(): Promise<Project[]> {
+  try {
+    const res = await fetch(`${API_URL}/api/projects?sort=-createdAt`, {
+      cache: 'no-store',
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.docs ?? [];
+  } catch {
+    return [];
+  }
+}
+
+export default async function ProjectsPage() {
+  const projects = await getProjects();
+
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-16">
+      <h1 className="mb-8 text-3xl font-bold">Projects</h1>
+
+      {projects.length === 0 ? (
+        <p className="text-gray-500">
+          No projects yet. Add projects in the{' '}
+          <a href="/admin/collections/projects" 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">
+          {projects.map((project) => (
+            <a
+              key={project.id}
+              href={`/projects/${project.slug}`}
+              className="block rounded-lg border border-gray-200 p-4 transition-shadow hover:shadow-md"
+            >
+              {project.image?.url && (
+                <Image
+                  src={project.image.url}
+                  alt={project.image.alt || project.title}
+                  width={600}
+                  height={338}
+                  className="mb-4 aspect-video w-full rounded object-cover"
+                />
+              )}
+              <h2 className="text-xl font-semibold">{project.title}</h2>
+              {project.tags && project.tags.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {project.tags.map((t) => (
+                    <span
+                      key={t.tag}
+                      className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700"
+                    >
+                      {t.tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+              {project.link && (
+                <span className="mt-3 inline-block text-sm text-accent underline">
+                  View project &rarr;
+                </span>
+              )}
+            </a>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

package/templates/portfolio/src/collections/Projects.ts

@@ -0,0 +1,49 @@
+import type { CollectionConfig } from '@revealui/contracts';
+
+export const Projects: CollectionConfig = {
+  slug: 'projects',
+  labels: { singular: 'Project', plural: 'Projects' },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      unique: true,
+      admin: {
+        description: 'URL-friendly identifier (e.g. "my-cool-project")',
+      },
+    },
+    {
+      name: 'description',
+      type: 'richText',
+    },
+    {
+      name: 'image',
+      type: 'upload',
+      relationTo: 'media',
+    },
+    {
+      name: 'tags',
+      type: 'array',
+      fields: [
+        {
+          name: 'tag',
+          type: 'text',
+          required: true,
+        },
+      ],
+    },
+    {
+      name: 'link',
+      type: 'text',
+      admin: {
+        description: 'External URL for the project (e.g. GitHub repo or live demo)',
+      },
+    },
+  ],
+};

package/templates/portfolio/src/seed.ts

@@ -0,0 +1,73 @@
+/**
+ * Seed script for the portfolio template.
+ * Creates 3 sample projects 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 SeedProject {
+  title: string;
+  slug: string;
+  description: string;
+  tags: Array<{ tag: string }>;
+  link: string;
+}
+
+const projects: SeedProject[] = [
+  {
+    title: 'Weather Dashboard',
+    slug: 'weather-dashboard',
+    description:
+      'A real-time weather dashboard built with React and a public weather API. Displays forecasts, radar maps, and severe weather alerts.',
+    tags: [{ tag: 'React' }, { tag: 'TypeScript' }, { tag: 'API' }],
+    link: 'https://github.com/example/weather-dashboard',
+  },
+  {
+    title: 'Task Manager CLI',
+    slug: 'task-manager-cli',
+    description:
+      'A command-line task manager written in TypeScript with SQLite storage, priority sorting, and due date reminders.',
+    tags: [{ tag: 'TypeScript' }, { tag: 'Node.js' }, { tag: 'CLI' }],
+    link: 'https://github.com/example/task-manager-cli',
+  },
+  {
+    title: 'Design System',
+    slug: 'design-system',
+    description:
+      'A component library with 30+ accessible UI primitives, built with Tailwind CSS and documented with Storybook.',
+    tags: [{ tag: 'React' }, { tag: 'Tailwind CSS' }, { tag: 'Storybook' }],
+    link: 'https://github.com/example/design-system',
+  },
+];
+
+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 projects to ${API_URL}...`);
+
+  for (const project of projects) {
+    try {
+      const res = await fetch(`${API_URL}/api/projects`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(project),
+      });
+
+      if (res.ok) {
+        log(`  Created: ${project.title}`);
+      } else {
+        const error = await res.text();
+        logErr(`  Failed to create "${project.title}": ${error}`);
+      }
+    } catch (err) {
+      logErr(`  Error creating "${project.title}":`, err);
+    }
+  }
+
+  log('Seeding complete.');
+}
+
+seed();

package/templates/portfolio/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/starter/.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/starter/_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/starter/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/starter/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/starter/postcss.config.mjs

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

package/templates/starter/revealui.config.ts

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

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

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

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

@@ -0,0 +1,18 @@
+export default function HomePage() {
+  return (
+    <main className="mx-auto max-w-xl px-4 py-16">
+      <h1 className="text-3xl font-bold tracking-tight text-gray-900">RevealUI</h1>
+      <p className="mt-3 text-gray-600">
+        Your project is running. Visit{' '}
+        <a href="/admin" className="font-medium text-accent hover:text-accent-hover">
+          /admin
+        </a>{' '}
+        to manage content.
+      </p>
+      <p className="mt-6 text-sm text-gray-500">
+        Edit <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs">src/app/page.tsx</code> to
+        customize this page.
+      </p>
+    </main>
+  );
+}

package/templates/starter/src/seed.ts

@@ -0,0 +1,40 @@
+/**
+ * Database seed script
+ *
+ * Run with: pnpm db:seed
+ *
+ * Customize this file to populate your database with initial data.
+ * The examples below show common patterns — uncomment and adapt as needed.
+ */
+
+// import { getClient } from '@revealui/db/client';
+// import { users, posts } from '@revealui/db/schema';
+
+async function seed(): Promise<void> {
+  // const db = getClient();
+
+  // Example: create an admin user
+  // await db.insert(users).values({
+  //   id: crypto.randomUUID(),
+  //   email: 'admin@example.com',
+  //   name: 'Admin',
+  //   role: 'admin',
+  //   status: 'active',
+  //   emailVerified: true,
+  // });
+
+  // Example: create sample content
+  // await db.insert(posts).values({
+  //   id: crypto.randomUUID(),
+  //   title: 'Welcome to RevealUI',
+  //   slug: 'welcome',
+  //   status: 'published',
+  // });
+
+  process.stdout.write('Seed complete.\n');
+}
+
+seed().catch((error: unknown) => {
+  process.stderr.write(`Seed failed: ${error}\n`);
+  process.exit(1);
+});

package/templates/starter/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"]
+}