@betterstart/cli 0.1.46 → 0.1.48

package/dist/cli.js

@@ -2437,7 +2437,7 @@ ${optionItems}
       return generateTextFieldJSX(name, label, placeholder || "+1 (555) 000-0000", hintJSX, requiredStar, "tel");
     case "file":
     case "upload":
-      return generateTextFieldJSX(name, label, placeholder, hintJSX, requiredStar, "file");
+      return generateFileUploadFieldJSX(field, name, label, hintJSX, requiredStar);
     case "list":
       return generateListFieldJSX(field, name, label, hintPlainJSX, requiredStar);
     default:
@@ -2459,6 +2459,30 @@ function generateTextFieldJSX(name, label, placeholder, hintJSX, requiredStar, i
           )}
         />`;
 }
+function generateFileUploadFieldJSX(field, name, label, hintJSX, requiredStar) {
+  const accept = field.accept || "*/*";
+  const maxSize = field.maxFileSize || 10;
+  return `        <FormField
+          control={form.control}
+          name="${name}"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>${label}${requiredStar}</FormLabel>
+              <FormControl>
+                <MediaUploadField
+                  value={field.value}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  accept="${accept}"
+                  maxSizeInMB={${maxSize}}
+                  label=""
+                />
+              </FormControl>${hintJSX}
+              <FormMessage />
+            </FormItem>
+          )}
+        />`;
+}
 function generateListFieldJSX(field, name, label, hintJSX, requiredStar) {
   if (!field.fields || field.fields.length === 0) {
     return generateTextFieldJSX(name, label, field.placeholder || "", hintJSX, requiredStar, "text");
@@ -2569,6 +2593,7 @@ ${fieldsJSX}
   const submitText = schema.submitButtonText || "Submit";
   const successMessage = escapeJsx(schema.successMessage || "Form submitted successfully!");
   const hasRadio = allFields.some((f) => f.type === "radio");
+  const hasFileUpload = allFields.some((f) => f.type === "file" || f.type === "upload");
   const buttonImport = resolveUiImport(cwd, "button");
   const formImport = resolveUiImport(cwd, "form");
   const inputImport = resolveUiImport(cwd, "input");
@@ -2576,11 +2601,13 @@ ${fieldsJSX}
   const selectImport = resolveUiImport(cwd, "select");
   const radioGroupImport = resolveUiImport(cwd, "radio-group");
   const progressImport = resolveUiImport(cwd, "progress");
+  const mediaUploadImport = resolveUiImport(cwd, "media-upload-field");
   const content = buildComponentSource({
     pascal,
     kebab,
     rhfImport,
     hasRadio,
+    hasFileUpload,
     buttonImport,
     formImport,
     inputImport,
@@ -2588,6 +2615,7 @@ ${fieldsJSX}
     selectImport,
     radioGroupImport,
     progressImport,
+    mediaUploadImport,
     zodFields,
     defaults,
     stepsConst,
@@ -2615,13 +2643,28 @@ function escapeQuotes(str) {
   return str.replace(/'/g, "\\'");
 }
 function buildComponentSource(p7) {
+  const queryClientImport = p7.hasFileUpload ? `
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'` : "";
+  const queryClientSetup = p7.hasFileUpload ? `
+const queryClient = new QueryClient()
+` : "";
+  const formComponentDecl = p7.hasFileUpload ? `function ${p7.pascal}FormInner` : `export function ${p7.pascal}Form`;
+  const exportWrapper = p7.hasFileUpload ? `
+export function ${p7.pascal}Form() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <${p7.pascal}FormInner />
+    </QueryClientProvider>
+  )
+}
+` : "";
   return `'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Check, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useState } from 'react'
 ${p7.rhfImport}
-import { z } from 'zod/v3'
+import { z } from 'zod/v3'${queryClientImport}
 import { create${p7.pascal}Submission } from '@cms/actions/${p7.kebab}-form'
 import { Button } from '${p7.buttonImport}'
 import {
@@ -2633,7 +2676,8 @@ import {
   FormLabel,
   FormMessage,
 } from '${p7.formImport}'
-import { Input } from '${p7.inputImport}'
+import { Input } from '${p7.inputImport}'${p7.hasFileUpload ? `
+import { MediaUploadField } from '${p7.mediaUploadImport}'` : ""}
 import { Progress } from '${p7.progressImport}'${p7.hasRadio ? `
 import { RadioGroup, RadioGroupItem } from '${p7.radioGroupImport}'` : ""}
 import { Textarea } from '${p7.textareaImport}'
@@ -2650,10 +2694,10 @@ ${p7.zodFields}
 })
 
 type FormValues = z.infer<typeof formSchema>
-
+${queryClientSetup}
 ${p7.stepsConst}
 
-export function ${p7.pascal}Form() {
+${formComponentDecl}() {
   const [currentStep, setCurrentStep] = useState(0)
   const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
   const [submitted, setSubmitted] = useState(false)
@@ -2800,7 +2844,7 @@ ${p7.stepContentBlocks}
     </Form>
   )
 }
-`;
+${exportWrapper}`;
 }
 
 // src/generators/form-pipeline/form-component-single.ts
@@ -2831,18 +2875,35 @@ function generateSingleStepForm(schema, cwd, cmsDir, options) {
 ${buildFieldArrayDecls(listFields)}
 ` : "";
   const hasRadio = fields.some((f) => f.type === "radio");
