@donotdev/cli 0.0.3

package/templates/app-next/src/pages/legal/TermsPage.tsx.example

@@ -0,0 +1,71 @@
+/**
+ * @fileoverview Terms of Service Page
+ * @description Terms of service page using the reusable template
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+
+import { FileText } from 'lucide-react';
+
+import { type PageMeta } from '@donotdev/core';
+import { TermsOfServiceTemplate } from '@donotdev/templates';
+import { PageContainer } from '@donotdev/ui';
+
+import { legalConfig } from '../../config/legal';
+
+/**
+ * Terms page translation namespace
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const NAMESPACE = 'terms';
+
+/**
+ * Terms page metadata configuration
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const meta: PageMeta = {
+  namespace: NAMESPACE,
+  icon: <FileText />,
+  hideFromMenu: true,
+};
+
+/**
+ * Terms of Service Page Component
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ *
+ * Uses the reusable TermsOfServiceTemplate with centralized legal config
+ */
+function TermsPage() {
+  return (
+    <PageContainer>
+      <TermsOfServiceTemplate
+        companyName={legalConfig.company.name}
+        websiteUrl={legalConfig.website.url}
+        legalEmail={legalConfig.contact.email}
+        companyAddress={legalConfig.contact.address}
+        jurisdiction={legalConfig.jurisdiction.country}
+        arbitrationOrg={legalConfig.jurisdiction.arbitrationOrg}
+        arbitrationLocation={legalConfig.jurisdiction.arbitrationLocation}
+        sections={legalConfig.sections.terms}
+        contactInfo={{
+          supportEmail: legalConfig.contact.supportEmail,
+        }}
+        lastUpdated={legalConfig.lastUpdated?.terms}
+      />
+    </PageContainer>
+  );
+}
+
+export default TermsPage;
+

package/templates/app-next/src/themes.css.example

