@amirulabu/create-recurring-rabbit-app 0.0.0-alpha

package/templates/default/src/app/index.tsx

@@ -0,0 +1,83 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute()({
+  component: Index,
+})
+
+function Index() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
+      <div className="container mx-auto px-4 py-16">
+        <nav className="flex justify-between items-center mb-16">
+          <h1 className="text-2xl font-bold text-blue-600">Recurring Rabbit</h1>
+          <div className="flex gap-4">
+            <Link
+              from="/"
+              to="/auth/login"
+              className="px-4 py-2 text-gray-700 hover:text-blue-600 transition-colors"
+            >
+              Sign In
+            </Link>
+            <Link
+              from="/"
+              to="/auth/register"
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              Get Started
+            </Link>
+          </div>
+        </nav>
+
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-5xl font-bold text-gray-900 mb-6">
+            Start your SaaS business in minutes
+          </h2>
+          <p className="text-xl text-gray-600 mb-8">
+            A production-ready starter with authentication, database, and all
+            the tools you need to ship fast.
+          </p>
+          <div className="flex justify-center gap-4">
+            <Link
+              from="/"
+              to="/auth/register"
+              className="px-6 py-3 bg-blue-600 text-white rounded-lg text-lg font-medium hover:bg-blue-700 transition-colors"
+            >
+              Start Free Trial
+            </Link>
+            <Link
+              from="/"
+              to="/auth/login"
+              className="px-4 py-2 text-gray-700 hover:text-blue-600 transition-colors"
+            >
+              Sign In
+            </Link>
+          </div>
+        </div>
+
+        <div className="mt-20 grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <div className="p-6 bg-white rounded-lg shadow-md">
+            <h3 className="text-xl font-semibold mb-3">Authentication</h3>
+            <p className="text-gray-600">
+              Email/password authentication with verification, session
+              management, and secure defaults.
+            </p>
+          </div>
+          <div className="p-6 bg-white rounded-lg shadow-md">
+            <h3 className="text-xl font-semibold mb-3">Database</h3>
+            <p className="text-gray-600">
+              Type-safe database with Drizzle ORM, SQLite for dev, and
+              PostgreSQL for production.
+            </p>
+          </div>
+          <div className="p-6 bg-white rounded-lg shadow-md">
+            <h3 className="text-xl font-semibold mb-3">Type Safety</h3>
+            <p className="text-gray-600">
+              End-to-end type safety from database schema to UI components with
+              TypeScript.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/components/features/auth/login-form.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react'
+import { authClient } from '@/lib/auth'
+import { useRouter, useSearch } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+/**
+ * LoginForm Component
+ *
+ * Provides a user interface for authenticating existing users via email and password.
+ * This is the entry point for the authentication flow, allowing users to sign in to access
+ * protected resources and dashboard features.
+ *
+ * Authentication Flow:
+ * 1. User enters credentials (email and password)
+ * 2. Form validates HTML5 constraints (required fields, email format)
+ * 3. Credentials are sent to the auth service via signInEmail
+ * 4. On success, user is redirected to /dashboard
+ * 5. On failure, user-friendly error message is displayed
+ *
+ * Key Features:
+ * - Client-side form validation using HTML5 built-in validation
+ * - Loading state management to prevent double submissions
+ * - Clear error messaging with visual feedback
+ * - Automatic redirect on successful authentication
+ * - Form controls are disabled during submission to prevent user interaction
+ *
+ * UX Considerations:
+ * - Centered card layout with max-width for optimal readability
+ * - Password masking for security
+ * - Error messages displayed inline near the form for better visibility
+ * - Loading state shown in button text to communicate progress
+ * - Form reset not needed since redirect occurs on success
+ *
+ * @example
+ * ```tsx
+ * import { LoginForm } from '@/components/features/auth/login-form'
+ *
+ * function LoginPage() {
+ *   return <LoginForm />
+ * }
+ * ```
+ */
+export function LoginForm() {
+  const router = useRouter()
+  const search = useSearch({ from: '/auth/login' })
+  const redirect = (search.redirect as string) || '/dashboard'
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  /**
+   * Handles form submission for user authentication.
+   *
+   * Extracts email and password from the form, validates credentials through the auth service,
+   * and manages the user flow based on authentication result.
+   *
+   * Form Validation:
+   * - Email: Uses HTML5 type="email" for basic format validation
+   * - Password: Uses HTML5 required attribute
+   * - Additional validation happens server-side via auth service
+   *
+   * @param e - React form event from the form submission
+   * @returns Promise<void> - Does not return a value
+   *
+   * Side Effects:
+   * - Sets loading state to true during authentication, false after completion
+   * - Clears previous error state before attempting authentication
+   * - On success: Navigates to the redirect URL (from search params) or /dashboard
+   * - On failure: Sets error state with user-friendly message
+   *
+   * Error Handling:
+   * - API errors from auth service display the error message
+   * - Network/unexpected errors show generic "Invalid email or password"
+   * - Errors persist until user tries again or leaves page
+   */
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+
+    try {
+      const result = await authClient.signIn.email({
+        email,
+        password,
+      })
+
+      if (result.error) {
+        setError(result.error.message || 'Invalid email or password')
+        return
+      }
+
+      router.navigate({ to: redirect })
+    } catch (err) {
+      setError('Invalid email or password')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle>Welcome back</CardTitle>
+        <CardDescription>Sign in to your account to continue</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <label
+              htmlFor="email"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Email
+            </label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              placeholder="john@example.com"
+              required
+              disabled={loading}
+            />
+          </div>
+          <div className="space-y-2">
+            <label
+              htmlFor="password"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Password
+            </label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              placeholder="•••••••"
+              required
+              disabled={loading}
+            />
+          </div>
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+              {error}
+            </div>
+          )}
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? 'Signing in...' : 'Sign in'}
+          </Button>
+          <div className="text-center">
+            <button
+              type="button"
+              onClick={() => router.navigate({ to: '/auth/forgot-password' })}
+              className="text-sm text-gray-600 hover:text-gray-900"
+            >
+              Forgot your password?
+            </button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/default/src/components/features/auth/register-form.tsx