+  const hasFileUpload = fields.some((f) => f.type === "file" || f.type === "upload");
   const buttonImport = resolveUiImport(cwd, "button");
   const formImport = resolveUiImport(cwd, "form");
   const inputImport = resolveUiImport(cwd, "input");
   const textareaImport = resolveUiImport(cwd, "textarea");
   const selectImport = resolveUiImport(cwd, "select");
   const radioGroupImport = resolveUiImport(cwd, "radio-group");
+  const mediaUploadImport = resolveUiImport(cwd, "media-upload-field");
+  const queryClientImport = hasFileUpload ? `
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'` : "";
+  const queryClientSetup = hasFileUpload ? `
+const queryClient = new QueryClient()
+` : "";
+  const formComponentDecl = hasFileUpload ? `function ${pascal}FormInner` : `export function ${pascal}Form`;
+  const exportWrapper = hasFileUpload ? `
+export function ${pascal}Form() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <${pascal}FormInner />
+    </QueryClientProvider>
+  )
+}
+` : "";
   const content = `'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useState } from 'react'
 ${rhfImport}
-import { z } from 'zod/v3'
+import { z } from 'zod/v3'${queryClientImport}
 import { create${pascal}Submission } from '@cms/actions/${kebab}-form'
 import { Button } from '${buttonImport}'
 import {
@@ -2854,7 +2915,8 @@ import {
   FormLabel,
   FormMessage,
 } from '${formImport}'
-import { Input } from '${inputImport}'${hasRadio ? `
+import { Input } from '${inputImport}'${hasFileUpload ? `
+import { MediaUploadField } from '${mediaUploadImport}'` : ""}${hasRadio ? `
 import { RadioGroup, RadioGroupItem } from '${radioGroupImport}'` : ""}
 import { Textarea } from '${textareaImport}'
 import {
@@ -2870,8 +2932,8 @@ ${zodFields}
 })
 
 type FormValues = z.infer<typeof formSchema>
-
-export function ${pascal}Form() {
+${queryClientSetup}
+${formComponentDecl}() {
   const [submitted, setSubmitted] = useState(false)
   const [submitting, setSubmitting] = useState(false)
 
@@ -2923,7 +2985,7 @@ ${fieldJSX}
     </Form>
   )
 }
-`;
+${exportWrapper}`;
   fs9.writeFileSync(filePath, content, "utf-8");
   return { files: [path9.relative(cwd, filePath)] };
 }