@@ -0,0 +1,179 @@
+/* src/themes.css */
+
+/* ===========================
+   APP-WIDE SETTINGS
+   These apply to all themes - spacing, radius, shadows, routing animations
+   =========================== */
+:root {
+  /* ===========================
+     ROUTING ANIMATIONS
+     Customize page transition animations
+     Pure CSS - zero JS overhead. Respects prefers-reduced-motion.
+     Override in themes.css: --routing-animation: slide; to change animation type
+     =========================== */
+  /* Single animation type (fade, slide, or none to disable) - app-wide */
+  /* --routing-animation: fade; */  /* fade | slide | none */
+  /* --routing-default-duration: var(--dur-normal); */  /* Animation duration */
+
+  /* Breakpoint-specific durations (all inherit from --routing-default-duration) */
+  /* --routing-mobile-duration: var(--routing-default-duration); */
+  /* --routing-tablet-duration: var(--routing-default-duration); */
+  /* --routing-desktop-duration: var(--routing-default-duration); */
+  /* --routing-wide-duration: var(--routing-default-duration); */
+  
+  /* Examples: */
+  /* --routing-animation: slide; */  /* Use slide animation */
+  /* --routing-animation: none; */  /* Disable animations */
+  /* --routing-default-duration: 200ms; */  /* Faster animations */
+
+  /* ===========================
+     SPACING OVERRIDES
+     Customize spacing scale
+     =========================== */
+  /* --gap-sm: 0.5rem; */        /* 8px - tight spacing */
+  /* --gap-md: 1rem; */          /* 16px - medium spacing (default) */
+  /* --gap-lg: 2rem; */          /* 32px - large spacing */
+
+  /* ===========================
+     BORDER RADIUS OVERRIDES
+     Customize component corners
+     =========================== */
+  /* --radius-interactive: var(--radius-none); */ /* Buttons, links (default: square) */
+  /* --radius-surface: var(--radius-md); */ /* Cards, dialogs (default: 8px round) */
+  /* --radius-floating: var(--radius-none); */ /* Dropdowns, popovers (default: square) */
+
+  /* ===========================
+     SHADOW OVERRIDES
+     Customize elevation
+     =========================== */
+  /* --shadow-sm: ...; */        /* Small shadows */
+  /* --shadow-md: ...; */        /* Medium shadows (default) */
+  /* --shadow-xl: ...; */        /* Large shadows */
+}
+
+/* ===========================
+   LIGHT THEME (High Contrast Light)
+   Background: White
+   Foreground: Black
+   =========================== */
+:root.light {
+  --theme-icon: 'Sun';
+  --theme-label: 'Light';
+  --theme-is-dark: 0;
+
+  /* ===========================
+     1. USER SETS - 5 BRAND COLORS
+     =========================== */
+  --foreground: #000000;
+  --background: #ffffff;
+  --primary: #00bcd4; /* Cyan */
+  --secondary: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
+  --accent: #ff9800; /* Orange */
+
+  /* ===========================
+     2. FRAMEWORK DEFAULTS - STATUS COLORS
+     (Override if needed)
+     =========================== */
+  --success: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
+  --warning: #f59e0b;
+  --destructive: #dc2626;
+
+  /* ===========================
+     3. AUTO-COMPUTED - SURFACES
+     (Plain sight computation for easy overriding)
+     =========================== */
+  --muted: color-mix(in oklab, var(--foreground) 5%, var(--background));
+  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
+  --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
+  --input: var(--muted);
+  --ring: var(--primary);
+
+      --card: var(--background);
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--card-foreground);
+  --surface-1: var(--card);
+
+  /* ===========================
+     4. AUTO-COMPUTED - TEXT ON BRAND COLORS
+     (Mapped to foreground/background for consistency)
+     =========================== */
+  --primary-foreground: var(--foreground);
+  --secondary-foreground: var(--background);
+  --accent-foreground: var(--foreground);
+  
+  --success-foreground: var(--background);
+  --warning-foreground: var(--foreground);
+  --destructive-foreground: var(--background);
+}
+
+/* ===========================
+   DARK THEME (High Contrast Dark)
+   Background: Black
+   Foreground: White
+   =========================== */
+:root.dark {
+  --theme-icon: 'Moon';
+  --theme-label: 'Dark';
+  --theme-is-dark: 1;
+
+  /* ===========================
+     1. USER SETS - 5 BRAND COLORS
+     =========================== */
+  --foreground: #ffffff;
+  --background: #000000;
+  --primary: #00bcd4; /* Cyan */
+  --secondary: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
+  --accent: #ff9800; /* Orange */
+
+  /* ===========================
+     2. FRAMEWORK DEFAULTS - STATUS COLORS
+     =========================== */
+  --success: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
+  --warning: #f59e0b;
+  --destructive: #dc2626; /* Red-600 - WCAG AA compliant (4.83:1 with white) */
+
+  /* ===========================
+     3. AUTO-COMPUTED - SURFACES
+     =========================== */
+  --muted: color-mix(in oklab, var(--foreground) 10%, var(--background));
+  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
+  --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
+  --input: var(--muted);
+  --ring: var(--primary);
+
+      --card: var(--background);
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--card-foreground);
+  --surface-1: var(--card);
+
+  /* ===========================
+     4. AUTO-COMPUTED - TEXT ON BRAND COLORS
+     =========================== */
+  --primary-foreground: var(--background);
+  --secondary-foreground: var(--foreground);
+  --accent-foreground: var(--background);
+
+  --success-foreground: var(--foreground);
+  --warning-foreground: var(--background);
+  --destructive-foreground: var(--foreground);
+}
+
+  /* ===========================
+   CUSTOM THEMES
+     =========================== */
+
+/* Add your custom themes here */
+/* Example:
+.brand {
+  --theme-icon: 'Zap';
+  --theme-label: 'Brand';
+  --background: #your-brand-background;
+  --foreground: #your-brand-foreground;
+  --primary: #your-brand-primary;
+  --secondary: #your-brand-secondary;
+  --accent: #your-brand-accent;
+  ... other variables ...
+}
+*/

package/templates/app-next/tsconfig.json.example

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "types": ["node"],
+    "jsx": "preserve",
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["src", "next.config.ts"],
+  "exclude": ["node_modules", "dist", ".next"]
+}

package/templates/app-payload/.env.example

@@ -0,0 +1,28 @@
+# Payload CMS Configuration
+PAYLOAD_SECRET=your-super-secret-key-here
+PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3001
+
+# Database Configuration (MongoDB)
+MONGODB_URI=mongodb://localhost:27017/{{projectName}}
+
+# For production, use MongoDB Atlas or similar
+# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/{{projectName}}?retryWrites=true&w=majority
+
+# Optional: Redis for caching (recommended for production)
+# REDIS_URL=redis://localhost:6379
+
+# CORS Origins (comma-separated)
+CORS_ORIGINS=http://localhost:3000,https://{{projectName}}.com,https://admin.{{projectName}}.com
+
+# File Upload Configuration
+PAYLOAD_PUBLIC_MAX_FILE_SIZE=5000000
+
+# Admin Configuration
+PAYLOAD_PUBLIC_ADMIN_EMAIL=admin@{{projectName}}.com
+PAYLOAD_PUBLIC_ADMIN_PASSWORD=your-admin-password
+
+# Optional: Email Configuration (for notifications)
+# SMTP_HOST=smtp.gmail.com
+# SMTP_PORT=587
+# SMTP_USER=your-email@gmail.com
+# SMTP_PASS=your-app-password 

package/templates/app-payload/README.md.example

