From 7627cfcb8ac0767a18de780ec56096977c8e7760 Mon Sep 17 00:00:00 2001
From: Mailine Nguyen <64129348+MailineN@users.noreply.github.com>
Date: Tue, 21 Jul 2026 16:43:11 +0200
Subject: [PATCH 1/2] refactor: add a formfield component

---
 .../questionnaires/form/QuestionnaireForm.tsx | 127 +++++++-----------
 next/src/components/ui/form/FormField.tsx     |  94 +++++++++++++
 2 files changed, 145 insertions(+), 76 deletions(-)
 create mode 100644 next/src/components/ui/form/FormField.tsx

diff --git a/next/src/components/questionnaires/form/QuestionnaireForm.tsx b/next/src/components/questionnaires/form/QuestionnaireForm.tsx
index 1dd01d8c7..36e009ad1 100644
--- a/next/src/components/questionnaires/form/QuestionnaireForm.tsx
+++ b/next/src/components/questionnaires/form/QuestionnaireForm.tsx
@@ -1,11 +1,11 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useNavigate } from '@tanstack/react-router'
-import { Controller, type SubmitHandler, useForm } from 'react-hook-form'
+import { type SubmitHandler, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 
 import Checkbox from '@/components/ui/form/Checkbox'
-import Field from '@/components/ui/form/Field'
 import Form from '@/components/ui/form/Form'
+import FormField from '@/components/ui/form/FormField'
 import Input from '@/components/ui/form/Input'
 import Label from '@/components/ui/form/Label'
 import RadioGroup from '@/components/ui/form/RadioGroup'
@@ -76,31 +76,24 @@ export default function QuestionnaireForm({
       isSubmitted={isSubmitted}
       validateLabel={submitLabel}
     >
-      <Controller
-        name="title"
+      <FormField
         control={control}
-        render={({
-          field: { name, value, onChange },
-          fieldState: { invalid, isTouched, isDirty, error },
-        }) => (
-          <Field
-            dirty={isDirty}
-            error={error}
-            invalid={invalid}
-            label={t('common.title')}
-            name={name}
-            required
-            touched={isTouched}
-          >
-            <Input autoFocus value={value} onValueChange={onChange} />
-          </Field>
+        name="title"
+        label={t('common.title')}
+        required
+      >
+        {({ field: { value, onChange } }) => (
+          <Input autoFocus value={value} onValueChange={onChange} />
         )}
-      />
-      <Controller
-        name="targetModes"
+      </FormField>
+
+      <FormField
         control={control}
+        name="targetModes"
         rules={{ required: true }}
-        render={({ field, fieldState: { error } }) => (
+        noField
+      >
+        {({ field, fieldState: { error } }) => (
           <>
             <Label required>{t('questionnaire.common.targetMode')}</Label>
             <div className="flex gap-x-4">
@@ -150,68 +143,50 @@ export default function QuestionnaireForm({
             ) : null}
           </>
         )}
-      />
+      </FormField>
+
       <div>
-        <Controller
-          name="flowLogic"
+        <FormField
           control={control}
+          name="flowLogic"
+          label={t('questionnaire.common.dynamicField')}
+          required
           rules={{ required: true }}
-          render={({
-            field: { name, value, onBlur, onChange },
-            fieldState: { invalid, isTouched, isDirty, error },
-          }) => (
-            <Field
-              dirty={isDirty}
-              error={error}
-              invalid={invalid}
-              label={t('questionnaire.common.dynamicField')}
-              name={name}
-              required
-              touched={isTouched}
-            >
-              <RadioGroup
-                options={[
-                  { label: 'Filtre', value: FlowLogics.Filter },
-                  { label: 'Redirection', value: FlowLogics.Redirection },
-                ]}
-                value={value}
-                onBlur={onBlur}
-                onValueChange={onChange}
-              />
-            </Field>
+        >
+          {({ field: { value, onBlur, onChange } }) => (
+            <RadioGroup
+              options={[
+                { label: 'Filtre', value: FlowLogics.Filter },
+                { label: 'Redirection', value: FlowLogics.Redirection },
+              ]}
+              value={value}
+              onBlur={onBlur}
+              onValueChange={onChange}
+            />
           )}
-        />
+        </FormField>
       </div>
+
       <div>
-        <Controller
-          name="formulasLanguage"
+        <FormField
           control={control}
+          name="formulasLanguage"
+          label={t('questionnaire.common.formulaField')}
+          required
           rules={{ required: true }}
-          render={({
-            field: { name, value, onBlur, onChange },
-            fieldState: { invalid, isTouched, isDirty, error },
-          }) => (
-            <Field
-              dirty={isDirty}
-              error={error}
-              invalid={invalid}
-              label={t('questionnaire.common.formulaField')}
-              name={name}
-              required
-              touched={isTouched}
-            >
-              <RadioGroup
-                options={[
-                  { label: 'VTL', value: FormulasLanguages.VTL },
-                  { label: 'XPath', value: FormulasLanguages.XPath },
-                ]}
-                value={value}
-                onBlur={onBlur}
-                onValueChange={onChange}
-              />
-            </Field>
+        >
+          {({ field: { value, onBlur, onChange } }) => (
+            <RadioGroup
+              options={[
+                { label: 'VTL', value: FormulasLanguages.VTL },
+                { label: 'XPath', value: FormulasLanguages.XPath },
+              ]}
+              value={value}
+              onBlur={onBlur}
+              onValueChange={onChange}
+            />
           )}
-        />
+        </FormField>
       </div>
     </Form>
   )
diff --git a/next/src/components/ui/form/FormField.tsx b/next/src/components/ui/form/FormField.tsx
new file mode 100644
index 000000000..60d699ca8
--- /dev/null
+++ b/next/src/components/ui/form/FormField.tsx
@@ -0,0 +1,94 @@
+import {
+  type Control,
+  Controller,
+  type ControllerRenderProps,
+  type FieldPath,
+  type FieldPathValue,
+  type FieldValues,
+  type RegisterOptions,
+} from 'react-hook-form'
+
+import Field, { type Props as FieldProps } from './Field'
+
+type RenderProps<T extends FieldValues, N extends FieldPath<T>> = {
+  field: ControllerRenderProps<T, N>
+  fieldState: {
+    invalid: boolean
+    isDirty: boolean
+    isTouched: boolean
+    error?: FieldProps['error']
+  }
+}
+
+type FormFieldProps<T extends FieldValues, N extends FieldPath<T>> = {
+  control: Control<T>
+  name: N
+  defaultValue?: FieldPathValue<T, N>
+  label?: FieldProps['label']
+  description?: FieldProps['description']
+  required?: boolean
+  disabled?: boolean
+  rules?: Omit<
+    RegisterOptions<T, N>,
+    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
+  >
+  noField?: boolean
+  /** Input component such as Select, NumberFieldm etc.. */
+  children: (props: RenderProps<T, N>) => React.ReactNode
+}
+
+/**
+ * A component that encapsulate both form and controller layout
+ */
+export default function FormField<
+  T extends FieldValues,
+  N extends FieldPath<T>,
+>({
+  control,
+  name,
+  defaultValue,
+  label,
+  description,
+  required = false,
+  disabled = false,
+  rules,
+  noField = false,
+  children,
+}: Readonly<FormFieldProps<T, N>>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue={defaultValue}
+      rules={rules}
+      render={({
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+      }) => {
+        const renderProps: RenderProps<T, N> = {
+          field,
+          fieldState: { invalid, isTouched, isDirty, error },
+        }
+        // VTL editor field do not have <Field>
+        if (noField) {
+          return <>{children(renderProps)}</>
+        }
+        return (
+          <Field
+            dirty={isDirty}
+            error={error}
+            invalid={invalid}
+            label={label}
+            name={field.name}
+            required={required}
+            touched={isTouched}
+            description={description}
+            disabled={disabled}
+          >
+            {children(renderProps)}
+          </Field>
+        )
+      }}
+    />
+  )
+}

From 7af6922635eca44ddd2b9ba4b43fdfefb09407b1 Mon Sep 17 00:00:00 2001
From: Mailine Nguyen <64129348+MailineN@users.noreply.github.com>
Date: Tue, 21 Jul 2026 16:50:52 +0200
Subject: [PATCH 2/2] feat: add variable form

---
 .../variables/form/VariableForm.tsx           | 429 +++++++-----------
 1 file changed, 166 insertions(+), 263 deletions(-)

diff --git a/next/src/components/variables/form/VariableForm.tsx b/next/src/components/variables/form/VariableForm.tsx
index 056830904..822c43525 100644
--- a/next/src/components/variables/form/VariableForm.tsx
+++ b/next/src/components/variables/form/VariableForm.tsx
@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useNavigate } from '@tanstack/react-router'
 import { t } from 'i18next'
-import { Controller, type SubmitHandler, useForm } from 'react-hook-form'
+import { type SubmitHandler, useForm } from 'react-hook-form'
 
-import Field from '@/components/ui/form/Field'
 import Form from '@/components/ui/form/Form'
+import FormField from '@/components/ui/form/FormField'
 import Input from '@/components/ui/form/Input'
 import NumberField from '@/components/ui/form/NumberField'
 import RadioGroup from '@/components/ui/form/RadioGroup'
@@ -106,120 +106,86 @@ export default function VariableForm({
       validateLabel={submitLabel}
     >
       <div>
-        <Controller
-          name="type"
+        <FormField
           control={control}
+          name="type"
+          label={t('variable.type.label')}
+          required
           rules={{ required: true }}
-          render={({
-            field: { name, value, onBlur, onChange },
-            fieldState: { invalid, isTouched, isDirty, error },
-          }) => (
-            <Field
-              dirty={isDirty}
-              error={error}
-              invalid={invalid}
-              label={t('variable.type.label')}
-              name={name}
-              required
-              touched={isTouched}
-            >
-              <RadioGroup
-                options={[
-                  {
-                    label: t('variable.type.external'),
-                    value: VariableType.External,
-                  },
-                  {
-                    label: t('variable.type.calculated'),
-                    value: VariableType.Calculated,
-                  },
-                ]}
-                value={value}
-                onBlur={onBlur}
-                onValueChange={onChange}
-              />
-            </Field>
+        >
+          {({ field: { value, onBlur, onChange } }) => (
+            <RadioGroup
+              options={[
+                {
+                  label: t('variable.type.external'),
+                  value: VariableType.External,
+                },
+                {
+                  label: t('variable.type.calculated'),
+                  value: VariableType.Calculated,
+                },
+              ]}
+              value={value}
+              onBlur={onBlur}
+              onValueChange={onChange}
+            />
           )}
-        />
+        </FormField>
       </div>
+
       {selectedType === VariableType.External ? (
-        <Controller
-          name="isDeletedOnReset"
+        <FormField
           control={control}
-          render={({
-            field: { ref, name, value, onBlur, onChange },
-            fieldState: { invalid, isTouched, isDirty, error },
-          }) => (
-            <Field
-              dirty={isDirty}
-              error={error}
-              invalid={invalid}
-              label={t('variable.isDeletedOnReset')}
-              name={name}
-              touched={isTouched}
-            >
-              <Switch
-                checked={value}
-                inputRef={ref}
-                onBlur={onBlur}
-                onCheckedChange={onChange}
-              />
-            </Field>
+          name="isDeletedOnReset"
+          label={t('variable.isDeletedOnReset')}
+        >
+          {({ field: { ref, value, onBlur, onChange } }) => (
+            <Switch
+              checked={value}
+              inputRef={ref}
+              onBlur={onBlur}
+              onCheckedChange={onChange}
+            />
           )}
-        />
+        </FormField>
       ) : null}
-      <Controller
-        name="name"
+
+      <FormField
         control={control}
-        render={({
-          field: { name, value, onChange },
-          fieldState: { invalid, isTouched, isDirty, error },
-        }) => (
-          <Field
-            dirty={isDirty}
-            error={error}
-            invalid={invalid}
-            label={t('variable.name')}
-            name={name}
-            required
-            touched={isTouched}
-          >
-            <Input
-              placeholder={t('variable.form.name.placeholder')}
-              value={value}
-              onValueChange={(v) => onChange(convertToValidName(v))}
-            />
-          </Field>
+        name="name"
+        label={t('variable.name')}
+        required
+      >
+        {({ field: { value, onChange } }) => (
+          <Input
+            placeholder={t('variable.form.name.placeholder')}
+            value={value}
+            onValueChange={(v) => onChange(convertToValidName(v))}
+          />
         )}
-      />
-      <Controller
-        name="description"
+      </FormField>
+
+      <FormField
         control={control}
-        render={({
-          field: { name, value, onChange },
-          fieldState: { invalid, isTouched, isDirty, error },
-        }) => (
-          <Field
-            dirty={isDirty}
-            error={error}
-            invalid={invalid}
-            label={t('variable.description')}
-            name={name}
-            required
-            touched={isTouched}
-          >
-            <Input value={value} onValueChange={onChange} />
-          </Field>
+        name="description"
+        label={t('variable.description')}
+        required
+      >
+        {({ field: { value, onChange } }) => (
+          <Input value={value} onValueChange={onChange} />
         )}
-      />
+      </FormField>
+
       {selectedType === VariableType.Calculated ? (
-        <Controller
-          name="formula"
+        <FormField
           control={control}
+          name="formula"
           rules={{ required: true }}
-          render={({
+          noField
+        >
+          {({
             field: { name, value, onChange },
-            fieldState: { invalid, isTouched, isDirty, error },
+            fieldState: { isDirty, error, invalid, isTouched },
           }) => (
             <VTLEditor
               dirty={isDirty}
@@ -235,198 +201,135 @@ export default function VariableForm({
               value={value}
             />
           )}
-        />
+        </FormField>
       ) : null}
-      <Controller
-        name="scope"
+
+      <FormField
         control={control}
+        name="scope"
+        label={t('variable.scope')}
+        required
         rules={{ required: true }}
-        render={({
-          field: { name, value, onChange },
-          fieldState: { invalid, isTouched, isDirty, error },
-        }) => (
-          <Field
-            dirty={isDirty}
-            error={error}
-            invalid={invalid}
-            label={t('variable.scope')}
-            name={name}
-            required
-            touched={isTouched}
-          >
-            <Select<string>
-              options={[
-                { label: t('common.questionnaire'), value: '' },
-                ...Array.from(scopes ?? new Map<string, string>()).map(
-                  ([id, name]) => ({
-                    label: name,
-                    value: id,
-                  }),
-                ),
-              ]}
-              value={value}
-              onChange={onChange}
-            />
-          </Field>
+      >
+        {({ field: { value, onChange } }) => (
+          <Select<string>
+            options={[
+              { label: t('common.questionnaire'), value: '' },
+              ...Array.from(scopes ?? new Map<string, string>()).map(
+                ([id, name]) => ({
+                  label: name,
+                  value: id,
+                }),
+              ),
+            ]}
+            value={value}
+            onChange={onChange}
+          />
         )}
-      />
-      <Controller
-        name="datatype.typeName"
+      </FormField>
+
+      <FormField
         control={control}
+        name="datatype.typeName"
+        label={t('variable.datatype.label')}
+        required
         rules={{ required: true }}
-        render={({
-          field: { name, value, onChange },
-          fieldState: { invalid, isTouched, isDirty, error },
-        }) => (
-          <Field
-            dirty={isDirty}
-            error={error}
-            invalid={invalid}
-            label={t('variable.datatype.label')}
-            name={name}
-            required
-            touched={isTouched}
-          >
-            <Select<DatatypeType>
-              options={datatypeTypeNameOptions}
-              value={value}
-              onChange={onChange}
-              disabled={isDatatypeTypeNameDisabled}
-            />
-          </Field>
+      >
+        {({ field: { value, onChange } }) => (
+          <Select<DatatypeType>
+            options={datatypeTypeNameOptions}
+            value={value}
+            onChange={onChange}
+            disabled={isDatatypeTypeNameDisabled}
+          />
         )}
-      />
+      </FormField>
+
       {selectedTypeName === DatatypeType.Date ? (
-        <Controller
-          name="datatype.format"
+        <FormField
           control={control}
+          name="datatype.format"
+          label={t('variable.format')}
+          required
           rules={{ required: true }}
-          render={({
-            field: { name, value, onChange },
-            fieldState: { invalid, isTouched, isDirty, error },
-          }) => (
-            <Field
-              dirty={isDirty}
-              error={error}
-              invalid={invalid}
-              label={t('variable.format')}
-              name={name}
-              required
-              touched={isTouched}
-            >
-              <Select<DateFormat>
-                options={dateFormatOptions}
-                value={value as DateFormat | undefined}
-                onChange={onChange}
-              />
-            </Field>
+        >
+          {({ field: { value, onChange } }) => (
+            <Select<DateFormat>
+              options={dateFormatOptions}
+              value={value as DateFormat | undefined}
+              onChange={onChange}
+            />
           )}
-        />
+        </FormField>
       ) : null}
+
       {selectedTypeName === DatatypeType.Numeric ? (
         <>
-          <Controller
-            name="datatype.minimum"
+          <FormField
             control={control}
+            name="datatype.minimum"
+            label={t('variable.minimum')}
+            required
             rules={{ required: true }}
-            render={({
-              field: { ref, name, value, onChange },
-              fieldState: { invalid, isTouched, isDirty, error },
-            }) => (
-              <Field
-                dirty={isDirty}
-                error={error}
-                invalid={invalid}
-                label={t('variable.minimum')}
-                name={name}
-                required
-                touched={isTouched}
-              >
-                <NumberField
-                  value={value as number | undefined}
-                  inputRef={ref}
-                  onValueChange={onChange}
-                />
-              </Field>
+          >
+            {({ field: { ref, value, onChange } }) => (
+              <NumberField
+                value={value as number | undefined}
+                inputRef={ref}
+                onValueChange={onChange}
+              />
             )}
-          />
-          <Controller
-            name="datatype.maximum"
+          </FormField>
+
+          <FormField
             control={control}
+            name="datatype.maximum"
+            label={t('variable.maximum')}
+            required
             rules={{ required: true }}
-            render={({
-              field: { ref, name, value, onChange },
-              fieldState: { invalid, isTouched, isDirty, error },
-            }) => (
-              <Field
-                dirty={isDirty}
-                error={error}
-                invalid={invalid}
-                label={t('variable.maximum')}
-                name={name}
-                required
-                touched={isTouched}
-              >
-                <NumberField
-                  value={value as number | undefined}
-                  inputRef={ref}
-                  onValueChange={onChange}
-                />
-              </Field>
+          >
+            {({ field: { ref, value, onChange } }) => (
+              <NumberField
+                value={value as number | undefined}
+                inputRef={ref}
+                onValueChange={onChange}
+              />
             )}
-          />
-          <Controller
-            name="datatype.decimals"
+          </FormField>
+
+          <FormField
             control={control}
+            name="datatype.decimals"
             defaultValue={0}
-            render={({
-              field: { ref, name, value, onChange },
-              fieldState: { invalid, isTouched, isDirty, error },
-            }) => (
-              <Field
-                dirty={isDirty}
-                error={error}
-                invalid={invalid}
-                label={t('variable.precision')}
-                name={name}
-                touched={isTouched}
-              >
-                <NumberField
-                  value={value}
-                  inputRef={ref}
-                  onValueChange={onChange}
-                />
-              </Field>
+            label={t('variable.precision')}
+          >
+            {({ field: { ref, value, onChange } }) => (
+              <NumberField
+                value={value}
+                inputRef={ref}
+                onValueChange={onChange}
+              />
             )}
-          />
+          </FormField>
         </>
       ) : null}
+
       {selectedTypeName === DatatypeType.Text ? (
-        <Controller
-          name="datatype.maxLength"
+        <FormField
           control={control}
+          name="datatype.maxLength"
           defaultValue={249}
-          render={({
-            field: { ref, name, value, onChange },
-            fieldState: { invalid, isTouched, isDirty, error },
-          }) => (
-            <Field
-              dirty={isDirty}
-              error={error}
-              invalid={invalid}
-              label={t('variable.maxLength')}
-              name={name}
-              required
-              touched={isTouched}
-            >
-              <NumberField
-                value={value}
-                inputRef={ref}
-                onValueChange={onChange}
-              />
-            </Field>
+          label={t('variable.maxLength')}
+          required
+        >
+          {({ field: { ref, value, onChange } }) => (
+            <NumberField
+              value={value}
+              inputRef={ref}
+              onValueChange={onChange}
+            />
           )}
-        />
+        </FormField>
       ) : null}
     </Form>
   )