From e545d6271db6585b08c0cae9331b688893baa79c Mon Sep 17 00:00:00 2001
From: Josephat-S <sangwajozaphat@gmail.com>
Date: Mon, 25 May 2026 20:46:43 +0200
Subject: [PATCH] add opusify add command to add some plugins/features after
 the project has been created

---
 index.js                 |   7 ++
 src/commands/add.js      |  84 ++++++++++++++++++
 src/plugins/analytics.js | 159 ++++++++++++++++++++++++++++++++++
 src/plugins/auth.js      | 179 +++++++++++++++++++++++++++++++++++++++
 src/plugins/dark-mode.js | 116 +++++++++++++++++++++++++
 5 files changed, 545 insertions(+)
 create mode 100644 src/commands/add.js
 create mode 100644 src/plugins/analytics.js
 create mode 100644 src/plugins/auth.js
 create mode 100644 src/plugins/dark-mode.js

diff --git a/index.js b/index.js
index 7fca8a4..72df602 100755
--- a/index.js
+++ b/index.js
@@ -6,6 +6,7 @@ import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import { generateProject } from './src/generate.js';
+import { addAction } from './src/commands/add.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -384,4 +385,10 @@ program
   .option('-t, --template <template>', 'Show details for a specific template')
   .action(listAction);
 
+program
+  .command('add')
+  .description('Add a feature plugin to an existing Opusify project')
+  .argument('<plugin>', 'Plugin to add (auth, dark-mode, analytics)')
+  .action(addAction);
+
 program.parse();