@@ -0,0 +1,202 @@
+import { useState } from 'react'
+import { authClient } from '@/lib/auth'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+/**
+ * RegisterForm Component
+ *
+ * Provides a user interface for new user registration, collecting essential user information
+ * to create an account in the system. This component initiates the user onboarding flow
+ * by creating a user account and triggering email verification.
+ *
+ * Authentication Flow:
+ * 1. User enters registration details (name, email, password)
+ * 2. Form validates HTML5 constraints (required fields, email format, password length)
+ * 3. User data is sent to auth service via signUpEmail
+ * 4. On success, verification email is sent and form displays confirmation message
+ * 5. User must verify email via link in confirmation email before signing in
+ *
+ * Key Features:
+ * - Client-side form validation with minimum password length requirement (8 characters)
+ * - Dual state messaging: success (green) for verification confirmation, error (red) for failures
+ * - Form reset after successful registration to allow new attempts
+ * - Loading state management to prevent duplicate submissions
+ * - Visual feedback using color-coded alerts for different message types
+ *
+ * UX Considerations:
+ * - Centered card layout with max-width for optimal readability
+ * - Password masking for security
+ * - Password length requirement (minLength={8}) shown to users via browser validation
+ * - Success message clearly indicates next steps (check email for verification)
+ * - Error messages displayed inline near the form for immediate visibility
+ * - Loading state in button text communicates ongoing operation
+ * - No automatic redirect - users stay on page to see confirmation message
+ *
+ * Security Notes:
+ * - Password must be at least 8 characters (enforced by HTML5 validation)
+ * - Email verification required before user can sign in
+ * - All fields are required to prevent incomplete registration
+ *
+ * @example
+ * ```tsx
+ * import { RegisterForm } from '@/components/features/auth/register-form'
+ *
+ * function RegisterPage() {
+ *   return <RegisterForm />
+ * }
+ * ```
+ */
+export function RegisterForm() {
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
+  const [error, setError] = useState('')
+
+  /**
+   * Handles form submission for new user registration.
+   *
+   * Extracts user data from the form, validates inputs through the auth service,
+   * and manages the registration flow based on the result.
+   *
+   * Form Validation:
+   * - Name: Required field, no format constraints
+   * - Email: Uses HTML5 type="email" for basic format validation
+   * - Password: Required, minimum 8 characters (enforced via minLength={8})
+   * - Additional validation happens server-side via auth service
+   *
+   * @param e - React form event from the form submission
+   * @returns Promise<void> - Does not return a value
+   *
+   * Side Effects:
+   * - Sets loading state to true during registration, false after completion
+   * - Clears previous error and message states before attempting registration
+   * - On success: Sets success message and resets the form
+   * - On failure: Sets error state with user-friendly message
+   *
+   * Error Handling:
+   * - API errors from auth service display the specific error message
+   * - Network/unexpected errors show generic "Registration failed" message
+   * - Errors persist until user tries again or leaves page
+   *
+   * Success Behavior:
+   * - Displays green confirmation message prompting email verification
+   * - Resets form fields to allow another registration attempt
+   * - No redirect - user stays on page to see next steps
+   */
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    setMessage('')
+
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+    const name = formData.get('name') as string
+
+    try {
+      const result = await authClient.signUp.email({
+        email,
+        password,
+        name,
+      })
+
+      if (result.error) {
+        setError(
+          result.error.message || 'Registration failed. Please try again.'
+        )
+        return
+      }
+
+      setMessage('Check your email to verify your account')
+      e.currentTarget.reset()
+    } catch (err) {
+      setError('Registration failed. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle>Create an account</CardTitle>
+        <CardDescription>
+          Enter your information to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <label
+              htmlFor="name"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Full Name
+            </label>
+            <Input
+              id="name"
+              name="name"
+              placeholder="John Doe"
+              required
+              disabled={loading}
+            />
+          </div>
+          <div className="space-y-2">
+            <label
+              htmlFor="email"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Email
+            </label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              placeholder="john@example.com"
+              required
+              disabled={loading}
+            />
+          </div>
+          <div className="space-y-2">
+            <label
+              htmlFor="password"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Password
+            </label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              placeholder="••••••••"
+              required
+              minLength={8}
+              disabled={loading}
+            />
+          </div>
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+              {error}
+            </div>
+          )}
+          {message && (
+            <div className="p-3 text-sm text-green-600 bg-green-50 border border-green-200 rounded-md">
+              {message}
+            </div>
+          )}
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? 'Creating account...' : 'Sign up'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/default/src/components/layout/dashboard-layout.tsx

@@ -0,0 +1,27 @@
+import { useLocation } from '@tanstack/react-router'
+import { Header } from './header'
+import { Sidebar } from './sidebar'
+
+interface DashboardLayoutProps {
+  children: React.ReactNode
+  userName?: string | null
+  onSignOut?: () => Promise<void>
+}
+
+export function DashboardLayout({
+  children,
+  userName,
+  onSignOut,
+}: DashboardLayoutProps) {
+  const location = useLocation()
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header userName={userName} onSignOut={onSignOut} />
+      <div className="flex">
+        <Sidebar currentPath={location.pathname} />
+        <main className="flex-1 p-8">{children}</main>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/components/layout/header.tsx

@@ -0,0 +1,29 @@
+import { Link } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+
+interface HeaderProps {
+  userName?: string | null
+  onSignOut?: () => Promise<void>
+}
+
+export function Header({ userName, onSignOut }: HeaderProps) {
+  return (
+    <header className="bg-white border-b border-gray-200 h-16">
+      <div className="container mx-auto px-4 h-full">
+        <div className="flex justify-between items-center h-full">
+          <Link to="/" className="text-xl font-bold text-blue-600">
+            Recurring Rabbit
+          </Link>
+          <div className="flex items-center gap-4">
+            {userName && <span className="text-gray-700">{userName}</span>}
+            {onSignOut && (
+              <Button variant="outline" size="sm" onClick={onSignOut}>
+                Sign Out
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

package/templates/default/src/components/layout/sidebar.tsx

@@ -0,0 +1,38 @@
+import { Link } from '@tanstack/react-router'
+
+interface SidebarProps {
+  currentPath?: string
+}
+
+export function Sidebar({ currentPath }: SidebarProps) {
+  const navItems = [
+    { to: '/dashboard', label: 'Dashboard' },
+    { to: '/dashboard/settings', label: 'Settings' },
+  ]
+
+  return (
+    <aside className="w-64 bg-white border-r border-gray-200 min-h-[calc(100vh-64px)]">
+      <nav className="p-4">
+        <ul className="space-y-2">
+          {navItems.map((item) => {
+            const isActive = currentPath?.startsWith(item.to)
+            return (
+              <li key={item.to}>
+                <Link
+                  to={item.to}
+                  className={`block px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-blue-50 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </nav>
+    </aside>
+  )
+}

package/templates/default/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    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-primary 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/templates/default/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+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, CardFooter, CardTitle, CardDescription, CardContent }