@@ -0,0 +1,233 @@
+# {{projectName}} CMS (Payload)
+
+This is a **Payload CMS** application that provides a professional content management system for your business website.
+
+## 🚀 What is Payload CMS?
+
+Payload is a **headless CMS** that gives you:
+- **Database** - Stores all your content (text, images, etc.)
+- **Admin Interface** - Professional web interface for editing content
+- **API** - Your website fetches content via REST API calls
+- **Media Library** - Upload and manage images/files
+
+## 📁 Project Structure
+
+```
+{{appName}}/
+├── collections/           # Content types (Hero, Services, Products, etc.)
+│   ├── Users.ts          # Admin users authentication
+│   ├── Media.ts          # File uploads and media management
+│   ├── Hero.ts           # Landing page hero section
+│   ├── Services.ts       # Business services
+│   ├── Products.ts       # Product offerings
+│   ├── Testimonials.ts   # Client feedback
+│   └── Company.ts        # Company information
+├── src/
+│   └── server.ts         # Express server with Payload
+├── payload.config.ts     # Payload configuration
+├── package.json          # Dependencies and scripts
+└── .env                  # Environment variables
+```
+
+## 🛠️ Content Types
+
+### 1. **Hero Section** (`/admin/collections/hero`)
+- **Title** - Main headline
+- **Subtitle** - Supporting text
+- **CTA Button** - Call-to-action text and link
+- **Background Image** - Hero background
+
+### 2. **Services** (`/admin/collections/services`)
+- **Name** - Service name
+- **Description** - Detailed description
+- **Category** - Consulting, Training, Development, Support
+- **Features** - List of service features
+- **Pricing** - Pricing information
+- **Icon** - Service icon
+
+### 3. **Products** (`/admin/collections/products`)
+- **Name** - Product name
+- **Description** - Product description
+- **Category** - Framework, Tool, Platform, Service
+- **Features** - Key product features
+- **Demo Link** - Live demo URL
+- **Documentation** - Documentation link
+- **GitHub** - Repository link
+
+### 4. **Testimonials** (`/admin/collections/testimonials`)
+- **Client Name** - Client's name
+- **Company** - Company name
+- **Quote** - Testimonial text
+- **Rating** - 1-5 star rating
+- **Avatar** - Client photo
+- **Project** - Related project
+
+### 5. **Company Info** (`/admin/collections/company`)
+- **Name** - Company name
+- **Contact** - Email, phone, address
+- **Social Media** - LinkedIn, Twitter, GitHub, etc.
+- **Logo** - Company logo
+- **Favicon** - Website favicon
+
+## 🚀 Quick Start
+
+### 1. Install Dependencies
+```bash
+bun install
+```
+
+### 2. Set Up Environment
+```bash
+cp .env.example .env
+# Edit .env with your configuration
+```
+
+### 3. Set Up Database
+**Option A: Local MongoDB**
+```bash
+# Install MongoDB locally or use Docker
+docker run -d -p 27017:27017 --name mongodb mongo:latest
+```
+
+**Option B: MongoDB Atlas (Recommended)**
+- Create account at [MongoDB Atlas](https://www.mongodb.com/atlas)
+- Create cluster and get connection string
+- Update `MONGODB_URI` in `.env`
+
+### 4. Start Development Server
+```bash
+bun run dev
+```
+
+### 5. Access Admin Panel
+- **URL**: http://localhost:3001/admin
+- **Email**: admin@{{projectName}}.com
+- **Password**: your-admin-password (from .env)
+
+## 🔗 API Endpoints
+
+### Content API
+- **Hero**: `GET /api/hero`
+- **Services**: `GET /api/services`
+- **Products**: `GET /api/products`
+- **Testimonials**: `GET /api/testimonials`
+- **Company**: `GET /api/company`
+
+### Example API Call
+```javascript
+// Fetch hero content
+const response = await fetch('http://localhost:3001/api/hero');
+const heroData = await response.json();
+console.log(heroData.docs[0]); // Latest hero content
+```
+
+## 🎯 How It Works
+
+### 1. **Content Management**
+- Login to admin panel at `/admin`
+- Edit content using the professional interface
+- Save changes instantly
+
+### 2. **Content Delivery**
+- Your website makes API calls to fetch content
+- Content is returned as JSON
+- Website displays the content dynamically
+
+### 3. **Real-time Updates**
+- Changes in admin appear immediately on website
+- No code deployment needed
+- Non-developers can update content
+
+## 🔧 Configuration
+
+### Environment Variables
+```bash
+# Required
+PAYLOAD_SECRET=your-secret-key
+MONGODB_URI=mongodb://localhost:27017/{{projectName}}
+
+# Optional
+PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3001
+CORS_ORIGINS=http://localhost:3000,https://{{projectName}}.com
+```
+
+### Customization
+- **Add new content types**: Create new files in `collections/`
+- **Modify fields**: Edit field definitions in collection files
+- **Change admin UI**: Customize admin interface in `payload.config.ts`
+
+## 🚀 Deployment
+
+### Vercel Deployment
+1. **Connect to Vercel**
+2. **Set environment variables** in Vercel dashboard
+3. **Deploy** - Vercel will build and deploy automatically
+
+### Environment Variables for Production
+```bash
+PAYLOAD_SECRET=your-production-secret
+MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/{{projectName}}
+PAYLOAD_PUBLIC_SERVER_URL=https://admin.{{projectName}}.com
+CORS_ORIGINS=https://{{projectName}}.com,https://admin.{{projectName}}.com
+```
+
+## 📊 Admin Features
+
+- **User Management** - Create admin users
+- **Media Library** - Upload and organize images
+- **Content Versioning** - Track content changes
+- **Draft/Published** - Preview before publishing
+- **Rich Text Editor** - Format content easily
+- **Image Optimization** - Automatic image resizing
+- **File Upload** - Drag & drop file uploads
+
+## 🔒 Security
+
+- **Authentication** - Secure admin login
+- **CORS Protection** - Configured for your domains
+- **File Upload Limits** - 5MB file size limit
+- **Input Validation** - All inputs validated
+- **HTTPS Required** - Secure in production
+
+## 🎨 Integration with Website
+
+Your website (Next.js/Vite) connects to this CMS:
+
+```typescript
+// Example: Fetch hero content
+const { data: hero } = await fetch('/api/hero').then(r => r.json());
+
+// Example: Fetch services
+const { data: services } = await fetch('/api/services?where[isActive][equals]=true').then(r => r.json());
+
+// Example: Fetch testimonials
+const { data: testimonials } = await fetch('/api/testimonials?sort=order').then(r => r.json());
+```
+
+## 🆘 Troubleshooting
+
+### Common Issues
+
+**"MongoDB connection failed"**
+- Check `MONGODB_URI` in `.env`
+- Ensure MongoDB is running
+- Verify network connectivity
+
+**"Admin panel not loading"**
+- Check `PAYLOAD_SECRET` is set
+- Verify `PAYLOAD_PUBLIC_SERVER_URL` is correct
+- Check browser console for errors
+
+**"API calls failing"**
+- Verify CORS configuration
+- Check server is running on correct port
+- Ensure API endpoints are accessible
+
+### Getting Help
+- Check [Payload Documentation](https://payloadcms.com/docs)
+- Review server logs for error messages
+- Verify environment variables are set correctly
+
+---
+
+**That's it!** You now have a professional CMS that your website can use to fetch dynamic content. No more hardcoded text - everything is manageable through the admin interface. 

package/templates/app-payload/collections/Company.ts.example

@@ -0,0 +1,125 @@
+import { CollectionConfig } from 'payload/types';
+
+export const Company: CollectionConfig = {
+  slug: 'company',
+  admin: {
+    useAsTitle: 'name',
+    defaultColumns: ['name', 'email', 'phone', 'updatedAt'],
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+      admin: {
+        description: 'Company name',
+      },
+    },
+    {
+      name: 'tagline',
+      type: 'text',
+      admin: {
+        description: 'Company tagline or slogan',
+      },
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      admin: {
+        description: 'Company description for about page',
+      },
+    },
+    {
+      name: 'email',
+      type: 'email',
+      required: true,
+      admin: {
+        description: 'Primary contact email',
+      },
+    },
+    {
+      name: 'phone',
+      type: 'text',
+      admin: {
+        description: 'Contact phone number',
+      },
+    },
+    {
+      name: 'address',
+      type: 'group',
+      fields: [
+        {
+          name: 'street',
+          type: 'text',
+        },
+        {
+          name: 'city',
+          type: 'text',
+        },
+        {
+          name: 'state',
+          type: 'text',
+        },
+        {
+          name: 'zip',
+          type: 'text',
+        },
+        {
+          name: 'country',
+          type: 'text',
+        },
+      ],
+      admin: {
+        description: 'Company address',
+      },
+    },
+    {
+      name: 'social',
+      type: 'group',
+      fields: [
+        {
+          name: 'website',
+          type: 'text',
+        },
+        {
+          name: 'linkedin',
+          type: 'text',
+        },
+        {
+          name: 'twitter',
+          type: 'text',
+        },
+        {
+          name: 'github',
+          type: 'text',
+        },
+        {
+          name: 'youtube',
+          type: 'text',
+        },
+      ],
+      admin: {
+        description: 'Social media links',
+      },
+    },
+    {
+      name: 'logo',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        description: 'Company logo',
+      },
+    },
+    {
+      name: 'favicon',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        description: 'Website favicon',
+      },
+    },
+  ],
+};