create-blitzpack 0.1.0

package/template/apps/web/src/app/dashboard/page.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import { Button } from '@repo/packages-ui/button';
+import { Skeleton } from '@repo/packages-ui/skeleton';
+import { UserAvatar } from '@repo/packages-ui/user-avatar';
+import {
+  formatDateTime,
+  formatShortDate,
+  getRelativeTime,
+} from '@repo/packages-utils/date';
+import {
+  Calendar,
+  Clock,
+  KeyRound,
+  LogOut,
+  Mail,
+  ShieldCheck,
+  ShieldUser,
+  User,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+import { EmailVerificationBanner } from '@/components/auth/email-verification-banner';
+import { ProtectedRoute } from '@/components/auth/protected-route';
+import { authClient } from '@/lib/auth';
+
+function DashboardContent() {
+  const router = useRouter();
+  const { data: session } = authClient.useSession();
+
+  const handleSignOut = async () => {
+    await authClient.signOut();
+    router.push('/');
+  };
+
+  if (!session) return null;
+
+  const accountCreatedDate = session.user.createdAt
+    ? formatShortDate(session.user.createdAt)
+    : 'N/A';
+
+  const lastLoginDate = session.session.createdAt
+    ? getRelativeTime(session.session.createdAt, { alwaysShowTime: true })
+    : 'N/A';
+
+  const sessionExpiresDate = session.session.expiresAt
+    ? formatDateTime(session.session.expiresAt)
+    : 'N/A';
+
+  const isEmailVerified = session.user.emailVerified;
+  const isAdmin =
+    session.user.role === 'admin' || session.user.role === 'super_admin';
+
+  return (
+    <div className="container mx-auto max-w-6xl space-y-6 p-8">
+      <div className="mb-4">
+        <EmailVerificationBanner />
+      </div>
+
+      <div className="flex items-center gap-4">
+        <UserAvatar
+          src={session.user.image}
+          name={session.user.name}
+          email={session.user.email}
+        />
+        <div>
+          <h1 className="text-3xl font-bold">
+            Welcome back, {session.user.name || 'User'}!
+          </h1>
+          <p className="text-muted-foreground">
+            Here's what's happening with your account
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="border-border bg-card rounded-lg border p-6">
+          <div className="flex items-center gap-3">
+            <div className="bg-primary/10 text-primary rounded-full p-3">
+              <Calendar className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+                Account Created
+              </p>
+              <p className="text-lg font-semibold">{accountCreatedDate}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-border bg-card rounded-lg border p-6">
+          <div className="flex items-center gap-3">
+            <div className="bg-primary/10 text-primary rounded-full p-3">
+              <Clock className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+                Last Login
+              </p>
+              <p className="text-lg font-semibold">{lastLoginDate}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-border bg-card rounded-lg border p-6">
+          <div className="flex items-center gap-3">
+            <div
+              className={`rounded-full p-3 ${
+                isEmailVerified
+                  ? 'bg-green-500/10 text-green-600 dark:text-green-500'
+                  : 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-500'
+              }`}
+            >
+              <ShieldCheck className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+                Email Status
+              </p>
+              <p className="text-lg font-semibold">
+                {isEmailVerified ? 'Verified' : 'Not Verified'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <div className="border-border bg-card rounded-lg border p-8">
+          <div className="mb-4 flex items-center gap-2">
+            <User className="text-primary h-5 w-5" />
+            <h2 className="text-lg font-semibold">User Information</h2>
+          </div>
+          <div className="space-y-4">
+            <div className="flex items-start gap-3">
+              <Mail className="text-muted-foreground mt-0.5 h-4 w-4" />
+              <div className="flex-1">
+                <p className="text-muted-foreground text-xs font-medium">
+                  Email Address
+                </p>
+                <p className="text-sm font-medium">{session.user.email}</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <User className="text-muted-foreground mt-0.5 h-4 w-4" />
+              <div className="flex-1">
+                <p className="text-muted-foreground text-xs font-medium">
+                  Display Name
+                </p>
+                <p className="text-sm font-medium">
+                  {session.user.name || (
+                    <span className="text-muted-foreground italic">
+                      Not set
+                    </span>
+                  )}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <ShieldUser className="text-muted-foreground mt-0.5 h-4 w-4" />
+              <div className="flex-1">
+                <p className="text-muted-foreground text-xs font-medium">
+                  Role
+                </p>
+                <p className="text-sm font-medium capitalize">
+                  {session.user.role || 'User'}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-border bg-card rounded-lg border p-8">
+          <div className="mb-4 flex items-center gap-2">
+            <Clock className="text-primary h-5 w-5" />
+            <h2 className="text-lg font-semibold">Session Details</h2>
+          </div>
+          <div className="space-y-4">
+            <div className="flex items-start gap-3">
+              <Calendar className="text-muted-foreground mt-0.5 h-4 w-4" />
+              <div className="flex-1">
+                <p className="text-muted-foreground text-xs font-medium">
+                  Session Created
+                </p>
+                <p className="text-sm font-medium">
+                  {formatDateTime(session.session.createdAt)}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <Clock className="text-muted-foreground mt-0.5 h-4 w-4" />
+              <div className="flex-1">
+                <p className="text-muted-foreground text-xs font-medium">
+                  Session Expires
+                </p>
+                <p className="text-sm font-medium">{sessionExpiresDate}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-border bg-card rounded-lg border p-8">
+        <h2 className="mb-4 text-lg font-semibold">Quick Actions</h2>
+        <div className="flex flex-wrap gap-3">
+          {isAdmin && (
+            <Link href="/admin">
+              <Button variant="default" className="gap-2">
+                <ShieldCheck className="h-4 w-4" />
+                Admin Dashboard
+              </Button>
+            </Link>
+          )}
+          <Link href="/dashboard/change-password">
+            <Button variant="default" className="gap-2">
+              <KeyRound className="h-4 w-4" />
+              Change Password
+            </Button>
+          </Link>
+          <Button onClick={handleSignOut} variant="outline" className="gap-2">
+            <LogOut className="h-4 w-4" />
+            Sign Out
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DashboardSkeleton() {
+  return (
+    <div className="container mx-auto max-w-6xl space-y-6 p-8">
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-16 w-16 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-4 w-80" />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="border-border bg-card rounded-lg border p-6">
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-11 w-11 rounded-full" />
+              <div className="space-y-2">
+                <Skeleton className="h-3 w-24" />
+                <Skeleton className="h-5 w-32" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {[...Array(2)].map((_, i) => (
+          <div key={i} className="border-border bg-card rounded-lg border p-8">
+            <div className="mb-4 flex items-center gap-2">
+              <Skeleton className="h-5 w-5 rounded" />
+              <Skeleton className="h-6 w-40" />
+            </div>
+            <div className="space-y-4">
+              {[...Array(3)].map((_, j) => (
+                <div key={j} className="flex items-start gap-3">
+                  <Skeleton className="mt-0.5 h-4 w-4 rounded" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-3 w-24" />
+                    <Skeleton className="h-4 w-full" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="border-border bg-card rounded-lg border p-8">
+        <Skeleton className="mb-4 h-6 w-32" />
+        <div className="flex flex-wrap gap-3">
+          <Skeleton className="h-10 w-40 rounded-md" />
+          <Skeleton className="h-10 w-28 rounded-md" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardPage() {
+  return (
+    <ProtectedRoute redirectTo="/login" fallback={<DashboardSkeleton />}>
+      <DashboardContent />
+    </ProtectedRoute>
+  );
+}

package/template/apps/web/src/app/error.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Button } from '@repo/packages-ui/button';
+import { ServerCrash } from 'lucide-react';
+import Link from 'next/link';
+
+import { ErrorCard } from '@/components/error/error-card';
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function Error({ reset }: ErrorProps) {
+  return (
+    <ErrorCard
+      icon={ServerCrash}
+      title="Something went wrong"
+      description="An unexpected error occurred. Please try again or return to the home page."
+      actions={
+        <>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+          <Button asChild>
+            <Link href="/">Go home</Link>
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/template/apps/web/src/app/examples/file-upload/page.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { Alert } from '@repo/packages-ui/alert';
+import { Button } from '@repo/packages-ui/button';
+import { FileUploadInput } from '@repo/packages-ui/file-upload-input';
+import { FileText, Image, Loader2, Trash2 } from 'lucide-react';
+import { type Upload } from 'packages/types/src/upload';
+import React, { useState } from 'react';
+
+import {
+  useDeleteUpload,
+  useFetchUploads,
+  useFetchUploadStats,
+  useUploadFile,
+} from '@/hooks/api/use-uploads';
+
+export default function FileUploadExamplePage() {
+  const [selectedFile, setSelectedFile] = useState<globalThis.File | null>(
+    null
+  );
+
+  const { data: uploads, isLoading: uploadsLoading } = useFetchUploads();
+  const { data: stats } = useFetchUploadStats();
+  const uploadMutation = useUploadFile();
+  const deleteMutation = useDeleteUpload();
+
+  const handleFileSelect = (file: globalThis.File) => {
+    setSelectedFile(file);
+  };
+
+  const handleUpload = () => {
+    if (!selectedFile) return;
+
+    uploadMutation.mutate(selectedFile, {
+      onSuccess: () => {
+        setSelectedFile(null);
+      },
+    });
+  };
+
+  const handleDelete = (uploadId: string) => {
+    if (globalThis.confirm('Are you sure you want to delete this file?')) {
+      deleteMutation.mutate({ id: uploadId });
+    }
+  };
+
+  const getFileIcon = (mimeType: string) => {
+    if (mimeType.startsWith('image/')) {
+      return <Image className="text-primary h-8 w-8" />;
+    }
+    return <FileText className="text-primary h-8 w-8" />;
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  };
+
+  const formatDate = (date: Date | string) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className="container mx-auto max-w-5xl px-4 py-12">
+      <div className="space-y-8">
+        {/* Header */}
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">File Upload</h1>
+          <p className="text-muted-foreground mt-2">
+            Upload images, PDFs, and documents up to 10MB
+          </p>
+        </div>
+
+        {/* Upload Stats */}
+        {stats && (
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="bg-card rounded-lg border p-6">
+              <div className="text-muted-foreground text-sm font-medium">
+                Total Files
+              </div>
+              <div className="mt-2 text-3xl font-bold">{stats.totalFiles}</div>
+            </div>
+            <div className="bg-card rounded-lg border p-6">
+              <div className="text-muted-foreground text-sm font-medium">
+                Total Size
+              </div>
+              <div className="mt-2 text-3xl font-bold">
+                {formatFileSize(stats.totalSize)}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Upload Section */}
+        <div className="bg-card space-y-4 rounded-lg border p-6">
+          <h2 className="text-lg font-semibold">Upload File</h2>
+
+          <FileUploadInput
+            onFileSelect={handleFileSelect}
+            disabled={uploadMutation.isPending}
+          />
+
+          {selectedFile && (
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setSelectedFile(null)}
+                disabled={uploadMutation.isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleUpload}
+                disabled={uploadMutation.isPending}
+              >
+                {uploadMutation.isPending && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                Upload
+              </Button>
+            </div>
+          )}
+
+          {uploadMutation.isError && (
+            <Alert variant="destructive">
+              {uploadMutation.error?.message || 'Upload failed'}
+            </Alert>
+          )}
+
+          {uploadMutation.isSuccess && (
+            <Alert>File uploaded successfully!</Alert>
+          )}
+        </div>
+
+        {/* Uploads List */}
+        <div className="bg-card space-y-4 rounded-lg border p-6">
+          <h2 className="text-lg font-semibold">Your Uploads</h2>
+
+          {uploadsLoading ? (
+            <div className="flex justify-center py-8">
+              <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+            </div>
+          ) : uploads && uploads.length > 0 ? (
+            <div className="space-y-3">
+              {uploads.map((upload: Upload) => (
+                <div
+                  key={upload.id}
+                  className="hover:bg-accent/50 flex items-center justify-between rounded-lg border p-4 transition-colors"
+                >
+                  <div className="flex min-w-0 flex-1 items-center gap-4">
+                    {getFileIcon(upload.mimeType)}
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-medium">
+                        {upload.originalName}
+                      </p>
+                      <div className="text-muted-foreground mt-1 flex items-center gap-3 text-sm">
+                        <span>{formatFileSize(upload.size)}</span>
+                        <span>•</span>
+                        <span>{formatDate(upload.createdAt)}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => window.open(upload.url, '_blank')}
+                    >
+                      View
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleDelete(upload.id)}
+                      disabled={deleteMutation.isPending}
+                    >
+                      <Trash2 className="text-destructive h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-muted-foreground py-12 text-center">
+              <FileText className="mx-auto mb-4 h-12 w-12 opacity-50" />
+              <p>No files uploaded yet</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/app/global-error.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { AlertTriangle } from 'lucide-react';
+
+interface GlobalErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function GlobalError({ reset }: GlobalErrorProps) {
+  return (
+    <html lang="en">
+      <body>
+        <div
+          style={{
+            display: 'flex',
+            minHeight: '100vh',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '2rem',
+            fontFamily: 'system-ui, sans-serif',
+          }}
+        >
+          <div
+            style={{
+              maxWidth: '28rem',
+              width: '100%',
+              padding: '2rem',
+              border: '1px solid #e5e5e5',
+              borderRadius: '0.5rem',
+              backgroundColor: '#ffffff',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                textAlign: 'center',
+              }}
+            >
+              <div
+                style={{
+                  marginBottom: '1rem',
+                  padding: '1rem',
+                  borderRadius: '9999px',
+                  backgroundColor: '#f5f5f5',
+                }}
+              >
+                <AlertTriangle
+                  style={{ width: '2rem', height: '2rem', color: '#737373' }}
+                />
+              </div>
+              <h1
+                style={{
+                  marginBottom: '0.5rem',
+                  fontSize: '1.5rem',
+                  fontWeight: '600',
+                  color: '#171717',
+                }}
+              >
+                Critical error
+              </h1>
+              <p
+                style={{
+                  marginBottom: '1.5rem',
+                  fontSize: '0.875rem',
+                  lineHeight: '1.5',
+                  color: '#737373',
+                }}
+              >
+                A critical error occurred. Please refresh the page or contact
+                support if the problem persists.
+              </p>
+              <button
+                onClick={reset}
+                style={{
+                  padding: '0.5rem 1rem',
+                  fontSize: '0.875rem',
+                  fontWeight: '500',
+                  color: '#ffffff',
+                  backgroundColor: '#171717',
+                  border: 'none',
+                  borderRadius: '0.375rem',
+                  cursor: 'pointer',
+                }}
+              >
+                Try again
+              </button>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}

package/template/apps/web/src/app/globals.css

@@ -0,0 +1,22 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import '@repo/tailwind-config/theme.css';
+
+@config '../../tailwind.config.ts';
+
+@source '../../../../packages/ui/src/**/*.{ts,tsx}';
+
+@plugin "tailwindcss-debug-screens" {
+  classname: 'debug-screens';
+  position: 'bottom, right';
+  prefix: 'screen: ';
+}
+
+::view-transition-old(root) {
+  animation: none;
+}
+
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}

package/template/apps/web/src/app/layout.tsx

@@ -0,0 +1,34 @@
+import './globals.css';
+
+import { Toaster } from '@repo/packages-ui/sonner';
+import type { Metadata } from 'next';
+import React from 'react';
+
+import { Footer } from '@/components/layout/footer';
+import { isDevelopment } from '@/lib/env';
+import { Providers } from '@/providers';
+
+export const metadata: Metadata = {
+  title: 'Blitzpack',
+  description: 'Production-ready TypeScript monorepo',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`flex min-h-screen flex-col ${isDevelopment() ? 'debug-screens' : ''}`}
+      >
+        <Providers>
+          {children}
+          <Footer />
+          <Toaster />
+        </Providers>
+      </body>
+    </html>
+  );
+}