feat(form) - Add transformer hook

src/components/form/fields/tests/CheckBoxField.test.tsx

@@ -8,9 +8,13 @@ import { CheckboxFieldDefault } from '@/src/components/form/fields/default/Check
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('CheckBoxField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/CountryField.test.tsx

@@ -13,7 +13,13 @@ import { JSFField, $TSFixMe } from '@/src/types/remoteFlows';
 import { CountryFieldDefault } from '@/src/components/form/fields/default/CountryFieldDefault';
 
 // Mock dependencies
-vi.mock('@/src/context');
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 type CountryFieldProps = JSFField & {
   placeholder?: string;

src/components/form/fields/tests/DatePickerField.test.tsx

@@ -8,9 +8,13 @@ import { DatePickerFieldDefault } from '@/src/components/form/fields/default/Dat
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 vi.mock('date-fns', async () => {
   const actual = await vi.importActual('date-fns');

src/components/form/fields/tests/FieldSetField.test.tsx

@@ -6,9 +6,13 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 import { FieldsetToggleButtonDefault } from '@/src/components/form/fields/default/FieldsetToggleButtonDefault';
 import { TextFieldDefault } from '@/src/components/form/fields/default/TextFieldDefault';
 
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 vi.mock('@/src/components/shared/zendesk-drawer/ZendeskTriggerButton', () => ({
   ZendeskTriggerButton: ({ zendeskId, children, className }: $TSFixMe) => (

src/components/form/fields/tests/FileUploadField.test.tsx

@@ -8,9 +8,13 @@ import { FileUploadFieldDefault } from '@/src/components/form/fields/default/Fil
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('FileUploadField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/MultiSelectField.test.tsx

@@ -10,9 +10,13 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 type MultiSelectFieldProps = React.ComponentProps<typeof MultiSelectField>;
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('MultiSelectField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/NumberField.test.tsx

@@ -10,9 +10,13 @@ import { NumberFieldDefault } from '@/src/components/form/fields/default/NumberF
 import { TextFieldDefault } from '@/src/components/form/fields/default/TextFieldDefault';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('NumberField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/RadioGroupField.test.tsx

@@ -19,9 +19,13 @@ type RadioGroupFieldProps = JSFField & {
 };
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('RadioGroupField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/SelectField.test.tsx

@@ -10,9 +10,13 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 type SelectFieldProps = React.ComponentProps<typeof SelectField>;
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('SelectField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/TelField.test.tsx

@@ -8,9 +8,13 @@ import { TelFieldDefault } from '../default/TelFieldDefault';
 import { $TSFixMe } from '@/src/types/remoteFlows';
 import { yupResolver } from '@hookform/resolvers/yup';
 
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 // Helper function to interact with Radix UI Select
 async function fillRadixSelect(labelText: string, countryName: string) {

src/components/form/fields/tests/TextAreaField.test.tsx

@@ -8,9 +8,13 @@ import { TextAreaFieldDefault } from '@/src/components/form/fields/default/TextA
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('TextAreaField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/TextField.test.tsx

@@ -8,9 +8,13 @@ import { TextFieldDefault } from '@/src/components/form/fields/default/TextField
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('TextField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/WorkScheduleField.test.tsx

@@ -12,9 +12,13 @@ import { CheckboxFieldDefault } from '@/src/components/form/fields/default/Check
 import { TextFieldDefault } from '@/src/components/form/fields/default/TextFieldDefault';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 type WorkScheduleFieldProps = JSFField & {
   name: string;

src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx

@@ -7,16 +7,20 @@ import { NumberFieldDefault } from '@/src/components/form/fields/default/NumberF
 import { TextFieldDefault } from '@/src/components/form/fields/default/TextFieldDefault';
 import { SelectFieldDefault } from '@/src/components/form/fields/default/SelectFieldDefault';
 
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(() => ({
-    components: {
-      radio: RadioGroupFieldDefault,
-      number: NumberFieldDefault,
-      text: TextFieldDefault,
-      select: SelectFieldDefault,
-    },
-  })),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(() => ({
+      components: {
+        radio: RadioGroupFieldDefault,
+        number: NumberFieldDefault,
+        text: TextFieldDefault,
+        select: SelectFieldDefault,
+      },
+    })),
+  };
+});
 
 describe('JSONSchemaForm - Conditional inputType Changes', () => {
   it('should render NumberField when field.type changes from hidden to number', async () => {

src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx

@@ -12,13 +12,17 @@ const MockStatement = ({ data }: StatementComponentProps) => (
   </div>
 );
 
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(() => ({
-    components: {
-      statement: MockStatement,
-    },
-  })),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(() => ({
+      components: {
+        statement: MockStatement,
+      },
+    })),
+  };
+});
 
 const CustomToggle = ({
   setValue,

src/components/shared/table/tests/Table.test.tsx

@@ -5,13 +5,17 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 import { TableFieldDefault } from '@/src/components/shared/table/TableFieldDefault';
 
 // Mock the context
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(() => ({
-    components: {
-      table: TableFieldDefault,
-    },
-  })),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(() => ({
+      components: {
+        table: TableFieldDefault,
+      },
+    })),
+  };
+});
 
 describe('Table Component', () => {
   it('should render table with headers and data', () => {

src/components/ui/form.tsx

@@ -11,6 +11,7 @@ import {
 
 import { cn, sanitizeHtml } from '@/src/lib/utils';
 import { Label } from '@/src/components/ui/label';
+import { useTransformer } from '@/src/context';
 
 const Form = FormProvider;
 
@@ -145,28 +146,51 @@ export function BaseFormDescription<T extends React.ElementType = 'p'>({
   id?: string;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'id'>) {
   const Component = as || 'p';
+  const transformHtmlToComponents = useTransformer();
+  // we check if children is a string, happens in 95% of the cases I believe
   if (typeof children === 'string') {
-    return (
-      <>
+    const sanitized = sanitizeHtml(children);
+    // if we have a transformer, we use it to transform the children
+    if (transformHtmlToComponents) {
+      const transformed = transformHtmlToComponents(sanitized);
+      return (
         <Component
           data-slot='form-description'
           id={id}
           className={cn('text-base-color text-xs', className)}
+          data-transformed='true'
           data-sanitized='true'
           {...props}
         >
-          <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(children) }} />{' '}
-          {helpCenter && helpCenter}
+          {transformed} {helpCenter && helpCenter}
         </Component>
-      </>
+      );
+    }
+    // if we don't have a transformer, we sanitize the children and render it as a string
+    return (
+      <Component
+        data-slot='form-description'
+        id={id}
+        className={cn('text-base-color text-xs', className)}
+        data-sanitized='true'
+        data-children-type='string'
+        {...props}
+      >
+        <span dangerouslySetInnerHTML={{ __html: sanitized }} />{' '}
+        {helpCenter && helpCenter}
+      </Component>
     );
   }
+
+  // this happens when in theory we pass a ReactNode, I don't really know if this case works in the real world
+  // I believe we added when we started but scared to remove it
   return (
     <Component
       data-slot='form-description'
       id={id}
       className={cn('text-base-color text-xs', className)}
       data-sanitized='false'
+      data-children-type='other'
       {...props}
     >
       {typeof children === 'function' ? children() : children}