wexts 3.0.1 → 4.0.0

package/templates/nextjs-web/app/actions/auth.ts

@@ -1,108 +1,108 @@
-'use server';
-
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
-import { api } from '@/lib/api';
-
-export type ActionState = {
-    message?: string;
-    errors?: {
-        email?: string[];
-        password?: string[];
-    };
-};
-
-export async function loginAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
-    const email = formData.get('email') as string;
-    const password = formData.get('password') as string;
-
-    const errors: { email?: string[]; password?: string[] } = {};
-
-    if (!email || !email.includes('@')) {
-        errors.email = ['Invalid email address'];
-    }
-
-    if (!password || password.length < 6) {
-        errors.password = ['Password must be at least 6 characters'];
-    }
-
-    if (Object.keys(errors).length > 0) {
-        return { errors };
-    }
-
-    try {
-        // Use SDK - no URLs needed!
-        const data = await api.auth.login({ email, password });
-
-        // Store JWT token
-        if (data.access_token) {
-            const cookieStore = await cookies();
-            cookieStore.set('wexts_token', data.access_token, {
-                httpOnly: true,
-                secure: process.env.NODE_ENV === 'production',
-                maxAge: 60 * 60 * 24 * 7, // 1 week
-                path: '/',
-            });
-        } else {
-            return {
-                message: 'Login failed: No token received',
-            };
-        }
-    } catch (error: any) {
-        console.error('Login error:', error);
-        return {
-            message: error.message || 'Invalid credentials',
-        };
-    }
-
-    redirect('/dashboard');
-}
-
-export async function registerAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
-    const email = formData.get('email') as string;
-    const password = formData.get('password') as string;
-    const name = formData.get('name') as string;
-
-    const errors: { email?: string[]; password?: string[] } = {};
-
-    if (!email || !email.includes('@')) {
-        errors.email = ['Invalid email address'];
-    }
-
-    if (!password || password.length < 6) {
-        errors.password = ['Password must be at least 6 characters'];
-    }
-
-    if (Object.keys(errors).length > 0) {
-        return { errors };
-    }
-
-    try {
-        // Use SDK - no URLs needed!
-        const data = await api.auth.register({ email, password, name });
-
-        // Store JWT token
-        if (data.access_token) {
-            const cookieStore = await cookies();
-            cookieStore.set('wexts_token', data.access_token, {
-                httpOnly: true,
-                secure: process.env.NODE_ENV === 'production',
-                maxAge: 60 * 60 * 24 * 7,
-                path: '/',
-            });
-        }
-    } catch (error: any) {
-        console.error('Register error:', error);
-        return {
-            message: error.message || 'Registration failed',
-        };
-    }
-
-    redirect('/dashboard');
-}
-
-export async function logoutAction() {
-    const cookieStore = await cookies();
-    cookieStore.delete('wexts_token');
-    redirect('/login');
-}
+'use server';
+
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { api } from '@/lib/api';
+
+export type ActionState = {
+    message?: string;
+    errors?: {
+        email?: string[];
+        password?: string[];
+    };
+};
+
+export async function loginAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+
+    const errors: { email?: string[]; password?: string[] } = {};
+
+    if (!email || !email.includes('@')) {
+        errors.email = ['Invalid email address'];
+    }
+
+    if (!password || password.length < 6) {
+        errors.password = ['Password must be at least 6 characters'];
+    }
+
+    if (Object.keys(errors).length > 0) {
+        return { errors };
+    }
+
+    try {
+        // Legacy SDK call retained for deprecated template compatibility.
+        const data = await api.auth.login({ email, password });
+
+        // Store JWT token
+        if (data.access_token) {
+            const cookieStore = await cookies();
+            cookieStore.set('wexts_token', data.access_token, {
+                httpOnly: true,
+                secure: process.env.NODE_ENV === 'production',
+                maxAge: 60 * 60 * 24 * 7, // 1 week
+                path: '/',
+            });
+        } else {
+            return {
+                message: 'Login failed: No token received',
+            };
+        }
+    } catch (error: any) {
+        console.error('Login error:', error);
+        return {
+            message: error.message || 'Invalid credentials',
+        };
+    }
+
+    redirect('/dashboard');
+}
+
+export async function registerAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+    const name = formData.get('name') as string;
+
+    const errors: { email?: string[]; password?: string[] } = {};
+
+    if (!email || !email.includes('@')) {
+        errors.email = ['Invalid email address'];
+    }
+
+    if (!password || password.length < 6) {
+        errors.password = ['Password must be at least 6 characters'];
+    }
+
+    if (Object.keys(errors).length > 0) {
+        return { errors };
+    }
+
+    try {
+        // Legacy SDK call retained for deprecated template compatibility.
+        const data = await api.auth.register({ email, password, name });
+
+        // Store JWT token
+        if (data.access_token) {
+            const cookieStore = await cookies();
+            cookieStore.set('wexts_token', data.access_token, {
+                httpOnly: true,
+                secure: process.env.NODE_ENV === 'production',
+                maxAge: 60 * 60 * 24 * 7,
+                path: '/',
+            });
+        }
+    } catch (error: any) {
+        console.error('Register error:', error);
+        return {
+            message: error.message || 'Registration failed',
+        };
+    }
+
+    redirect('/dashboard');
+}
+
+export async function logoutAction() {
+    const cookieStore = await cookies();
+    cookieStore.delete('wexts_token');
+    redirect('/login');
+}

