11import * as React from "react" ;
22import { ImageIcon } from "lucide-react" ;
3- import { UseFormReturn } from "react-hook-form" ;
3+ import type { UseFormReturn } from "react-hook-form" ;
44
5- import { FormElement , FormElementSchema } from "@/lib/orpc/schemas/forms" ;
5+ import type { FormElement } from "@/lib/orpc/schemas/forms" ;
6+ import { FormElementSchema } from "@/lib/orpc/schemas/forms" ;
67import { isStatic } from "@/components/form-builder/lib/utils" ;
78import { Button } from "@/components/ui/button" ;
89import { Label } from "@/components/ui/label" ;
910
11+ import type { DynamicFormValues } from "../../../render-form-element" ;
1012import { RenderFormElement } from "../../../render-form-element" ;
1113import { FieldEditOptionsList } from "./field-edit-components" ;
1214import { fieldEditInputTypes } from "./field-edit-input-types" ;
1315
16+ /**
17+ * Casts a FormElement form to DynamicFormValues form for RenderFormElement compatibility.
18+ * This is safe because FormElement is structurally compatible with Record<string, unknown>.
19+ * @param {UseFormReturn<FormElement> } form - The react-hook-form instance typed for FormElement
20+ * @returns {UseFormReturn<DynamicFormValues> } The same form instance typed for DynamicFormValues
21+ */
22+ const asDynamicForm = (
23+ form : UseFormReturn < FormElement > ,
24+ ) : UseFormReturn < DynamicFormValues > =>
25+ form as unknown as UseFormReturn < DynamicFormValues > ;
26+
1427interface FieldEditFormFieldsProps {
1528 fieldType : Extract < FormElement [ "fieldType" ] , string > ;
1629 form : UseFormReturn < FormElement > ;
@@ -22,10 +35,10 @@ function IconUploadField({
2235 form,
2336 formElement,
2437} : {
25- form : UseFormReturn < FormElement > ;
38+ form : UseFormReturn < DynamicFormValues > ;
2639 formElement : FormElement ;
2740} ) {
28- const iconImage = form . watch ( "iconImage" ) ; // Watch the form value for reactivity
41+ const iconImage = form . watch ( "iconImage" ) as string | undefined ;
2942
3043 const handleImageUpload = ( e : React . ChangeEvent < HTMLInputElement > ) => {
3144 const file = e . target . files ?. [ 0 ] ;
@@ -127,7 +140,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
127140 return (
128141 < div className = "mb-4 flex flex-col gap-3" >
129142 < RenderFormElement
130- form = { form }
143+ form = { asDynamicForm ( form ) }
131144 formElement = { {
132145 className : "border-secondary" ,
133146 defaultValue : formElement . content ,
@@ -140,7 +153,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
140153 />
141154
142155 < RenderFormElement
143- form = { form }
156+ form = { asDynamicForm ( form ) }
144157 formElement = { {
145158 className : "border-secondary" ,
146159 defaultValue :
@@ -161,7 +174,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
161174 < div className = "mb-4 flex flex-col gap-3" >
162175 { "title" in formElement && Array . isArray ( formElement . title ) && (
163176 < RenderFormElement
164- form = { form }
177+ form = { asDynamicForm ( form ) }
165178 formElement = { {
166179 className : "border-secondary" ,
167180 defaultValue : formElement . title ,
@@ -176,7 +189,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
176189
177190 { "content" in formElement && Array . isArray ( formElement . content ) ? (
178191 < RenderFormElement
179- form = { form }
192+ form = { asDynamicForm ( form ) }
180193 formElement = { {
181194 className : "border-secondary" ,
182195 defaultValue : formElement . content ,
@@ -189,7 +202,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
189202 />
190203 ) : (
191204 < RenderFormElement
192- form = { form }
205+ form = { asDynamicForm ( form ) }
193206 formElement = { {
194207 className : "border-secondary" ,
195208 defaultValue : formElement . content ,
@@ -204,7 +217,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
204217
205218 { displayStyleOptions . length > 0 && (
206219 < RenderFormElement
207- form = { form }
220+ form = { asDynamicForm ( form ) }
208221 formElement = { {
209222 fieldType : "toggle-group" ,
210223 id : formElement . id ,
@@ -243,7 +256,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
243256 < div className = "mb-2 flex w-full flex-col items-center justify-start gap-3" >
244257 < div className = "flex w-full items-center justify-between gap-4" >
245258 < RenderFormElement
246- form = { form }
259+ form = { asDynamicForm ( form ) }
247260 formElement = { {
248261 fieldType : "input" ,
249262 id : formElement . id ,
@@ -254,7 +267,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
254267 />
255268
256269 < RenderFormElement
257- form = { form }
270+ form = { asDynamicForm ( form ) }
258271 formElement = { {
259272 className : "outline-secondary" ,
260273 defaultValue : formElement . name ,
@@ -269,7 +282,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
269282
270283 { ! withoutPlaceholder && (
271284 < RenderFormElement
272- form = { form }
285+ form = { asDynamicForm ( form ) }
273286 formElement = { {
274287 fieldType : "input" ,
275288 id : formElement . id ,
@@ -281,7 +294,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
281294 ) }
282295
283296 < RenderFormElement
284- form = { form }
297+ form = { asDynamicForm ( form ) }
285298 formElement = { {
286299 fieldType : "textarea" ,
287300 id : formElement . id ,
@@ -294,7 +307,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
294307 { fieldType === "input" && (
295308 < >
296309 < RenderFormElement
297- form = { form }
310+ form = { asDynamicForm ( form ) }
298311 formElement = { {
299312 fieldType : "toggle-group" ,
300313 id : formElement . id ,
@@ -307,7 +320,10 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
307320 } }
308321 />
309322
310- < IconUploadField form = { form } formElement = { formElement } />
323+ < IconUploadField
324+ form = { asDynamicForm ( form ) }
325+ formElement = { formElement }
326+ />
311327 </ >
312328 ) }
313329
@@ -317,7 +333,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
317333 Input Field Settings
318334 </ h3 >
319335 < RenderFormElement
320- form = { form }
336+ form = { asDynamicForm ( form ) }
321337 formElement = { {
322338 defaultValue :
323339 "inputName" in formElement ? formElement . inputName : undefined ,
@@ -330,7 +346,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
330346 } }
331347 />
332348 < RenderFormElement
333- form = { form }
349+ form = { asDynamicForm ( form ) }
334350 formElement = { {
335351 defaultValue :
336352 "inputPlaceholder" in formElement
@@ -344,7 +360,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
344360 } }
345361 />
346362 < RenderFormElement
347- form = { form }
363+ form = { asDynamicForm ( form ) }
348364 formElement = { {
349365 fieldType : "toggle-group" ,
350366 id : formElement . id ,
@@ -361,7 +377,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
361377 Select Field Settings
362378 </ h3 >
363379 < RenderFormElement
364- form = { form }
380+ form = { asDynamicForm ( form ) }
365381 formElement = { {
366382 defaultValue :
367383 "selectName" in formElement
@@ -376,7 +392,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
376392 } }
377393 />
378394 < RenderFormElement
379- form = { form }
395+ form = { asDynamicForm ( form ) }
380396 formElement = { {
381397 defaultValue :
382398 "selectPlaceholder" in formElement
@@ -406,7 +422,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
406422 { fieldType === "slider" && (
407423 < div className = "flex items-center justify-between gap-4" >
408424 < RenderFormElement
409- form = { form }
425+ form = { asDynamicForm ( form ) }
410426 formElement = { {
411427 defaultValue : "min" in formElement ? formElement . min : undefined ,
412428 fieldType : "input" ,
@@ -419,7 +435,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
419435 />
420436
421437 < RenderFormElement
422- form = { form }
438+ form = { asDynamicForm ( form ) }
423439 formElement = { {
424440 defaultValue : "max" in formElement ? formElement . max : undefined ,
425441 fieldType : "input" ,
@@ -432,7 +448,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
432448 />
433449
434450 < RenderFormElement
435- form = { form }
451+ form = { asDynamicForm ( form ) }
436452 formElement = { {
437453 defaultValue :
438454 "step" in formElement ? formElement . step : undefined ,
@@ -449,7 +465,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
449465
450466 { fieldType === "toggle-group" && (
451467 < RenderFormElement
452- form = { form }
468+ form = { asDynamicForm ( form ) }
453469 formElement = { {
454470 defaultValue : "type" in formElement ? formElement . type : undefined ,
455471 fieldType : "toggle-group" ,
@@ -490,7 +506,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
490506
491507 < div className = "w-full space-y-2" >
492508 < RenderFormElement
493- form = { form }
509+ form = { asDynamicForm ( form ) }
494510 formElement = { {
495511 fieldType : "input" ,
496512 id : formElement . id ,
@@ -511,7 +527,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
511527 />
512528
513529 < RenderFormElement
514- form = { form }
530+ form = { asDynamicForm ( form ) }
515531 formElement = { {
516532 fieldType : "input" ,
517533 id : formElement . id ,
@@ -524,7 +540,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
524540 />
525541
526542 < RenderFormElement
527- form = { form }
543+ form = { asDynamicForm ( form ) }
528544 formElement = { {
529545 description :
530546 "Comma separated list of MIME types or file extensions" ,
@@ -543,7 +559,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
543559 < div className = "flex w-full items-center justify-start gap-4" >
544560 < div >
545561 < RenderFormElement
546- form = { form }
562+ form = { asDynamicForm ( form ) }
547563 formElement = { {
548564 fieldType : "checkbox" ,
549565 id : formElement . id ,
@@ -555,7 +571,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
555571 </ div >
556572
557573 < RenderFormElement
558- form = { form }
574+ form = { asDynamicForm ( form ) }
559575 formElement = { {
560576 fieldType : "checkbox" ,
561577 id : formElement . id ,
@@ -568,7 +584,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
568584
569585 { displayStyleOptions . length > 0 && (
570586 < RenderFormElement
571- form = { form }
587+ form = { asDynamicForm ( form ) }
572588 formElement = { {
573589 fieldType : "toggle-group" ,
574590 id : formElement . id ,
0 commit comments