diff --git a/src/commands/add.js b/src/commands/add.js
new file mode 100644
index 0000000..5640c64
--- /dev/null
+++ b/src/commands/add.js
@@ -0,0 +1,84 @@
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import ora from 'ora';
+import { execSync } from 'child_process';
+import { addAuth } from '../plugins/auth.js';
+import { addDarkMode } from '../plugins/dark-mode.js';
+import { addAnalytics } from '../plugins/analytics.js';
+
+const PLUGINS = {
+  auth: { label: 'Authentication (NextAuth.js)', fn: addAuth },
+  'dark-mode': { label: 'Dark Mode Toggle', fn: addDarkMode },
+  analytics: { label: 'Analytics (Vercel Analytics)', fn: addAnalytics },
+};
+
+export async function addAction(plugin) {
+  const cwd = process.cwd();
+  const configPath = path.join(cwd, 'opusify.config.json');
+
+  // Check if we're in an Opusify project
+  if (!fs.existsSync(configPath)) {
+    console.log(chalk.red('\n✖ Not an Opusify project.'));
+    console.log(chalk.gray('  No opusify.config.json found in the current directory.'));
+    console.log(chalk.gray('  Run this command from inside a project generated by Opusify.\n'));
+    process.exit(1);
+  }
+
+  // Validate plugin name
+  if (!plugin || !PLUGINS[plugin]) {
+    console.log(chalk.red(`\n✖ Unknown plugin: "${plugin || ''}"`));
+    console.log(chalk.cyan('\n  Available plugins:'));
+    for (const [key, val] of Object.entries(PLUGINS)) {
+      console.log(chalk.white(`    • ${key}`) + chalk.gray(` — ${val.label}`));
+    }
+    console.log('');
+    process.exit(1);
+  }
+
+  // Read project config
+  const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+  console.log('');
+  console.log(chalk.blue.bold(`  Adding ${PLUGINS[plugin].label} to ${config.projectName}...`));
+  console.log('');
+
+  // Run the plugin
+  const { files, dependencies, devDependencies } = PLUGINS[plugin].fn(cwd, config);
+
+  // Write files
+  for (const [filePath, content] of Object.entries(files)) {
+    const fullPath = path.join(cwd, filePath);
+    const dir = path.dirname(fullPath);
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(fullPath, content);
+    console.log(chalk.green(`  ✔ Created ${filePath}`));
+  }
+
+  // Install dependencies
+  const allDeps = { ...dependencies, ...devDependencies };
+  if (Object.keys(allDeps).length > 0) {
+    // Update package.json
+    const pkgPath = path.join(cwd, 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+
+    if (dependencies && Object.keys(dependencies).length > 0) {
+      pkg.dependencies = { ...pkg.dependencies, ...dependencies };
+    }
+    if (devDependencies && Object.keys(devDependencies).length > 0) {
+      pkg.devDependencies = { ...pkg.devDependencies, ...devDependencies };
+    }
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+    const spinner = ora('Installing new dependencies...').start();
+    try {
+      execSync('npm install', { cwd, stdio: 'pipe' });
+      spinner.succeed('Dependencies installed!');
+    } catch (err) {
+      spinner.fail('Could not install dependencies. Run npm install manually.');
+    }
+  }
+
+  console.log('');
+  console.log(chalk.green.bold(`  ✔ ${PLUGINS[plugin].label} added successfully!`));
+  console.log('');
+}
diff --git a/src/plugins/analytics.js b/src/plugins/analytics.js
new file mode 100644
index 0000000..2781772
--- /dev/null
+++ b/src/plugins/analytics.js
@@ -0,0 +1,159 @@
+export function addAnalytics(cwd, config) {
+  const isNextjs = config.architecture === 'nextjs-monolith' || config.architecture === 'nextjs-turborepo';
+  const isVite = config.architecture === 'vite-react';
+
+  const files = {};
+  const dependencies = {};
+
+  if (isNextjs) {
+    // Vercel Analytics component
+    files['components/Analytics.tsx'] = `'use client';
+
+import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+
+export default function AnalyticsProvider() {
+  return (
+    <>
+      <Analytics />
+      <SpeedInsights />
+    </>
+  );
+}
+`;
+
+    // Instructions file
+    files['ANALYTICS.md'] = `# Analytics Setup
+
+Vercel Analytics and Speed Insights have been added to your project.
+
+## Usage
+
+Import the \`AnalyticsProvider\` component in your root layout:
+
+\`\`\`tsx
+// app/layout.tsx
+import AnalyticsProvider from '@/components/Analytics';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <AnalyticsProvider />
+      </body>
+    </html>
+  );
+}
+\`\`\`
+
+## Deployment
+
+Analytics data will automatically appear in your Vercel dashboard once deployed.
+For local development, analytics events are logged to the console.
+
+## Alternative: Plausible Analytics
+
+If you prefer Plausible (privacy-focused, self-hostable), replace the Analytics component with:
+
+\`\`\`tsx
+// components/Analytics.tsx
+import Script from 'next/script';
+
+export default function AnalyticsProvider() {
+  return (
+    <Script
+      defer
+      data-domain="yourdomain.com"
+      src="https://plausible.io/js/script.js"
+    />
+  );
+}
+\`\`\`
+`;
+
+    dependencies['@vercel/analytics'] = '^1.3.1';
+    dependencies['@vercel/speed-insights'] = '^1.0.12';
+
+  } else if (isVite) {
+    // For Vite, use a simple Plausible/GA script approach
+    files['src/components/Analytics.tsx'] = `import { useEffect } from 'react';
+
+/**
+ * Analytics component for Vite SPA.
+ * Replace the placeholder domain with your actual domain.
+ *
+ * For Plausible: Set VITE_PLAUSIBLE_DOMAIN in your .env
+ * For Google Analytics: Set VITE_GA_ID in your .env
+ */
+export default function Analytics() {
+  useEffect(() => {
+    // Track page views on route change
+    const trackPageView = () => {
+      if (typeof window !== 'undefined' && (window as any).plausible) {
+        (window as any).plausible('pageview');
+      }
+    };
+
+    trackPageView();
+    window.addEventListener('popstate', trackPageView);
+    return () => window.removeEventListener('popstate', trackPageView);
+  }, []);
+
+  return null;
+}
+`;
+
+    files['ANALYTICS.md'] = `# Analytics Setup
+
+A lightweight analytics component has been added to your Vite project.
+
+## Option 1: Plausible Analytics
+
+Add this script tag to your \`index.html\` \`<head>\`:
+
+\`\`\`html
+<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>
+\`\`\`
+
+## Option 2: Google Analytics
+
+Add your GA4 measurement ID to \`.env\`:
+
+\`\`\`
+VITE_GA_ID=G-XXXXXXXXXX
+\`\`\`
+
+Then add the GA script to \`index.html\`:
+
+\`\`\`html
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-XXXXXXXXXX');
+</script>
+\`\`\`
+
+## Usage
+
+Import the Analytics component in your App.tsx:
+
+\`\`\`tsx
+import Analytics from './components/Analytics';
+
+function App() {
+  return (
+    <>
+      <Analytics />
+      {/* rest of your app */}
+    </>
+  );
+}
+\`\`\`
+`;
+  }
+
+  return { files, dependencies, devDependencies: {} };
+}
diff --git a/src/plugins/auth.js b/src/plugins/auth.js
new file mode 100644
index 0000000..3adb77e
--- /dev/null
+++ b/src/plugins/auth.js
@@ -0,0 +1,179 @@
+export function addAuth(cwd, config) {
+  const isNextjs = config.architecture === 'nextjs-monolith' || config.architecture === 'nextjs-turborepo';
+
+  if (!isNextjs) {
+    console.log('  ⚠️  Auth plugin currently supports Next.js projects only.');
+    console.log('     For Vite projects, consider using a custom auth solution.');
+    return { files: {}, dependencies: {}, devDependencies: {} };
+  }
+
+  const files = {};
+
+  // lib/auth.ts — NextAuth configuration
+  files['lib/auth.ts'] = `import NextAuth from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: [
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: { label: 'Email', type: 'email', placeholder: 'admin@example.com' },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials) {
+        // TODO: Replace with your actual authentication logic
+        // This is a placeholder — connect to your database here
+        if (credentials?.email === 'admin@example.com' && credentials?.password === 'password') {
+          return { id: '1', name: 'Admin', email: 'admin@example.com' };
+        }
+        return null;
+      },
+    }),
+  ],
+  pages: {
+    signIn: '/login',
+  },
+  callbacks: {
+    async session({ session, token }) {
+      if (token?.sub) {
+        session.user.id = token.sub;
+      }
+      return session;
+    },
+  },
+});
+`;
+
+  // app/api/auth/[...nextauth]/route.ts — API route handler
+  files['app/api/auth/[...nextauth]/route.ts'] = `import { handlers } from '@/lib/auth';
+
+export const { GET, POST } = handlers;
+`;
+
+  // app/login/page.tsx — Login page
+  files['app/login/page.tsx'] = `'use client';
+
+import { useState } from 'react';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const res = await fetch('/api/auth/callback/credentials', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!res.ok) {
+        setError('Invalid email or password');
+      } else {
+        window.location.href = '/';
+      }
+    } catch {
+      setError('Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md border border-border rounded-theme p-8 bg-card">
+        <h1 className="text-2xl font-bold text-foreground text-center mb-2">
+          Sign in to ${config.projectName}
+        </h1>
+        <p className="text-text-secondary text-center mb-8">
+          Enter your credentials to access your account
+        </p>
+
+        {error && (
+          <div className="mb-4 p-3 rounded-theme bg-red-50 border border-red-200 text-red-700 text-sm">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-4 py-2 rounded-theme border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+              placeholder="admin@example.com"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-1">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full px-4 py-2 rounded-theme border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+              placeholder="••••••••"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-2 rounded-theme bg-primary text-white font-medium hover:bg-primary-hover transition disabled:opacity-50"
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-xs text-text-secondary">
+          Demo credentials: admin@example.com / password
+        </p>
+      </div>
+    </div>
+  );
+}
+`;
+
+  // middleware.ts — Route protection
+  files['middleware.ts'] = `import { auth } from '@/lib/auth';
+import { NextResponse } from 'next/server';
+
+export default auth((req) => {
+  const isLoggedIn = !!req.auth;
+  const isOnLoginPage = req.nextUrl.pathname === '/login';
+
+  if (!isLoggedIn && !isOnLoginPage) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  if (isLoggedIn && isOnLoginPage) {
+    return NextResponse.redirect(new URL('/', req.url));
+  }
+
+  return NextResponse.next();
+});
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+};
+`;
+
+  const dependencies = {
+    'next-auth': '^5.0.0-beta.19',
+  };
+
+  return { files, dependencies, devDependencies: {} };
+}
diff --git a/src/plugins/dark-mode.js b/src/plugins/dark-mode.js
new file mode 100644
index 0000000..fac03cc
--- /dev/null
+++ b/src/plugins/dark-mode.js
@@ -0,0 +1,116 @@
+export function addDarkMode(cwd, config) {
+  const isNextjs = config.architecture === 'nextjs-monolith' || config.architecture === 'nextjs-turborepo';
+  const isVite = config.architecture === 'vite-react';
+
+  const files = {};
+
+  if (isNextjs) {
+    // Client component for theme toggling
+    files['components/ThemeToggle.tsx'] = `'use client';
+
+import { useEffect, useState } from 'react';
+
+const THEMES = ['Minimal Clean', 'Dark Terminal', 'Glassmorphism'] as const;
+type Theme = (typeof THEMES)[number];
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>('${config.design}');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('opusify-theme') as Theme | null;
+    if (saved && THEMES.includes(saved)) {
+      setTheme(saved);
+      document.documentElement.setAttribute('data-theme', saved);
+    }
+  }, []);
+
+  function handleChange(newTheme: Theme) {
+    setTheme(newTheme);
+    localStorage.setItem('opusify-theme', newTheme);
+    document.documentElement.setAttribute('data-theme', newTheme);
+  }
+
+  if (!mounted) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-xs text-text-secondary font-medium">Theme:</label>
+      <select
+        value={theme}
+        onChange={(e) => handleChange(e.target.value as Theme)}
+        className="px-2 py-1 text-xs rounded-theme border border-border bg-card text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+      >
+        {THEMES.map((t) => (
+          <option key={t} value={t}>
+            {t}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+`;
+
+    // Theme provider that hydrates from localStorage
+    files['components/ThemeProvider.tsx'] = `'use client';
+
+import { useEffect } from 'react';
+
+export default function ThemeProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    const saved = localStorage.getItem('opusify-theme');
+    if (saved) {
+      document.documentElement.setAttribute('data-theme', saved);
+    }
+  }, []);
+
+  return <>{children}</>;
+}
+`;
+  } else if (isVite) {
+    files['src/components/ThemeToggle.tsx'] = `import { useEffect, useState } from 'react';
+
+const THEMES = ['Minimal Clean', 'Dark Terminal', 'Glassmorphism'] as const;
+type Theme = (typeof THEMES)[number];
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>('${config.design}');
+
+  useEffect(() => {
+    const saved = localStorage.getItem('opusify-theme') as Theme | null;
+    if (saved && THEMES.includes(saved)) {
+      setTheme(saved);
+      document.documentElement.setAttribute('data-theme', saved);
+    }
+  }, []);
+
+  function handleChange(newTheme: Theme) {
+    setTheme(newTheme);
+    localStorage.setItem('opusify-theme', newTheme);
+    document.documentElement.setAttribute('data-theme', newTheme);
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-xs text-text-secondary font-medium">Theme:</label>
+      <select
+        value={theme}
+        onChange={(e) => handleChange(e.target.value as Theme)}
+        className="px-2 py-1 text-xs rounded-theme border border-border bg-card text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+      >
+        {THEMES.map((t) => (
+          <option key={t} value={t}>
+            {t}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+`;
+  }
+
+  return { files, dependencies: {}, devDependencies: {} };
+}