Interface FormCustomFieldDefinition<TFormValues, TCustomFieldsKey, TLabelType>

Definition for a custom field to place inside of a form dynamically

Usage in design system: In the design system for forms, extend the form's form data interface with a customFields key (can be any key name, but customFields is a good standard):

interface XFormData<TFormCustomFields = never> {
  ...
  customFields?: TFormCustomFields;
}
Copy

Then, extend the form's props with props that let you define custom fields:

interface XFormProps<TFormCustomFields = never> {
 ...
 customFields?: {
   foo?: FormCustomFieldDefinition<
     XFormData<TFormCustomFields>,
     string
   >[];
   bar?: FormCustomFieldDefinition<
     XFormData<TFormCustomFields>,
     string
   >[];
 };
 ...
 defaultValues?: XFormData<TFormCustomFields>;
 ...
 onSubmit: (data: XFormData<TFormCustomFields>) => void;
}
Copy

Notice how instead of placing the list of custom fields on the top level, they are placed under a key (foo) that represents the location in the form where they should be placed. This is to allow for multiple locations in the form where custom fields can be placed.

To make the form accept generics, you will need to change it to a non-anonymous function and add a generic type parameter with TFormCustomFields:

export const XForm = function <TFormCustomFields>({
  ...
}: XFormProps<TCustomFieldValues>): React.ReactElement { ... }
Copy

In the form component, you can render the custom fields by calling the renderFormCustomFields function.

 renderFormCustomFields(
    props.customFields?.foo,
   'customFields',
   control
 )
Copy

Note that the first parameter is the list of custom fields to render, and the second parameter is the key in the form data where the custom fields should be placed.

Usage in Blocks:

In your createXBlock function, add a generic type parameter with TFormCustomFields. This will be defined by the user when using custom fields in the block.

interface XBlockOptions<TFormCustomFields = never> {
  view? {
    ...
    formCustomFields?: {
       foo: FormCustomFieldDefinition<
         XFormData<TFormCustomFields>,
         'customFields',
         TCallback
       >[];
     };
  }
}
Copy

To translate the definition labels from TCallbacks to strings, you can use the translateFormCustomFieldLabels function (defined separately in the i18n folder).

const translatedCustomFields = useMemo(() => {
  return {
    foo: translateFormCustomFieldLabels(
      blockOptions.view?.formCustomFields?.foo,
      t
    }
  }
}, [t]);
Copy

Then, finally, you can render the custom fields in the block view by passing them to the design system prop you made earlier.

<XForm
  customFields={translatedCustomFields}
  ...
/>
Copy