blacksmith-cli 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blacksmith-cli",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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/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/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>
-  )
-}

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

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

@@ -1,47 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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/resource/pages/hooks/use-{{kebabs}}-query.ts.hbs

@@ -1,35 +0,0 @@
-/**
- * use{{Names}} Hook
- *
- * Wraps the generated list query 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,
-} from '@/api/generated/@tanstack/react-query.gen'
-
-interface Use{{Names}}Params {
-  page?: number
-  search?: string
-  ordering?: string
-}
-
-export function use{{Names}}(params: Use{{Names}}Params = {}) {
-  return useApiQuery({
-    ...{{snakes}}ListOptions({
-      query: {
-        page: params.page ?? 1,
-        search: params.search,
-        ordering: params.ordering ?? '-created_at',
-      },
-    }),
-    select: (data: any) => ({
-      {{names}}: data.results ?? [],
-      total: data.count ?? 0,
-      hasNext: !!data.next,
-      hasPrev: !!data.previous,
-    }),
-  })
-}