blacksmith-cli 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blacksmith-cli",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Fullstack Django + React framework — one command, one codebase, one mental model",
   "type": "module",
   "bin": {
@@ -34,6 +34,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@blacksmith/studio": "file:packages/studio",
     "chalk": "^5.4.1",
     "change-case": "^5.4.4",
     "chokidar": "^5.0.0",

package/src/templates/frontend/package.json.hbs

@@ -14,15 +14,15 @@
     "openapi-ts": "openapi-ts"
   },
   "dependencies": {
-    "@blacksmith-ui/auth": "^0.1.0",
-    "@blacksmith-ui/forms": "^0.1.0",
-    "@blacksmith-ui/hooks": "^0.1.0",
-    "@blacksmith-ui/react": "^0.1.2",
+    "@chakra-ui/react": "^2.8.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@hey-api/client-fetch": "^0.9.0",
     "@hookform/resolvers": "^5.0.0",
     "@tanstack/react-query": "^5.90.0",
     "@tanstack/react-query-devtools": "^5.90.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.0.0",
     "lucide-react": "^0.400.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/src/templates/frontend/src/__tests__/test-utils.tsx.hbs

@@ -2,7 +2,8 @@ import { type ReactElement, type ReactNode } from 'react'
 import { render, type RenderOptions } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ThemeProvider } from '@blacksmith-ui/react'
