betterstart-cli 0.0.102 → 0.0.104

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/error-message-line.ts

@@ -0,0 +1,13 @@
+export function renderErrorMessageLineLayoutTemplate({
+  indent,
+  pathExpression
+}: {
+  indent: string
+  pathExpression: string
+}): string {
+  return `${indent}{getFieldErrorMessage(form.formState.errors, ${pathExpression}) ? (
+${indent}  <p className="text-sm text-destructive">
+${indent}    {getFieldErrorMessage(form.formState.errors, ${pathExpression})}
+${indent}  </p>
+${indent}) : null}`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/generate-field-jsx.ts

@@ -0,0 +1,226 @@
+export function renderFieldJsxFieldControllerTemplate({
+  name,
+  fieldContainerClassFill,
+  formLabelWithDescriptionLine,
+  placeholder,
+  textareaClass,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClassFill: string
+  formLabelWithDescriptionLine: string
+  placeholder: string
+  textareaClass: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <div className="${fieldContainerClassFill}">
+              ${formLabelWithDescriptionLine}
+              <textarea
+                id="${name}"
+                placeholder="${placeholder}"
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+                className="${textareaClass}"
+              />
+${errorMessageLine}
+            </div>
+          )}
+        />`
+}
+
+export function renderFieldJsxChangeHandlerTemplate({
+  escapeAttribute,
+  escapeAttributeText,
+  jsString,
+  escapeJsx
+}: {
+  escapeAttribute: string
+  escapeAttributeText: string
+  jsString: string
+  escapeJsx: string
+}): string {
+  return `                  <label htmlFor="${escapeAttribute}" className="flex items-center gap-2 text-sm font-medium leading-none">
+                    <input
+                      type="radio"
+                      id="${escapeAttribute}"
+                      value="${escapeAttributeText}"
+                      checked={field.value === ${jsString}}
+                      onChange={() => field.onChange(${jsString})}
+                      onBlur={field.onBlur}
+                      name={field.name}
+                      ref={field.ref}
+                      className="size-4 accent-primary"
+                    />
+                    <span>${escapeJsx}</span>
+                  </label>`
+}
+
+export function renderFieldJsxFieldControllerSpaceTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  radioItems,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  radioItems: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <fieldset className="${fieldContainerClass}">
+              ${formLabelWithDescriptionLine}
+              <div className="flex flex-col gap-3">
+${radioItems}
+              </div>
+${errorMessageLine}
+            </fieldset>
+          )}
+        />`
+}
+
+export function renderFieldJsxFieldControllerEscapedJsxTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  selectClass,
+  escapeJsx,
+  optionItems,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  selectClass: string
+  escapeJsx: string
+  optionItems: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <div className="${fieldContainerClass}">
+              ${formLabelWithDescriptionLine}
+              <select
+                id="${name}"
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+                className="${selectClass}"
+              >
+                <option value="">${escapeJsx}</option>
+${optionItems}
+              </select>
+${errorMessageLine}
+            </div>
+          )}
+        />`
+}
+
+export function renderFieldJsxChangeHandlerEscapedJsxTemplate({
+  escapeAttribute,
+  jsString,
+  escapeJsx
+}: {
+  escapeAttribute: string
+  jsString: string
+  escapeJsx: string
+}): string {
+  return `                  <label htmlFor="${escapeAttribute}" className="flex items-center gap-2 text-sm font-medium leading-none">
+                    <input
+                      type="checkbox"
+                      id="${escapeAttribute}"
+                      checked={Array.isArray(field.value) ? field.value.includes(${jsString}) : false}
+                      onChange={(event) => {
+                        const currentValue = Array.isArray(field.value) ? field.value : []
+                        field.onChange(
+                          event.target.checked
+                            ? [...currentValue, ${jsString}]
+                            : currentValue.filter((value) => value !== ${jsString})
+                        )
+                      }}
+                      onBlur={field.onBlur}
+                      name={field.name}
+                      ref={field.ref}
+                      className="mt-0.5 size-4 rounded border-input accent-primary"
+                    />
+                    <span>${escapeJsx}</span>
+                  </label>`
+}
+
+export function renderFieldJsxFieldControllerSpaceBranchTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  checkboxItems,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  checkboxItems: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <fieldset className="${fieldContainerClass}">
+              ${formLabelWithDescriptionLine}
+              <div className="flex flex-col gap-3">
+${checkboxItems}
+              </div>
+${errorMessageLine}
+            </fieldset>
+          )}
+        />`
+}
+
+export function renderFieldJsxFieldControllerFlexTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <div className="${fieldContainerClass}">
+              <input
+                type="checkbox"
+                id="${name}"
+                checked={Boolean(field.value)}
+                onChange={(event) => field.onChange(event.target.checked)}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+                className="mt-1 size-4 rounded border-input accent-primary"
+              />
+              <div className="space-y-2 leading-none">
+                ${formLabelWithDescriptionLine}
+${errorMessageLine}
+              </div>
+            </div>
+          )}
+        />`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/generate-file-upload-field-jsx.ts

@@ -0,0 +1,41 @@
+export function renderFileUploadFieldJsxFieldControllerTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  escapeAttribute,
+  multiple,
+  inputClass,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  escapeAttribute: string
+  multiple: string
+  inputClass: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <div className="${fieldContainerClass}">
+              ${formLabelWithDescriptionLine}
+              <input
+                id="${name}"
+                type="file"
+                accept="${escapeAttribute}"${multiple}
+                onChange={(event) => {
+                  const selectedFiles = Array.from(event.target.files ?? [])
+                  field.onChange(selectedFiles.map((file) => file.name).join(', '))
+                }}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+                className="${inputClass}"
+              />
+${errorMessageLine}
+            </div>
+          )}
+        />`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/generate-list-field-jsx.ts

