blacksmith-cli 0.1.1

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

@@ -0,0 +1,62 @@
+@import '@blacksmith-ui/react/styles.css';
+
+{{#if (ne themePreset "default")}}
+@layer base {
+  :root {
+{{#if (eq themePreset "blue")}}
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --ring: 221.2 83.2% 53.3%;
+{{/if}}
+{{#if (eq themePreset "green")}}
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --ring: 142.1 76.2% 36.3%;
+{{/if}}
+{{#if (eq themePreset "red")}}
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --ring: 0 72.2% 50.6%;
+{{/if}}
+{{#if (eq themePreset "violet")}}
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 40% 98%;
+    --ring: 263.4 70% 50.4%;
+{{/if}}
+{{#if (eq themePreset "neutral")}}
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --ring: 240 5.9% 10%;
+    --radius: 0rem;
+{{/if}}
+  }
+
+  .dark {
+{{#if (eq themePreset "blue")}}
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --ring: 217.2 91.2% 59.8%;
+{{/if}}
+{{#if (eq themePreset "green")}}
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --ring: 142.1 70.6% 45.3%;
+{{/if}}
+{{#if (eq themePreset "red")}}
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --ring: 0 72.2% 50.6%;
+{{/if}}
+{{#if (eq themePreset "violet")}}
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 40% 98%;
+    --ring: 263.4 70% 50.4%;
+{{/if}}
+{{#if (eq themePreset "neutral")}}
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --ring: 0 0% 98%;
+{{/if}}
+  }
+}
+{{/if}}

package/src/templates/frontend/src/vite-env.d.ts.hbs

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -0,0 +1,73 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@blacksmith-ui/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss-animate'),
+  ],
+}

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

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

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

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts", "openapi-ts.config.ts"]
+}

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

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+})

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

@@ -0,0 +1,10 @@
+from django.contrib import admin
+from .models import {{Name}}
+
+
+@admin.register({{Name}})
+class {{Name}}Admin(admin.ModelAdmin):
+    list_display = ('title', 'created_by', 'created_at')
+    list_filter = ('created_at',)
+    search_fields = ('title', 'description')
+    readonly_fields = ('created_at', 'updated_at')

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

@@ -0,0 +1,24 @@
+from django.db import models
+from django.conf import settings
+
+
+class {{Name}}(models.Model):
+    """{{Name}} model."""
+
+    title = models.CharField(max_length=255)
+    description = models.TextField(blank=True)
+    created_by = models.ForeignKey(
+        settings.AUTH_USER_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']
+        verbose_name = '{{name}}'
+        verbose_name_plural = '{{names}}'
+
+    def __str__(self):
+        return self.title

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

@@ -0,0 +1,21 @@
+from rest_framework import serializers
+from .models import {{Name}}
+
+
+class {{Name}}Serializer(serializers.ModelSerializer):
+    """Serializer for {{Name}}."""
+
+    created_by_email = serializers.EmailField(source='created_by.email', read_only=True)
+
+    class Meta:
+        model = {{Name}}
+        fields = [
+            'id',
+            'title',
+            'description',
+            'created_by',
+            'created_by_email',
+            'created_at',
+            'updated_at',
+        ]
+        read_only_fields = ['id', 'created_by', 'created_by_email', 'created_at', 'updated_at']

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

@@ -0,0 +1,35 @@
+from django.test import TestCase
+from django.contrib.auth import get_user_model
+from rest_framework.test import APIClient
+from rest_framework import status
+from .models import {{Name}}
+
+User = get_user_model()
+
+
+class {{Name}}Tests(TestCase):
+    def setUp(self):
+        self.client = APIClient()
+        self.user = User.objects.create_user(
+            email='test@example.com',
+            password='TestPass123!',
+            first_name='Test',
+        )
+        self.client.force_authenticate(user=self.user)
+
+    def test_create_{{snake}}(self):
+        response = self.client.post('/api/{{snakes}}/', {
+            'title': 'Test {{Name}}',
+            'description': 'A test {{name}}.',
+        })
+        self.assertEqual(response.status_code, status.HTTP_201_CREATED)
+        self.assertEqual(response.data['title'], 'Test {{Name}}')
+
+    def test_list_{{snakes}}(self):
+        {{Name}}.objects.create(
+            title='Test {{Name}}',
+            created_by=self.user,
+        )
+        response = self.client.get('/api/{{snakes}}/')
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
+        self.assertEqual(len(response.data['results']), 1)

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

@@ -0,0 +1,10 @@
+from django.urls import path, include
+from rest_framework.routers import DefaultRouter
+from .views import {{Name}}ViewSet
+
+router = DefaultRouter()
+router.register('', {{Name}}ViewSet, basename='{{snake}}')
+
+urlpatterns = [
+    path('', include(router.urls)),
+]

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

@@ -0,0 +1,32 @@
+from rest_framework import viewsets
+from rest_framework.filters import SearchFilter, OrderingFilter
+from rest_framework.permissions import IsAuthenticated
+from drf_spectacular.utils import extend_schema_view, extend_schema
+
+from .models import {{Name}}
+from .serializers import {{Name}}Serializer
+
+
+@extend_schema_view(
+    list=extend_schema(description='List all {{names}}.', tags=['{{names}}']),
+    retrieve=extend_schema(description='Get a single {{name}}.', tags=['{{names}}']),
+    create=extend_schema(description='Create a new {{name}}.', tags=['{{names}}']),
+    update=extend_schema(description='Update a {{name}}.', tags=['{{names}}']),
+    partial_update=extend_schema(description='Partially update a {{name}}.', tags=['{{names}}']),
+    destroy=extend_schema(description='Delete a {{name}}.', tags=['{{names}}']),
+)
+class {{Name}}ViewSet(viewsets.ModelViewSet):
+    """CRUD endpoints for {{Name}}."""
+
+    serializer_class = {{Name}}Serializer
+    permission_classes = [IsAuthenticated]
+    filter_backends = [SearchFilter, OrderingFilter]
+    search_fields = ['title', 'description']
+    ordering_fields = ['created_at', 'updated_at', 'title']
+    ordering = ['-created_at']
+
+    def get_queryset(self):
+        return {{Name}}.objects.filter(created_by=self.request.user)
+
+    def perform_create(self, serializer):
+        serializer.save(created_by=self.request.user)

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

@@ -0,0 +1,39 @@
+/**
+ * {{Name}} Card Component
+ *
+ * Displays a single {{name}} in a card format.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { Link } from 'react-router-dom'
+import { Path } from '@/router/paths'
+
+interface {{Name}}CardProps {
+  {{name}}: {
+    id: number
+    title: string
+    description?: string
+    created_at: string
+  }
+}
+
+export function {{Name}}Card({ {{name}} }: {{Name}}CardProps) {
+  return (
+    <Link
+      to={`${Path.{{Names}}}/${ {{name}}.id}`}
+      className="block p-6 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all"
+    >
+      <h3 className="text-lg font-semibold text-gray-900">
+        { {{name}}.title}
+      </h3>
+      { {{name}}.description && (
+        <p className="mt-2 text-sm text-gray-600 line-clamp-2">
+          { {{name}}.description}
+        </p>
+      )}
+      <p className="mt-3 text-xs text-gray-400">
+        {new Date({{name}}.created_at).toLocaleDateString()}
+      </p>
+    </Link>
+  )
+}

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

@@ -0,0 +1,106 @@
+/**
+ * {{Name}} Form Component
+ *
+ * Form for creating and editing {{names}}.
+ * Supports both client-side (Zod) and server-side (DRF) field errors.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Alert, AlertDescription } from '@blacksmith-ui/react'
+
+const {{name}}Schema = z.object({
+  title: z.string().min(1, 'Title is required').max(255),
+  description: z.string().optional(),
+})
+
+type {{Name}}FormData = z.infer<typeof {{name}}Schema>
+
+interface {{Name}}FormProps {
+  defaultValues?: Partial<{{Name}}FormData>
+  onSubmit: (data: {{Name}}FormData) => void | Promise<void>
+  isSubmitting?: boolean
+  /** General error message (e.g. from useApiMutation's errorMessage) */
+  errorMessage?: string | null
+  /** Server-side field errors (e.g. from useApiMutation's fieldErrors) */
+  fieldErrors?: Record<string, string[]>
+}
+
+export function {{Name}}Form({
+  defaultValues,
+  onSubmit,
+  isSubmitting,
+  errorMessage,
+  fieldErrors = {},
+}: {{Name}}FormProps) {
+  const form = useForm<{{Name}}FormData>({
+    resolver: zodResolver({{name}}Schema),
+    defaultValues: {
+      title: '',
+      description: '',
+      ...defaultValues,
+    },
+  })
+
+  const getFieldError = (field: string): string | undefined => {
+    // Client-side errors take priority
+    const clientError = form.formState.errors[field as keyof {{Name}}FormData]?.message
+    if (clientError) return clientError
+    // Fall back to server-side errors
+    return fieldErrors[field]?.[0]
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      {errorMessage && (
+        <Alert variant="destructive">
+          <AlertDescription>{errorMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <div>
+        <label htmlFor="title" className="block text-sm font-medium">
+          Title
+        </label>
+        <input
+          {...form.register('title')}
+          id="title"
+          type="text"
+          className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring"
+        />
+        {getFieldError('title') && (
+          <p className="mt-1 text-sm text-destructive">
+            {getFieldError('title')}
+          </p>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="description" className="block text-sm font-medium">
+          Description
+        </label>
+        <textarea
+          {...form.register('description')}
+          id="description"
+          rows={4}
+          className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring"
+        />
+        {getFieldError('description') && (
+          <p className="mt-1 text-sm text-destructive">
+            {getFieldError('description')}
+          </p>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
+      >
+        {isSubmitting ? 'Saving...' : 'Save'}
+      </button>
+    </form>
+  )
+}

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

@@ -0,0 +1,49 @@
+/**
+ * {{Name}} List Component
+ *
+ * Renders a list of {{names}} with loading and empty states.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { {{Name}}Card } from './{{kebab}}-card'
+
+interface {{Name}}ListProps {
+  {{names}}: Array<{
+    id: number
+    title: string
+    description?: string
+    created_at: string
+  }>
+  isLoading?: boolean
+}
+
+export function {{Name}}List({ {{names}}, isLoading }: {{Name}}ListProps) {
+  if (isLoading) {
+    return (
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-32 bg-gray-100 rounded-lg animate-pulse"
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if ({{names}}.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-500">No {{names}} yet. Create your first one!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      { {{names}}.map(({{name}}) => (
+        <{{Name}}Card key={ {{name}}.id} {{name}}={ {{name}}} />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,35 @@
+/**
+ * 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,
+    }),
+  })
+}

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

@@ -0,0 +1,39 @@
+/**
+ * {{Name}} Mutation Hooks
+ *
+ * Create, update, and delete with cache invalidation and error parsing.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { useApiMutation } from '@/shared/hooks/use-api-mutation'
+import {
+  {{snakes}}CreateMutation,
+  {{snakes}}UpdateMutation,
+  {{snakes}}DestroyMutation,
+  {{snakes}}ListQueryKey,
+  {{snakes}}RetrieveQueryKey,
+} from '@/api/generated/@tanstack/react-query.gen'
+
+export function useCreate{{Name}}() {
+  return useApiMutation({
+    ...{{snakes}}CreateMutation(),
+    invalidateKeys: [{{snakes}}ListQueryKey()],
+  })
+}
+
+export function useUpdate{{Name}}(id: number) {
+  return useApiMutation({
+    ...{{snakes}}UpdateMutation(),
+    invalidateKeys: [
+      {{snakes}}ListQueryKey(),
+      {{snakes}}RetrieveQueryKey({ path: { id } }),
+    ],
+  })
+}
+
+export function useDelete{{Name}}() {
+  return useApiMutation({
+    ...{{snakes}}DestroyMutation(),
+    invalidateKeys: [{{snakes}}ListQueryKey()],
+  })
+}

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

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

@@ -0,0 +1,33 @@
+/**
+ * {{Names}} List Page
+ *
+ * Lists all {{names}} with loading and error states.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { use{{Names}} } from '../hooks/use-{{kebabs}}-query'
+import { {{Name}}List } from '../components/{{kebab}}-list'
+import { Alert, AlertDescription } from '@blacksmith-ui/react'
+
+export default function {{Names}}Page() {
+  const { data, isLoading, errorMessage } = use{{Names}}()
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">{{Names}}</h1>
+      </div>
+
+      {errorMessage && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertDescription>{errorMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <{{Name}}List
+        {{names}}={data?.{{names}} ?? []}
+        isLoading={isLoading}
+      />
+    </div>
+  )
+}