blacksmith-cli 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blacksmith-cli",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Fullstack Django + React framework — one command, one codebase, one mental model",
   "type": "module",
   "bin": {

package/src/templates/backend/utils/models.py.hbs

@@ -0,0 +1,11 @@
+import uuid
+from django.db import models
+
+
+class BaseModel(models.Model):
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        abstract = True

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

@@ -8,6 +8,9 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "openapi-ts": "openapi-ts"
   },
   "dependencies": {
@@ -32,13 +35,18 @@
   },
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.93.0",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.0",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^5.0.0",
     "autoprefixer": "^10.4.0",
+    "jsdom": "^25.0.0",
     "postcss": "^8.4.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.8.0",
-    "vite": "^6.3.0"
+    "vite": "^6.3.0",
+    "vitest": "^3.0.0"
   }
 }

package/src/templates/frontend/src/__tests__/setup.ts.hbs

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom/vitest'
+
+// Mock window.matchMedia (not implemented in jsdom)
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Clean up after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})

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

@@ -0,0 +1,80 @@
+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 { MemoryRouter } from 'react-router-dom'
+
+/**
+ * Creates a fresh QueryClient configured for tests.
+ * Disables retries and garbage collection to keep tests fast and deterministic.
+ */
+function createTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        gcTime: 0,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  })
+}
+
+interface WrapperProps {
+  children: ReactNode
+}
+
+interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
+  /** Initial route entries for MemoryRouter (defaults to ["/"]) */
+  routerEntries?: string[]
+  /** Provide your own QueryClient (a fresh one is created by default) */
+  queryClient?: QueryClient
+}
+
+/**
+ * Custom render that wraps components with all app providers:
+ * - ThemeProvider (light mode for consistent snapshots)
+ * - QueryClientProvider (with test-friendly defaults)
+ * - MemoryRouter (for components that use routing hooks)
+ *
+ * Also returns a `user` instance from @testing-library/user-event.
+ *
+ * @example
+ *   const { user } = renderWithProviders(<MyComponent />)
+ *   await user.click(screen.getByRole('button'))
+ */
+export function renderWithProviders(
+  ui: ReactElement,
+  {
+    routerEntries = ['/'],
+    queryClient = createTestQueryClient(),
+    ...renderOptions
+  }: CustomRenderOptions = {},
+) {
+  function Wrapper({ children }: WrapperProps) {
+    return (
+      <ThemeProvider defaultMode="light" storageKey="test-theme">
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter initialEntries={routerEntries}>
+            {children}
+          </MemoryRouter>
+        </QueryClientProvider>
+      </ThemeProvider>
+    )
+  }
+
+  return {
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+  }
+}
+
+export { createTestQueryClient }
+
+// Re-export everything from @testing-library/react for convenience
+export * from '@testing-library/react'
+// Override render with our custom version
+export { renderWithProviders as render }

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

@@ -1,20 +1,102 @@
-import { Stack, Divider } from '@blacksmith-ui/react'
+import {
+  Stack,
+  Flex,
+  Typography,
+  Text,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Grid,
+} 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'
+import { Link } from 'react-router-dom'
+import { Path } from '@/router/paths'
+import { BookOpen, Terminal, Layout } from 'lucide-react'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
 
 export default function HomePage() {
   const { isAuthenticated } = useAuth()
 
   return (
-    <Stack gap={12}>
-      <HeroSection isAuthenticated={isAuthenticated} />
-      <Divider />
-      <GettingStarted />
-      <FeaturesGrid />
-      <ResourcesSection />
+    <Stack gap={10} className="pt-16 pb-12">
+      <Stack gap={4} align="center">
+        <Typography variant="h1" className="sm:text-5xl">
+          {{projectName}}
+        </Typography>
+        <Text size="lg" color="muted" align="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">
+          {isAuthenticated ? (
+            <Button size="lg" asChild>
+              <Link to={Path.Dashboard}>Dashboard</Link>
+            </Button>
+          ) : (
+            <Button size="lg" asChild>
+              <Link to={Path.Login}>Sign In</Link>
+            </Button>
+          )}
+          <Button variant="outline" size="lg" asChild>
+            <a href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer">
+              API Docs
+            </a>
+          </Button>
+        </Flex>
+      </Stack>
+
+      <Grid columns=\{{ base: 1, md: 3 }} gap={4} className="max-w-3xl mx-auto w-full">
+        <Card>
+          <CardHeader className="pb-2">
+            <Flex align="center" gap={2}>
+              <Terminal className="h-4 w-4 text-primary" />
+              <CardTitle className="text-sm">CLI</CardTitle>
+            </Flex>
+          </CardHeader>
+          <CardContent>
+            <CardDescription>
+              Run <Text as="code" size="sm" className="font-mono">blacksmith dev</Text> to start the full stack.
+            </CardDescription>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <Flex align="center" gap={2}>
+              <BookOpen className="h-4 w-4 text-primary" />
+              <CardTitle className="text-sm">API</CardTitle>
+            </Flex>
+          </CardHeader>
+          <CardContent>
+            <CardDescription>
+              <a href={`${API_URL}/api/docs/`} target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 hover:text-foreground">
+                Swagger UI
+              </a>
+              {' / '}
+              <a href={`${API_URL}/admin/`} target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 hover:text-foreground">
+                Django Admin
+              </a>
+            </CardDescription>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <Flex align="center" gap={2}>
+              <Layout className="h-4 w-4 text-primary" />
+              <CardTitle className="text-sm">Frontend</CardTitle>
+            </Flex>
+          </CardHeader>
+          <CardContent>
+            <CardDescription>
+              React, TanStack Query, and Tailwind CSS with typed API hooks.
+            </CardDescription>
+          </CardContent>
+        </Card>
+      </Grid>
     </Stack>
   )
 }

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/api-hooks/index.ts.hbs

