create-crm-starter 0.1.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "create-crm-starter",
+  "version": "0.1.0",
+  "description": "Interactive scaffolder for Next.js home-services CRMs (HVAC, Plumbing, Electrical, general).",
+  "keywords": [
+    "crm",
+    "home-services",
+    "hvac",
+    "plumbing",
+    "electrical",
+    "scaffolder",
+    "nextjs",
+    "create-app",
+    "starter"
+  ],
+  "license": "MIT",
+  "author": "Doug Allen <doug@aideveloper.dev>",
+  "type": "module",
+  "bin": {
+    "create-crm-starter": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "scaffold": "node dist/index.js",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.8.2",
+    "citty": "^0.1.6",
+    "execa": "^9.5.2",
+    "package-manager-detector": "^0.2.6",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}

package/template/base/_dot_gitignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+.env
+.env.local
+.env*.local
+*.log
+.DS_Store
+coverage
+.turbo
+.vercel
+next-env.d.ts

package/template/base/eslint.config.mjs

@@ -0,0 +1,7 @@
+import { FlatCompat } from '@eslint/eslintrc';
+
+const compat = new FlatCompat({ baseDirectory: import.meta.dirname });
+
+const eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')];
+
+export default eslintConfig;

package/template/base/next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  eslint: {
+    // Lint is a dev-time concern (`pnpm lint`) — it shouldn't block a
+    // production deploy. TypeScript checking stays on (see below), so type
+    // errors still fail the build.
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    // Keep type-safety enforced at build time. `pnpm typecheck` must pass.
+    ignoreBuildErrors: false,
+  },
+};
+
+export default nextConfig;

package/template/base/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "crm-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "setup": "node scripts/setup.mjs"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "next": "^15.5.14",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "^15.1.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2"
+  }
+}

package/template/base/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/template/base/scripts/setup.mjs

@@ -0,0 +1,146 @@
+#!/usr/bin/env node
+/* eslint-disable */
+// Interactive env wizard. Walks through every required env var, writes
+// answers to .env.local. Skips entries that already have non-empty values.
+//
+// Run with: pnpm setup
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import readline from 'node:readline';
+import { fileURLToPath } from 'node:url';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(here, '..');
+const envLocalPath = path.join(projectRoot, '.env.local');
+const envExamplePath = path.join(projectRoot, '.env.example');
+
+const COLORS = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  cyan: '\x1b[36m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+};
+const c = (color, s) => `${COLORS[color]}${s}${COLORS.reset}`;
+
+async function readEnvFile(filePath) {
+  try {
+    const text = await fs.readFile(filePath, 'utf8');
+    const map = new Map();
+    for (const line of text.split('\n')) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#')) continue;
+      const eq = trimmed.indexOf('=');
+      if (eq < 0) continue;
+      const key = trimmed.slice(0, eq).trim();
+      const value = trimmed.slice(eq + 1).trim();
+      map.set(key, value);
+    }
+    return { text, map };
+  } catch {
+    return { text: '', map: new Map() };
+  }
+}
+
+function ask(rl, question) {
+  return new Promise((resolve) => rl.question(question, (answer) => resolve(answer)));
+}
+
+async function main() {
+  console.log(c('bold', '\n🔑 Environment setup\n'));
+
+  const { map: existing } = await readEnvFile(envLocalPath);
+  const { text: exampleText } = await readEnvFile(envExamplePath);
+  if (!exampleText) {
+    console.log(c('red', 'No .env.example found — re-run the scaffolder.'));
+    process.exit(1);
+  }
+
+  // Parse .env.example into sections by '# --- Heading ---' comments.
+  const sections = [];
+  let current = { heading: 'Other', keys: [] };
+  for (const line of exampleText.split('\n')) {
+    const trimmed = line.trim();
+    const headingMatch = trimmed.match(/^# --- (.*) ---/);
+    if (headingMatch) {
+      if (current.keys.length > 0) sections.push(current);
+      current = { heading: headingMatch[1], keys: [] };
+      continue;
+    }
+    if (!trimmed || trimmed.startsWith('#')) continue;
+    const eq = trimmed.indexOf('=');
+    if (eq < 0) continue;
+    const key = trimmed.slice(0, eq).trim();
+    const example = trimmed.slice(eq + 1).trim();
+    current.keys.push({ key, example });
+  }
+  if (current.keys.length > 0) sections.push(current);
+
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  const answers = new Map(existing);
+  let setCount = 0;
+  let skipCount = 0;
+
+  console.log(c('dim', `Found ${sections.reduce((acc, s) => acc + s.keys.length, 0)} env vars across ${sections.length} sections.`));
+  console.log(c('dim', `Existing values in .env.local will be kept; just hit Enter to skip them.\n`));
+
+  for (const section of sections) {
+    console.log(c('cyan', `\n${section.heading}`));
+    for (const { key, example } of section.keys) {
+      const current = answers.get(key) ?? '';
+      const prompt = current
+        ? `  ${c('bold', key)} ${c('dim', `(current: ${maskSecret(current)})`)}: `
+        : `  ${c('bold', key)} ${example ? c('dim', `(e.g. ${example})`) : ''}: `;
+      const answer = (await ask(rl, prompt)).trim();
+      if (answer) {
+        answers.set(key, answer);
+        setCount++;
+      } else if (!current) {
+        skipCount++;
+      }
+    }
+  }
+
+  rl.close();
+
+  // Write .env.local — preserve any existing keys not in the example.
+  const lines = [];
+  const written = new Set();
+  for (const section of sections) {
+    lines.push(`# --- ${section.heading} ---`);
+    for (const { key } of section.keys) {
+      lines.push(`${key}=${answers.get(key) ?? ''}`);
+      written.add(key);
+    }
+    lines.push('');
+  }
+  // Pass-through anything in .env.local that wasn't in the example.
+  const passthrough = [];
+  for (const [key, value] of answers.entries()) {
+    if (!written.has(key)) passthrough.push(`${key}=${value}`);
+  }
+  if (passthrough.length > 0) {
+    lines.push('# --- Other ---');
+    lines.push(...passthrough);
+    lines.push('');
+  }
+
+  await fs.writeFile(envLocalPath, lines.join('\n') + '\n', 'utf8');
+
+  console.log(c('green', `\n✓ Wrote .env.local`));
+  console.log(c('dim', `  ${setCount} set / ${skipCount} skipped\n`));
+  console.log(`Next: ${c('bold', 'pnpm dev')}\n`);
+}
+
+function maskSecret(value) {
+  if (value.length <= 8) return value;
+  return `${value.slice(0, 4)}…${value.slice(-4)}`;
+}
+
+main().catch((err) => {
+  console.error(c('red', '\n✕ Setup failed:'), err);
+  process.exit(1);
+});

package/template/base/src/app/globals.css

@@ -0,0 +1,68 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 47.4% 11.2%);
+
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 47.4% 11.2%);
+
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 47.4% 11.2%);
+
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(222.2 84% 4.9%);
+
+  /* Primary brand — only --brand + --brand-hex are rewritten by the brand
+     installer; --color-brand reads --brand so Tailwind utilities like
+     bg-brand / text-brand pick up the override automatically. */
+  --brand: 199 89% 48%;
+  --brand-hex: #0ea5e9;
+  --color-brand: hsl(var(--brand));
+
+  /* Accent brand — same pattern. */
+  --brand-accent: 38 92% 50%;
+  --brand-accent-hex: #f59e0b;
+  --color-brand-accent: hsl(var(--brand-accent));
+
+  --radius: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  @theme {
+    --color-background: hsl(222.2 84% 4.9%);
+    --color-foreground: hsl(210 40% 98%);
+    --color-muted: hsl(217.2 32.6% 17.5%);
+    --color-muted-foreground: hsl(215 20.2% 65.1%);
+    --color-card: hsl(222.2 84% 4.9%);
+    --color-card-foreground: hsl(210 40% 98%);
+    --color-border: hsl(217.2 32.6% 17.5%);
+    --color-input: hsl(217.2 32.6% 17.5%);
+    --color-primary: hsl(210 40% 98%);
+    --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+  }
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}