+import { ChakraProvider } from '@chakra-ui/react'
+import theme from '@/theme'
 import { MemoryRouter } from 'react-router-dom'
 
 /**
@@ -36,7 +37,7 @@ interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
 
 /**
  * Custom render that wraps components with all app providers:
- * - ThemeProvider (light mode for consistent snapshots)
+ * - ChakraProvider (with theme for consistent snapshots)
  * - QueryClientProvider (with test-friendly defaults)
  * - MemoryRouter (for components that use routing hooks)
  *
@@ -56,13 +57,13 @@ export function renderWithProviders(
 ) {
   function Wrapper({ children }: WrapperProps) {
     return (
-      <ThemeProvider defaultMode="light" storageKey="test-theme">
+      <ChakraProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
           <MemoryRouter initialEntries={routerEntries}>
             {children}
           </MemoryRouter>
         </QueryClientProvider>
-      </ThemeProvider>
+      </ChakraProvider>
     )
   }
 

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

@@ -8,7 +8,8 @@
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RouterProvider } from 'react-router-dom'
-import { ThemeProvider } from '@blacksmith-ui/react'
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
+import theme from '@/theme'
 import { queryClient } from '@/api/query-client'
 import { AuthProvider } from '@/features/auth/components/auth-provider'
 import { router } from '@/router'
@@ -18,13 +19,16 @@ import '@/api/client'
 
 export function App() {
   return (
-    <ThemeProvider defaultMode="system" storageKey="{{projectName}}-theme">
-      <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <RouterProvider router={router} />
-        </AuthProvider>
-        {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
-      </QueryClientProvider>
-    </ThemeProvider>
+    <>
+      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+      <ChakraProvider theme={theme}>
+        <QueryClientProvider client={queryClient}>
+          <AuthProvider>
+            <RouterProvider router={router} />
+          </AuthProvider>
+          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+        </QueryClientProvider>
+      </ChakraProvider>
+    </>
   )
 }

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

@@ -1,13 +1,13 @@
 /**
- * Blacksmith Auth Adapter
+ * Auth Adapter
  *
- * Connects @blacksmith-ui/auth to the Django JWT backend.
+ * Connects the auth system to the Django JWT backend.
  * Implements the AuthAdapter interface using the generated API client.
  *
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import type { AuthAdapter, AuthUser, AuthResult, AuthError, SocialProvider } from '@blacksmith-ui/auth'
+import type { AuthAdapter, AuthUser, AuthError, SocialProvider } from './types'
 import { setTokens, getAccessToken, clearTokens } from '@/api/client'
 import { parseApiError } from '@/shared/hooks/api-error'
 
@@ -73,7 +73,7 @@ async function fetchCurrentUser(): Promise<AuthUser> {
   return mapDjangoUser(data)
 }
 
-export function createBlacksmithAuthAdapter(): AuthAdapter {
+export function createAuthAdapter(): AuthAdapter {
   // Try to restore session on init
   ;(async () => {
     try {
@@ -88,7 +88,7 @@ export function createBlacksmithAuthAdapter(): AuthAdapter {
   })()
 
   return {
-    async signInWithEmail(email: string, password: string): Promise<AuthResult> {
+    async signInWithEmail(email: string, password: string) {
       try {
         const data = await apiFetch('/api/auth/login/', {
           method: 'POST',
@@ -109,7 +109,7 @@ export function createBlacksmithAuthAdapter(): AuthAdapter {
       email: string,
       password: string,
       displayName?: string
-    ): Promise<AuthResult> {
+    ) {
       try {
         const data = await apiFetch('/api/auth/register/', {
           method: 'POST',
@@ -131,7 +131,7 @@ export function createBlacksmithAuthAdapter(): AuthAdapter {
       }
     },
 
-    async signInWithSocial(_provider: SocialProvider): Promise<AuthResult> {
+    async signInWithSocial(_provider: SocialProvider) {
       return {
         success: false,
         error: {

package/src/templates/frontend/src/features/auth/components/auth-provider.tsx.hbs

@@ -1,32 +1,112 @@
 /**
  * Auth Provider
  *
- * Wraps the app with @blacksmith-ui/auth's AuthProvider configured
- * with the Django JWT adapter.
+ * Provides auth state and actions via React context,
+ * connected to the Django JWT adapter.
  *
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { AuthProvider as BlacksmithAuthProvider } from '@blacksmith-ui/auth'
-import { createBlacksmithAuthAdapter } from '../adapter'
+import { createContext, useContext, useState, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
+import { createAuthAdapter } from '../adapter'
+import type { AuthUser, AuthError, AuthResult } from '../types'
 
-const adapter = createBlacksmithAuthAdapter()
+interface AuthContextValue {
+  user: AuthUser | null
+  loading: boolean
+  error: AuthError | null
+  signInWithEmail: (email: string, password: string) => Promise<AuthResult>
+  signUpWithEmail: (email: string, password: string, displayName?: string) => Promise<AuthResult>
+  signOut: () => Promise<void>
+  sendPasswordResetEmail: (email: string) => Promise<{ success: boolean; error?: AuthError }>
+  confirmPasswordReset: (code: string, newPassword: string) => Promise<{ success: boolean; error?: AuthError }>
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null)
+
+const adapter = createAuthAdapter()
 
 interface Props {
   children: ReactNode
 }
 
 export function AuthProvider({ children }: Props) {
+  const [user, setUser] = useState<AuthUser | null>(adapter.getCurrentUser())
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<AuthError | null>(null)
+
+  useEffect(() => {
+    const unsubscribe = adapter.onAuthStateChanged((u) => {
+      setUser(u)
+      setLoading(false)
+    })
+    return unsubscribe
+  }, [])
+
+  const signInWithEmail = useCallback(async (email: string, password: string) => {
+    setError(null)
+    const result = await adapter.signInWithEmail(email, password)
+    if (!result.success && result.error) {
+      setError(result.error)
+    }
+    return result
+  }, [])
+
+  const signUpWithEmail = useCallback(async (email: string, password: string, displayName?: string) => {
+    setError(null)
+    const result = await adapter.signUpWithEmail(email, password, displayName)
+    if (!result.success && result.error) {
+      setError(result.error)
+    }
+    return result
+  }, [])
+
+  const signOut = useCallback(async () => {
+    setError(null)
+    await adapter.signOut()
+  }, [])
+
+  const sendPasswordResetEmail = useCallback(async (email: string) => {
+    setError(null)
+    const result = await adapter.sendPasswordResetEmail(email)
+    if (!result.success && result.error) {
+      setError(result.error)
+    }
+    return result
+  }, [])
+
+  const confirmPasswordReset = useCallback(async (code: string, newPassword: string) => {
+    setError(null)
+    const result = await adapter.confirmPasswordReset(code, newPassword)
+    if (!result.success && result.error) {
+      setError(result.error)
+    }
+    return result
+  }, [])
+
   return (
-    <BlacksmithAuthProvider
-      config=\{{
-        adapter,
-        // Enable social providers by adding them here:
-        // socialProviders: ['google', 'github'],
+    <AuthContext.Provider
+      value=\{{
+        user,
+        loading,
+        error,
+        signInWithEmail,
+        signUpWithEmail,
+        signOut,
+        sendPasswordResetEmail,
+        confirmPasswordReset,
       }}
     >
       {children}
-    </BlacksmithAuthProvider>
+    </AuthContext.Provider>
   )
 }
+
+export function useAuthContext() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuthContext must be used within an AuthProvider')
+  }
+  return context
+}

package/src/templates/frontend/src/features/auth/hooks/use-auth.ts.hbs

@@ -1,16 +1,16 @@
 /**
  * Auth Hook
  *
- * Re-exports useAuth from @blacksmith-ui/auth for convenience.
+ * Provides a convenient interface to the auth context.
  * Import from here so your app has a single auth import path.
  *
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { useAuth as useBlacksmithAuth } from '@blacksmith-ui/auth'
+import { useAuthContext } from '../components/auth-provider'
 
 export function useAuth() {
-  const auth = useBlacksmithAuth()
+  const auth = useAuthContext()
 
   return {
     user: auth.user,
@@ -22,6 +22,5 @@ export function useAuth() {
     logout: auth.signOut,
     sendPasswordResetEmail: auth.sendPasswordResetEmail,
     confirmPasswordReset: auth.confirmPasswordReset,
-    socialProviders: auth.socialProviders,
   }
 }

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

@@ -1,37 +1,101 @@
 /**
  * Forgot Password Page
  *
- * Uses @blacksmith-ui/auth ForgotPasswordForm connected to Django backend.
+ * Password reset request form built with Chakra UI.
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { ForgotPasswordForm } 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 } from 'react-router-dom'
 import { useAuth } from '../hooks/use-auth'
-import { useState } from 'react'
 import { Path } from '@/router/paths'
 
 export default function ForgotPasswordPage() {
   const navigate = useNavigate()
   const { sendPasswordResetEmail, error } = useAuth()
+
+  const [email, setEmail] = useState('')
   const [loading, setLoading] = useState(false)
+  const [sent, setSent] = useState(false)
 
-  const handleSubmit = async (data: { email: string }) => {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
     setLoading(true)
     try {
-      await sendPasswordResetEmail(data.email)
-      // Show success regardless (prevents email enumeration)
+      await sendPasswordResetEmail(email)
+      setSent(true)
     } finally {
       setLoading(false)
     }
   }
 
   return (
-    <ForgotPasswordForm
-      onSubmit={handleSubmit}
-      onLoginClick={() => navigate(Path.Login)}
-      error={error}
-      loading={loading}
-    />
+    <Box>
+      <VStack spacing={2} mb={6} align="start">
+        <Heading size="lg">Forgot Password</Heading>
+        <Text color="gray.500">
+          Enter your email and we'll send you a reset link.
+        </Text>
+      </VStack>
+
+      {error && (
+        <Alert status="error" borderRadius="md" mb={4}>
+          <AlertIcon />
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+
+      {sent && (
+        <Alert status="success" borderRadius="md" mb={4}>
+          <AlertIcon />
+          <AlertDescription>
+            If an account with that email exists, a reset link has been sent.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <VStack spacing={4}>
+          <FormControl isRequired>
+            <FormLabel>Email</FormLabel>
+            <Input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+            />
+          </FormControl>
+
+          <Button
+            type="submit"
+            colorScheme="blue"
+            width="full"
+            isLoading={loading}
+          >
+            Send Reset Link
+          </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/pages/login-page.tsx.hbs

@@ -1,11 +1,25 @@
 /**
  * Login Page
  *
- * Uses @blacksmith-ui/auth LoginForm connected to Django JWT backend.
+ * Login form built with Chakra UI, connected to Django JWT backend.
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { LoginForm } 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, useSearchParams } from 'react-router-dom'
 import { useAuth } from '../hooks/use-auth'
 import { Path } from '@/router/paths'
@@ -15,22 +29,81 @@ export default function LoginPage() {
   const [searchParams] = useSearchParams()
   const { login, error, isLoading } = useAuth()
 
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
   const redirectTo = searchParams.get('redirect') || Path.Home
 
-  const handleSubmit = async (data: { email: string; password: string }) => {
-    const result = await login(data.email, data.password)
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const result = await login(email, password)
     if (result.success) {
       navigate(redirectTo, { replace: true })
     }
   }
 
   return (
-    <LoginForm
-      onSubmit={handleSubmit}
-      onRegisterClick={() => navigate(Path.Register)}
-      onForgotPasswordClick={() => navigate(Path.ForgotPassword)}
-      error={error}
-      loading={isLoading}
-    />
+    <Box>
+      <VStack spacing={2} mb={6} align="start">
+        <Heading size="lg">Sign In</Heading>
+        <Text color="gray.500">Enter your credentials to access your account.</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>Email</FormLabel>
+            <Input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+            />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Password</FormLabel>
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+            />
+          </FormControl>
+
+          <Button
+            type="submit"
+            colorScheme="blue"
+            width="full"
+            isLoading={isLoading}
+          >
+            Sign In
+          </Button>
+        </VStack>
+      </form>
+
+      <VStack spacing={2} mt={6}>
+        <ChakraLink
+          color="blue.500"
+          fontSize="sm"
+          onClick={() => navigate(Path.ForgotPassword)}
+        >
+          Forgot your password?
+        </ChakraLink>
+        <Text fontSize="sm" color="gray.500">
+          Don't have an account?{' '}
+          <ChakraLink color="blue.500" onClick={() => navigate(Path.Register)}>
+            Sign Up
+          </ChakraLink>
+        </Text>
+      </VStack>
+    </Box>
   )
 }

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

@@ -1,11 +1,25 @@
 /**
  * Register Page
  *
- * Uses @blacksmith-ui/auth RegisterForm connected to Django JWT backend.
+ * Registration form built with Chakra UI, connected to Django JWT backend.
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { RegisterForm } 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 } from 'react-router-dom'
 import { useAuth } from '../hooks/use-auth'
 import { Path } from '@/router/paths'
@@ -14,23 +28,80 @@ 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)
+  const [displayName, setDisplayName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const result = await register(email, password, displayName)
     if (result.success) {
       navigate(Path.Home, { replace: true })
     }
   }
 
   return (
-    <RegisterForm
-      onSubmit={handleSubmit}
-      onLoginClick={() => navigate(Path.Login)}
-      error={error}
-      loading={isLoading}
-    />
+    <Box>
+      <VStack spacing={2} mb={6} align="start">
+        <Heading size="lg">Create Account</Heading>
+        <Text color="gray.500">Sign up to get started.</Text>
+      </VStack>
+
+      {error && (
+        <Alert status="error" borderRadius="md" mb={4}>
+          <AlertIcon />
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <VStack spacing={4}>
+          <FormControl>
+            <FormLabel>Name</FormLabel>
+            <Input
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              placeholder="Your name"
+            />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Email</FormLabel>
+            <Input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+            />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>Password</FormLabel>
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Choose a password"
+            />
+          </FormControl>
+
+          <Button
+            type="submit"
+            colorScheme="blue"
+            width="full"
+            isLoading={isLoading}
+          >
+            Create Account
+          </Button>
+        </VStack>
+      </form>
+
+      <Text fontSize="sm" color="gray.500" mt={6} textAlign="center">
+        Already have an account?{' '}
+        <ChakraLink color="blue.500" onClick={() => navigate(Path.Login)}>
+          Sign In
+        </ChakraLink>
+      </Text>
+    </Box>
   )
 }