@@ -0,0 +1,160 @@
+export function renderListFieldJsxFieldControllerTemplate({
+  name,
+  nfName,
+  nfLabelRaw,
+  selectClass,
+  escapeJsx,
+  selectItems,
+  errorMessageLine
+}: {
+  name: string
+  nfName: string
+  nfLabelRaw: string
+  selectClass: string
+  escapeJsx: string
+  selectItems: string
+  errorMessageLine: string
+}): string {
+  return `                    <Controller
+                      control={form.control}
+                      name={\`${name}.\${index}.${nfName}\`}
+                      render={({ field }) => (
+                        <div className="flex-1 space-y-2">
+                          <label htmlFor={field.name} className="text-sm font-medium leading-none">${nfLabelRaw}</label>
+                          <select
+                            id={field.name}
+                            value={field.value ?? ''}
+                            onChange={field.onChange}
+                            onBlur={field.onBlur}
+                            name={field.name}
+                            ref={field.ref}
+                            className="${selectClass}"
+                          >
+                            <option value="">${escapeJsx}</option>
+${selectItems}
+                          </select>
+${errorMessageLine}
+                        </div>
+                      )}
+                    />`
+}
+
+export function renderListFieldJsxFieldControllerFieldNameTemplate({
+  name,
+  nfName,
+  nfLabelRaw,
+  escapeAttribute,
+  inputClass,
+  errorMessageLine
+}: {
+  name: string
+  nfName: string
+  nfLabelRaw: string
+  escapeAttribute: string
+  inputClass: string
+  errorMessageLine: string
+}): string {
+  return `                    <Controller
+                      control={form.control}
+                      name={\`${name}.\${index}.${nfName}\`}
+                      render={({ field }) => (
+                        <div className="flex-1 space-y-2">
+                          <label htmlFor={field.name} className="text-sm font-medium leading-none">${nfLabelRaw}</label>
+                          <input
+                            id={field.name}
+                            type="number"
+                            placeholder="${escapeAttribute}"
+                            value={field.value ?? ''}
+                            onChange={(event) => {
+                              const nextValue = event.target.value === '' ? undefined : event.target.valueAsNumber
+                              const normalizedValue = Number.isNaN(nextValue) ? undefined : nextValue
+                              field.onChange(normalizedValue)
+                            }}
+                            onBlur={field.onBlur}
+                            name={field.name}
+                            ref={field.ref}
+                            className="${inputClass}"
+                          />
+${errorMessageLine}
+                        </div>
+                      )}
+                    />`
+}
+
+export function renderListFieldJsxFieldControllerFieldNameFieldTemplate({
+  name,
+  nfName,
+  nfLabelRaw,
+  escapeAttribute,
+  inputClass,
+  errorMessageLine
+}: {
+  name: string
+  nfName: string
+  nfLabelRaw: string
+  escapeAttribute: string
+  inputClass: string
+  errorMessageLine: string
+}): string {
+  return `                    <Controller
+                      control={form.control}
+                      name={\`${name}.\${index}.${nfName}\`}
+                      render={({ field }) => (
+                        <div className="flex-1 space-y-2">
+                          <label htmlFor={field.name} className="text-sm font-medium leading-none">${nfLabelRaw}</label>
+                          <input
+                            id={field.name}
+                            type="text"
+                            placeholder="${escapeAttribute}"
+                            value={field.value ?? ''}
+                            onChange={field.onChange}
+                            onBlur={field.onBlur}
+                            name={field.name}
+                            ref={field.ref}
+                            className="${inputClass}"
+                          />
+${errorMessageLine}
+                        </div>
+                      )}
+                    />`
+}
+
+export function renderListFieldJsxClickHandlerTemplate({
+  labelWithDescriptionLine,
+  name,
+  nestedFieldsJsx,
+  defaultObj,
+  singularLabel
+}: {
+  labelWithDescriptionLine: string
+  name: string
+  nestedFieldsJsx: string
+  defaultObj: string
+  singularLabel: string
+}): string {
+  return `        <div className="space-y-2">
+          ${labelWithDescriptionLine}
+          {${name}FieldArray.fields.map((item, index) => (
+            <div key={item.id} className="relative rounded-sm border p-4">
+              <button
+                type="button"
+                onClick={() => ${name}FieldArray.remove(index)}
+                className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+              >
+                <Trash2 className="size-4" />
+                <span className="sr-only">Remove</span>
+              </button>
+              <div className="space-y-4 pr-8">
+${nestedFieldsJsx}
+              </div>
+            </div>
+          ))}
+          <button
+            type="button"
+            onClick={() => ${name}FieldArray.append({ ${defaultObj} })}
+            className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+          >
+            Add ${singularLabel}
+          </button>
+        </div>`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/generate-multiselect-field-jsx.ts

@@ -0,0 +1,40 @@
+export function renderMultiselectFieldJsxFieldControllerTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  selectClass,
+  optionItems,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  selectClass: string
+  optionItems: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <div className="${fieldContainerClass}">
+              ${formLabelWithDescriptionLine}
+              <select
+                id="${name}"
+                multiple
+                value={Array.isArray(field.value) ? field.value : []}
+                onChange={(event) => {
+                  field.onChange(Array.from(event.target.selectedOptions, (option) => option.value))
+                }}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+                className="${selectClass} min-h-24 py-2"
+              >
+${optionItems}
+              </select>
+${errorMessageLine}
+            </div>
+          )}
+        />`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/generate-number-field-jsx.ts

@@ -0,0 +1,41 @@
+export function renderNumberFieldJsxFieldControllerTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  escapeAttribute,
+  inputClass,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  escapeAttribute: string
+  inputClass: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <div className="${fieldContainerClass}">
+              ${formLabelWithDescriptionLine}
+              <input
+                id="${name}"
+                type="number"
+                placeholder="${escapeAttribute}"
+                value={field.value ?? ''}
+                onChange={(event) => {
+                  const nextValue = event.target.value === '' ? undefined : event.target.valueAsNumber
+                  const normalizedValue = Number.isNaN(nextValue) ? undefined : nextValue
+                  field.onChange(normalizedValue)
+                }}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+                className="${inputClass}"
+              />
+${errorMessageLine}
+            </div>
+          )}
+        />`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/generate-text-field-jsx.ts