package/templates/nextjs-web/app/dashboard/error.tsx

@@ -1,39 +1,39 @@
-'use client';
-
-import { useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { AlertTriangle } from 'lucide-react';
-
-export default function DashboardError({
-    error,
-    reset,
-}: {
-    error: Error & { digest?: string };
-    reset: () => void;
-}) {
-    useEffect(() => {
-        console.error(error);
-    }, [error]);
-
-    return (
-        <div className="min-h-screen bg-background flex items-center justify-center p-8">
-            <Card className="glass border-destructive/20 max-w-md w-full">
-                <CardHeader>
-                    <CardTitle className="text-destructive flex items-center gap-2">
-                        <AlertTriangle className="w-5 h-5" />
-                        Something went wrong
-                    </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                    <p className="text-muted-foreground">
-                        We encountered an error while loading your dashboard. Please try again.
-                    </p>
-                    <Button onClick={reset} className="w-full">
-                        Try again
-                    </Button>
-                </CardContent>
-            </Card>
-        </div>
-    );
-}
+'use client';
+
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertTriangle } from 'lucide-react';
+
+export default function DashboardError({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string };
+    reset: () => void;
+}) {
+    useEffect(() => {
+        console.error(error);
+    }, [error]);
+
+    return (
+        <div className="min-h-screen bg-background flex items-center justify-center p-8">
+            <Card className="glass border-destructive/20 max-w-md w-full">
+                <CardHeader>
+                    <CardTitle className="text-destructive flex items-center gap-2">
+                        <AlertTriangle className="w-5 h-5" />
+                        Something went wrong
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <p className="text-muted-foreground">
+                        We encountered an error while loading your dashboard. Please try again.
+                    </p>
+                    <Button onClick={reset} className="w-full">
+                        Try again
+                    </Button>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

package/templates/nextjs-web/app/dashboard/loading.tsx

@@ -1,14 +1,14 @@
-import { Loader2 } from 'lucide-react';
-
-export default function DashboardLoading() {
-    return (
-        <div className="min-h-screen bg-background flex items-center justify-center">
-            <div className="text-center space-y-4">
-                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 text-primary animate-pulse">
-                    <Loader2 className="w-8 h-8 animate-spin" />
-                </div>
-                <p className="text-muted-foreground animate-pulse">Loading dashboard...</p>
-            </div>
-        </div>
-    );
-}
+import { Loader2 } from 'lucide-react';
+
+export default function DashboardLoading() {
+    return (
+        <div className="min-h-screen bg-background flex items-center justify-center">
+            <div className="text-center space-y-4">
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 text-primary animate-pulse">
+                    <Loader2 className="w-8 h-8 animate-spin" />
+                </div>
+                <p className="text-muted-foreground animate-pulse">Loading dashboard...</p>
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-web/app/dashboard/page.tsx

@@ -1,5 +1,5 @@
-import { DashboardView } from '@/features/dashboard';
-
-export default function DashboardPage() {
-    return <DashboardView />;
-}
+import { DashboardView } from '@/features/dashboard';
+
+export default function DashboardPage() {
+    return <DashboardView />;
+}

package/templates/nextjs-web/app/globals.css

@@ -1,93 +1,93 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    /* Brand Colors - Deep Violet & Electric Purple */
-    --background: 260 30% 98%;
-    --foreground: 260 40% 10%;
-    
-    --primary: 265 89% 66%;
-    --primary-foreground: 210 40% 98%;
-    
-    --secondary: 260 20% 90%;
-    --secondary-foreground: 260 40% 10%;
-    
-    --muted: 260 20% 96%;
-    --muted-foreground: 260 20% 40%;
-    
-    --accent: 265 89% 96%;
-    --accent-foreground: 265 89% 66%;
-    
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 260 20% 90%;
-    --input: 260 20% 90%;
-    --ring: 265 89% 66%;
-    
-    --radius: 1rem;
-  }
-
-  .dark {
-    --background: 260 40% 5%;
-    --foreground: 210 40% 98%;
-    
-    --primary: 265 89% 66%;
-    --primary-foreground: 210 40% 98%;
-    
-    --secondary: 260 30% 15%;
-    --secondary-foreground: 210 40% 98%;
-    
-    --muted: 260 30% 15%;
-    --muted-foreground: 215 20% 65%;
-    
-    --accent: 260 30% 15%;
-    --accent-foreground: 210 40% 98%;
-    
-    --destructive: 0 62% 30%;
-    --destructive-foreground: 210 40% 98%;
-    
-    --border: 260 30% 15%;
-    --input: 260 30% 15%;
-    --ring: 265 89% 66%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground antialiased;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-
-@layer utilities {
-  .glass {
-    @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl;
-  }
-  .glass-dark {
-    @apply bg-black/30 backdrop-blur-lg border border-white/10 shadow-xl;
-  }
-  
-  .text-gradient {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600 dark:from-violet-400 dark:to-indigo-400;
-  }
-
-  .animate-float {
-    animation: float 6s ease-in-out infinite;
-  }
-  
-  .animate-pulse-slow {
-    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-}
-
-@keyframes float {
-  0% { transform: translateY(0px); }
-  50% { transform: translateY(-20px); }
-  100% { transform: translateY(0px); }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Brand Colors - Deep Violet & Electric Purple */
+    --background: 260 30% 98%;
+    --foreground: 260 40% 10%;
+    
+    --primary: 265 89% 66%;
+    --primary-foreground: 210 40% 98%;
+    
+    --secondary: 260 20% 90%;
+    --secondary-foreground: 260 40% 10%;
+    
+    --muted: 260 20% 96%;
+    --muted-foreground: 260 20% 40%;
+    
+    --accent: 265 89% 96%;
+    --accent-foreground: 265 89% 66%;
+    
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 260 20% 90%;
+    --input: 260 20% 90%;
+    --ring: 265 89% 66%;
+    
+    --radius: 1rem;
+  }
+
+  .dark {
+    --background: 260 40% 5%;
+    --foreground: 210 40% 98%;
+    
+    --primary: 265 89% 66%;
+    --primary-foreground: 210 40% 98%;
+    
+    --secondary: 260 30% 15%;
+    --secondary-foreground: 210 40% 98%;
+    
+    --muted: 260 30% 15%;
+    --muted-foreground: 215 20% 65%;
+    
+    --accent: 260 30% 15%;
+    --accent-foreground: 210 40% 98%;
+    
+    --destructive: 0 62% 30%;
+    --destructive-foreground: 210 40% 98%;
+    
+    --border: 260 30% 15%;
+    --input: 260 30% 15%;
+    --ring: 265 89% 66%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer utilities {
+  .glass {
+    @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl;
+  }
+  .glass-dark {
+    @apply bg-black/30 backdrop-blur-lg border border-white/10 shadow-xl;
+  }
+  
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600 dark:from-violet-400 dark:to-indigo-400;
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+  
+  .animate-pulse-slow {
+    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-20px); }
+  100% { transform: translateY(0px); }
+}

package/templates/nextjs-web/app/layout.tsx

@@ -1,29 +1,29 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import { WextsProvider } from '@/lib/wexts-client';
-import { Toaster } from 'react-hot-toast';
-import './globals.css';
-
-const inter = Inter({ subsets: ['latin'] });
-
-export const metadata: Metadata = {
-    title: 'wexts Web App',
-    description: 'Modern web application built with wexts',
-};
-
-export default function RootLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
-    return (
-        <html lang="en">
-            <body className={inter.className}>
-                <WextsProvider baseUrl={process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050'}>
-                    {children}
-                    <Toaster position="top-center" />
-                </WextsProvider>
-            </body>
-        </html>
-    );
-}
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { WextsProvider } from '@/lib/wexts-client';
+import { Toaster } from 'react-hot-toast';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+    title: 'wexts Web App',
+    description: 'Modern web application built with wexts',
+};
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body className={inter.className}>
+                <WextsProvider baseUrl={process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050'}>
+                    {children}
+                    <Toaster position="top-center" />
+                </WextsProvider>
+            </body>
+        </html>
+    );
+}

package/templates/nextjs-web/app/login/page.tsx

@@ -1,5 +1,5 @@
-import { LoginForm } from '@/features/auth';
-
-export default function LoginPage() {
-    return <LoginForm />;
-}
+import { LoginForm } from '@/features/auth';
+
+export default function LoginPage() {
+    return <LoginForm />;
+}

package/templates/nextjs-web/app/page.tsx

@@ -1,28 +1,28 @@
-'use client';
-
-import { useAuth } from '@/lib/wexts-client';
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-
-export default function Home() {
-    const { isAuthenticated, user, loading } = useAuth();
-    const router = useRouter();
-
-    useEffect(() => {
-        if (!loading && !isAuthenticated) {
-            router.push('/login');
-        } else if (!loading && isAuthenticated) {
-            router.push('/dashboard');
-        }
-    }, [isAuthenticated, loading, router]);
-
-    if (loading) {
-        return (
-            <div className="min-h-screen flex items-center justify-center">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-violet-600"></div>
-            </div>
-        );
-    }
-
-    return null;
-}
+'use client';
+
+import { useAuth } from '@/lib/wexts-client';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Home() {
+    const { isAuthenticated, user, loading } = useAuth();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!loading && !isAuthenticated) {
+            router.push('/login');
+        } else if (!loading && isAuthenticated) {
+            router.push('/dashboard');
+        }
+    }, [isAuthenticated, loading, router]);
+
+    if (loading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-violet-600"></div>
+            </div>
+        );
+    }
+
+    return null;
+}

package/templates/nextjs-web/app/register/page.tsx

@@ -1,5 +1,5 @@
-import { RegisterForm } from '@/features/auth';
-
-export default function RegisterPage() {
-    return <RegisterForm />;
-}
+import { RegisterForm } from '@/features/auth';
+
+export default function RegisterPage() {
+    return <RegisterForm />;
+}