betterstart-cli 0.0.102 → 0.0.104

package/dist/assets/adapters/next/templates/renderers/generators/form/form-entity/generate-form.ts

@@ -0,0 +1,822 @@
+export function renderFormContentTemplate({
+  slugValueHelperName,
+  slugFallbackValue
+}: {
+  slugValueHelperName: string
+  slugFallbackValue: string
+}): string {
+  return `
+function ${slugValueHelperName}(value: unknown): string {
+  if (typeof value !== 'string') return '${slugFallbackValue}'
+  return slugify(value) || '${slugFallbackValue}'
+}
+`
+}
+
+export function renderFormTabContentTemplate({
+  indent,
+  tName,
+  tabFields
+}: {
+  indent: string
+  tName: string
+  tabFields: string
+}): string {
+  return `${indent}  <TabsContent value="${tName}" className="space-y-4 pt-4 pb-6 px-4 rounded-sm border bg-card">
+${tabFields}
+${indent}  </TabsContent>`
+}
+
+export function renderFormTabsLayoutTemplate({
+  indent,
+  tabsList,
+  tabsContent
+}: {
+  indent: string
+  tabsList: string
+  tabsContent: string
+}): string {
+  return `${indent}<Tabs value={activeTab} onValueChange={(value) => void setActiveTab(value as TabValue)} className="w-full">
+${indent}  <TabsList>
+${tabsList}
+${indent}  </TabsList>
+${tabsContent}
+${indent}</Tabs>`
+}
+
+export function renderFormContentSerializedValueTemplate({
+  cardFieldIndent,
+  stringify,
+  fieldJsx
+}: {
+  cardFieldIndent: string
+  stringify: string
+  fieldJsx: string
+}): string {
+  return `${cardFieldIndent}{activeTab === ${stringify} ? (
+${fieldJsx}
+${cardFieldIndent}) : null}`
+}
+
+export function renderFormContentSerializedValueBranchTemplate({
+  cardFieldIndent,
+  stringify,
+  fieldJsx
+}: {
+  cardFieldIndent: string
+  stringify: string
+  fieldJsx: string
+}): string {
+  return `${cardFieldIndent}{activeTab === ${stringify} ? (
+${cardFieldIndent}  <>
+${fieldJsx}
+${cardFieldIndent}  </>
+${cardFieldIndent}) : null}`
+}
+
+export function renderFormLayoutTemplate({
+  indent,
+  iconName
+}: {
+  indent: string
+  iconName: string
+}): string {
+  return `
+${indent}    <${iconName} className="size-4 shrink-0" />`
+}
+
+export function renderFormCardHeaderTemplate({
+  indent,
+  iconJsx,
+  stringify
+}: {
+  indent: string
+  iconJsx: string
+  stringify: string
+}): string {
+  return `${indent}  <CardHeader>
+${indent}    <CardTitle className="flex items-center gap-1.5">${iconJsx}
+${indent}      <span>{${stringify}}</span>
+${indent}    </CardTitle>
+${indent}  </CardHeader>`
+}
+
+export function renderFormCardContentTemplate({
+  indent,
+  headingJsx,
+  fieldsJsx
+}: {
+  indent: string
+  headingJsx: string
+  fieldsJsx: string
+}): string {
+  return `${indent}<Card className="gap-0">
+${headingJsx}
+${indent}  <CardContent className="space-y-5 p-5">
+${fieldsJsx}
+${indent}  </CardContent>
+${indent}</Card>`
+}
+
+export function renderFormCardLayoutTemplate({
+  indent,
+  fieldsJsx
+}: {
+  indent: string
+  fieldsJsx: string
+}): string {
+  return `${indent}<Card className="space-y-4 p-5 gap-0">
+${fieldsJsx}
+${indent}</Card>`
+}
+
+export function renderFormContentSerializedValueBranchBodyTemplate({
+  stringify,
+  cardJsx
+}: {
+  stringify: string
+  cardJsx: string
+}): string {
+  return `              {activeTab === ${stringify} ? (
+${cardJsx}
+              ) : null}`
+}
+
+export function renderFormContentClassNameTemplate({
+  optionsScrollableClassName,
+  join
+}: {
+  optionsScrollableClassName: string
+  join: string
+}): string {
+  return `              <div ${optionsScrollableClassName}>
+${join}
+              </div>`
+}
+
+export function renderFormLayoutDetailsTemplate(): string {
+  return `className={initialData?.id != null
+                  ? 'lg:sticky lg:top-32 space-y-4 pb-4'
+                  : 'lg:sticky lg:top-14 space-y-4 pb-4'}`
+}
+
+export function renderFormCardContentGridTemplate({
+  tabSidebarEntriesGrid,
+  tabMainFieldsJsx,
+  sidebarColumn
+}: {
+  tabSidebarEntriesGrid: string
+  tabMainFieldsJsx: string
+  sidebarColumn: string
+}): string {
+  return `      <div className="grid grid-cols-1 ${tabSidebarEntriesGrid}h-full min-h-0 gap-4 items-stretch">
+        <div className="h-full min-h-0 min-w-0">
+          <Card className="min-h-0 min-w-0 h-full">
+            <CardContent className="space-y-5 gap-0 h-full min-h-0">
+${tabMainFieldsJsx}
+            </CardContent>
+          </Card>
+        </div>
+${sidebarColumn}
+      </div>`
+}
+
+export function renderFormLayoutDetailsBranchTemplate(): string {
+  return `            <div
+              className={cn(
+                'grid grid-cols-1 gap-4 items-start h-full',
+                {
+                  'lg:grid-cols-[1fr_360px]': hasVisibleSidebarFields
+                }
+              )}
+            >`
+}
+
+export function renderFormContentSidebarColumnTemplate({
+  renderSidebarColumn
+}: {
+  renderSidebarColumn: string
+}): string {
+  return `              {hasVisibleSidebarFields ? (
+${renderSidebarColumn}
+              ) : null}`
+}
+
+export function renderFormCardContentDetailsTemplate({
+  formGridOpen,
+  mainFieldsJsx,
+  sidebarCardJsx
+}: {
+  formGridOpen: string
+  mainFieldsJsx: string
+  sidebarCardJsx: string
+}): string {
+  return `${formGridOpen}
+              <div className="h-full min-w-0">
+                <Card className="min-w-0 h-full">
+                <CardContent className="space-y-5 gap-0 h-full">
+${mainFieldsJsx}
+</CardContent>
+                </Card>
+              </div>
+${sidebarCardJsx}
+            </div>`
+}
+
+export function renderFormStaticOptionsTemplate({
+  fieldName,
+  fieldPascal,
+  singular,
+  schemaName,
+  staticOptions
+}: {
+  fieldName: string
+  fieldPascal: string
+  singular: string
+  schemaName: string
+  staticOptions: string
+}): string {
+  return `  const [${fieldName}Open, set${fieldPascal}Open] = React.useState(false)
+  const [${fieldName}Search, set${fieldPascal}Search] = React.useState('')
+  const [create${fieldPascal}OptionPending, startCreate${fieldPascal}OptionTransition] = React.useTransition()
+  const { data: ${fieldName}CreatedOptions = [] as ${singular}SelectOption[] } = useQuery<${singular}SelectOption[]>({
+    queryKey: ['${schemaName}', 'select-options', '${fieldName}'],
+    queryFn: () => get${singular}SelectOptions('${fieldName}')
+  })
+  const ${fieldName}StaticOptions: Array<{ label: string; value: string }> = [${staticOptions}]
+  const ${fieldName}Options = [
+    ...${fieldName}StaticOptions,
+    ...${fieldName}CreatedOptions.filter(
+      (createdOption: ${singular}SelectOption) =>
+        !${fieldName}StaticOptions.some((option) => option.value === createdOption.value)
+    )
+  ]`
+}
+
+export function renderFormFieldArrayTemplate({
+  fieldName,
+  pascalFieldName
+}: {
+  fieldName: string
+  pascalFieldName: string
+}): string {
+  return `  const [${fieldName}Expanded, set${pascalFieldName}Expanded] = React.useState('')
+  const ${fieldName}FieldArray = useFieldArray({
+    control: form.control,
+    name: '${fieldName}'
+  })`
+}
+
+export function renderFormCurrentValueTemplate({
+  fieldName,
+  defaultValueFromHandlerContent
+}: {
+  fieldName: string
+  defaultValueFromHandlerContent: string
+}): string {
+  return `const currentValue = form.getValues('${fieldName}')
+      const selectedValues = Array.isArray(currentValue) ? currentValue : []
+      const nextValues = [...new Set([...selectedValues, result.option.value])]
+      ${defaultValueFromHandlerContent}form.setValue('${fieldName}', nextValues, {
+        shouldDirty: true,
+        shouldValidate: true
+      })`
+}
+
+export function renderFormContentFieldNameTemplate({
+  defaultValueFromHandlerContent,
+  fieldName
+}: {
+  defaultValueFromHandlerContent: string
+  fieldName: string
+}): string {
+  return `${defaultValueFromHandlerContent}form.setValue('${fieldName}', result.option.value, {
+        shouldDirty: true,
+        shouldValidate: true
+      })`
+}
+
+export function renderFormTrimmedLabelTemplate({
+  fieldPascal,
+  singular,
+  fieldName,
+  schemaName,
+  setCreatedOptionValue
+}: {
+  fieldPascal: string
+  singular: string
+  fieldName: string
+  schemaName: string
+  setCreatedOptionValue: string
+}): string {
+  return `  function handleCreate${fieldPascal}Option(label: string) {
+    const trimmedLabel = label.trim()
+    if (!trimmedLabel) return
+
+    startCreate${fieldPascal}OptionTransition(async () => {
+      const result = await create${singular}SelectOption({
+        fieldName: '${fieldName}',
+        label: trimmedLabel
+      })
+
+      if (!result.success || !result.option) {
+        toast.error(result.error || 'Failed to create option')
+        return
+      }
+
+      await queryClient.invalidateQueries({
+        queryKey: ['${schemaName}', 'select-options', '${fieldName}']
+      })
+      ${setCreatedOptionValue}
+      set${fieldPascal}Search('')
+      set${fieldPascal}Open(false)
+      toast.success('Option created')
+    })
+  }`
+}
+
+export function renderFormTabValuesTemplate({ map }: { map: string }): string {
+  return `const TAB_VALUES = [${map}] as const
+const TAB_PARSER = parseAsStringLiteral(TAB_VALUES).withDefault(TAB_VALUES[0])
+
+export type TabValue = (typeof TAB_VALUES)[number]
+
+`
+}
+
+export function renderFormLayoutDetailsBranchBodyTemplate({
+  plural,
+  singular
+}: {
+  plural: string
+  singular: string
+}): string {
+  return `      {initialData?.id != null && (
+        <div
+          className={cn(
+            'sticky z-100 flex flex-col gap-1 px-4 bg-background h-14 xl:flex-row xl:items-center xl:justify-between top-14 transition-shadow overflow-x-clip',
+            {
+              'shadow-modal/2': hasScrolled,
+              'border-b border-border/80': !hasScrolled
+            }
+          )}
+        >
+          <div className="flex flex-1 items-center gap-1 w-full">
+            <EntityMetadata
+              data={initialData}
+              entityType="${plural}"
+              entityId={initialData.id}
+              getVersionsAction={getVersionsBy${singular}Id}
+              restoreVersionAction={restore${singular}Version}
+            />
+          </div>
+        </div>
+      )}
+
+`
+}
+
+export function renderFormLayoutDetailsBranchBodyFragmentTemplate(): string {
+  return `className={cn('min-h-[calc(100svh-56px)] w-full gap-0', {
+          'min-h-[calc(100svh-56px-56px)]': initialData?.id != null
+        })}`
+}
+
+export function renderFormTabsLayoutTabsTriggerTemplate({
+  topLevelTabsClassName,
+  map,
+  mapTab
+}: {
+  topLevelTabsClassName: string
+  map: string
+  mapTab: string
+}): string {
+  return `      <Tabs value={entityForm.activeTab} onValueChange={(value) => void entityForm.setActiveTab(value as TabValue)} ${topLevelTabsClassName}>
+        <div className="flex h-14 shrink-0 w-full bg-background border-b border-border/80 px-4 items-center">
+          <TabsList className="bg-transparent border-none">
+${map}
+          </TabsList>
+        </div>
+
+        <main className="w-full flex-1 min-h-0 p-4">
+${mapTab}
+        </main>
+      </Tabs>`
+}
+
+export function renderFormTabContentDetailsTemplate({
+  tabName,
+  contentComponentName
+}: {
+  tabName: string
+  contentComponentName: string
+}): string {
+  return `          <TabsContent value="${tabName}" className="h-full min-h-0 w-full flex-1">
+            <Form {...entityForm.form}>
+              <${contentComponentName} state={entityForm} tab="${tabName}" />
+            </Form>
+          </TabsContent>`
+}
+
+export function renderFormLayoutDetailsBranchBodyFragmentSectionTemplate({
+  contentComponentName
+}: {
+  contentComponentName: string
+}): string {
+  return `      <main className="w-full p-4 h-full">
+        <Form {...entityForm.form}>
+          <${contentComponentName} state={entityForm} />
+        </Form>
+      </main>`
+}
+
+export function renderFormEditRowClickHandlerTemplate({
+  hasCreatableSelectUseQuery,
+  hasNestedListUseFieldArray,
+  hasTabsFieldImport,
+  visibleSlugFieldSlugify,
+  relHookImportsContent,
+  singular,
+  hasCreatableSelectContent,
+  actionImportPath,
+  hasCreatableSelectContentText,
+  tabParserConst,
+  zodFields,
+  hookOptionsName,
+  slugValueHelper,
+  hookName,
+  hasTabsFieldActiveTab,
+  relStateContent,
+  creatableSelectStateContent,
+  staticMultiSelectStateContent,
+  hasDraftSubmitIntent,
+  defaultValues,
+  plural,
+  adminRoutePath,
+  schemaName,
+  singularText,
+  hasDraftOnSettled,
+  hasDraftCanPublishPristineDraft,
+  defaultValueFromSyncFunctionsContent,
+  fieldArrayHooksContent,
+  creatableSelectHandlersContent,
+  hasDraftPublishedValue,
+  hasDraftPublishedValuePublishedValue,
+  hasDraftPublished,
+  hasDraftSetSubmitIntent,
+  hookReturnObject
+}: {
+  hasCreatableSelectUseQuery: string
+  hasNestedListUseFieldArray: string
+  hasTabsFieldImport: string
+  visibleSlugFieldSlugify: string
+  relHookImportsContent: string
+  singular: string
+  hasCreatableSelectContent: string
+  actionImportPath: string
+  hasCreatableSelectContentText: string
+  tabParserConst: string
+  zodFields: string
+  hookOptionsName: string
+  slugValueHelper: string
+  hookName: string
+  hasTabsFieldActiveTab: string
+  relStateContent: string
+  creatableSelectStateContent: string
+  staticMultiSelectStateContent: string
+  hasDraftSubmitIntent: string
+  defaultValues: string
+  plural: string
+  adminRoutePath: string
+  schemaName: string
+  singularText: string
+  hasDraftOnSettled: string
+  hasDraftCanPublishPristineDraft: string
+  defaultValueFromSyncFunctionsContent: string
+  fieldArrayHooksContent: string
+  creatableSelectHandlersContent: string
+  hasDraftPublishedValue: string
+  hasDraftPublishedValuePublishedValue: string
+  hasDraftPublished: string
+  hasDraftSetSubmitIntent: string
+  hookReturnObject: string
+}): string {
+  return `'use client'
+
+import * as React from 'react'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, ${hasCreatableSelectUseQuery}useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+import {${hasNestedListUseFieldArray} useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'${hasTabsFieldImport}
+${visibleSlugFieldSlugify}${relHookImportsContent}
+import type {
+  ${singular},
+  ${singular}CreateInput,${hasCreatableSelectContent}
+  ${singular}UpdateInput
+} from '@admin/actions/${actionImportPath}'
+import { create${singular}, ${hasCreatableSelectContentText}update${singular} } from '@admin/actions/${actionImportPath}'
+
+${tabParserConst}const formSchema = z.object({
+${zodFields}
+})
+
+export type FormValues = z.infer<typeof formSchema>
+
+interface ${hookOptionsName} {
+  initialData?: ${singular}
+}
+${slugValueHelper}
+
+export function ${hookName}({ initialData }: ${hookOptionsName}) {
+  const router = useRouter()
+  const queryClient = useQueryClient()${hasTabsFieldActiveTab}${relStateContent}${creatableSelectStateContent}${staticMultiSelectStateContent}${hasDraftSubmitIntent}
+
+  const defaultValues: FormValues = {
+${defaultValues}
+  }
+
+  const form = useForm<FormValues>({
+    resolver: standardSchemaResolver(formSchema),
+    mode: 'onBlur',
+    reValidateMode: 'onChange',
+    defaultValues
+  })
+  const defaultValuesRef = React.useRef(defaultValues)
+  defaultValuesRef.current = defaultValues
+  React.useEffect(
+    () => () => {
+      form.reset(defaultValuesRef.current)
+    },
+    [form]
+  )
+
+  const createMutation = useMutation({
+    mutationFn: (data: ${singular}CreateInput) => create${singular}(data),
+    onSuccess: async () => {
+      toast.success('${singular} created successfully')
+      await queryClient.invalidateQueries({ queryKey: ['${plural}'] })
+      form.reset(defaultValues)
+      router.push('${adminRoutePath}/${schemaName}')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to create ${singularText}')
+    }${hasDraftOnSettled}
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: (data: ${singular}UpdateInput) => update${singular}(data),
+    onSuccess: async () => {
+      toast.success('${singular} updated successfully')
+      await queryClient.invalidateQueries({ queryKey: ['${plural}'] })
+      router.refresh()
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to update ${singularText}')
+    }${hasDraftOnSettled}
+  })
+
+  const isPending = createMutation.isPending || updateMutation.isPending
+  const { isDirty } = form.formState
+${hasDraftCanPublishPristineDraft}
+${defaultValueFromSyncFunctionsContent}
+${fieldArrayHooksContent}
+${creatableSelectHandlersContent}
+  function onSubmit(values: FormValues${hasDraftPublishedValue}) {
+${hasDraftPublishedValuePublishedValue}    if (initialData) {
+      updateMutation.mutate({
+        id: initialData.id,
+        ...values${hasDraftPublished}
+      })
+    } else {
+      createMutation.mutate({
+        ...values${hasDraftPublished}
+      } as ${singular}CreateInput)
+    }
+  }
+
+  function handleErrors(errors: Record<string, unknown>) {
+${hasDraftSetSubmitIntent}    const firstError = Object.values(errors)[0] as { message?: string } | undefined
+    if (firstError?.message) {
+      toast.error(String(firstError.message))
+    } else {
+      toast.error('Please fix the form errors before submitting')
+    }
+  }
+
+  return {
+${hookReturnObject}
+  }
+}
+`
+}
+
+export function renderFormContentLucideTemplate({
+  lucideIconsLucide,
+  hasTabsFieldHookImportPath,
+  needsCnImport,
+  join
+}: {
+  lucideIconsLucide: string
+  hasTabsFieldHookImportPath: string
+  needsCnImport: string
+  join: string
+}): string {
+  return `${lucideIconsLucide}${hasTabsFieldHookImportPath}${needsCnImport}
+${join}`
+}
+
+export function renderFormGeneratedValueTemplate({ map }: { map: string }): string {
+  return `  const {
+${map}
+  } = state
+
+`
+}
+
+export function renderFormClientModuleTemplate({
+  tabImports,
+  specComponentName,
+  hookName,
+  tabStateDestructure,
+  body
+}: {
+  tabImports: string
+  specComponentName: string
+  hookName: string
+  tabStateDestructure: string
+  body: string
+}): string {
+  return `'use client'
+
+${tabImports}
+
+interface ${specComponentName}Props {
+  state: ReturnType<typeof ${hookName}>
+}
+
+export function ${specComponentName}({ state }: ${specComponentName}Props) {
+${tabStateDestructure}  return (
+${body}
+  )
+}
+`
+}
+
+export function renderFormClientModuleSchemaNameTemplate({
+  contentImports,
+  contentComponentName,
+  hookName,
+  topLevelTabsFieldTab,
+  topLevelTabsFieldTabTab,
+  contentStateDestructure,
+  contentSidebarVisibilityState,
+  schemaName,
+  hasDraftInitialData,
+  topLevelTabsFieldClassName,
+  formBodyJsx
+}: {
+  contentImports: string
+  contentComponentName: string
+  hookName: string
+  topLevelTabsFieldTab: string
+  topLevelTabsFieldTabTab: string
+  contentStateDestructure: string
+  contentSidebarVisibilityState: string
+  schemaName: string
+  hasDraftInitialData: string
+  topLevelTabsFieldClassName: string
+  formBodyJsx: string
+}): string {
+  return `'use client'
+
+${contentImports}
+
+interface ${contentComponentName}Props {
+  state: ReturnType<typeof ${hookName}>
+${topLevelTabsFieldTab}
+}
+
+export function ${contentComponentName}({ state${topLevelTabsFieldTabTab} }: ${contentComponentName}Props) {
+  const {
+${contentStateDestructure}
+  } = state
+${contentSidebarVisibilityState}
+  return (
+    <form id="${schemaName}-form" onSubmit={form.handleSubmit((values) => onSubmit(values${hasDraftInitialData}), handleErrors)} ${topLevelTabsFieldClassName}>
+${formBodyJsx}
+    </form>
+  )
+}
+`
+}
+
+export function renderFormClientModuleSchemaNameImportTemplate({
+  showMetadataWidgetScrollThresholdImport,
+  topLevelTabIconNamesLucide,
+  topLevelTabsFieldTabs,
+  showMetadataWidgetEntityMetadataImport,
+  singular,
+  actionImportPath,
+  showMetadataWidgetAdmin,
+  topLevelTabsFieldHookImportPath,
+  hookName,
+  hookImportPath,
+  contentComponentName,
+  schemaName,
+  metadataOffsetConst,
+  metadataScrollState,
+  hasDraftFlex,
+  metadataStrip,
+  shellBody
+}: {
+  showMetadataWidgetScrollThresholdImport: string
+  topLevelTabIconNamesLucide: string
+  topLevelTabsFieldTabs: string
+  showMetadataWidgetEntityMetadataImport: string
+  singular: string
+  actionImportPath: string
+  showMetadataWidgetAdmin: string
+  topLevelTabsFieldHookImportPath: string
+  hookName: string
+  hookImportPath: string
+  contentComponentName: string
+  schemaName: string
+  metadataOffsetConst: string
+  metadataScrollState: string
+  hasDraftFlex: string
+  metadataStrip: string
+  shellBody: string
+}): string {
+  return `'use client'
+${showMetadataWidgetScrollThresholdImport}
+${topLevelTabIconNamesLucide}
+import { Button } from '@admin/components/ui/button'
+import { Form } from '@admin/components/ui/form'
+${topLevelTabsFieldTabs}import { PageHeader } from '@admin/components/shared/page-header'${showMetadataWidgetEntityMetadataImport}
+import type { ${singular} } from '@admin/actions/${actionImportPath}'
+${showMetadataWidgetAdmin}
+${topLevelTabsFieldHookImportPath}
+import { ${hookName} } from '${hookImportPath}'
+import { ${contentComponentName} } from './${schemaName}-form-content'
+
+${metadataOffsetConst}interface ${singular}FormProps {
+  initialData?: ${singular}
+  pageTitle: string
+}
+
+export function ${singular}Form({ initialData, pageTitle }: ${singular}FormProps) {
+${metadataScrollState}  const entityForm = ${hookName}({ initialData })
+
+  return (
+    <>
+      <PageHeader
+        title={pageTitle}
+        actions={
+${hasDraftFlex}
+        }
+      />
+${metadataStrip}${shellBody}
+    </>
+  )
+}
+`
+}
+
+export function renderFormActionButtonsTemplate(): string {
+  return `          <div className="flex items-center gap-1">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => entityForm.form.handleSubmit((values) => entityForm.onSubmit(values, false), entityForm.handleErrors)()}
+              disabled={!entityForm.canSubmitDraftAction || entityForm.isPending}
+              aria-busy={entityForm.isPending && entityForm.submitIntent === 'draft'}
+            >
+              {entityForm.isPending && entityForm.submitIntent === 'draft'
+                ? initialData?.published ? 'Unpublishing…' : 'Saving Changes…'
+                : initialData?.published ? 'Unpublish' : 'Save Changes'}
+            </Button>
+            <Button
+              type="button"
+              onClick={() => entityForm.form.handleSubmit((values) => entityForm.onSubmit(values, true), entityForm.handleErrors)()}
+              disabled={entityForm.isPending || !entityForm.canSubmitPublishAction}
+              aria-busy={entityForm.isPending && entityForm.submitIntent === 'publish'}
+            >
+              {entityForm.isPending && entityForm.submitIntent === 'publish'
+                ? initialData?.published ? 'Publishing Changes…' : 'Publishing…'
+                : initialData?.published ? 'Publish Changes' : 'Publish'}
+            </Button>
+          </div>`
+}
+
+export function renderFormActionButtonsDetailsTemplate(): string {
+  return `          <Button
+            type="button"
+            onClick={() => entityForm.form.handleSubmit((values) => entityForm.onSubmit(values), entityForm.handleErrors)()}
+            disabled={entityForm.isPending || !entityForm.isDirty}
+            aria-busy={entityForm.isPending}
+          >
+            {entityForm.isPending ? 'Saving…' : initialData ? 'Update' : 'Create'}
+          </Button>`
+}