@@ -0,0 +1,39 @@
+export function renderTextFieldJsxFieldControllerTemplate({
+  name,
+  fieldContainerClass,
+  formLabelWithDescriptionLine,
+  inputType,
+  escapeAttribute,
+  inputClass,
+  errorMessageLine
+}: {
+  name: string
+  fieldContainerClass: string
+  formLabelWithDescriptionLine: string
+  inputType: string
+  escapeAttribute: string
+  inputClass: string
+  errorMessageLine: string
+}): string {
+  return `        <Controller
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <div className="${fieldContainerClass}">
+              ${formLabelWithDescriptionLine}
+              <input
+                id="${name}"
+                type="${inputType}"
+                placeholder="${escapeAttribute}"
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+                className="${inputClass}"
+              />
+${errorMessageLine}
+            </div>
+          )}
+        />`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-shared/label-with-description-line.ts

@@ -0,0 +1,14 @@
+export function renderLabelWithDescriptionLineLayoutTemplate({
+  indent,
+  labelJsx,
+  descriptionJsx
+}: {
+  indent: string
+  labelJsx: string
+  descriptionJsx: string
+}): string {
+  return `<div className="flex flex-col gap-1">
+${indent}  ${labelJsx}
+${indent}  ${descriptionJsx}
+${indent}</div>`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-pipeline/form-component-single/build-single-step-form-component-source.ts

@@ -0,0 +1,100 @@
+export function renderBuildSingleStepFormComponentSourceClientModuleTemplate({
+  lucideImport,
+  rhfImport,
+  pascal,
+  actionImportPath,
+  zodFields,
+  fieldErrorHelper,
+  defaults,
+  fieldArraySetup,
+  watchSetup,
+  successHandler,
+  successMessage,
+  fieldJsx,
+  submitText
+}: {
+  lucideImport: string
+  rhfImport: string
+  pascal: string
+  actionImportPath: string
+  zodFields: string
+  fieldErrorHelper: string
+  defaults: string
+  fieldArraySetup: string
+  watchSetup: string
+  successHandler: string
+  successMessage: string
+  fieldJsx: string
+  submitText: string
+}): string {
+  return `'use client'
+
+import * as React from 'react'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'${lucideImport}
+${rhfImport}
+import { z } from 'zod/v3'
+import { create${pascal}Submission } from '@admin/actions/${actionImportPath}'
+
+const formSchema = z.object({
+${zodFields}
+})
+
+type FormValues = z.infer<typeof formSchema>
+${fieldErrorHelper}
+
+export function ${pascal}Form() {
+  const [submitted, setSubmitted] = React.useState(false)
+  const [submitting, startSubmitTransition] = React.useTransition()
+
+  const form = useForm<FormValues>({
+    resolver: standardSchemaResolver(formSchema),
+    defaultValues: {
+${defaults}
+    },
+  })
+${fieldArraySetup}${watchSetup}
+  function onSubmit(values: FormValues) {
+    startSubmitTransition(async () => {
+      try {
+        const result = await create${pascal}Submission(values)
+        if (result.success) {
+          ${successHandler}
+        } else {
+          form.setError('root', { message: result.error || 'Something went wrong' })
+        }
+      } catch {
+        form.setError('root', { message: 'Something went wrong. Please try again.' })
+      }
+    })
+  }
+
+  if (submitted) {
+    return (
+      <div className="rounded-sm border p-6 text-center">
+        <h3 className="text-lg font-semibold">Thank you!</h3>
+        <p className="mt-2 text-muted-foreground">${successMessage}</p>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+${fieldJsx}
+
+      {form.formState.errors.root && (
+        <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
+      )}
+
+      <button
+        type="submit"
+        disabled={submitting}
+        aria-busy={submitting}
+        className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-xs transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+      >
+        {submitting ? 'Submitting…' : ${submitText}}
+      </button>
+    </form>
+  )
+}
+`
+}