blacksmith-cli 0.1.1

package/src/templates/frontend/src/features/auth/pages/register-page.tsx.hbs

@@ -0,0 +1,36 @@
+/**
+ * Register Page
+ *
+ * Uses @blacksmith-ui/auth RegisterForm connected to Django JWT backend.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { RegisterForm } from '@blacksmith-ui/auth'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../hooks/use-auth'
+import { Path } from '@/router/paths'
+
+export default function RegisterPage() {
+  const navigate = useNavigate()
+  const { register, error, isLoading } = useAuth()
+
+  const handleSubmit = async (data: {
+    email: string
+    password: string
+    displayName: string
+  }) => {
+    const result = await register(data.email, data.password, data.displayName)
+    if (result.success) {
+      navigate(Path.Home, { replace: true })
+    }
+  }
+
+  return (
+    <RegisterForm
+      onSubmit={handleSubmit}
+      onLoginClick={() => navigate(Path.Login)}
+      error={error}
+      loading={isLoading}
+    />
+  )
+}

package/src/templates/frontend/src/features/auth/pages/reset-password-page.tsx.hbs

@@ -0,0 +1,41 @@
+/**
+ * Reset Password Page
+ *
+ * Uses @blacksmith-ui/auth ResetPasswordForm connected to Django backend.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { ResetPasswordForm } from '@blacksmith-ui/auth'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useAuth } from '../hooks/use-auth'
+import { useState } from 'react'
+import { Path } from '@/router/paths'
+
+export default function ResetPasswordPage() {
+  const navigate = useNavigate()
+  const { token } = useParams<{ token: string }>()
+  const { confirmPasswordReset, error } = useAuth()
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (data: { password: string; code: string }) => {
+    setLoading(true)
+    try {
+      const result = await confirmPasswordReset(data.code, data.password)
+      if (result.success) {
+        navigate(Path.Login, { replace: true })
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <ResetPasswordForm
+      onSubmit={handleSubmit}
+      code={token || ''}
+      onLoginClick={() => navigate(Path.Login)}
+      error={error}
+      loading={loading}
+    />
+  )
+}

package/src/templates/frontend/src/features/auth/routes.tsx.hbs

@@ -0,0 +1,13 @@
+import type { RouteObject } from 'react-router-dom'
+import { Path } from '@/router/paths'
+import LoginPage from './pages/login-page'
+import RegisterPage from './pages/register-page'
+import ForgotPasswordPage from './pages/forgot-password-page'
+import ResetPasswordPage from './pages/reset-password-page'
+
+export const authRoutes: RouteObject[] = [
+  { path: Path.Login, element: <LoginPage /> },
+  { path: Path.Register, element: <RegisterPage /> },
+  { path: Path.ForgotPassword, element: <ForgotPasswordPage /> },
+  { path: Path.ResetPassword, element: <ResetPasswordPage /> },
+]

package/src/templates/frontend/src/main.tsx.hbs

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './app'
+import '@/styles/globals.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/templates/frontend/src/pages/dashboard/components/quick-start-card.tsx.hbs

@@ -0,0 +1,36 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Badge,
+  Flex,
+  Text,
+} from '@blacksmith-ui/react'
+import { Rocket, Terminal } from 'lucide-react'
+
+export function QuickStartCard() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <Flex align="center" justify="between">
+          <CardTitle className="text-base">Quick Start</CardTitle>
+          <Badge variant="outline">
+            <Rocket className="mr-1 h-3 w-3" />
+            Guide
+          </Badge>
+        </Flex>
+      </CardHeader>
+      <CardContent>
+        <CardDescription>
+          Scaffold a new resource with models, API, and pages in one command.
+        </CardDescription>
+        <Flex align="center" gap={2} className="mt-4 rounded-lg bg-muted px-3 py-2">
+          <Terminal className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          <Text as="code" size="sm" className="font-mono">blacksmith make:resource Post</Text>
+        </Flex>
+      </CardContent>
+    </Card>
+  )
+}

package/src/templates/frontend/src/pages/dashboard/components/stack-cards.tsx.hbs

@@ -0,0 +1,69 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Badge,
+  Button,
+  Flex,
+} from '@blacksmith-ui/react'
+import { Database, Layout } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { Path } from '@/router/paths'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+export function BackendCard() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <Flex align="center" justify="between">
+          <CardTitle className="text-base">Backend</CardTitle>
+          <Badge variant="outline">
+            <Database className="mr-1 h-3 w-3" />
+            Django
+          </Badge>
+        </Flex>
+      </CardHeader>
+      <CardContent>
+        <CardDescription>
+          Django REST API with JWT auth, serializers, and auto-generated OpenAPI docs.
+        </CardDescription>
+        <div className="mt-4">
+          <Button variant="outline" size="sm" asChild>
+            <a href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer">
+              View API Docs
+            </a>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function FrontendCard() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <Flex align="center" justify="between">
+          <CardTitle className="text-base">Frontend</CardTitle>
+          <Badge variant="outline">
+            <Layout className="mr-1 h-3 w-3" />
+            React
+          </Badge>
+        </Flex>
+      </CardHeader>
+      <CardContent>
+        <CardDescription>
+          React + TypeScript with TanStack Query, React Router, and Tailwind CSS.
+        </CardDescription>
+        <div className="mt-4">
+          <Button variant="outline" size="sm" asChild>
+            <Link to={Path.Home}>Home Page</Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/templates/frontend/src/pages/dashboard/components/welcome-header.tsx.hbs

@@ -0,0 +1,14 @@
+import { Stack, Typography, Text } from '@blacksmith-ui/react'
+
+interface WelcomeHeaderProps {
+  displayName: string
+}
+
+export function WelcomeHeader({ displayName }: WelcomeHeaderProps) {
+  return (
+    <Stack gap={1}>
+      <Typography variant="h2">Dashboard</Typography>
+      <Text color="muted">Welcome back, {displayName}.</Text>
+    </Stack>
+  )
+}

package/src/templates/frontend/src/pages/dashboard/dashboard.tsx.hbs

@@ -0,0 +1,21 @@
+import { Stack, Divider, Grid } from '@blacksmith-ui/react'
+import { useAuth } from '@/features/auth/hooks/use-auth'
+import { WelcomeHeader } from './components/welcome-header'
+import { QuickStartCard } from './components/quick-start-card'
+import { BackendCard, FrontendCard } from './components/stack-cards'
+
+export default function DashboardPage() {
+  const { user } = useAuth()
+
+  return (
+    <Stack gap={8}>
+      <WelcomeHeader displayName={user?.displayName || user?.email || 'there'} />
+      <Divider />
+      <Grid columns={{ base: 1, sm: 2, lg: 3 }} gap={4}>
+        <QuickStartCard />
+        <BackendCard />
+        <FrontendCard />
+      </Grid>
+    </Stack>
+  )
+}

package/src/templates/frontend/src/pages/dashboard/index.ts.hbs

@@ -0,0 +1 @@
+export { dashboardRoutes } from './routes'

package/src/templates/frontend/src/pages/dashboard/routes.tsx.hbs

@@ -0,0 +1,7 @@
+import type { RouteObject } from 'react-router-dom'
+import { Path } from '@/router/paths'
+import DashboardPage from './dashboard'
+
+export const dashboardRoutes: RouteObject[] = [
+  { path: Path.Dashboard, element: <DashboardPage /> },
+]

package/src/templates/frontend/src/pages/home/components/features-grid.tsx.hbs

@@ -0,0 +1,88 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Badge,
+  Stack,
+  Flex,
+  Grid,
+  Typography,
+  Text,
+} from '@blacksmith-ui/react'
+import { Database, Layout, Shield, Code2, Zap, Rocket } from 'lucide-react'
+
+const features = [
+  {
+    icon: Database,
+    title: 'Django REST API',
+    description: 'Production-ready backend with JWT auth, serializers, and OpenAPI docs.',
+    badge: 'Backend',
+  },
+  {
+    icon: Layout,
+    title: 'React + TypeScript',
+    description: 'Vite-powered frontend with TanStack Query, React Router, and Tailwind CSS.',
+    badge: 'Frontend',
+  },
+  {
+    icon: Shield,
+    title: 'Authentication',
+    description: 'Complete auth flow with login, register, password reset, and role guards.',
+    badge: 'Full Stack',
+  },
+  {
+    icon: Code2,
+    title: 'Type-Safe API',
+    description: 'Auto-generated TypeScript client from your OpenAPI schema via blacksmith sync.',
+    badge: 'DX',
+  },
+  {
+    icon: Zap,
+    title: 'Blacksmith UI',
+    description: '80+ accessible components, form library, hooks, and dark mode theming.',
+    badge: 'UI',
+  },
+  {
+    icon: Rocket,
+    title: 'Developer Experience',
+    description: 'Hot reload, AI-ready CLAUDE.md, and one command to run the full stack.',
+    badge: 'DX',
+  },
+]
+
+export function FeaturesGrid() {
+  return (
+    <Stack as="section" gap={6}>
+      <Stack gap={2} align="center">
+        <Typography variant="h2">What's Included</Typography>
+        <Text color="muted">
+          A batteries-included stack so you can focus on your product.
+        </Text>
+      </Stack>
+      <Grid columns={{ base: 1, sm: 2, lg: 3 }} gap={4}>
+        {features.map((feature) => (
+          <Card key={feature.title} className="group transition-colors hover:border-primary/50">
+            <CardHeader className="pb-3">
+              <Flex align="start" justify="between">
+                <Flex align="center" justify="center" className="h-10 w-10 rounded-lg bg-primary/10 transition-colors group-hover:bg-primary/20">
+                  <feature.icon className="h-5 w-5 text-primary" />
+                </Flex>
+                <Badge variant="outline" className="text-xs">
+                  {feature.badge}
+                </Badge>
+              </Flex>
+            </CardHeader>
+            <CardContent>
+              <Stack gap={1.5}>
+                <CardTitle className="text-base">{feature.title}</CardTitle>
+                <CardDescription>{feature.description}</CardDescription>
+              </Stack>
+            </CardContent>
+          </Card>
+        ))}
+      </Grid>
+    </Stack>
+  )
+}

package/src/templates/frontend/src/pages/home/components/getting-started.tsx.hbs

@@ -0,0 +1,88 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Button,
+  Tooltip,
+  Stack,
+  Flex,
+  Grid,
+  Typography,
+  Text,
+} from '@blacksmith-ui/react'
+import { Terminal, Copy, Check } from 'lucide-react'
+import { useCopyToClipboard } from '@blacksmith-ui/hooks'
+
+const steps = [
+  {
+    command: 'blacksmith dev',
+    title: 'Start the dev server',
+    description: 'Runs Django, Vite, and OpenAPI watcher concurrently.',
+  },
+  {
+    command: 'blacksmith make:resource Post',
+    title: 'Scaffold a resource',
+    description: 'Generates model, serializer, viewset, hooks, and pages.',
+  },
+  {
+    command: 'blacksmith sync',
+    title: 'Sync API types',
+    description: 'Regenerates the TypeScript client from your Django schema.',
+  },
+]
+
+function CommandBlock({ command }: { command: string }) {
+  const { status, copy } = useCopyToClipboard(2000)
+  const copied = status === 'copied'
+
+  return (
+    <Flex align="center" gap={2} className="rounded-lg bg-muted px-3 py-2">
+      <Terminal className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+      <Text as="code" size="sm" className="flex-1 font-mono">{command}</Text>
+      <Tooltip content={copied ? 'Copied!' : 'Copy command'}>
+        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => copy(command)}>
+          {copied ? (
+            <Check className="h-3.5 w-3.5 text-green-500" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export function GettingStarted() {
+  return (
+    <Stack as="section" gap={6}>
+      <Stack gap={2} align="center">
+        <Typography variant="h2">Get Started in 3 Steps</Typography>
+        <Text color="muted">
+          Everything you need to go from scaffold to production.
+        </Text>
+      </Stack>
+      <Grid columns={{ base: 1, md: 3 }} gap={4}>
+        {steps.map((step, index) => (
+          <Card key={step.command}>
+            <CardHeader className="pb-3">
+              <Flex align="center" gap={3}>
+                <Flex align="center" justify="center" className="h-8 w-8 shrink-0 rounded-full bg-primary text-primary-foreground">
+                  <Text size="sm" weight="semibold">{index + 1}</Text>
+                </Flex>
+                <CardTitle className="text-base">{step.title}</CardTitle>
+              </Flex>
+            </CardHeader>
+            <CardContent>
+              <Stack gap={3}>
+                <CardDescription>{step.description}</CardDescription>
+                <CommandBlock command={step.command} />
+              </Stack>
+            </CardContent>
+          </Card>
+        ))}
+      </Grid>
+    </Stack>
+  )
+}

package/src/templates/frontend/src/pages/home/components/hero-section.tsx.hbs

@@ -0,0 +1,47 @@
+import { Stack, Flex, Typography, Text, Button } from '@blacksmith-ui/react'
+import { Rocket, BookOpen } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { Path } from '@/router/paths'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+interface HeroSectionProps {
+  isAuthenticated: boolean
+}
+
+export function HeroSection({ isAuthenticated }: HeroSectionProps) {
+  return (
+    <Stack as="section" gap={6} align="center" className="pt-10 pb-2">
+      <Typography variant="h1" className="sm:text-5xl">
+        Welcome to{' '}
+        <Text as="span" color="primary">{{projectName}}</Text>
+      </Typography>
+      <Text size="lg" color="muted" align="center" className="max-w-2xl">
+        Your fullstack Django + React application is ready to go.
+      </Text>
+      <Flex justify="center" gap={3} className="pt-2">
+        {isAuthenticated ? (
+          <Button size="lg" asChild>
+            <Link to={Path.Dashboard}>
+              <Rocket className="mr-2 h-4 w-4" />
+              Dashboard
+            </Link>
+          </Button>
+        ) : (
+          <Button size="lg" asChild>
+            <Link to={Path.Login}>
+              <Rocket className="mr-2 h-4 w-4" />
+              Sign In
+            </Link>
+          </Button>
+        )}
+        <Button variant="outline" size="lg" asChild>
+          <a href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer">
+            <BookOpen className="mr-2 h-4 w-4" />
+            API Docs
+          </a>
+        </Button>
+      </Flex>
+    </Stack>
+  )
+}

package/src/templates/frontend/src/pages/home/components/resources-section.tsx.hbs

@@ -0,0 +1,34 @@
+import { Stack, Flex, Typography, Text, Button } from '@blacksmith-ui/react'
+import { ExternalLink } from 'lucide-react'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+const links = [
+  { label: 'Swagger UI', href: `${API_URL}/api/docs/` },
+  { label: 'ReDoc', href: `${API_URL}/api/redoc/` },
+  { label: 'OpenAPI Schema', href: `${API_URL}/api/schema/` },
+  { label: 'Django Admin', href: `${API_URL}/admin/` },
+]
+
+export function ResourcesSection() {
+  return (
+    <Stack as="section" gap={4}>
+      <Stack gap={2} align="center">
+        <Typography variant="h2">Resources</Typography>
+        <Text color="muted">
+          Documentation and tools to help you build.
+        </Text>
+      </Stack>
+      <Flex justify="center" wrap="wrap" gap={3}>
+        {links.map((link) => (
+          <Button key={link.label} variant="outline" size="sm" asChild>
+            <a href={link.href} target="_blank" rel="noopener noreferrer">
+              <ExternalLink className="mr-2 h-3.5 w-3.5" />
+              {link.label}
+            </a>
+          </Button>
+        ))}
+      </Flex>
+    </Stack>
+  )
+}

package/src/templates/frontend/src/pages/home/home.tsx.hbs

@@ -0,0 +1,20 @@
+import { Stack, Divider } from '@blacksmith-ui/react'
+import { useAuth } from '@/features/auth/hooks/use-auth'
+import { HeroSection } from './components/hero-section'
+import { GettingStarted } from './components/getting-started'
+import { FeaturesGrid } from './components/features-grid'
+import { ResourcesSection } from './components/resources-section'
+
+export default function HomePage() {
+  const { isAuthenticated } = useAuth()
+
+  return (
+    <Stack gap={12}>
+      <HeroSection isAuthenticated={isAuthenticated} />
+      <Divider />
+      <GettingStarted />
+      <FeaturesGrid />
+      <ResourcesSection />
+    </Stack>
+  )
+}

package/src/templates/frontend/src/pages/home/index.ts.hbs

@@ -0,0 +1 @@
+export { homeRoutes } from './routes'

package/src/templates/frontend/src/pages/home/routes.tsx.hbs

@@ -0,0 +1,7 @@
+import type { RouteObject } from 'react-router-dom'
+import { Path } from '@/router/paths'
+import HomePage from './home'
+
+export const homeRoutes: RouteObject[] = [
+  { path: Path.Home, element: <HomePage /> },
+]

package/src/templates/frontend/src/router/auth-guard.tsx.hbs

@@ -0,0 +1,57 @@
+import { Navigate, useLocation } from 'react-router-dom'
+import { Spinner, Alert, AlertTitle, AlertDescription, Button } from '@blacksmith-ui/react'
+import { ShieldAlert } from 'lucide-react'
+import { useAuth } from '@/features/auth/hooks/use-auth'
+import { Path } from '@/router/paths'
+
+interface AuthGuardProps {
+  roles?: string[]
+  children: React.ReactNode
+}
+
+export function AuthGuard({ roles, children }: AuthGuardProps) {
+  const { user, isLoading, isAuthenticated } = useAuth()
+  const location = useLocation()
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <Spinner className="h-8 w-8" />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    const redirectParam = encodeURIComponent(location.pathname + location.search)
+    return <Navigate to={`${Path.Login}?redirect=${redirectParam}`} replace />
+  }
+
+  if (roles && roles.length > 0 && user) {
+    const userRoles = (user as any).roles || []
+    const hasRole = roles.some((role) => userRoles.includes(role))
+    if (!hasRole) {
+      return (
+        <div className="flex items-center justify-center min-h-[60vh] px-4">
+          <div className="w-full max-w-md space-y-4 text-center">
+            <div className="flex justify-center">
+              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+                <ShieldAlert className="h-8 w-8 text-destructive" />
+              </div>
+            </div>
+            <Alert variant="destructive">
+              <AlertTitle>Access Denied</AlertTitle>
+              <AlertDescription>
+                You don't have permission to view this page.
+              </AlertDescription>
+            </Alert>
+            <Button variant="outline" onClick={() => window.history.back()}>
+              Go Back
+            </Button>
+          </div>
+        </div>
+      )
+    }
+  }
+
+  return <>{children}</>
+}

package/src/templates/frontend/src/router/error-boundary.tsx.hbs

@@ -0,0 +1,61 @@
+import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
+import {
+  Button,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Card,
+  CardContent,
+} from '@blacksmith-ui/react'
+import { ArrowLeft, RefreshCw, AlertTriangle } from 'lucide-react'
+
+export function RouteErrorBoundary() {
+  const error = useRouteError()
+  const navigate = useNavigate()
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-background">
+        <div className="text-center space-y-4">
+          <div className="flex justify-center">
+            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
+              <AlertTriangle className="h-10 w-10 text-muted-foreground" />
+            </div>
+          </div>
+          <h1 className="text-5xl font-bold tracking-tight">{error.status}</h1>
+          <p className="text-xl text-muted-foreground">{error.statusText}</p>
+          <div className="pt-2">
+            <Button onClick={() => navigate(-1)}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-background px-4">
+      <Card className="w-full max-w-md">
+        <CardContent className="pt-6 space-y-4">
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertTitle>Something went wrong</AlertTitle>
+            <AlertDescription>
+              {error instanceof Error
+                ? error.message
+                : 'An unexpected error occurred.'}
+            </AlertDescription>
+          </Alert>
+          <div className="flex justify-center">
+            <Button onClick={() => window.location.reload()}>
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Reload Page
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}