@@ -0,0 +1,2 @@
+export { use{{Names}}, useGet{{Name}} } from './use-{{kebabs}}-query'
+export { useCreate{{Name}}, useUpdate{{Name}}, useDelete{{Name}} } from './use-{{kebab}}-mutations'

package/src/templates/resource/{frontend/hooks → api-hooks}/use-{{kebabs}}-query.ts.hbs

@@ -1,13 +1,14 @@
 /**
- * use{{Names}} Hook
+ * {{Name}} Query Hooks
  *
- * Wraps the generated list query with smart retry and error parsing.
+ * List and detail queries with smart retry and error parsing.
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
 import { useApiQuery } from '@/shared/hooks/use-api-query'
 import {
   {{snakes}}ListOptions,
+  {{snakes}}RetrieveOptions,
 } from '@/api/generated/@tanstack/react-query.gen'
 
 interface Use{{Names}}Params {
@@ -33,3 +34,10 @@ export function use{{Names}}(params: Use{{Names}}Params = {}) {
     }),
   })
 }
+
+export function useGet{{Name}}(id: string) {
+  return useApiQuery({
+    ...{{snakes}}RetrieveOptions({ path: { id } }),
+    enabled: !!id,
+  })
+}

package/src/templates/resource/{frontend/hooks → api-hooks}/use-{{kebab}}-mutations.ts.hbs

@@ -21,7 +21,7 @@ export function useCreate{{Name}}() {
   })
 }
 
-export function useUpdate{{Name}}(id: number) {
+export function useUpdate{{Name}}(id: string) {
   return useApiMutation({
     ...{{snakes}}UpdateMutation(),
     invalidateKeys: [

package/src/templates/resource/backend/models.py.hbs

@@ -1,8 +1,9 @@
 from django.db import models
 from django.conf import settings
+from utils.models import BaseModel
 
 
-class {{Name}}(models.Model):
+class {{Name}}(BaseModel):
     """{{Name}} model."""
 
     title = models.CharField(max_length=255)
@@ -12,8 +13,6 @@ class {{Name}}(models.Model):
         on_delete=models.CASCADE,
         related_name='{{snakes}}',
     )
-    created_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
 
     class Meta:
         ordering = ['-created_at']

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

@@ -10,7 +10,7 @@ import { Path } from '@/router/paths'
 
 interface {{Name}}CardProps {
   {{name}}: {
-    id: number
+    id: string
     title: string
     description?: string
     created_at: string

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

@@ -9,7 +9,7 @@ import { {{Name}}Card } from './{{kebab}}-card'
 
 interface {{Name}}ListProps {
   {{names}}: Array<{
-    id: number
+    id: string
     title: string
     description?: string
     created_at: string

package/src/templates/resource/frontend/index.ts.hbs

@@ -1,6 +1,5 @@
 export { {{names}}Routes } from './routes'
-export { use{{Names}} } from './hooks/use-{{kebabs}}-query'
-export { useCreate{{Name}}, useUpdate{{Name}}, useDelete{{Name}} } from './hooks/use-{{kebab}}-mutations'
+export { use{{Names}}, useCreate{{Name}}, useUpdate{{Name}}, useDelete{{Name}} } from '@/api/hooks/{{kebabs}}'
 export { {{Name}}Card } from './components/{{kebab}}-card'
 export { {{Name}}List } from './components/{{kebab}}-list'
 export { {{Name}}Form } from './components/{{kebab}}-form'

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

@@ -5,7 +5,7 @@
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { use{{Names}} } from '../hooks/use-{{kebabs}}-query'
+import { use{{Names}} } from '@/api/hooks/{{kebabs}}'
 import { {{Name}}List } from '../components/{{kebab}}-list'
 import { Alert, AlertDescription } from '@blacksmith-ui/react'
 

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

@@ -6,24 +6,16 @@
  */
 
 import { useParams, useNavigate } from 'react-router-dom'
