blacksmith-cli 0.1.6 → 0.1.7

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

@@ -1,26 +1,42 @@
 /**
  * Reset Password Page
  *
- * Uses @blacksmith-ui/auth ResetPasswordForm connected to Django backend.
+ * Password reset form built with Chakra UI.
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { ResetPasswordForm } from '@blacksmith-ui/auth'
+import { useState } from 'react'
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  VStack,
+  Heading,
+  Text,
+  Alert,
+  AlertIcon,
+  AlertDescription,
+  Link as ChakraLink,
+} from '@chakra-ui/react'
 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 [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
 
-  const handleSubmit = async (data: { password: string; code: string }) => {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
     setLoading(true)
     try {
-      const result = await confirmPasswordReset(data.code, data.password)
+      const result = await confirmPasswordReset(token || '', password)
       if (result.success) {
         navigate(Path.Login, { replace: true })
       }
@@ -30,12 +46,47 @@ export default function ResetPasswordPage() {
   }
 
   return (
-    <ResetPasswordForm
-      onSubmit={handleSubmit}
-      code={token || ''}
-      onLoginClick={() => navigate(Path.Login)}
-      error={error}
-      loading={loading}
-    />
+    <Box>
+      <VStack spacing={2} mb={6} align="start">
+        <Heading size="lg">Reset Password</Heading>
+        <Text color="gray.500">Enter your new password below.</Text>
+      </VStack>
+
+      {error && (
+        <Alert status="error" borderRadius="md" mb={4}>
+          <AlertIcon />
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <VStack spacing={4}>
+          <FormControl isRequired>
+            <FormLabel>New Password</FormLabel>
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Choose a new password"
+            />
+          </FormControl>
+
+          <Button
+            type="submit"
+            colorScheme="blue"
+            width="full"
+            isLoading={loading}
+          >
+            Reset Password
+          </Button>
+        </VStack>
+      </form>
+
+      <Text fontSize="sm" color="gray.500" mt={6} textAlign="center">
+        <ChakraLink color="blue.500" onClick={() => navigate(Path.Login)}>
+          Back to Sign In
+        </ChakraLink>
+      </Text>
+    </Box>
   )
 }

package/src/templates/frontend/src/features/auth/types.ts.hbs

@@ -0,0 +1,32 @@
+export interface AuthUser {
+  id: string
+  email: string
+  displayName: string | null
+  photoURL: string | null
+  emailVerified: boolean
+  providerId: string
+}
+
+export interface AuthError {
+  code: string
+  message: string
+}
+
+export interface AuthResult {
+  success: boolean
+  user?: AuthUser
+  error?: AuthError
+}
+
+export type SocialProvider = 'google' | 'github' | 'facebook' | 'apple'
+
+export interface AuthAdapter {
+  signInWithEmail(email: string, password: string): Promise<AuthResult>
+  signUpWithEmail(email: string, password: string, displayName?: string): Promise<AuthResult>
+  signInWithSocial(provider: SocialProvider): Promise<AuthResult>
+  sendPasswordResetEmail(email: string): Promise<{ success: boolean; error?: AuthError }>
+  confirmPasswordReset(code: string, newPassword: string): Promise<{ success: boolean; error?: AuthError }>
+  signOut(): Promise<void>
+  getCurrentUser(): AuthUser | null
+  onAuthStateChanged(callback: (user: AuthUser | null) => void): () => void
+}

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

@@ -1,36 +1,37 @@
 import {
   Card,
   CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
+  CardBody,
   Badge,
-  Flex,
+  HStack,
   Text,
-} from '@blacksmith-ui/react'
+  Heading,
+} from '@chakra-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>
+      <CardHeader pb={3}>
+        <HStack justify="space-between">
+          <Heading size="sm">Quick Start</Heading>
           <Badge variant="outline">
-            <Rocket className="mr-1 h-3 w-3" />
-            Guide
+            <HStack spacing={1}>
+              <Rocket className="h-3 w-3" />
+              <span>Guide</span>
+            </HStack>
           </Badge>
-        </Flex>
+        </HStack>
       </CardHeader>
-      <CardContent>
-        <CardDescription>
+      <CardBody>
+        <Text fontSize="sm" color="gray.500">
           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">
+        </Text>
+        <HStack spacing={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>
+          <code className="font-mono text-sm">blacksmith make:resource Post</code>
+        </HStack>
+      </CardBody>
     </Card>
   )
 }

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

@@ -1,13 +1,13 @@
 import {
   Card,
   CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
+  CardBody,
   Badge,
   Button,
-  Flex,
-} from '@blacksmith-ui/react'
+  HStack,
+  Heading,
+  Text,
+} from '@chakra-ui/react'
 import { Database, Layout } from 'lucide-react'
 import { Link } from 'react-router-dom'
 import { Path } from '@/router/paths'
@@ -17,27 +17,27 @@ 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>
+      <CardHeader pb={3}>
+        <HStack justify="space-between">
+          <Heading size="sm">Backend</Heading>
           <Badge variant="outline">
-            <Database className="mr-1 h-3 w-3" />
-            Django
+            <HStack spacing={1}>
+              <Database className="h-3 w-3" />
+              <span>Django</span>
+            </HStack>
           </Badge>
-        </Flex>
+        </HStack>
       </CardHeader>
-      <CardContent>
-        <CardDescription>
+      <CardBody>
+        <Text fontSize="sm" color="gray.500">
           Django REST API with JWT auth, serializers, and auto-generated OpenAPI docs.
-        </CardDescription>
+        </Text>
         <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 variant="outline" size="sm" as="a" href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer">
+            View API Docs
           </Button>
         </div>
-      </CardContent>
+      </CardBody>
     </Card>
   )
 }
@@ -45,25 +45,27 @@ export function BackendCard() {
 export function FrontendCard() {
   return (
     <Card>
-      <CardHeader className="pb-3">
-        <Flex align="center" justify="between">
-          <CardTitle className="text-base">Frontend</CardTitle>
+      <CardHeader pb={3}>
+        <HStack justify="space-between">
+          <Heading size="sm">Frontend</Heading>
           <Badge variant="outline">
-            <Layout className="mr-1 h-3 w-3" />
-            React
+            <HStack spacing={1}>
+              <Layout className="h-3 w-3" />
+              <span>React</span>
+            </HStack>
           </Badge>
-        </Flex>
+        </HStack>
       </CardHeader>
-      <CardContent>
-        <CardDescription>
+      <CardBody>
+        <Text fontSize="sm" color="gray.500">
           React + TypeScript with TanStack Query, React Router, and Tailwind CSS.
-        </CardDescription>
+        </Text>
         <div className="mt-4">
-          <Button variant="outline" size="sm" asChild>
-            <Link to={Path.Home}>Home Page</Link>
+          <Button variant="outline" size="sm" as={Link} to={Path.Home}>
+            Home Page
           </Button>
         </div>
-      </CardContent>
+      </CardBody>
     </Card>
   )
 }

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

@@ -1,4 +1,4 @@
-import { Stack, Typography, Text } from '@blacksmith-ui/react'
+import { VStack, Heading, Text } from '@chakra-ui/react'
 
 interface WelcomeHeaderProps {
   displayName: string
@@ -6,9 +6,9 @@ interface WelcomeHeaderProps {
 
 export function WelcomeHeader({ displayName }: WelcomeHeaderProps) {
   return (
-    <Stack gap={1}>
-      <Typography variant="h2">Dashboard</Typography>
-      <Text color="muted">Welcome back, {displayName}.</Text>
-    </Stack>
+    <VStack spacing={1} align="stretch">
+      <Heading size="lg">Dashboard</Heading>
+      <Text color="gray.500">Welcome back, {displayName}.</Text>
+    </VStack>
   )
 }

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

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

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

@@ -1,16 +1,14 @@
 import {
-  Stack,
-  Flex,
-  Typography,
+  VStack,
+  HStack,
+  Heading,
   Text,
   Button,
   Card,
   CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  Grid,
-} from '@blacksmith-ui/react'
+  CardBody,
+  SimpleGrid,
+} from '@chakra-ui/react'
 import { useAuth } from '@/features/auth/hooks/use-auth'
 import { Link } from 'react-router-dom'
 import { Path } from '@/router/paths'
@@ -22,56 +20,54 @@ export default function HomePage() {
   const { isAuthenticated } = useAuth()
 
   return (
-    <Stack gap={10} className="pt-16 pb-12">
-      <Stack gap={4} align="center">
-        <Typography variant="h1" className="sm:text-5xl">
+    <VStack spacing={10} align="stretch" className="pt-16 pb-12">
+      <VStack spacing={4} align="center">
+        <Heading as="h1" size="2xl" className="sm:text-5xl">
           {{projectName}}
-        </Typography>
-        <Text size="lg" color="muted" align="center" className="max-w-md">
+        </Heading>
+        <Text fontSize="lg" color="gray.500" textAlign="center" className="max-w-md">
           Your app is ready. Sign in to get started or explore the API.
         </Text>
-        <Flex justify="center" gap="md" className="pt-2">
+        <HStack spacing={4} className="pt-2">
           {isAuthenticated ? (
-            <Button size="lg" asChild>
-              <Link to={Path.Dashboard}>Dashboard</Link>
+            <Button size="lg" as={Link} to={Path.Dashboard}>
+              Dashboard
             </Button>
           ) : (
-            <Button size="lg" asChild>
-              <Link to={Path.Login}>Sign In</Link>
+            <Button size="lg" as={Link} to={Path.Login}>
+              Sign In
             </Button>
           )}
-          <Button variant="outline" size="lg" asChild>
-            <a href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer">
-              API Docs
-            </a>
+          <Button variant="outline" size="lg" as="a" href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer">
+            API Docs
           </Button>
-        </Flex>
-      </Stack>
+        </HStack>
+      </VStack>
 
-      <Grid columns=\{{ base: 1, md: 3 }} gap={4} className="max-w-3xl mx-auto w-full">
+      <SimpleGrid columns=\{{ base: 1, md: 3 }} spacing={4} className="max-w-3xl mx-auto w-full">
         <Card>
-          <CardHeader className="pb-2">
-            <Flex align="center" gap={2}>
+          <CardHeader pb={2}>
+            <HStack spacing={2}>
               <Terminal className="h-4 w-4 text-primary" />
-              <CardTitle className="text-sm">CLI</CardTitle>
-            </Flex>
+              <Heading size="xs">CLI</Heading>
+            </HStack>
           </CardHeader>
-          <CardContent>
-            <CardDescription>
-              Run <Text as="code" size="sm" className="font-mono">blacksmith dev</Text> to start the full stack.
-            </CardDescription>
-          </CardContent>
+          <CardBody>
+            <Text fontSize="sm" color="gray.500">
+              Run <code className="font-mono text-sm">blacksmith dev</code> to start the full stack.
+            </Text>
+          </CardBody>
         </Card>
 
         <Card>
-          <CardHeader className="pb-2">
-            <Flex align="center" gap={2}>
+          <CardHeader pb={2}>
+            <HStack spacing={2}>
               <BookOpen className="h-4 w-4 text-primary" />
-              <CardTitle className="text-sm">API</CardTitle>
-            </Flex>
+              <Heading size="xs">API</Heading>
+            </HStack>
           </CardHeader>
-          <CardContent>
-            <CardDescription>
+          <CardBody>
+            <Text fontSize="sm" color="gray.500">
               <a href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 hover:text-foreground">
                 Swagger UI
               </a>
@@ -79,24 +75,24 @@ export default function HomePage() {
               <a href={`${API_URL}/admin/`} target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 hover:text-foreground">
                 Django Admin
               </a>
-            </CardDescription>
-          </CardContent>
+            </Text>
+          </CardBody>
         </Card>
 
         <Card>
-          <CardHeader className="pb-2">
-            <Flex align="center" gap={2}>
+          <CardHeader pb={2}>
+            <HStack spacing={2}>
               <Layout className="h-4 w-4 text-primary" />
-              <CardTitle className="text-sm">Frontend</CardTitle>
-            </Flex>
+              <Heading size="xs">Frontend</Heading>
+            </HStack>
           </CardHeader>
-          <CardContent>
-            <CardDescription>
+          <CardBody>
+            <Text fontSize="sm" color="gray.500">
               React, TanStack Query, and Tailwind CSS with typed API hooks.
-            </CardDescription>
-          </CardContent>
+            </Text>
+          </CardBody>
         </Card>
-      </Grid>
-    </Stack>
+      </SimpleGrid>
+    </VStack>
   )
 }

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

@@ -1,5 +1,5 @@
 import { Navigate, useLocation } from 'react-router-dom'
-import { Spinner, Alert, AlertTitle, AlertDescription, Button } from '@blacksmith-ui/react'
+import { Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Button, Box } from '@chakra-ui/react'
 import { ShieldAlert } from 'lucide-react'
 import { useAuth } from '@/features/auth/hooks/use-auth'
 import { Path } from '@/router/paths'
@@ -16,7 +16,7 @@ export function AuthGuard({ roles, children }: AuthGuardProps) {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <Spinner className="h-8 w-8" />
+        <Spinner size="lg" />
       </div>
     )
   }
@@ -38,11 +38,14 @@ export function AuthGuard({ roles, children }: AuthGuardProps) {
                 <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 status="error" borderRadius="md">
+              <AlertIcon />
+              <Box>
+                <AlertTitle>Access Denied</AlertTitle>
+                <AlertDescription>
+                  You don't have permission to view this page.
+                </AlertDescription>
+              </Box>
             </Alert>
             <Button variant="outline" onClick={() => window.history.back()}>
               Go Back

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

@@ -2,11 +2,13 @@ import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-d
 import {
   Button,
   Alert,
+  AlertIcon,
   AlertTitle,
   AlertDescription,
   Card,
-  CardContent,
-} from '@blacksmith-ui/react'
+  CardBody,
+  Box,
+} from '@chakra-ui/react'
 import { ArrowLeft, RefreshCw, AlertTriangle } from 'lucide-react'
 
 export function RouteErrorBoundary() {
@@ -38,15 +40,17 @@ export function RouteErrorBoundary() {
   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>
+        <CardBody className="pt-6 space-y-4">
+          <Alert status="error" borderRadius="md">
+            <AlertIcon />
+            <Box>
+              <AlertTitle>Something went wrong</AlertTitle>
+              <AlertDescription>
+                {error instanceof Error
+                  ? error.message
+                  : 'An unexpected error occurred.'}
+              </AlertDescription>
+            </Box>
           </Alert>
           <div className="flex justify-center">
             <Button onClick={() => window.location.reload()}>
@@ -54,7 +58,7 @@ export function RouteErrorBoundary() {
               Reload Page
             </Button>
           </div>
-        </CardContent>
+        </CardBody>
       </Card>
     </div>
   )

package/src/templates/frontend/src/router/layouts/auth-layout.tsx.hbs

@@ -1,5 +1,5 @@
 import { Outlet, Link } from 'react-router-dom'
-import { Separator, Button } from '@blacksmith-ui/react'
+import { Divider, Button } from '@chakra-ui/react'
 import { Anvil } from 'lucide-react'
 import { Path } from '@/router/paths'
 
@@ -35,8 +35,8 @@ export function AuthLayoutWrapper() {
             <span className="font-semibold">{{projectName}}</span>
           </div>
           <div className="lg:ml-auto">
-            <Button variant="ghost" size="sm" asChild>
-              <Link to={Path.Home}>Back to Home</Link>
+            <Button variant="ghost" size="sm" as={Link} to={Path.Home}>
+              Back to Home
             </Button>
           </div>
         </div>
@@ -47,19 +47,19 @@ export function AuthLayoutWrapper() {
           </div>
         </div>
 
-        <Separator />
+        <Divider />
 
         <div className="flex items-center justify-center gap-4 p-6">
-          <Button variant="link" size="sm" className="text-muted-foreground" asChild>
-            <Link to="/terms">Terms</Link>
+          <Button variant="link" size="sm" className="text-muted-foreground" as={Link} to="/terms">
+            Terms
           </Button>
-          <Separator orientation="vertical" className="h-4" />
-          <Button variant="link" size="sm" className="text-muted-foreground" asChild>
-            <Link to="/privacy">Privacy</Link>
+          <Divider orientation="vertical" h={4} />
+          <Button variant="link" size="sm" className="text-muted-foreground" as={Link} to="/privacy">
+            Privacy
           </Button>
-          <Separator orientation="vertical" className="h-4" />
-          <Button variant="link" size="sm" className="text-muted-foreground" asChild>
-            <Link to="/support">Support</Link>
+          <Divider orientation="vertical" h={4} />
+          <Button variant="link" size="sm" className="text-muted-foreground" as={Link} to="/support">
+            Support
           </Button>
         </div>
       </div>