create-freakpunch 0.1.0 → 0.2.0

package/template/tools/templates/module/pages/__id__-form-page.tsx.tpl

@@ -1,121 +1,121 @@
-import { Controller, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useTranslation } from 'react-i18next'
-import { useNavigate, useParams } from 'react-router'
-import { toast } from 'sonner'
-
-import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
-import { Input } from '@/components/ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Textarea } from '@/components/ui/textarea'
-import { ButtonLink } from '@/core/components/button-link'
-import { FormFieldError } from '@/core/components/form-error'
-import { FormLayout, FormSection } from '@/core/components/form-page'
-import { Page } from '@/core/components/page'
-import { ErrorState, LoadingState } from '@/core/components/states'
-import { useCreate__Name__, useUpdate__Name__, use__Name__Record } from '../hooks'
-import { __id__FormSchema, __id__Statuses, type __Name__Input, type __Name__Record } from '../types'
-
-const empty: __Name__Input = { name: '', status: 'draft', notes: '' }
-
-/** /app/__id__/new and /app/__id__/:id/edit */
-export default function __Name__FormPage() {
-  const { id } = useParams()
-  const query = use__Name__Record(id)
-  const { t } = useTranslation('__id__')
-
-  if (!id) return <__Name__Form />
-  if (query.isPending) return <LoadingState />
-  if (query.error) {
-    return (
-      <ErrorState
-        error={query.error}
-        onRetry={() => query.refetch()}
-        notFoundAction={
-          <ButtonLink to="/app/__id__" variant="outline">
-            {t('form.back')}
-          </ButtonLink>
-        }
-      />
-    )
-  }
-  return <__Name__Form key={query.data.id} record={query.data} />
-}
-
-function __Name__Form({ record }: { record?: __Name__Record }) {
-  const navigate = useNavigate()
-  const create = useCreate__Name__()
-  const update = useUpdate__Name__(record?.id ?? '')
-  const { t } = useTranslation(['__id__', 'common'])
-  const isEdit = Boolean(record)
-
-  const form = useForm<__Name__Input>({
-    resolver: zodResolver(__id__FormSchema),
-    defaultValues: record ? { name: record.name, status: record.status, notes: record.notes } : empty,
-  })
-  const { register, control, handleSubmit, formState } = form
-  const { errors } = formState
-
-  const onSubmit = handleSubmit(async (values) => {
-    try {
-      const saved = isEdit ? await update.mutateAsync(values) : await create.mutateAsync(values)
-      toast.success(isEdit ? t('form.saved') : t('form.created'), { description: saved.name })
-      navigate('/app/__id__')
-    } catch (e) {
-      toast.error(t('form.saveFailed'), { description: e instanceof Error ? e.message : undefined })
-    }
-  })
-
-  const statusItems = __id__Statuses.map((s) => ({ value: s, label: t(`status.${s}`) }))
-
-  return (
-    <Page
-      title={isEdit ? t('form.editTitle', { name: record!.name }) : t('form.newTitle')}
-      description={isEdit ? t('form.editDescription') : t('form.newDescription')}
-    >
-      <FormLayout
-        onSubmit={onSubmit}
-        submitLabel={isEdit ? t('common:actions.saveChanges') : t('form.create')}
-        isSubmitting={formState.isSubmitting}
-        isDirty={!isEdit || formState.isDirty}
-        onCancel={() => navigate(-1)}
-      >
-        <FormSection title={t('form.sections.details')} description={t('form.sections.detailsDescription')}>
-          <Field data-invalid={!!errors.name}>
-            <FieldLabel htmlFor="name">{t('form.fields.name')}</FieldLabel>
-            <Input id="name" autoFocus={!isEdit} aria-invalid={!!errors.name} {...register('name')} />
-            <FormFieldError error={errors.name} />
-          </Field>
-          <Field data-invalid={!!errors.status}>
-            <FieldLabel htmlFor="status">{t('form.fields.status')}</FieldLabel>
-            <Controller
-              control={control}
-              name="status"
-              render={({ field }) => (
-                <Select items={statusItems} value={field.value} onValueChange={(v) => v && field.onChange(v)}>
-                  <SelectTrigger id="status" className="w-full" onBlur={field.onBlur}>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {statusItems.map((s) => (
-                      <SelectItem key={s.value} value={s.value}>
-                        {s.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-            />
-            <FormFieldError error={errors.status} />
-          </Field>
-          <Field data-invalid={!!errors.notes}>
-            <FieldLabel htmlFor="notes">{t('form.fields.notes')}</FieldLabel>
-            <Textarea id="notes" rows={4} aria-invalid={!!errors.notes} {...register('notes')} />
-            <FieldDescription>{t('form.fields.notesHint')}</FieldDescription>
-            <FormFieldError error={errors.notes} />
-          </Field>
-        </FormSection>
-      </FormLayout>
-    </Page>
-  )
-}
+import { Controller, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { useNavigate, useParams } from 'react-router'
+import { toast } from 'sonner'
+
+import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { ButtonLink } from '@/core/components/button-link'
+import { FormFieldError } from '@/core/components/form-error'
+import { FormLayout, FormSection } from '@/core/components/form-page'
+import { Page } from '@/core/components/page'
+import { ErrorState, LoadingState } from '@/core/components/states'
+import { useCreate__Name__, useUpdate__Name__, use__Name__Record } from '../hooks'
+import { __id__FormSchema, __id__Statuses, type __Name__Input, type __Name__Record } from '../types'
+
+const empty: __Name__Input = { name: '', status: 'draft', notes: '' }
+
+/** /app/__id__/new and /app/__id__/:id/edit */
+export default function __Name__FormPage() {
+  const { id } = useParams()
+  const query = use__Name__Record(id)
+  const { t } = useTranslation('__id__')
+
+  if (!id) return <__Name__Form />
+  if (query.isPending) return <LoadingState />
+  if (query.error) {
+    return (
+      <ErrorState
+        error={query.error}
+        onRetry={() => query.refetch()}
+        notFoundAction={
+          <ButtonLink to="/app/__id__" variant="outline">
+            {t('form.back')}
+          </ButtonLink>
+        }
+      />
+    )
+  }
+  return <__Name__Form key={query.data.id} record={query.data} />
+}
+
+function __Name__Form({ record }: { record?: __Name__Record }) {
+  const navigate = useNavigate()
+  const create = useCreate__Name__()
+  const update = useUpdate__Name__(record?.id ?? '')
+  const { t } = useTranslation(['__id__', 'common'])
+  const isEdit = Boolean(record)
+
+  const form = useForm<__Name__Input>({
+    resolver: zodResolver(__id__FormSchema),
+    defaultValues: record ? { name: record.name, status: record.status, notes: record.notes } : empty,
+  })
+  const { register, control, handleSubmit, formState } = form
+  const { errors } = formState
+
+  const onSubmit = handleSubmit(async (values) => {
+    try {
+      const saved = isEdit ? await update.mutateAsync(values) : await create.mutateAsync(values)
+      toast.success(isEdit ? t('form.saved') : t('form.created'), { description: saved.name })
+      navigate(`/app/__id__/${saved.id}`)
+    } catch (e) {
+      toast.error(t('form.saveFailed'), { description: e instanceof Error ? e.message : undefined })
+    }
+  })
+
+  const statusItems = __id__Statuses.map((s) => ({ value: s, label: t(`status.${s}`) }))
+
+  return (
+    <Page
+      title={isEdit ? t('form.editTitle', { name: record!.name }) : t('form.newTitle')}
+      description={isEdit ? t('form.editDescription') : t('form.newDescription')}
+    >
+      <FormLayout
+        onSubmit={onSubmit}
+        submitLabel={isEdit ? t('common:actions.saveChanges') : t('form.create')}
+        isSubmitting={formState.isSubmitting}
+        isDirty={!isEdit || formState.isDirty}
+        onCancel={() => navigate(-1)}
+      >
+        <FormSection title={t('form.sections.details')} description={t('form.sections.detailsDescription')}>
+          <Field data-invalid={!!errors.name}>
+            <FieldLabel htmlFor="name">{t('form.fields.name')}</FieldLabel>
+            <Input id="name" autoFocus={!isEdit} aria-invalid={!!errors.name} {...register('name')} />
+            <FormFieldError error={errors.name} />
+          </Field>
+          <Field data-invalid={!!errors.status}>
+            <FieldLabel htmlFor="status">{t('form.fields.status')}</FieldLabel>
+            <Controller
+              control={control}
+              name="status"
+              render={({ field }) => (
+                <Select items={statusItems} value={field.value} onValueChange={(v) => v && field.onChange(v)}>
+                  <SelectTrigger id="status" className="w-full" onBlur={field.onBlur}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {statusItems.map((s) => (
+                      <SelectItem key={s.value} value={s.value}>
+                        {s.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+            <FormFieldError error={errors.status} />
+          </Field>
+          <Field data-invalid={!!errors.notes}>
+            <FieldLabel htmlFor="notes">{t('form.fields.notes')}</FieldLabel>
+            <Textarea id="notes" rows={4} aria-invalid={!!errors.notes} {...register('notes')} />
+            <FieldDescription>{t('form.fields.notesHint')}</FieldDescription>
+            <FormFieldError error={errors.notes} />
+          </Field>
+        </FormSection>
+      </FormLayout>
+    </Page>
+  )
+}