package/template/base/src/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'CRM',
+  description: 'A home-services CRM built with create-crm-starter',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className="bg-background text-foreground min-h-screen antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}

package/template/base/src/app/page.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function HomePage() {
+  return (
+    <main className="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center gap-8 p-8">
+      <header className="text-center">
+        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Welcome to your CRM</h1>
+        <p className="text-muted-foreground mt-3 text-lg">
+          Generated by <code className="bg-muted rounded px-1.5 py-0.5">create-crm-starter</code>
+        </p>
+      </header>
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle>Next steps</CardTitle>
+          <CardDescription>Finish setup and explore the dashboard.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <p>
+            1. Fill in <code className="bg-muted rounded px-1 py-0.5">.env.local</code> with your auth and database credentials.
+          </p>
+          <p>
+            2. Sign up at <Link href="/sign-up" className="text-brand underline">/sign-up</Link> to create your first admin user.
+          </p>
+          <p>
+            3. Head to <Link href="/dashboard" className="text-brand underline">/dashboard</Link> once authenticated.
+          </p>
+        </CardContent>
+      </Card>
+      <div className="flex gap-3">
+        <Button asChild><Link href="/sign-in">Sign in</Link></Button>
+        <Button asChild variant="outline"><Link href="/sign-up">Sign up</Link></Button>
+      </div>
+    </main>
+  );
+}

package/template/base/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        outline: 'text-foreground',
+        brand: 'border-transparent bg-brand text-white',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/template/base/src/components/ui/button.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-brand underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/template/base/src/components/ui/card.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/template/base/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Input.displayName = 'Input';
+
+export { Input };

package/template/base/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = 'Label';
+
+export { Label };

package/template/base/src/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ className, orientation = 'horizontal', ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = 'Separator';
+
+export { Separator };

package/template/base/src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
+}
+
+export { Skeleton };

package/template/base/src/lib/utils.ts

@@ -0,0 +1,17 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatCurrency(cents: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(cents / 100);
+}
+
+export function formatDate(d: Date | string | number, opts: Intl.DateTimeFormatOptions = { dateStyle: 'medium' }): string {
+  return new Intl.DateTimeFormat('en-US', opts).format(new Date(d));
+}

package/template/base/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "mobile"]
+}

package/template/extras/auth-better-auth/src/app/(auth)/layout.tsx

@@ -0,0 +1,7 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="bg-muted/30 flex min-h-screen items-center justify-center p-6">
+      <div className="w-full max-w-md">{children}</div>
+    </main>
+  );
+}