create-solostack 1.0.0

package/src/generators/ui.js

@@ -0,0 +1,368 @@
+import path from 'path';
+import { writeFile, ensureDir } from '../utils/files.js';
+
+/**
+ * Generates UI components and pages
+ * @param {string} projectPath - Path where the project is located
+ */
+export async function generateUI(projectPath) {
+  // Create dashboard page
+  await ensureDir(path.join(projectPath, 'src/app/dashboard'));
+
+  const dashboardPage = `import { auth } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import { db } from '@/lib/db';
+
+export default async function DashboardPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect('/login');
+  }
+
+  const user = await db.user.findUnique({
+    where: { id: session.user.id },
+    include: { subscription: true },
+  });
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome back, {session.user.name || session.user.email}!
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="rounded-lg border p-6">
+          <h3 className="text-sm font-medium text-muted-foreground">Status</h3>
+          <p className="mt-2 text-3xl font-bold">
+            {user?.subscription?.status === 'ACTIVE' ? 'Active' : 'Free'}
+          </p>
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <h3 className="text-sm font-medium text-muted-foreground">Account Type</h3>
+          <p className="mt-2 text-3xl font-bold capitalize">{user?.role.toLowerCase()}</p>
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <h3 className="text-sm font-medium text-muted-foreground">Member Since</h3>
+          <p className="mt-2 text-xl font-bold">
+            {new Date(user?.createdAt || '').toLocaleDateString()}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-2xl font-bold mb-4">Quick Actions</h2>
+        <div className="grid gap-4 md:grid-cols-2">
+          <a
+            href="/dashboard/billing"
+            className="rounded-lg border p-6 hover:border-indigo-500 transition-colors"
+          >
+            <h3 className="text-lg font-semibold mb-2">Manage Subscription</h3>
+            <p className="text-sm text-muted-foreground">
+              View and manage your billing and subscription
+            </p>
+          </a>
+          <a
+            href="/dashboard/settings"
+            className="rounded-lg border p-6 hover:border-indigo-500 transition-colors"
+          >
+            <h3 className="text-lg font-semibold mb-2">Account Settings</h3>
+            <p className="text-sm text-muted-foreground">
+              Update your profile and preferences
+            </p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(
+    path.join(projectPath, 'src/app/dashboard/page.tsx'),
+    dashboardPage
+  );
+
+  // Create dashboard layout with navigation
+  const dashboardLayout = `import { auth } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import Link from 'next/link';
+import { signOut } from '@/lib/auth';
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect('/login');
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white border-b">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/dashboard" className="text-xl font-bold">
+              Dashboard
+            </Link>
+            <div className="flex items-center gap-6">
+              <Link href="/dashboard" className="text-sm hover:text-indigo-600">
+                Home
+              </Link>
+              <Link href="/dashboard/billing" className="text-sm hover:text-indigo-600">
+                Billing
+              </Link>
+              <Link href="/dashboard/settings" className="text-sm hover:text-indigo-600">
+                Settings
+              </Link>
+              <form
+                action={async () => {
+                  'use server';
+                  await signOut({ redirectTo: '/login' });
+                }}
+              >
+                <button
+                  type="submit"
+                  className="text-sm text-red-600 hover:text-red-700"
+                >
+                  Sign Out
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <main>{children}</main>
+    </div>
+  );
+}
+`;
+
+  await writeFile(
+    path.join(projectPath, 'src/app/dashboard/layout.tsx'),
+    dashboardLayout
+  );
+
+  // Create settings page
+  await ensureDir(path.join(projectPath, 'src/app/dashboard/settings'));
+
+  const settingsPage = `import { auth } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import { db } from '@/lib/db';
+import { SettingsForm } from '@/components/settings-form';
+
+export default async function SettingsPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect('/login');
+  }
+
+  const user = await db.user.findUnique({
+    where: { id: session.user.id },
+  });
+
+  if (!user) {
+    redirect('/login');
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8">Settings</h1>
+
+      <div className="max-w-2xl">
+        <div className="rounded-lg border p-6 mb-6">
+          <h2 className="text-xl font-semibold mb-4">Profile Information</h2>
+          <SettingsForm user={user} />
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <h2 className="text-xl font-semibold mb-4">Account Information</h2>
+          <dl className="space-y-4">
+            <div>
+              <dt className="text-sm font-medium text-muted-foreground">Email</dt>
+              <dd className="mt-1 text-sm">{user.email}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-muted-foreground">Account Created</dt>
+              <dd className="mt-1 text-sm">{new Date(user.createdAt).toLocaleDateString()}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-muted-foreground">Last Updated</dt>
+              <dd className="mt-1 text-sm">{new Date(user.updatedAt).toLocaleDateString()}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(
+    path.join(projectPath, 'src/app/dashboard/settings/page.tsx'),
+    settingsPage
+  );
+
+  // Create settings form component
+  const settingsForm = `'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface SettingsFormProps {
+  user: {
+    id: string;
+    name: string | null;
+    email: string;
+  };
+}
+
+export function SettingsForm({ user }: SettingsFormProps) {
+  const router = useRouter();
+  const [name, setName] = useState(user.name || '');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage('');
+
+    try {
+      const res = await fetch('/api/user/update', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to update profile');
+      }
+
+      setMessage('Profile updated successfully!');
+      router.refresh();
+    } catch (error) {
+      setMessage('Failed to update profile. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {message && (
+        <div
+          className={\`rounded-md p-4 \${
+            message.includes('success') ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'
+          }\`}
+        >
+          <p className="text-sm">{message}</p>
+        </div>
+      )}
+
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium mb-2">
+          Name
+        </label>
+        <input
+          type="text"
+          id="name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 disabled:opacity-50"
+      >
+        {loading ? 'Saving...' : 'Save Changes'}
+      </button>
+    </form>
+  );
+}
+`;
+
+  await writeFile(
+    path.join(projectPath, 'src/components/settings-form.tsx'),
+    settingsForm
+  );
+
+  // Create user update API route
+  await ensureDir(path.join(projectPath, 'src/app/api/user/update'));
+
+  const updateUserApi = `import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/lib/auth';
+import { db } from '@/lib/db';
+
+export async function PATCH(req: NextRequest) {
+  try {
+    const session = await auth();
+
+    if (!session?.user) {
+      return NextResponse.json(
+        { error: 'Unauthorized' },
+        { status: 401 }
+      );
+    }
+
+    const { name } = await req.json();
+
+    const user = await db.user.update({
+      where: { id: session.user.id },
+      data: { name },
+    });
+
+    return NextResponse.json({ user });
+  } catch (error) {
+    console.error('Update user error:', error);
+    return NextResponse.json(
+      { error: 'Failed to update user' },
+      { status: 500 }
+    );
+  }
+}
+`;
+
+  await writeFile(
+    path.join(projectPath, 'src/app/api/user/update/route.ts'),
+    updateUserApi
+  );
+
+  // Create dashboard loading state
+  const dashboardLoading = `export default function DashboardLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <div className="h-8 w-48 bg-gray-200 rounded animate-pulse"></div>
+        <div className="h-4 w-32 bg-gray-200 rounded animate-pulse mt-2"></div>
+      </div>
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="rounded-lg border p-6">
+            <div className="h-4 w-24 bg-gray-200 rounded animate-pulse"></div>
+            <div className="h-8 w-16 bg-gray-200 rounded animate-pulse mt-2"></div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(
+    path.join(projectPath, 'src/app/dashboard/loading.tsx'),
+    dashboardLoading
+  );
+}