-import { useApiQuery } from '@/shared/hooks/use-api-query'
-import { useDelete{{Name}} } from '../hooks/use-{{kebab}}-mutations'
+import { useGet{{Name}}, useDelete{{Name}} } from '@/api/hooks/{{kebabs}}'
 import { Alert, AlertDescription } from '@blacksmith-ui/react'
 import { Path } from '@/router/paths'
-import {
-  {{snakes}}RetrieveOptions,
-} from '@/api/generated/@tanstack/react-query.gen'
 
 export default function {{Name}}DetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
   const delete{{Name}} = useDelete{{Name}}()
 
-  const { data: {{name}}, isLoading, errorMessage } = useApiQuery({
-    ...{{snakes}}RetrieveOptions({
-      path: { id: Number(id) },
-    }),
-  })
+  const { data: {{name}}, isLoading, errorMessage } = useGet{{Name}}(id!)
 
   if (isLoading) {
     return (
@@ -49,7 +41,7 @@ export default function {{Name}}DetailPage() {
 
   const handleDelete = async () => {
     if (window.confirm('Are you sure you want to delete this {{name}}?')) {
-      await delete{{Name}}.mutateAsync({ path: { id: Number(id) } })
+      await delete{{Name}}.mutateAsync({ path: { id: id! } })
       navigate(Path.{{Names}})
     }
   }

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

@@ -10,7 +10,7 @@ import { Path } from '@/router/paths'
 
 interface {{Name}}CardProps {
   {{name}}: {
-    id: number
+    id: string
     title: string
     description?: string
     created_at: string

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

@@ -9,7 +9,7 @@ import { {{Name}}Card } from './{{kebab}}-card'
 
 interface {{Name}}ListProps {
   {{names}}: Array<{
-    id: number
+    id: string
     title: string
     description?: string
     created_at: string

package/src/templates/resource/pages/hooks/index.ts.hbs

@@ -0,0 +1,9 @@
+/**
+ * Page-local hooks for {{Names}}
+ *
+ * This folder is for hooks that are specific to the {{Names}} page UI logic,
+ * such as form state, filtering, pagination, modals, and other page-level concerns.
+ *
+ * API hooks (queries and mutations) live in @/api/hooks/{{kebabs}}/ and should
+ * be imported from there.
+ */

package/src/templates/resource/pages/index.ts.hbs

@@ -1,6 +1,5 @@
 export { {{names}}Routes } from './routes'
-export { use{{Names}} } from './hooks/use-{{kebabs}}-query'
-export { useCreate{{Name}}, useUpdate{{Name}}, useDelete{{Name}} } from './hooks/use-{{kebab}}-mutations'
+export { use{{Names}}, useCreate{{Name}}, useUpdate{{Name}}, useDelete{{Name}} } from '@/api/hooks/{{kebabs}}'
 export { {{Name}}Card } from './components/{{kebab}}-card'
 export { {{Name}}List } from './components/{{kebab}}-list'
 export { {{Name}}Form } from './components/{{kebab}}-form'

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

@@ -5,7 +5,7 @@
  * Generated by Blacksmith. You own this file — customize as needed.
  */
 
-import { use{{Names}} } from './hooks/use-{{kebabs}}-query'
+import { use{{Names}} } from '@/api/hooks/{{kebabs}}'
 import { {{Name}}List } from './components/{{kebab}}-list'
 import { Alert, AlertDescription } from '@blacksmith-ui/react'
 

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

@@ -6,24 +6,16 @@
  */
 
 import { useParams, useNavigate } from 'react-router-dom'
-import { useApiQuery } from '@/shared/hooks/use-api-query'
-import { useDelete{{Name}} } from './hooks/use-{{kebab}}-mutations'
+import { useGet{{Name}}, useDelete{{Name}} } from '@/api/hooks/{{kebabs}}'
 import { Alert, AlertDescription } from '@blacksmith-ui/react'
 import { Path } from '@/router/paths'
-import {
-  {{snakes}}RetrieveOptions,
-} from '@/api/generated/@tanstack/react-query.gen'
 
 export default function {{Name}}DetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
   const delete{{Name}} = useDelete{{Name}}()
 
-  const { data: {{name}}, isLoading, errorMessage } = useApiQuery({
-    ...{{snakes}}RetrieveOptions({
-      path: { id: Number(id) },
-    }),
-  })
+  const { data: {{name}}, isLoading, errorMessage } = useGet{{Name}}(id!)
 
   if (isLoading) {
     return (
@@ -49,7 +41,7 @@ export default function {{Name}}DetailPage() {
 
   const handleDelete = async () => {
     if (window.confirm('Are you sure you want to delete this {{name}}?')) {
-      await delete{{Name}}.mutateAsync({ path: { id: Number(id) } })
+      await delete{{Name}}.mutateAsync({ path: { id: id! } })
       navigate(Path.{{Names}})
     }
   }

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

@@ -1,88 +0,0 @@
-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>
-  )
-}