blacksmith-cli 0.1.5 → 0.1.7

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>

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

@@ -2,20 +2,20 @@ import { Outlet, Link, useNavigate } from 'react-router-dom'
 import { Path } from '@/router/paths'
 import {
   Button,
-  Separator,
+  IconButton,
   Tooltip,
-  DropdownMenuPrimitives,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuLabel,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuDivider,
+  MenuGroup,
   Avatar,
-  AvatarFallback,
-} from '@blacksmith-ui/react'
+  Divider,
+  useColorMode,
+} from '@chakra-ui/react'
 import { LogOut, User, Settings, Sun, Moon, Anvil } from 'lucide-react'
 import { useAuth } from '@/features/auth/hooks/use-auth'
-import { useDarkMode } from '@blacksmith-ui/react'
 
 function getInitials(user: any): string {
   if (user?.displayName) {
@@ -29,9 +29,11 @@ function getInitials(user: any): string {
 
 export function MainLayout() {
   const { user, isAuthenticated, logout } = useAuth()
-  const { isDark, toggle } = useDarkMode()
+  const { colorMode, toggleColorMode } = useColorMode()
   const navigate = useNavigate()
 
+  const isDark = colorMode === 'dark'
+
   const handleLogout = () => {
     logout()
     navigate(Path.Login)
@@ -49,57 +51,62 @@ export function MainLayout() {
           <div className="flex-1" />
 
           <div className="flex items-center gap-2">
-            <Tooltip content={isDark ? 'Light mode' : 'Dark mode'}>
-              <Button variant="ghost" size="icon" onClick={toggle}>
-                {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-              </Button>
+            <Tooltip label={isDark ? 'Light mode' : 'Dark mode'}>
+              <IconButton
+                aria-label="Toggle color mode"
+                variant="ghost"
+                size="sm"
+                onClick={toggleColorMode}
+                icon={isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+              />
             </Tooltip>
 
             {isAuthenticated ? (
-              <DropdownMenuPrimitives.Root>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-                    <Avatar className="h-8 w-8">
-                      <AvatarFallback className="text-xs">
-                        {getInitials(user)}
-                      </AvatarFallback>
-                    </Avatar>
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-56">
-                  <DropdownMenuLabel className="font-normal">
-                    <div className="flex flex-col space-y-1">
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  variant="ghost"
+                  className="relative h-8 w-8 rounded-full"
+                  p={0}
+                  minW="auto"
+                >
+                  <Avatar
+                    size="sm"
+                    name={user?.displayName || user?.email || 'U'}
+                    getInitials={() => getInitials(user)}
+                  />
+                </MenuButton>
+                <MenuList>
+                  <MenuGroup>
+                    <div className="px-3 py-2">
                       <p className="text-sm font-medium leading-none">
                         {user?.displayName || 'User'}
                       </p>
-                      <p className="text-xs leading-none text-muted-foreground">
+                      <p className="text-xs leading-none text-muted-foreground mt-1">
                         {user?.email}
                       </p>
                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <User className="mr-2 h-4 w-4" />
+                  </MenuGroup>
+                  <MenuDivider />
+                  <MenuItem icon={<User className="h-4 w-4" />}>
                     Profile
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Settings className="mr-2 h-4 w-4" />
+                  </MenuItem>
+                  <MenuItem icon={<Settings className="h-4 w-4" />}>
                     Settings
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={handleLogout}>
-                    <LogOut className="mr-2 h-4 w-4" />
+                  </MenuItem>
+                  <MenuDivider />
+                  <MenuItem icon={<LogOut className="h-4 w-4" />} onClick={handleLogout}>
                     Sign Out
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenuPrimitives.Root>
+                  </MenuItem>
+                </MenuList>
+              </Menu>
             ) : (
               <>
-                <Button variant="ghost" size="sm" asChild>
-                  <Link to={Path.Login}>Sign In</Link>
+                <Button variant="ghost" size="sm" as={Link} to={Path.Login}>
+                  Sign In
                 </Button>
-                <Button size="sm" asChild>
-                  <Link to={Path.Register}>Sign Up</Link>
+                <Button size="sm" colorScheme="blue" as={Link} to={Path.Register}>
+                  Sign Up
                 </Button>
               </>
             )}
@@ -118,16 +125,16 @@ export function MainLayout() {
             <span>&copy; {new Date().getFullYear()} {{projectName}}. All rights reserved.</span>
           </div>
           <div className="flex items-center gap-4">
-            <Button variant="link" size="sm" className="text-muted-foreground h-auto p-0" asChild>
-              <Link to="/terms">Terms</Link>
+            <Button variant="link" size="sm" className="text-muted-foreground h-auto p-0" as={Link} to="/terms">
+              Terms
             </Button>
-            <Separator orientation="vertical" className="h-4" />
-            <Button variant="link" size="sm" className="text-muted-foreground h-auto p-0" asChild>
-              <Link to="/privacy">Privacy</Link>
+            <Divider orientation="vertical" h={4} />
+            <Button variant="link" size="sm" className="text-muted-foreground h-auto p-0" as={Link} to="/privacy">
+              Privacy
             </Button>
-            <Separator orientation="vertical" className="h-4" />
-            <Button variant="link" size="sm" className="text-muted-foreground h-auto p-0" asChild>
-              <Link to="/support">Support</Link>
+            <Divider orientation="vertical" h={4} />
+            <Button variant="link" size="sm" className="text-muted-foreground h-auto p-0" as={Link} to="/support">
+              Support
             </Button>
           </div>
         </div>

package/src/templates/frontend/src/shared/components/loading-spinner.tsx.hbs

@@ -1,4 +1,4 @@
-import { Spinner } from '@blacksmith-ui/react'
+import { Spinner } from '@chakra-ui/react'
 
 interface LoadingSpinnerProps {
   size?: 'sm' | 'md' | 'lg'
@@ -6,15 +6,15 @@ interface LoadingSpinnerProps {
 }
 
 const sizeMap = {
-  sm: 'h-4 w-4',
-  md: 'h-8 w-8',
-  lg: 'h-12 w-12',
-}
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+} as const
 
 export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
   return (
     <div className={`flex items-center justify-center ${className}`}>
-      <Spinner className={sizeMap[size]} />
+      <Spinner size={sizeMap[size]} />
     </div>
   )
 }

package/src/templates/frontend/src/shared/components/not-found-page.tsx.hbs

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom'
-import { Button } from '@blacksmith-ui/react'
+import { Button } from '@chakra-ui/react'
 import { ArrowLeft, FileQuestion } from 'lucide-react'
 import { Path } from '@/router/paths'
 

package/src/templates/frontend/src/shared/hooks/use-debounce.ts.hbs

@@ -1,10 +1,26 @@
 /**
  * useDebounce Hook
  *
- * Re-exports useDebounce from @blacksmith-ui/hooks.
+ * Debounces a value by the specified delay.
  * Import from here so your app has a single import path.
  *
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-export { useDebounce } from '@blacksmith-ui/hooks'
+import { useState, useEffect } from 'react'
+
+export function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

package/src/templates/frontend/src/styles/globals.css.hbs

@@ -1,4 +1,6 @@
-@import '@blacksmith-ui/react/styles.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 {{#if (ne themePreset "default")}}
 @layer base {

package/src/templates/frontend/tailwind.config.js.hbs

@@ -4,7 +4,7 @@ export default {
   content: [
     './index.html',
     './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@blacksmith-ui/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@chakra-ui/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {

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

@@ -11,6 +11,7 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "types": ["vitest/globals"],
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

package/src/templates/frontend/vite.config.ts.hbs

@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
@@ -18,4 +19,11 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/__tests__/setup.ts'],
+    include: ['src/**/*.spec.{ts,tsx}'],
+    css: true,
+  },
 })

package/src/templates/resource/frontend/components/{{kebab}}-form.tsx.hbs

@@ -9,7 +9,7 @@
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Alert, AlertDescription } from '@blacksmith-ui/react'
+import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react'
 
 const {{name}}Schema = z.object({
   title: z.string().min(1, 'Title is required').max(255),
@@ -55,7 +55,8 @@ export function {{Name}}Form({
   return (
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
       {errorMessage && (
-        <Alert variant="destructive">
+        <Alert status="error" borderRadius="md">
+          <AlertIcon />
           <AlertDescription>{errorMessage}</AlertDescription>
         </Alert>
       )}

package/src/templates/resource/frontend/pages/{{kebabs}}-page.tsx.hbs

@@ -7,7 +7,7 @@
 
 import { use{{Names}} } from '@/api/hooks/{{kebabs}}'
 import { {{Name}}List } from '../components/{{kebab}}-list'
-import { Alert, AlertDescription } from '@blacksmith-ui/react'
+import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react'
 
 export default function {{Names}}Page() {
   const { data, isLoading, errorMessage } = use{{Names}}()
@@ -19,7 +19,8 @@ export default function {{Names}}Page() {
       </div>
 
       {errorMessage && (
-        <Alert variant="destructive" className="mb-4">
+        <Alert status="error" borderRadius="md" className="mb-4">
+          <AlertIcon />
           <AlertDescription>{errorMessage}</AlertDescription>
         </Alert>
       )}

package/src/templates/resource/frontend/pages/{{kebab}}-detail-page.tsx.hbs

@@ -7,7 +7,7 @@
 
 import { useParams, useNavigate } from 'react-router-dom'
 import { useGet{{Name}}, useDelete{{Name}} } from '@/api/hooks/{{kebabs}}'
-import { Alert, AlertDescription } from '@blacksmith-ui/react'
+import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react'
 import { Path } from '@/router/paths'
 
 export default function {{Name}}DetailPage() {
@@ -29,7 +29,8 @@ export default function {{Name}}DetailPage() {
 
   if (errorMessage) {
     return (
-      <Alert variant="destructive">
+      <Alert status="error" borderRadius="md">
+        <AlertIcon />
         <AlertDescription>{errorMessage}</AlertDescription>
       </Alert>
     )
@@ -49,7 +50,8 @@ export default function {{Name}}DetailPage() {
   return (
     <div>
       {delete{{Name}}.errorMessage && (
-        <Alert variant="destructive" className="mb-4">
+        <Alert status="error" borderRadius="md" className="mb-4">
+          <AlertIcon />
           <AlertDescription>{delete{{Name}}.errorMessage}</AlertDescription>
         </Alert>
       )}

package/src/templates/resource/pages/components/{{kebab}}-form.tsx.hbs

@@ -9,7 +9,7 @@
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Alert, AlertDescription } from '@blacksmith-ui/react'
+import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react'
 
 const {{name}}Schema = z.object({
   title: z.string().min(1, 'Title is required').max(255),
@@ -55,7 +55,8 @@ export function {{Name}}Form({
   return (
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
       {errorMessage && (
-        <Alert variant="destructive">
+        <Alert status="error" borderRadius="md">
+          <AlertIcon />
           <AlertDescription>{errorMessage}</AlertDescription>
         </Alert>
       )}

package/src/templates/resource/pages/{{kebabs}}-page.tsx.hbs

@@ -7,7 +7,7 @@
 
 import { use{{Names}} } from '@/api/hooks/{{kebabs}}'
 import { {{Name}}List } from './components/{{kebab}}-list'
-import { Alert, AlertDescription } from '@blacksmith-ui/react'
+import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react'
 
 export default function {{Names}}Page() {
   const { data, isLoading, errorMessage } = use{{Names}}()
@@ -19,7 +19,8 @@ export default function {{Names}}Page() {
       </div>
 
       {errorMessage && (
-        <Alert variant="destructive" className="mb-4">
+        <Alert status="error" borderRadius="md" className="mb-4">
+          <AlertIcon />
           <AlertDescription>{errorMessage}</AlertDescription>
         </Alert>
       )}

package/src/templates/resource/pages/{{kebab}}-detail-page.tsx.hbs

@@ -7,7 +7,7 @@
 
 import { useParams, useNavigate } from 'react-router-dom'
 import { useGet{{Name}}, useDelete{{Name}} } from '@/api/hooks/{{kebabs}}'
-import { Alert, AlertDescription } from '@blacksmith-ui/react'
+import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react'
 import { Path } from '@/router/paths'
 
 export default function {{Name}}DetailPage() {
@@ -29,7 +29,8 @@ export default function {{Name}}DetailPage() {
 
   if (errorMessage) {
     return (
-      <Alert variant="destructive">
+      <Alert status="error" borderRadius="md">
+        <AlertIcon />
         <AlertDescription>{errorMessage}</AlertDescription>
       </Alert>
     )
@@ -49,7 +50,8 @@ export default function {{Name}}DetailPage() {
   return (
     <div>
       {delete{{Name}}.errorMessage && (
-        <Alert variant="destructive" className="mb-4">
+        <Alert status="error" borderRadius="md" className="mb-4">
+          <AlertIcon />
           <AlertDescription>{delete{{Name}}.errorMessage}</AlertDescription>
         </Alert>
       )}