blacksmith-cli 0.1.1

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

@@ -0,0 +1,96 @@
+/**
+ * {{Name}} Detail Page
+ *
+ * Shows a single {{name}} with error handling.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { useParams, useNavigate } from 'react-router-dom'
+import { useApiQuery } from '@/shared/hooks/use-api-query'
+import { useDelete{{Name}} } from '../hooks/use-{{kebab}}-mutations'
+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) },
+    }),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="animate-pulse space-y-4">
+        <div className="h-8 w-64 bg-muted rounded" />
+        <div className="h-4 w-full bg-muted rounded" />
+        <div className="h-4 w-3/4 bg-muted rounded" />
+      </div>
+    )
+  }
+
+  if (errorMessage) {
+    return (
+      <Alert variant="destructive">
+        <AlertDescription>{errorMessage}</AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (!{{name}}) {
+    return <div className="text-muted-foreground">{{Name}} not found.</div>
+  }
+
+  const handleDelete = async () => {
+    if (window.confirm('Are you sure you want to delete this {{name}}?')) {
+      await delete{{Name}}.mutateAsync({ path: { id: Number(id) } })
+      navigate(Path.{{Names}})
+    }
+  }
+
+  return (
+    <div>
+      {delete{{Name}}.errorMessage && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertDescription>{delete{{Name}}.errorMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">
+          {({{name}} as any).title}
+        </h1>
+        <div className="flex gap-2">
+          <button
+            onClick={() => navigate(`${Path.{{Names}}}/${id}/edit`)}
+            className="px-4 py-2 text-sm border border-border rounded-md hover:bg-muted"
+          >
+            Edit
+          </button>
+          <button
+            onClick={handleDelete}
+            disabled={delete{{Name}}.isPending}
+            className="px-4 py-2 text-sm text-destructive border border-destructive/30 rounded-md hover:bg-destructive/10 disabled:opacity-50"
+          >
+            {delete{{Name}}.isPending ? 'Deleting...' : 'Delete'}
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-card rounded-lg border border-border p-6">
+        <p className="text-card-foreground whitespace-pre-wrap">
+          {({{name}} as any).description || 'No description.'}
+        </p>
+        <p className="mt-4 text-sm text-muted-foreground">
+          Created {new Date(({{name}} as any).created_at).toLocaleString()}
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/templates/resource/frontend/routes.tsx.hbs

@@ -0,0 +1,15 @@
+import { Outlet, type RouteObject } from 'react-router-dom'
+import { Path } from '@/router/paths'
+import {{Names}}Page from './pages/{{kebabs}}-page'
+import {{Name}}DetailPage from './pages/{{kebab}}-detail-page'
+
+export const {{names}}Routes: RouteObject[] = [
+  {
+    path: Path.{{Names}},
+    element: <Outlet />,
+    children: [
+      { index: true, element: <{{Names}}Page /> },
+      { path: ':id', element: <{{Name}}DetailPage /> },
+    ],
+  },
+]

package/src/templates/resource/pages/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/pages/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/pages/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/pages/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/pages/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/pages/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/pages/routes.tsx.hbs

@@ -0,0 +1,15 @@
+import { Outlet, type RouteObject } from 'react-router-dom'
+import { Path } from '@/router/paths'
+import {{Names}}Page from './{{kebabs}}-page'
+import {{Name}}DetailPage from './{{kebab}}-detail-page'
+
+export const {{names}}Routes: RouteObject[] = [
+  {
+    path: Path.{{Names}},
+    element: <Outlet />,
+    children: [
+      { index: true, element: <{{Names}}Page /> },
+      { path: ':id', element: <{{Name}}DetailPage /> },
+    ],
+  },
+]

package/src/templates/resource/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>
+  )
+}

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

@@ -0,0 +1,96 @@
+/**
+ * {{Name}} Detail Page
+ *
+ * Shows a single {{name}} with error handling.
+ * Generated by Blacksmith. You own this file — customize as needed.
+ */
+
+import { useParams, useNavigate } from 'react-router-dom'
+import { useApiQuery } from '@/shared/hooks/use-api-query'
+import { useDelete{{Name}} } from './hooks/use-{{kebab}}-mutations'
+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) },
+    }),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="animate-pulse space-y-4">
+        <div className="h-8 w-64 bg-muted rounded" />
+        <div className="h-4 w-full bg-muted rounded" />
+        <div className="h-4 w-3/4 bg-muted rounded" />
+      </div>
+    )
+  }
+
+  if (errorMessage) {
+    return (
+      <Alert variant="destructive">
+        <AlertDescription>{errorMessage}</AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (!{{name}}) {
+    return <div className="text-muted-foreground">{{Name}} not found.</div>
+  }
+
+  const handleDelete = async () => {
+    if (window.confirm('Are you sure you want to delete this {{name}}?')) {
+      await delete{{Name}}.mutateAsync({ path: { id: Number(id) } })
+      navigate(Path.{{Names}})
+    }
+  }
+
+  return (
+    <div>
+      {delete{{Name}}.errorMessage && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertDescription>{delete{{Name}}.errorMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">
+          {({{name}} as any).title}
+        </h1>
+        <div className="flex gap-2">
+          <button
+            onClick={() => navigate(`${Path.{{Names}}}/${id}/edit`)}
+            className="px-4 py-2 text-sm border border-border rounded-md hover:bg-muted"
+          >
+            Edit
+          </button>
+          <button
+            onClick={handleDelete}
+            disabled={delete{{Name}}.isPending}
+            className="px-4 py-2 text-sm text-destructive border border-destructive/30 rounded-md hover:bg-destructive/10 disabled:opacity-50"
+          >
+            {delete{{Name}}.isPending ? 'Deleting...' : 'Delete'}
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-card rounded-lg border border-border p-6">
+        <p className="text-card-foreground whitespace-pre-wrap">
+          {({{name}} as any).description || 'No description.'}
+        </p>
+        <p className="mt-4 text-sm text-muted-foreground">
+          Created {new Date(({{name}} as any).created_at).toLocaleString()}
+        </p>
+      </div>
+    </div>
+  )
+}