From 14d839fe51f0f676b5a0e713c7053a534c863e4f Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 12:48:39 +0200 Subject: [PATCH 01/17] first implementation --- example/src/Onboarding.tsx | 2 +- src/RemoteFlowsProvider.tsx | 19 ++- src/components/form/fields/CheckBoxField.tsx | 4 +- src/components/form/fields/CountryField.tsx | 4 +- .../form/fields/DatePickerField.tsx | 4 +- src/components/form/fields/EmailField.tsx | 6 +- src/components/form/fields/FieldSetField.tsx | 13 +- .../form/fields/FileUploadField.tsx | 4 +- .../form/fields/MultiSelectField.tsx | 4 +- src/components/form/fields/NumberField.tsx | 6 +- .../form/fields/RadioGroupField.tsx | 4 +- src/components/form/fields/SelectField.tsx | 4 +- src/components/form/fields/TelField.tsx | 10 +- src/components/form/fields/TextAreaField.tsx | 4 +- src/components/form/fields/TextField.tsx | 4 +- .../form/fields/WorkScheduleField.tsx | 4 +- .../form/fields/tests/TelField.test.tsx | 10 +- src/components/ui/form.tsx | 19 +++ src/components/ui/tests/form.test.tsx | 128 +++++++++++++++++- src/context.ts | 9 +- src/index.tsx | 1 + src/lib/transformDescription.tsx | 28 ++++ src/types/fields.ts | 48 ++++++- src/types/remoteFlows.ts | 26 ++++ 24 files changed, 330 insertions(+), 35 deletions(-) create mode 100644 src/lib/transformDescription.tsx diff --git a/example/src/Onboarding.tsx b/example/src/Onboarding.tsx index 76a3a3553..fa68e73a4 100644 --- a/example/src/Onboarding.tsx +++ b/example/src/Onboarding.tsx @@ -374,7 +374,7 @@ const OnboardingWithProps = ({ }, DEU: { // Germany - contract_details: 1, + contract_details: 4, }, BLR: { // Belarus diff --git a/src/RemoteFlowsProvider.tsx b/src/RemoteFlowsProvider.tsx index 5a3ca8c12..f32cf0cc3 100644 --- a/src/RemoteFlowsProvider.tsx +++ b/src/RemoteFlowsProvider.tsx @@ -35,8 +35,10 @@ function RemoteFlowContextWrapper({ export function FormFieldsProvider({ children, components: userComponents = {}, + transformHtmlToComponents, }: PropsWithChildren<{ components?: Components; + transformHtmlToComponents?: (htmlContent: string) => React.ReactNode; }>) { // Merge user components with lazy defaults // User-provided components take precedence, lazy defaults are only used as fallback @@ -48,8 +50,17 @@ export function FormFieldsProvider({ } as Components; }, [userComponents]); + // Memoize the context value to avoid unnecessary re-renders + const contextValue = useMemo( + () => ({ + components: resolvedComponents, + transformHtmlToComponents, + }), + [resolvedComponents, transformHtmlToComponents], + ); + return ( - + } delay={200} /> @@ -67,6 +78,7 @@ export function RemoteFlows({ auth, children, components, + transformHtmlToComponents, theme, proxy, environment, @@ -89,7 +101,10 @@ export function RemoteFlows({ client={remoteApiClient} > - + { + const customEmailFieldProps = { ...props, transformHtml }; return ( ); }} diff --git a/src/components/form/fields/FieldSetField.tsx b/src/components/form/fields/FieldSetField.tsx index 35e4e5d7f..12cdf9dea 100644 --- a/src/components/form/fields/FieldSetField.tsx +++ b/src/components/form/fields/FieldSetField.tsx @@ -2,16 +2,17 @@ import { useFormContext } from 'react-hook-form'; import { Fragment, useEffect, useRef } from 'react'; import omit from 'lodash.omit'; import { baseFields } from '@/src/components/form/fields/baseFields'; -import { cn, sanitizeHtml } from '@/src/lib/utils'; +import { cn } from '@/src/lib/utils'; import { $TSFixMe, Components } from '@/src/types/remoteFlows'; import { Statement } from '@/src/components/form/Statement'; -import { useFormFields } from '@/src/context'; +import { useFormFields, useTransformer } from '@/src/context'; import { ZendeskTriggerButton } from '@/src/components/shared/zendesk-drawer/ZendeskTriggerButton'; import { FieldsetToggleButtonDefault } from '@/src/components/form/fields/default/FieldsetToggleButtonDefault'; import { BaseTypes, SupportedTypes } from './types'; import { StatementComponentProps } from '@/src/types/fields'; import { checkFieldHasForcedValue } from '@/src/components/form/utils'; import { ForcedValueField } from '@/src/components/form/fields/ForcedValueField'; +import { transformDescription } from '@/src/lib/transformDescription'; type FieldBase = { label: string; @@ -84,6 +85,7 @@ export function FieldSetField({ const { helpCenter } = meta || {}; const { watch, setValue, trigger, formState } = useFormContext(); const { components: formComponents } = useFormFields(); + const transformHtml = useTransformer(); // Get expanded state from form state if stateField is provided const stateField = features?.toggle?.stateField; @@ -210,10 +212,9 @@ export function FieldSetField({ {isExpanded && (
{description ? ( -
+
+ {transformDescription(description, transformHtml)} +
) : null}
{fields.map((field: $TSFixMe) => { diff --git a/src/components/form/fields/FileUploadField.tsx b/src/components/form/fields/FileUploadField.tsx index 6aa7ed16a..7f361137a 100644 --- a/src/components/form/fields/FileUploadField.tsx +++ b/src/components/form/fields/FileUploadField.tsx @@ -1,4 +1,4 @@ -import { useFormFields } from '@/src/context'; +import { useFormFields, useTransformer } from '@/src/context'; import { Components, JSFField } from '@/src/types/remoteFlows'; import { ControllerRenderProps, @@ -47,6 +47,7 @@ export function FileUploadField({ ...rest }: FileUploadFieldProps) { const { components } = useFormFields(); + const transformHtml = useTransformer(); const { control, setError, clearErrors } = useFormContext(); const handleOnChange = async ( @@ -81,6 +82,7 @@ export function FileUploadField({ multiple, accept, maxFileSize: maxSize, + transformHtml, ...rest, }; diff --git a/src/components/form/fields/MultiSelectField.tsx b/src/components/form/fields/MultiSelectField.tsx index 01f692364..ff2593ab6 100644 --- a/src/components/form/fields/MultiSelectField.tsx +++ b/src/components/form/fields/MultiSelectField.tsx @@ -1,4 +1,4 @@ -import { useFormFields } from '@/src/context'; +import { useFormFields, useTransformer } from '@/src/context'; import { Components, JSFField, $TSFixMe } from '@/src/types/remoteFlows'; import { useFormContext } from 'react-hook-form'; import { FormField } from '../../ui/form'; @@ -23,6 +23,7 @@ export function MultiSelectField({ }: MultiSelectFieldProps) { const { control } = useFormContext(); const { components } = useFormFields(); + const transformHtml = useTransformer(); return ( { + const customNumberFieldProps = { ...props, transformHtml }; return ( ); }} diff --git a/src/components/form/fields/RadioGroupField.tsx b/src/components/form/fields/RadioGroupField.tsx index 964485609..e45fca829 100644 --- a/src/components/form/fields/RadioGroupField.tsx +++ b/src/components/form/fields/RadioGroupField.tsx @@ -1,5 +1,5 @@ import { FormField } from '@/src/components/ui/form'; -import { useFormFields } from '@/src/context'; +import { useFormFields, useTransformer } from '@/src/context'; import { Components, JSFField } from '@/src/types/remoteFlows'; import { useFormContext } from 'react-hook-form'; @@ -19,6 +19,7 @@ export function RadioGroupField({ ...rest }: RadioGroupFieldProps) { const { components } = useFormFields(); + const transformHtml = useTransformer(); const { control } = useFormContext(); return ( & { +export type TelFieldProps = Omit & { onChangeCountryCode?: (newCountry: Country) => void; onChangePhoneNumber?: (event: React.ChangeEvent) => void; component?: Components['tel']; @@ -295,8 +295,9 @@ export function TelField({ onChangePhoneNumber, component, ...rest -}: TelFieldDataProps) { +}: TelFieldProps) { const { components } = useFormFields(); + const transformHtml = useTransformer(); const { control } = useFormContext(); return ( @@ -313,6 +314,7 @@ export function TelField({ name, description, label, + transformHtml, ...rest, }; diff --git a/src/components/form/fields/TextAreaField.tsx b/src/components/form/fields/TextAreaField.tsx index df82ff4d1..bafa61e75 100644 --- a/src/components/form/fields/TextAreaField.tsx +++ b/src/components/form/fields/TextAreaField.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useFormFields } from '@/src/context'; +import { useFormFields, useTransformer } from '@/src/context'; import { Components, JSFField } from '@/src/types/remoteFlows'; import { useFormContext } from 'react-hook-form'; import { FormField } from '@/src/components/ui/form'; @@ -20,6 +20,7 @@ export function TextAreaField({ ...rest }: TextAreaFieldProps) { const { components } = useFormFields(); + const transformHtml = useTransformer(); const { control } = useFormContext(); return ( { +const createTelSchema = (options: TelFieldProps['options']) => { return string() .required('Phone number is required') .max(30, 'Must be at most 30 characters') @@ -96,7 +96,7 @@ const createTelSchema = (options: TelFieldDataProps['options']) => { }; describe('TelField Component - Split UI', () => { - const defaultProps: TelFieldDataProps = { + const defaultProps: TelFieldProps = { name: 'phoneNumber', label: 'Phone Number', description: 'Enter your phone number', @@ -113,7 +113,7 @@ describe('TelField Component - Split UI', () => { }; const renderWithFormContext = ( - props: TelFieldDataProps, + props: TelFieldProps, defaultValues?: $TSFixMe, ) => { const TestComponent = () => { diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx index e485d3814..647772a94 100644 --- a/src/components/ui/form.tsx +++ b/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; @@ -144,8 +145,26 @@ function FormDescription({ } & Omit, 'children' | 'className'>) { const { formDescriptionId } = useFormField(); const Component = as || 'p'; + const transformHtmlToComponents = useTransformer(); if (typeof children === 'string') { + // If custom transformer provided, use it (transformer receives raw unsanitized HTML) + if (transformHtmlToComponents) { + const transformed = transformHtmlToComponents(children); + return ( + + {transformed} {helpCenter && helpCenter} + + ); + } + + // Fallback to existing sanitization (when no transformer provided) return ( <> { const TestComponent = () => { @@ -17,6 +19,26 @@ const wrapper = ({ children }: PropsWithChildren) => { ); }; +const createWrapperWithTransformer = ( + transformHtml?: (html: string) => ReactNode, +) => { + return ({ children }: PropsWithChildren) => { + const methods = useForm(); + return ( + + + {children} + + + ); + }; +}; + describe('Form', () => { describe('FormDescription', () => { it('should render the description text when passing a normal string', () => { @@ -100,4 +122,108 @@ describe('Form', () => { expect(linkWithRel.getAttribute('rel')).toBe('noreferrer noopener'); }); }); + + describe('FormDescription with HTML transformer', () => { + it('should use the custom transformer when provided', () => { + const customTransformer = (html: string) => { + if (html.includes('')) { + return Important text; + } + return {html}; + }; + + render( + {'Important text'}, + { + wrapper: createWrapperWithTransformer(customTransformer), + }, + ); + + expect(screen.getByTestId('custom-bold')).toBeInTheDocument(); + expect(screen.getByTestId('custom-bold').textContent).toBe( + 'Important text', + ); + }); + + it('should transform complex HTML with details element (Accordion pattern)', () => { + const accordionTransformer = (html: string) => { + if (html.includes('data-component="Accordion"')) { + return ( +
+
Accordion Title
+
Accordion Content
+
+ ); + } + return ; + }; + + render( + + { + '
Title

Content

' + } + , + { + wrapper: createWrapperWithTransformer(accordionTransformer), + }, + ); + + expect(screen.getByTestId('custom-accordion')).toBeInTheDocument(); + expect(screen.getByTestId('accordion-summary')).toBeInTheDocument(); + expect(screen.getByTestId('accordion-content')).toBeInTheDocument(); + }); + + it('should not invoke transformer for non-string children', () => { + const transformerSpy = vi.fn((html: string) => html); + + const CustomComponent = () => ( + Custom React Component + ); + + render( + + + , + { + wrapper: createWrapperWithTransformer(transformerSpy), + }, + ); + + expect(transformerSpy).not.toHaveBeenCalled(); + expect(screen.getByTestId('custom-component')).toBeInTheDocument(); + }); + + it('should pass raw unsanitized HTML to transformer', () => { + let receivedHtml = ''; + const capturingTransformer = (html: string) => { + receivedHtml = html; + return
{html}
; + }; + + const rawHtml = '

Content

'; + render({rawHtml}, { + wrapper: createWrapperWithTransformer(capturingTransformer), + }); + + expect(receivedHtml).toBe(rawHtml); + expect(screen.getByTestId('captured')).toBeInTheDocument(); + }); + + it('should sanitize dangerous HTML when no transformer is provided', () => { + render( + + { + '

Safe content

' + } + , + { + wrapper: createWrapperWithTransformer(undefined), + }, + ); + + expect(screen.queryByText('alert("xss")')).not.toBeInTheDocument(); + expect(screen.getByTestId('safe')).toBeInTheDocument(); + }); + }); }); diff --git a/src/context.ts b/src/context.ts index 9bbd9c533..9e173e15a 100644 --- a/src/context.ts +++ b/src/context.ts @@ -1,9 +1,10 @@ import { Client } from '@/src/client/client'; -import { createContext, useContext } from 'react'; +import { createContext, useContext, ReactNode } from 'react'; import { Components } from './types/remoteFlows'; export const FormFieldsContext = createContext<{ components: Components; + transformHtmlToComponents?: (htmlContent: string) => ReactNode; } | null>(null); export const useFormFields = () => { @@ -17,6 +18,12 @@ export const useFormFields = () => { }; }; +// Internal hook for accessing transformer (used during field processing and in FormDescription/FieldSetField) +export const useTransformer = () => { + const context = useContext(FormFieldsContext); + return context?.transformHtmlToComponents; +}; + export const RemoteFlowContext = createContext<{ client: Client | null }>({ client: null, }); diff --git a/src/index.tsx b/src/index.tsx index d81a72020..d68681eb6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -138,6 +138,7 @@ export type { WorkScheduleComponentProps, PricingPlanComponentProps, PricingPlanDataProps, + TelFieldComponentProps, } from '@/src/types/fields'; export type { diff --git a/src/lib/transformDescription.tsx b/src/lib/transformDescription.tsx new file mode 100644 index 000000000..81339e18a --- /dev/null +++ b/src/lib/transformDescription.tsx @@ -0,0 +1,28 @@ +import { ReactNode } from 'react'; +import { sanitizeHtml } from './utils'; + +/** + * INTERNAL helper function to transform HTML descriptions into React components. + * Used internally by FormDescription and FieldSetField. + * + * NOT EXPORTED - Partners should implement their own version if needed. + * This allows partners full control over HTML handling decisions. + * + * @param description - The HTML description string + * @param transformer - Optional transformer function from context + * @returns React elements or sanitized HTML + * + * @internal + */ +export function transformDescription( + description: string, + transformer?: (html: string) => ReactNode, +): ReactNode { + if (transformer) { + return transformer(description); + } + // Fallback to sanitized HTML when no transformer provided + return ( + + ); +} diff --git a/src/types/fields.ts b/src/types/fields.ts index ef0567ac7..9316dabbf 100644 --- a/src/types/fields.ts +++ b/src/types/fields.ts @@ -1,5 +1,4 @@ import { FieldFileDataProps } from '@/src/components/form/fields/FileUploadField'; -import { TelFieldDataProps } from '@/src/components/form/fields/TelField'; import { DailySchedule } from '@/src/components/form/fields/workScheduleUtils'; import { JSFField } from '@/src/types/remoteFlows'; import { @@ -61,6 +60,28 @@ export type FieldDataProps = Partial & { meta?: { helpCenter?: HelpCenterDataProps; }; + /** + * Optional HTML transformer function passed from RemoteFlows context. + * Use this in custom field components to transform HTML descriptions into React components. + * @example + * ```tsx + * const CustomInput = ({ fieldData }: FieldComponentProps) => { + * const renderDescription = (desc: string) => { + * if (fieldData.transformHtml) { + * return fieldData.transformHtml(desc); + * } + * return
{desc}
; + * }; + * return ( + *
+ * + * {fieldData.description && renderDescription(fieldData.description)} + *
+ * ); + * }; + * ``` + */ + transformHtml?: (html: string) => React.ReactNode; }; export type FileComponentProps = FieldComponentProps & { @@ -144,6 +165,31 @@ export type PricingPlanComponentProps = Omit< fieldData: PricingPlanDataProps; }; +export type TelFieldDataProps = Omit & { + options: { + value: string; + label: string; + meta: { + countryCode: string; + }; + pattern: string; + }[]; + currentCountry?: { + name: string; + dialCode: string; + pattern: string; + areaCodes?: string[]; + }; + nationalPhoneNumber?: string; + onChangeCountryCode?: (newCountry: { + name: string; + dialCode: string; + pattern: string; + areaCodes?: string[]; + }) => void; + onChangePhoneNumber?: (event: React.ChangeEvent) => void; +}; + export type TelFieldComponentProps = Omit & { fieldData: TelFieldDataProps; }; diff --git a/src/types/remoteFlows.ts b/src/types/remoteFlows.ts index b69656571..2fbc4bc03 100644 --- a/src/types/remoteFlows.ts +++ b/src/types/remoteFlows.ts @@ -216,6 +216,32 @@ export type RemoteFlowsSDKProps = Omit & { * @default undefined (credentials not included) */ credentials?: RequestCredentials; + /** + * Optional function to transform HTML strings into React components. + * Allows partners to replace specific HTML patterns (e.g.,
) + * with custom React components. + * + * @param htmlContent - The raw HTML string to transform (unsanitized) + * @returns React elements or the original HTML + * + * @remarks + * Security: This function receives UNSANITIZED HTML. If you're using html-react-parser, + * note that it does NOT sanitize HTML by default. You are responsible for sanitizing + * untrusted HTML before parsing. Consider using DOMPurify or sanitize-html. + * + * @example + * ```tsx + * import parse, { domToReact } from 'html-react-parser'; + * import DOMPurify from 'dompurify'; + * + * function transformHtmlToComponents(htmlContent: string) { + * // Sanitize first (recommended) + * const clean = DOMPurify.sanitize(htmlContent); + * return parse(clean, parseOptions); + * } + * ``` + */ + transformHtmlToComponents?: (htmlContent: string) => ReactNode; }; // oxlint-disable-next-line typescript/no-explicit-any From df543178ba8097c58ce30014b8d7ac4e8a1bb476 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 12:54:05 +0200 Subject: [PATCH 02/17] fix tests --- src/components/form/fields/tests/CheckBoxField.test.tsx | 1 + src/components/form/fields/tests/DatePickerField.test.tsx | 1 + src/components/form/fields/tests/FieldSetField.test.tsx | 1 + src/components/form/fields/tests/FileUploadField.test.tsx | 1 + src/components/form/fields/tests/MultiSelectField.test.tsx | 1 + src/components/form/fields/tests/NumberField.test.tsx | 1 + src/components/form/fields/tests/RadioGroupField.test.tsx | 1 + src/components/form/fields/tests/SelectField.test.tsx | 1 + src/components/form/fields/tests/TelField.test.tsx | 1 + src/components/form/fields/tests/TextAreaField.test.tsx | 1 + src/components/form/fields/tests/TextField.test.tsx | 1 + src/components/form/fields/tests/WorkScheduleField.test.tsx | 1 + .../form/tests/JSONSchemaFormConditionalInputType.test.tsx | 1 + src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx | 1 + src/flows/Onboarding/tests/OnboardingBack.test.tsx | 1 + src/flows/Onboarding/tests/OnboardingSubmit.test.tsx | 1 + 16 files changed, 16 insertions(+) diff --git a/src/components/form/fields/tests/CheckBoxField.test.tsx b/src/components/form/fields/tests/CheckBoxField.test.tsx index 2a38515fe..29b0d259c 100644 --- a/src/components/form/fields/tests/CheckBoxField.test.tsx +++ b/src/components/form/fields/tests/CheckBoxField.test.tsx @@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows'; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('CheckBoxField Component', () => { diff --git a/src/components/form/fields/tests/DatePickerField.test.tsx b/src/components/form/fields/tests/DatePickerField.test.tsx index 513de8bfb..65f59ef20 100644 --- a/src/components/form/fields/tests/DatePickerField.test.tsx +++ b/src/components/form/fields/tests/DatePickerField.test.tsx @@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows'; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); vi.mock('date-fns', async () => { diff --git a/src/components/form/fields/tests/FieldSetField.test.tsx b/src/components/form/fields/tests/FieldSetField.test.tsx index 619c3c50e..db3cc5f79 100644 --- a/src/components/form/fields/tests/FieldSetField.test.tsx +++ b/src/components/form/fields/tests/FieldSetField.test.tsx @@ -8,6 +8,7 @@ import { TextFieldDefault } from '@/src/components/form/fields/default/TextField vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); vi.mock('@/src/components/shared/zendesk-drawer/ZendeskTriggerButton', () => ({ diff --git a/src/components/form/fields/tests/FileUploadField.test.tsx b/src/components/form/fields/tests/FileUploadField.test.tsx index 2748cc08a..105d0544d 100644 --- a/src/components/form/fields/tests/FileUploadField.test.tsx +++ b/src/components/form/fields/tests/FileUploadField.test.tsx @@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows'; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('FileUploadField Component', () => { diff --git a/src/components/form/fields/tests/MultiSelectField.test.tsx b/src/components/form/fields/tests/MultiSelectField.test.tsx index e9f52cc99..02c32291b 100644 --- a/src/components/form/fields/tests/MultiSelectField.test.tsx +++ b/src/components/form/fields/tests/MultiSelectField.test.tsx @@ -12,6 +12,7 @@ type MultiSelectFieldProps = React.ComponentProps; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('MultiSelectField Component', () => { diff --git a/src/components/form/fields/tests/NumberField.test.tsx b/src/components/form/fields/tests/NumberField.test.tsx index 31717ddbf..53d8b85db 100644 --- a/src/components/form/fields/tests/NumberField.test.tsx +++ b/src/components/form/fields/tests/NumberField.test.tsx @@ -12,6 +12,7 @@ import { TextFieldDefault } from '@/src/components/form/fields/default/TextField // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('NumberField Component', () => { diff --git a/src/components/form/fields/tests/RadioGroupField.test.tsx b/src/components/form/fields/tests/RadioGroupField.test.tsx index 698f5efd6..2f9d6dcbe 100644 --- a/src/components/form/fields/tests/RadioGroupField.test.tsx +++ b/src/components/form/fields/tests/RadioGroupField.test.tsx @@ -21,6 +21,7 @@ type RadioGroupFieldProps = JSFField & { // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('RadioGroupField Component', () => { diff --git a/src/components/form/fields/tests/SelectField.test.tsx b/src/components/form/fields/tests/SelectField.test.tsx index 029e3f81e..585a1145d 100644 --- a/src/components/form/fields/tests/SelectField.test.tsx +++ b/src/components/form/fields/tests/SelectField.test.tsx @@ -12,6 +12,7 @@ type SelectFieldProps = React.ComponentProps; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('SelectField Component', () => { diff --git a/src/components/form/fields/tests/TelField.test.tsx b/src/components/form/fields/tests/TelField.test.tsx index 2787ec634..778a62538 100644 --- a/src/components/form/fields/tests/TelField.test.tsx +++ b/src/components/form/fields/tests/TelField.test.tsx @@ -10,6 +10,7 @@ import { yupResolver } from '@hookform/resolvers/yup'; vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); // Helper function to interact with Radix UI Select diff --git a/src/components/form/fields/tests/TextAreaField.test.tsx b/src/components/form/fields/tests/TextAreaField.test.tsx index 570cad7a8..55390c2d4 100644 --- a/src/components/form/fields/tests/TextAreaField.test.tsx +++ b/src/components/form/fields/tests/TextAreaField.test.tsx @@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows'; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('TextAreaField Component', () => { diff --git a/src/components/form/fields/tests/TextField.test.tsx b/src/components/form/fields/tests/TextField.test.tsx index 4f2f47266..ad6e5c962 100644 --- a/src/components/form/fields/tests/TextField.test.tsx +++ b/src/components/form/fields/tests/TextField.test.tsx @@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows'; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); describe('TextField Component', () => { diff --git a/src/components/form/fields/tests/WorkScheduleField.test.tsx b/src/components/form/fields/tests/WorkScheduleField.test.tsx index 90f735da2..d64a2e137 100644 --- a/src/components/form/fields/tests/WorkScheduleField.test.tsx +++ b/src/components/form/fields/tests/WorkScheduleField.test.tsx @@ -14,6 +14,7 @@ import { TextFieldDefault } from '@/src/components/form/fields/default/TextField // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); type WorkScheduleFieldProps = JSFField & { diff --git a/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx b/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx index d5f500000..2f7a4c63f 100644 --- a/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx +++ b/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx @@ -16,6 +16,7 @@ vi.mock('@/src/context', () => ({ select: SelectFieldDefault, }, })), + useTransformer: vi.fn(), })); describe('JSONSchemaForm - Conditional inputType Changes', () => { diff --git a/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx b/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx index 426f9ef81..f7e75cdeb 100644 --- a/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx +++ b/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx @@ -18,6 +18,7 @@ vi.mock('@/src/context', () => ({ statement: MockStatement, }, })), + useTransformer: vi.fn(), })); const CustomToggle = ({ diff --git a/src/flows/Onboarding/tests/OnboardingBack.test.tsx b/src/flows/Onboarding/tests/OnboardingBack.test.tsx index a3d309d2d..c49ade453 100644 --- a/src/flows/Onboarding/tests/OnboardingBack.test.tsx +++ b/src/flows/Onboarding/tests/OnboardingBack.test.tsx @@ -8,6 +8,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows'; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); vi.mock('@/src/flows/Onboarding/context', () => ({ diff --git a/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx b/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx index 2af773346..f83b0843b 100644 --- a/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx +++ b/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx @@ -8,6 +8,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows'; // Mock dependencies vi.mock('@/src/context', () => ({ useFormFields: vi.fn(), + useTransformer: vi.fn(), })); vi.mock('@/src/flows/Onboarding/context', () => ({ From 34448afed87ea12c84e573309b2ec8c69094bc3e Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 12:57:58 +0200 Subject: [PATCH 03/17] add docs to continue later --- HTML_TRANSFORMER_TODO.md | 313 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 313 insertions(+) create mode 100644 HTML_TRANSFORMER_TODO.md diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md new file mode 100644 index 000000000..d7ed159a6 --- /dev/null +++ b/HTML_TRANSFORMER_TODO.md @@ -0,0 +1,313 @@ +# HTML Component Transformer - Remaining Tasks + +## ✅ Completed +- ✅ All core implementation done +- ✅ Types properly defined and exported +- ✅ All tests passing (737/737) +- ✅ Type checking passes +- ✅ Linting passes +- ✅ TelField types fixed and properly structured +- ✅ Test mocks updated with `useTransformer` + +--- + +## 📝 What's Left + +### 1. Create Usage Example (USER TASK) +**Priority: HIGH** +**Estimated effort: 30-60 minutes** + +Create an example in `example/src/Onboarding.tsx` demonstrating the Accordion transformation. + +#### Steps: + +1. **Install dependencies** (if not already installed): +```bash +npm install html-react-parser dompurify +npm install -D @types/dompurify +``` + +2. **Create an Accordion component** (example/src/components/Accordion.tsx): +```typescript +import React, { useState } from 'react'; + +export const Accordion = ({ + summary, + children +}: { + summary: React.ReactNode; + children: React.ReactNode +}) => { + const [isOpen, setIsOpen] = useState(false); + + return ( +
setIsOpen(e.currentTarget.open)} + > + + {summary} + +
+ {children} +
+
+ ); +}; +``` + +3. **Create the transformer function** (example/src/utils/transformHtml.tsx): +```typescript +import parse, { domToReact, HTMLReactParserOptions, Element } from 'html-react-parser'; +import DOMPurify from 'dompurify'; +import { Accordion } from '../components/Accordion'; + +export const transformHtmlToComponents = (htmlContent: string) => { + // 1. Sanitize HTML first (IMPORTANT for security) + const clean = DOMPurify.sanitize(htmlContent); + + // 2. Define transformation options + const options: HTMLReactParserOptions = { + replace: (domNode) => { + // Check if it's an element node + if (domNode.type === 'tag' && domNode.name === 'details') { + const element = domNode as Element; + const dataComponent = element.attribs?.['data-component']; + + // Transform
to custom Accordion + if (dataComponent === 'Accordion') { + // Find the tag + const summaryNode = element.children?.find( + (child: any) => child.type === 'tag' && child.name === 'summary' + ); + + // Extract summary content + const summary = summaryNode + ? domToReact((summaryNode as Element).children, options) + : 'Details'; + + // Get all other content (not the summary) + const content = element.children?.filter( + (child: any) => !(child.type === 'tag' && child.name === 'summary') + ); + + return ( + + {domToReact(content || [], options)} + + ); + } + } + }, + }; + + // 3. Parse and transform + return parse(clean, options); +}; +``` + +4. **Update Onboarding.tsx to use the transformer**: +```typescript +import { transformHtmlToComponents } from './utils/transformHtml'; + +// In your component: + + + +``` + +5. **Test it**: +```bash +npm run dev +# Navigate to onboarding flow +# Look for fields with descriptions containing Accordion HTML +``` + +#### Expected HTML format from API: +```html +
+ Important information about probation periods in Germany +

In Germany, post-probation terminations are very difficult and require a valid reason...

+
+``` + +--- + +### 2. Documentation (Optional but Recommended) +**Priority: MEDIUM** +**Estimated effort: 1-2 hours** + +Add documentation to help other developers use this feature. + +#### Files to update: + +1. **README.md** - Add a new section: +```markdown +## HTML Component Transformation + +Transform HTML in field descriptions into custom React components. + +### Basic Usage + +```typescript +import parse from 'html-react-parser'; +import DOMPurify from 'dompurify'; + +const transformHtmlToComponents = (htmlContent: string) => { + const clean = DOMPurify.sanitize(htmlContent); + return parse(clean, { + replace: (domNode) => { + // Your transformation logic + }, + }); +}; + + + {/* Your flows */} + +``` + +### Security Note + +⚠️ **The transformer receives RAW UNSANITIZED HTML**. You are responsible for sanitizing untrusted HTML before parsing. We recommend using [DOMPurify](https://www.npmjs.com/package/dompurify). + +### Using in Custom Components + +Custom field components can access the transformer via `fieldData.transformHtml`: + +```typescript +const CustomInput = ({ fieldData }: FieldComponentProps) => { + const renderDescription = (desc: string) => { + if (fieldData.transformHtml) { + return fieldData.transformHtml(desc); + } + return
; + }; + + return ( +
+ + {fieldData.description && renderDescription(fieldData.description)} +
+ ); +}; +``` +``` + +2. **CHANGELOG.md** - Add to the unreleased section: +```markdown +### Added +- HTML component transformation feature via `transformHtmlToComponents` prop + - Partners can now replace HTML patterns in field descriptions with custom React components + - Useful for converting `
` to custom Accordion components + - Available in both default and custom field components via `fieldData.transformHtml` + - Fully backward compatible - no transformer = existing sanitized HTML behavior + +### Changed +- Updated `FieldDataProps` to include optional `transformHtml` property +- Updated `TelFieldComponentProps` and `TelFieldDataProps` to follow proper export pattern +``` + +--- + +### 3. Future Enhancements (Not Required Now) +**Priority: LOW** + +Ideas for future iterations: + +- [ ] Add transformer for ZendeskDrawer components +- [ ] Create a library of common transformers (Accordion, Tabs, etc.) +- [ ] Add transformer performance monitoring +- [ ] Create Storybook examples +- [ ] Add E2E tests for transformed components + +--- + +## Testing the Implementation + +### Verify everything works: +```bash +# 1. All tests pass +npm test + +# 2. Type checking passes +npm run type-check + +# 3. Linting passes +npm run lint + +# 4. Format check +npm run format + +# 5. Build succeeds +npm run build + +# 6. Example app runs +npm run dev +``` + +### Manual testing checklist: +- [ ] Navigate to onboarding flow in example app +- [ ] Find a field with Accordion HTML in description +- [ ] Verify Accordion renders and is interactive +- [ ] Verify fallback works (no transformer = sanitized HTML) +- [ ] Verify custom field components can access `fieldData.transformHtml` + +--- + +## Files Modified in This Implementation + +### Core Implementation: +- `src/types/remoteFlows.ts` - Added `transformHtmlToComponents` prop +- `src/context.ts` - Added `useTransformer` hook +- `src/RemoteFlowsProvider.tsx` - Wired up transformer to context +- `src/components/ui/form.tsx` - Updated FormDescription to use transformer +- `src/components/form/fields/FieldSetField.tsx` - Updated to use transformer +- `src/lib/transformDescription.tsx` - Internal helper (not exported) +- `src/types/fields.ts` - Added `transformHtml` to FieldDataProps, fixed TelField types +- `src/index.tsx` - Exported `TelFieldComponentProps` + +### Field Components Updated (all inject `transformHtml` into fieldData): +- TextField, TextAreaField, SelectField, RadioGroupField, CheckBoxField +- NumberField, EmailField, MultiSelectField, DatePickerField +- CountryField, FileUploadField, TelField, WorkScheduleField + +### Tests Updated: +- All 24 test files with context mocks updated to include `useTransformer` +- New test file: `src/components/ui/tests/form.test.tsx` (merged transformer tests) + +--- + +## Key Architecture Decisions + +1. **Transformer receives raw HTML** - Partners responsible for sanitization +2. **Available in default AND custom components** - Via FormDescription and fieldData.transformHtml +3. **Internal helper not exported** - Partners implement their own (full control) +4. **Backward compatible** - No transformer = existing behavior with sanitization +5. **Memoized in context** - Performance optimized +6. **Separate hook for internal use** - `useTransformer` vs `useFormFields` (different audiences) + +--- + +## Questions or Issues? + +If you encounter issues: +1. Check that `html-react-parser` and `dompurify` are installed +2. Verify the transformer function is properly sanitizing HTML +3. Check browser console for transformation errors +4. Verify the HTML format matches expected structure + +--- + +**Status**: Ready for example implementation and optional documentation. +**Last Updated**: April 29, 2026 +**Next Action**: Create Accordion example in example app From 8a7437fa885e0b98bb902b2c8ac7e240e947fec6 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 12:59:50 +0200 Subject: [PATCH 04/17] format --- HTML_TRANSFORMER_TODO.md | 60 +++++++++++++++++++++++++++------------- 1 file changed, 41 insertions(+), 19 deletions(-) diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md index d7ed159a6..062e7595b 100644 --- a/HTML_TRANSFORMER_TODO.md +++ b/HTML_TRANSFORMER_TODO.md @@ -1,6 +1,7 @@ # HTML Component Transformer - Remaining Tasks ## ✅ Completed + - ✅ All core implementation done - ✅ Types properly defined and exported - ✅ All tests passing (737/737) @@ -14,6 +15,7 @@ ## 📝 What's Left ### 1. Create Usage Example (USER TASK) + **Priority: HIGH** **Estimated effort: 30-60 minutes** @@ -22,27 +24,29 @@ Create an example in `example/src/Onboarding.tsx` demonstrating the Accordion tr #### Steps: 1. **Install dependencies** (if not already installed): + ```bash npm install html-react-parser dompurify npm install -D @types/dompurify ``` 2. **Create an Accordion component** (example/src/components/Accordion.tsx): + ```typescript import React, { useState } from 'react'; -export const Accordion = ({ - summary, - children -}: { - summary: React.ReactNode; - children: React.ReactNode +export const Accordion = ({ + summary, + children +}: { + summary: React.ReactNode; + children: React.ReactNode }) => { const [isOpen, setIsOpen] = useState(false); return ( -
setIsOpen(e.currentTarget.open)} > @@ -58,6 +62,7 @@ export const Accordion = ({ ``` 3. **Create the transformer function** (example/src/utils/transformHtml.tsx): + ```typescript import parse, { domToReact, HTMLReactParserOptions, Element } from 'html-react-parser'; import DOMPurify from 'dompurify'; @@ -66,7 +71,7 @@ import { Accordion } from '../components/Accordion'; export const transformHtmlToComponents = (htmlContent: string) => { // 1. Sanitize HTML first (IMPORTANT for security) const clean = DOMPurify.sanitize(htmlContent); - + // 2. Define transformation options const options: HTMLReactParserOptions = { replace: (domNode) => { @@ -74,24 +79,24 @@ export const transformHtmlToComponents = (htmlContent: string) => { if (domNode.type === 'tag' && domNode.name === 'details') { const element = domNode as Element; const dataComponent = element.attribs?.['data-component']; - + // Transform
to custom Accordion if (dataComponent === 'Accordion') { // Find the tag const summaryNode = element.children?.find( (child: any) => child.type === 'tag' && child.name === 'summary' ); - + // Extract summary content - const summary = summaryNode + const summary = summaryNode ? domToReact((summaryNode as Element).children, options) : 'Details'; - + // Get all other content (not the summary) const content = element.children?.filter( (child: any) => !(child.type === 'tag' && child.name === 'summary') ); - + return ( {domToReact(content || [], options)} @@ -101,13 +106,14 @@ export const transformHtmlToComponents = (htmlContent: string) => { } }, }; - + // 3. Parse and transform return parse(clean, options); }; ``` 4. **Update Onboarding.tsx to use the transformer**: + ```typescript import { transformHtmlToComponents } from './utils/transformHtml'; @@ -123,6 +129,7 @@ import { transformHtmlToComponents } from './utils/transformHtml'; ``` 5. **Test it**: + ```bash npm run dev # Navigate to onboarding flow @@ -130,16 +137,21 @@ npm run dev ``` #### Expected HTML format from API: + ```html
Important information about probation periods in Germany -

In Germany, post-probation terminations are very difficult and require a valid reason...

+

+ In Germany, post-probation terminations are very difficult and require a + valid reason... +

``` --- ### 2. Documentation (Optional but Recommended) + **Priority: MEDIUM** **Estimated effort: 1-2 hours** @@ -148,7 +160,8 @@ Add documentation to help other developers use this feature. #### Files to update: 1. **README.md** - Add a new section: -```markdown + +````markdown ## HTML Component Transformation Transform HTML in field descriptions into custom React components. @@ -175,6 +188,7 @@ const transformHtmlToComponents = (htmlContent: string) => { {/* Your flows */} ``` +```` ### Security Note @@ -201,7 +215,8 @@ const CustomInput = ({ fieldData }: FieldComponentProps) => { ); }; ``` -``` + +```` 2. **CHANGELOG.md** - Add to the unreleased section: ```markdown @@ -215,11 +230,12 @@ const CustomInput = ({ fieldData }: FieldComponentProps) => { ### Changed - Updated `FieldDataProps` to include optional `transformHtml` property - Updated `TelFieldComponentProps` and `TelFieldDataProps` to follow proper export pattern -``` +```` --- ### 3. Future Enhancements (Not Required Now) + **Priority: LOW** Ideas for future iterations: @@ -235,6 +251,7 @@ Ideas for future iterations: ## Testing the Implementation ### Verify everything works: + ```bash # 1. All tests pass npm test @@ -256,6 +273,7 @@ npm run dev ``` ### Manual testing checklist: + - [ ] Navigate to onboarding flow in example app - [ ] Find a field with Accordion HTML in description - [ ] Verify Accordion renders and is interactive @@ -267,6 +285,7 @@ npm run dev ## Files Modified in This Implementation ### Core Implementation: + - `src/types/remoteFlows.ts` - Added `transformHtmlToComponents` prop - `src/context.ts` - Added `useTransformer` hook - `src/RemoteFlowsProvider.tsx` - Wired up transformer to context @@ -277,11 +296,13 @@ npm run dev - `src/index.tsx` - Exported `TelFieldComponentProps` ### Field Components Updated (all inject `transformHtml` into fieldData): + - TextField, TextAreaField, SelectField, RadioGroupField, CheckBoxField - NumberField, EmailField, MultiSelectField, DatePickerField - CountryField, FileUploadField, TelField, WorkScheduleField ### Tests Updated: + - All 24 test files with context mocks updated to include `useTransformer` - New test file: `src/components/ui/tests/form.test.tsx` (merged transformer tests) @@ -301,6 +322,7 @@ npm run dev ## Questions or Issues? If you encounter issues: + 1. Check that `html-react-parser` and `dompurify` are installed 2. Verify the transformer function is properly sanitizing HTML 3. Check browser console for transformation errors From ec342270398145034662c14c8dce13563584c6f5 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 13:13:14 +0200 Subject: [PATCH 05/17] fix(tel-field) - props --- src/components/form/fields/TelField.tsx | 23 ++++++-------------- src/types/fields.ts | 28 +++++++++++++++++++++++-- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/components/form/fields/TelField.tsx b/src/components/form/fields/TelField.tsx index e4e1bca7d..3109961e5 100644 --- a/src/components/form/fields/TelField.tsx +++ b/src/components/form/fields/TelField.tsx @@ -1,13 +1,13 @@ import { FormField } from '@/src/components/ui/form'; import { useFormFields } from '@/src/context'; -import { Components, JSFField } from '@/src/types/remoteFlows'; +import { Components } from '@/src/types/remoteFlows'; import { useFormContext, ControllerFieldState, ControllerRenderProps, FieldValues, } from 'react-hook-form'; -import { TelFieldComponentProps } from '@/src/types/fields'; +import { TelFieldComponentProps, TelFieldDataProps } from '@/src/types/fields'; import { useMemo, useCallback, useState, useEffect, useRef } from 'react'; export type Country = { @@ -271,20 +271,9 @@ export function TelFieldRenderer({ ); } -export type TelFieldDataProps = Omit & { - onChangeCountryCode?: (newCountry: Country) => void; - onChangePhoneNumber?: (event: React.ChangeEvent) => void; - component?: Components['tel']; - options: { - value: string; - label: string; - meta: { - countryCode: string; - }; - pattern: string; - }[]; - currentCountry?: Country; - nationalPhoneNumber?: string; +export type TelFieldProps = TelFieldDataProps & { + name: string; + component: Components['tel']; }; export function TelField({ @@ -295,7 +284,7 @@ export function TelField({ onChangePhoneNumber, component, ...rest -}: TelFieldDataProps) { +}: TelFieldProps) { const { components } = useFormFields(); const { control } = useFormContext(); diff --git a/src/types/fields.ts b/src/types/fields.ts index 5e9a3bfa5..536288233 100644 --- a/src/types/fields.ts +++ b/src/types/fields.ts @@ -1,7 +1,6 @@ import { FieldFileDataProps } from '@/src/components/form/fields/FileUploadField'; -import { TelFieldDataProps } from '@/src/components/form/fields/TelField'; import { DailySchedule } from '@/src/components/form/fields/workScheduleUtils'; -import { JSFField } from '@/src/types/remoteFlows'; +import { Components, JSFField } from '@/src/types/remoteFlows'; import { ControllerFieldState, ControllerRenderProps, @@ -144,6 +143,31 @@ export type PricingPlanComponentProps = Omit< fieldData: PricingPlanDataProps; }; +export type TelFieldDataProps = Omit & { + options: { + value: string; + label: string; + meta: { + countryCode: string; + }; + pattern: string; + }[]; + currentCountry?: { + name: string; + dialCode: string; + pattern: string; + areaCodes?: string[]; + }; + nationalPhoneNumber?: string; + onChangeCountryCode?: (newCountry: { + name: string; + dialCode: string; + pattern: string; + areaCodes?: string[]; + }) => void; + onChangePhoneNumber?: (event: React.ChangeEvent) => void; +}; + export type TelFieldComponentProps = Omit & { fieldData: TelFieldDataProps; }; From b2655e5ebc7e1e0327a9c533d525394be987aad7 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 13:14:22 +0200 Subject: [PATCH 06/17] fix prop --- src/types/fields.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/fields.ts b/src/types/fields.ts index 536288233..740e1de49 100644 --- a/src/types/fields.ts +++ b/src/types/fields.ts @@ -1,6 +1,6 @@ import { FieldFileDataProps } from '@/src/components/form/fields/FileUploadField'; import { DailySchedule } from '@/src/components/form/fields/workScheduleUtils'; -import { Components, JSFField } from '@/src/types/remoteFlows'; +import { JSFField } from '@/src/types/remoteFlows'; import { ControllerFieldState, ControllerRenderProps, From 0d2cadfdf09b003d1ab29fde712b693bc489ef96 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 13:20:04 +0200 Subject: [PATCH 07/17] fix types --- src/components/form/fields/TelField.tsx | 2 +- .../form/fields/tests/TelField.test.tsx | 22 ++++++++++--------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/form/fields/TelField.tsx b/src/components/form/fields/TelField.tsx index 3109961e5..a6f54cd3b 100644 --- a/src/components/form/fields/TelField.tsx +++ b/src/components/form/fields/TelField.tsx @@ -273,7 +273,7 @@ export function TelFieldRenderer({ export type TelFieldProps = TelFieldDataProps & { name: string; - component: Components['tel']; + component?: Components['tel']; }; export function TelField({ diff --git a/src/components/form/fields/tests/TelField.test.tsx b/src/components/form/fields/tests/TelField.test.tsx index 0d6367703..e01b3a786 100644 --- a/src/components/form/fields/tests/TelField.test.tsx +++ b/src/components/form/fields/tests/TelField.test.tsx @@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { FormProvider, useForm } from 'react-hook-form'; import { object, string } from 'yup'; -import { TelField, TelFieldDataProps } from '../TelField'; +import { TelField, TelFieldProps } from '../TelField'; import { TelFieldDefault } from '../default/TelFieldDefault'; import { $TSFixMe } from '@/src/types/remoteFlows'; import { yupResolver } from '@hookform/resolvers/yup'; @@ -39,7 +39,7 @@ async function fillPhoneInput(phoneNumber: string) { await user.type(phoneInput, phoneNumber); } -const mockOptions: TelFieldDataProps['options'] = [ +const mockOptions: TelFieldProps['options'] = [ { value: 'US', label: 'United States', @@ -66,7 +66,7 @@ const mockOptions: TelFieldDataProps['options'] = [ }, ]; -const createTelSchema = (options: TelFieldDataProps['options']) => { +const createTelSchema = (options: TelFieldProps['options']) => { return string() .required('Phone number is required') .max(30, 'Must be at most 30 characters') @@ -96,7 +96,7 @@ const createTelSchema = (options: TelFieldDataProps['options']) => { }; describe('TelField Component - Split UI', () => { - const defaultProps: TelFieldDataProps = { + const defaultProps: TelFieldProps = { name: 'phoneNumber', label: 'Phone Number', description: 'Enter your phone number', @@ -113,18 +113,20 @@ describe('TelField Component - Split UI', () => { }; const renderWithFormContext = ( - props: TelFieldDataProps, + props: TelFieldProps, defaultValues?: $TSFixMe, ) => { const TestComponent = () => { const methods = useForm({ mode: 'onBlur', defaultValues: defaultValues || {}, - resolver: yupResolver( - object().shape({ - phoneNumber: props.schema, - }), - ), + resolver: props.schema + ? yupResolver( + object().shape({ + phoneNumber: props.schema, + }), + ) + : undefined, }); return ( From 25f573401bfde257c824625f280732749a1e3206 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 15:02:10 +0200 Subject: [PATCH 08/17] add more guidance --- HTML_TRANSFORMER_TODO.md | 115 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 113 insertions(+), 2 deletions(-) diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md index 062e7595b..4e3dcceee 100644 --- a/HTML_TRANSFORMER_TODO.md +++ b/HTML_TRANSFORMER_TODO.md @@ -150,7 +150,55 @@ npm run dev --- -### 2. Documentation (Optional but Recommended) +### 2. Add Integration Tests for Custom Components with Transformer + +**Priority: MEDIUM** +**Estimated effort: 30-45 minutes** + +Add tests to verify that custom field components receive and can use `fieldData.transformHtml`. + +#### Location: + +`src/components/ui/tests/form.test.tsx` - Add new describe block after existing transformer tests + +#### Test cases to add: + +```typescript +describe('Custom field components with transformer', () => { + it('should pass transformHtml to custom field component via fieldData', () => { + // Test that custom TextField receives transformHtml function + // Verify it can call it and render transformed HTML + }); + + it('should work when no transformer is provided (fallback)', () => { + // Custom component should handle undefined transformHtml gracefully + }); + + it('should transform HTML descriptions in custom field components', () => { + // Full integration: TextField with description containing Accordion HTML + // Custom component uses transformHtml + // Verify Accordion renders correctly + }); +}); +``` + +#### What this tests: + +- ✅ Custom field components receive `transformHtml` in `fieldData` +- ✅ Custom components can call transformer and render result +- ✅ Fallback behavior when transformer is undefined +- ✅ Full integration: HTML description → transformer → custom component → rendered output + +#### Benefits: + +- Complements existing `FormDescription` transformer tests +- Uses existing `createWrapperWithTransformer` helper +- Verifies the feature works end-to-end with custom components +- Minimal duplication, clear test organization + +--- + +### 3. Documentation (Optional but Recommended) **Priority: MEDIUM** **Estimated effort: 1-2 hours** @@ -234,7 +282,70 @@ const CustomInput = ({ fieldData }: FieldComponentProps) => { --- -### 3. Future Enhancements (Not Required Now) +### 4. Slice Work into Reviewable PRs + +**Priority: HIGH (Once all work is complete and tested)** +**Estimated effort: 1-2 hours** + +After completing the example, tests, and documentation, split the work into small, reviewable PRs. + +#### Recommended PR structure: + +**PR 1: Core Infrastructure** (smallest, safest) +- `src/types/remoteFlows.ts` - Added `transformHtmlToComponents` prop +- `src/context.ts` - Added `useTransformer` hook +- `src/RemoteFlowsProvider.tsx` - Wired up transformer to context +- `src/lib/transformDescription.tsx` - Internal helper +- `src/components/ui/form.tsx` - Updated `FormDescription` to use transformer +- `src/components/ui/tests/form.test.tsx` - Tests for `FormDescription` transformer +- Test mocks updated with `useTransformer` + +**Why first**: Establishes the foundation, smallest surface area, easiest to review + +**PR 2: Field Components Integration** +- `src/types/fields.ts` - Added `transformHtml` to `FieldDataProps` +- All 13 field components updated to inject `transformHtml` into `fieldData`: + - TextField, TextAreaField, SelectField, RadioGroupField, CheckBoxField + - NumberField, EmailField, MultiSelectField, DatePickerField + - CountryField, FileUploadField, TelField, WorkScheduleField +- `src/components/form/fields/FieldSetField.tsx` - Updated to use transformer +- `src/components/ui/tests/form.test.tsx` - Add custom component integration tests + +**Why second**: Builds on PR 1, enables the feature for all field types + +**PR 3: Example Implementation** +- `example/src/components/Accordion.tsx` - New component +- `example/src/utils/transformHtml.tsx` - Transformer function +- `example/src/Onboarding.tsx` - Wire up transformer +- `package.json` - Add `html-react-parser` and `dompurify` dependencies (example only) + +**Why third**: Shows the feature in action, doesn't affect library code + +**PR 4: Documentation** +- `README.md` - HTML transformation section +- `CHANGELOG.md` - Feature announcement +- `src/index.tsx` - Export `TelFieldComponentProps` (if not already done) + +**Why last**: Documents everything that's already merged + +#### Benefits of this approach: + +- ✅ Each PR has a clear purpose and scope +- ✅ Core infrastructure can be reviewed and merged first +- ✅ Easier to spot issues in smaller diffs +- ✅ Can merge incrementally (feature is backward compatible) +- ✅ Reduces risk of "everything slips" in one huge PR +- ✅ Reviewers can focus on one aspect at a time + +#### Alternative (if PRs are too large): + +Could split PR 2 into: +- **PR 2a**: Update first 6 field components +- **PR 2b**: Update remaining 7 field components + tests + +--- + +### 5. Future Enhancements (Not Required Now) **Priority: LOW** From 15857acbcf26f1a2721dbd99d5de3e45ee583261 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 29 Apr 2026 15:03:27 +0200 Subject: [PATCH 09/17] format --- HTML_TRANSFORMER_TODO.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md index 4e3dcceee..6db84b9b9 100644 --- a/HTML_TRANSFORMER_TODO.md +++ b/HTML_TRANSFORMER_TODO.md @@ -292,6 +292,7 @@ After completing the example, tests, and documentation, split the work into smal #### Recommended PR structure: **PR 1: Core Infrastructure** (smallest, safest) + - `src/types/remoteFlows.ts` - Added `transformHtmlToComponents` prop - `src/context.ts` - Added `useTransformer` hook - `src/RemoteFlowsProvider.tsx` - Wired up transformer to context @@ -303,6 +304,7 @@ After completing the example, tests, and documentation, split the work into smal **Why first**: Establishes the foundation, smallest surface area, easiest to review **PR 2: Field Components Integration** + - `src/types/fields.ts` - Added `transformHtml` to `FieldDataProps` - All 13 field components updated to inject `transformHtml` into `fieldData`: - TextField, TextAreaField, SelectField, RadioGroupField, CheckBoxField @@ -314,6 +316,7 @@ After completing the example, tests, and documentation, split the work into smal **Why second**: Builds on PR 1, enables the feature for all field types **PR 3: Example Implementation** + - `example/src/components/Accordion.tsx` - New component - `example/src/utils/transformHtml.tsx` - Transformer function - `example/src/Onboarding.tsx` - Wire up transformer @@ -322,6 +325,7 @@ After completing the example, tests, and documentation, split the work into smal **Why third**: Shows the feature in action, doesn't affect library code **PR 4: Documentation** + - `README.md` - HTML transformation section - `CHANGELOG.md` - Feature announcement - `src/index.tsx` - Export `TelFieldComponentProps` (if not already done) @@ -340,6 +344,7 @@ After completing the example, tests, and documentation, split the work into smal #### Alternative (if PRs are too large): Could split PR 2 into: + - **PR 2a**: Update first 6 field components - **PR 2b**: Update remaining 7 field components + tests From 4f712bfff1bc8ab703796d15b6edeca6ebce72d6 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Thu, 30 Apr 2026 11:38:04 +0200 Subject: [PATCH 10/17] add dependencies --- example/package-lock.json | 261 +++++++++++++++++++++++++++++++------- example/package.json | 3 + 2 files changed, 216 insertions(+), 48 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 7424e7a3b..4fa864b32 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -11,8 +11,10 @@ "dependencies": { "@remoteoss/remote-flows": "file://..", "axios": "1.15.2", + "dompurify": "^3.4.1", "dotenv": "17.4.2", "express": "5.2.1", + "html-react-parser": "^6.0.1", "jsonwebtoken": "9.0.3", "react": "18.3.1", "react-dom": "18.3.1", @@ -22,6 +24,7 @@ }, "devDependencies": { "@playwright/test": "1.59.1", + "@types/dompurify": "^3.0.5", "@types/node": "24.12.2", "@types/react-dom": "19.2.3", "@types/react-syntax-highlighter": "15.5.13", @@ -45,14 +48,14 @@ "@radix-ui/react-select": "2.2.6", "@radix-ui/react-tabs": "1.1.13", "@remoteoss/remote-json-schema-form-kit": "0.0.11", - "@tailwindcss/cli": "4.2.3", - "@tailwindcss/postcss": "4.2.3", + "@tailwindcss/cli": "4.2.4", + "@tailwindcss/postcss": "4.2.4", "@tanstack/react-query": "5.99.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "cmdk": "1.1.1", "date-fns": "3.6.0", - "dompurify": "3.4.0", + "dompurify": "3.4.1", "fast-deep-equal": "3.1.3", "lodash.capitalize": "4.2.1", "lodash.groupby": "4.6.0", @@ -66,7 +69,7 @@ "react-flagpack": "2.0.6", "react-hook-form": "7.73.1", "tailwind-merge": "3.5.0", - "tailwindcss": "4.2.3", + "tailwindcss": "4.2.4", "tailwindcss-animate": "1.0.7", "vaul": "1.1.2", "yup": "0.32.11" @@ -306,9 +309,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -326,9 +326,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -346,9 +343,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -366,9 +360,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -386,9 +377,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -406,9 +394,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -426,9 +411,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -446,9 +428,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -639,9 +618,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -659,9 +635,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -679,9 +652,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -699,9 +669,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -719,9 +686,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -739,9 +703,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -839,6 +800,16 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/dompurify": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz", + "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/trusted-types": "*" + } + }, "node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", @@ -868,7 +839,7 @@ "version": "19.2.14", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "csstype": "^3.2.2" @@ -893,6 +864,13 @@ "@types/react": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "devOptional": true, + "license": "MIT" + }, "node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", @@ -1237,7 +1215,7 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/debug": { @@ -1297,6 +1275,82 @@ "node": ">=8" } }, + "node_modules/dom-serializer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-3.0.0.tgz", + "integrity": "sha512-x+9D6nkC8tdXOQUS32egtZpZFLP90+HBZmWjuT920srbJvD/zPgFB9t4k3pEhlw5BQrXStQtRc1Y1zuriXk+Nw==", + "license": "MIT", + "dependencies": { + "domelementtype": "^3.0.0", + "domhandler": "^6.0.0", + "entities": "^8.0.0" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-3.0.0.tgz", + "integrity": "sha512-umCQid3jKbDmVjx8jGaW7uUykm4DEUeyV21hPxNMo2nV955DhUThwqyOIDtreepP31hl84X7G5U9ZfsWvIB3Pg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause", + "engines": { + "node": ">=20.19.0" + } + }, + "node_modules/domhandler": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-6.0.1.tgz", + "integrity": "sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==", + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^3.0.0" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/dompurify": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.1.tgz", + "integrity": "sha512-JahakDAIg1gyOm7dlgWSDjV4n7Ip2PKR55NIT6jrMfIgLFgWo81vdr1/QGqWtFNRqXP9UV71oVePtjqS2ebnPw==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, + "node_modules/domutils": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-4.0.2.tgz", + "integrity": "sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==", + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^3.0.0", + "domelementtype": "^3.0.0", + "domhandler": "^6.0.0" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/dotenv": { "version": "17.4.2", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz", @@ -1344,6 +1398,18 @@ "node": ">= 0.8" } }, + "node_modules/entities": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz", + "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/es-define-property": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", @@ -1739,6 +1805,75 @@ "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz", "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==" }, + "node_modules/html-dom-parser": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-7.0.1.tgz", + "integrity": "sha512-loRBDTCY/05/jAC63J1X9ID+xjRucmpLkIcQO0IRbOubBo5ucnpUpyXXob9UMXOskMZlu7KPsDP/2KOMelzJNA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/remarkablemark" + } + ], + "license": "MIT", + "dependencies": { + "domhandler": "6.0.1", + "htmlparser2": "12.0.0" + } + }, + "node_modules/html-react-parser": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-6.0.1.tgz", + "integrity": "sha512-tIie2HSIk2Ct1tdupjd/DhBjskxN/NL5J4ncbUnk2smBr5UIfpPpitUo0imGfBM0BlOL7ac8RcqEwne1jXTcsQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/remarkablemark" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/html-react-parser" + } + ], + "license": "MIT", + "dependencies": { + "domhandler": "6.0.1", + "html-dom-parser": "7.0.1", + "react-property": "2.0.2", + "style-to-js": "1.1.21" + }, + "peerDependencies": { + "@types/react": "0.14 || 15 || 16 || 17 || 18 || 19", + "react": "0.14 || 15 || 16 || 17 || 18 || 19" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/htmlparser2": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-12.0.0.tgz", + "integrity": "sha512-Tz7u1i95/g2x2jz81+x0FBVhBhY5aRTvD3tXXdFaljuNdzDLJ8UGNRrTcj2cgQvAg3iW/h77Fz15nLW0L0CrZw==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "MIT", + "dependencies": { + "domelementtype": "^3.0.0", + "domhandler": "^6.0.0", + "domutils": "^4.0.2", + "entities": "^8.0.0" + }, + "engines": { + "node": ">=20.19.0" + } + }, "node_modules/http-errors": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", @@ -1786,6 +1921,12 @@ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, + "node_modules/inline-style-parser": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz", + "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==", + "license": "MIT" + }, "node_modules/ipaddr.js": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", @@ -2787,6 +2928,12 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/react-property": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz", + "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==", + "license": "MIT" + }, "node_modules/react-syntax-highlighter": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz", @@ -3124,6 +3271,24 @@ "node": ">= 0.8" } }, + "node_modules/style-to-js": { + "version": "1.1.21", + "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz", + "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==", + "license": "MIT", + "dependencies": { + "style-to-object": "1.0.14" + } + }, + "node_modules/style-to-object": { + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz", + "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==", + "license": "MIT", + "dependencies": { + "inline-style-parser": "0.2.7" + } + }, "node_modules/tinyglobby": { "version": "0.2.16", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz", diff --git a/example/package.json b/example/package.json index 6e15b69c5..5c309432d 100644 --- a/example/package.json +++ b/example/package.json @@ -17,8 +17,10 @@ "dependencies": { "@remoteoss/remote-flows": "file://..", "axios": "1.15.2", + "dompurify": "^3.4.1", "dotenv": "17.4.2", "express": "5.2.1", + "html-react-parser": "^6.0.1", "jsonwebtoken": "9.0.3", "react": "18.3.1", "react-dom": "18.3.1", @@ -28,6 +30,7 @@ }, "devDependencies": { "@playwright/test": "1.59.1", + "@types/dompurify": "^3.0.5", "@types/node": "24.12.2", "@types/react-dom": "19.2.3", "@types/react-syntax-highlighter": "15.5.13", From 6ef477ecb9be6e29a75f4220ac9e37916434173f Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Thu, 30 Apr 2026 12:03:56 +0200 Subject: [PATCH 11/17] transformHtml --- example/src/Onboarding.tsx | 6 +- example/src/components/Accordion.tsx | 24 ++++++++ example/src/utils/transformHtml.tsx | 57 +++++++++++++++++++ .../form/fields/ForcedValueField.tsx | 40 ++++++------- .../shared/zendesk-drawer/HelpCenter.tsx | 5 +- 5 files changed, 105 insertions(+), 27 deletions(-) create mode 100644 example/src/components/Accordion.tsx create mode 100644 example/src/utils/transformHtml.tsx diff --git a/example/src/Onboarding.tsx b/example/src/Onboarding.tsx index fa68e73a4..81a14055c 100644 --- a/example/src/Onboarding.tsx +++ b/example/src/Onboarding.tsx @@ -20,6 +20,7 @@ import { OnboardingAlertStatuses } from './OnboardingAlertStatuses'; import { RemoteFlows } from './RemoteFlows'; import { AlertError } from './AlertError'; import './css/main.css'; +import { transformHtmlToComponents } from './utils/transformHtml'; export const InviteSection = ({ title, @@ -355,7 +356,10 @@ const OnboardingWithProps = ({ employmentId, externalId, }: OnboardingFormData) => ( - + { + const [isOpen, setIsOpen] = useState(false); + + return ( +
setIsOpen(e.currentTarget.open)} + > + + {summary} + +
{children}
+
+ ); +}; diff --git a/example/src/utils/transformHtml.tsx b/example/src/utils/transformHtml.tsx new file mode 100644 index 000000000..067e058fc --- /dev/null +++ b/example/src/utils/transformHtml.tsx @@ -0,0 +1,57 @@ +import parse, { + domToReact, + HTMLReactParserOptions, + Element, + DOMNode, +} from 'html-react-parser'; +import DOMPurify from 'dompurify'; +import { $TSFixMe } from '@remoteoss/remote-flows'; +import { Accordion } from '../components/Accordion'; + +export const transformHtmlToComponents = (htmlContent: string) => { + // 1. Sanitize HTML first (IMPORTANT for security) + const clean = DOMPurify.sanitize(htmlContent); + + // 2. Define transformation options + const options: HTMLReactParserOptions = { + replace: (domNode) => { + // Check if it's an element node + if (domNode.type === 'tag' && domNode.name === 'details') { + const element = domNode as Element; + const dataComponent = element.attribs?.['data-component']; + + // Transform
to custom Accordion + if (dataComponent === 'Accordion') { + // Find the tag + const summaryNode = element.children?.find( + (child: $TSFixMe) => + child.type === 'tag' && child.name === 'summary', + ); + + // Extract summary content + const summary = summaryNode + ? domToReact( + (summaryNode as Element).children as DOMNode[], + options, + ) + : 'Details'; + + // Get all other content (not the summary) + const content = element.children?.filter( + (child: $TSFixMe) => + !(child.type === 'tag' && child.name === 'summary'), + ); + + return ( + + {domToReact((content || []) as $TSFixMe[], options)} + + ); + } + } + }, + }; + + // 3. Parse and transform + return parse(clean, options); +}; diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx index 8e77f0572..484502144 100644 --- a/src/components/form/fields/ForcedValueField.tsx +++ b/src/components/form/fields/ForcedValueField.tsx @@ -1,7 +1,9 @@ import { useFormContext } from 'react-hook-form'; import { sanitizeHtml } from '@/src/lib/utils'; import { useEffect } from 'react'; -import { ZendeskTriggerButton } from '@/src/components/shared/zendesk-drawer/ZendeskTriggerButton'; +import { FormDescription } from '@/src/components/ui/form'; +import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter'; +import { HelpCenterDataProps } from '@/src/types/fields'; const Description = ({ name, @@ -10,27 +12,22 @@ const Description = ({ }: { name: string; description: string; - helpCenter?: { - callToAction: string; - id: number; - url: string; - label: string; - }; + helpCenter?: HelpCenterDataProps; }) => { return ( - - {helpCenter?.callToAction && helpCenter?.id && ( - - {helpCenter.callToAction} - - )} + helpCenter={ + + } + > + {description} + ); }; @@ -44,12 +41,7 @@ export type ForcedValueFieldProps = { description?: string; }; label: string; - helpCenter?: { - callToAction: string; - id: number; - url: string; - label: string; - }; + helpCenter?: HelpCenterDataProps; }; export function ForcedValueField({ diff --git a/src/components/shared/zendesk-drawer/HelpCenter.tsx b/src/components/shared/zendesk-drawer/HelpCenter.tsx index f0fe47a6f..cc954cf0a 100644 --- a/src/components/shared/zendesk-drawer/HelpCenter.tsx +++ b/src/components/shared/zendesk-drawer/HelpCenter.tsx @@ -3,15 +3,16 @@ import { HelpCenterDataProps } from '@/src/types/fields'; type HelpCenterProps = { helpCenter?: HelpCenterDataProps; + className?: string; }; -export function HelpCenter({ helpCenter }: HelpCenterProps) { +export function HelpCenter({ helpCenter, className = '' }: HelpCenterProps) { if (!helpCenter || !helpCenter.id || !helpCenter.callToAction) { return null; } return ( - + {helpCenter.callToAction} ); From 6b2f4816c0609ae078d7f407af942702c7816f1b Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Thu, 30 Apr 2026 12:49:07 +0200 Subject: [PATCH 12/17] fix force value --- src/components/form/fields/ForcedValueField.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx index 484502144..4ac8b0455 100644 --- a/src/components/form/fields/ForcedValueField.tsx +++ b/src/components/form/fields/ForcedValueField.tsx @@ -53,11 +53,9 @@ export function ForcedValueField({ helpCenter, }: ForcedValueFieldProps) { const { setValue } = useFormContext(); - const descriptionSanitized = sanitizeHtml( - statement?.description || description, - ); + const forcedValueDescription = statement?.description || description; - const titleSanitized = statement?.title + const forcedValueTitle = statement?.title ? sanitizeHtml(statement?.title) : sanitizeHtml(label); @@ -66,7 +64,7 @@ export function ForcedValueField({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const isHiddenValue = !descriptionSanitized && !statement?.title; + const isHiddenValue = !forcedValueDescription && !statement?.title; if (isHiddenValue) { return null; @@ -74,17 +72,17 @@ export function ForcedValueField({ return (
- {titleSanitized && ( + {forcedValueTitle && (

)}

From e23cb3dd3defeedce9add0c60743c6c96f2a13c1 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Thu, 30 Apr 2026 12:56:22 +0200 Subject: [PATCH 13/17] custom components --- example/src/Components.tsx | 47 +++++++++++++++++++------------------- example/src/Onboarding.tsx | 2 ++ 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/example/src/Components.tsx b/example/src/Components.tsx index b087ae4e0..d1cc067f1 100644 --- a/example/src/Components.tsx +++ b/example/src/Components.tsx @@ -9,6 +9,21 @@ import type { import { FileUploader } from '@remoteoss/remote-flows/internals'; //import { ZendeskDialog } from './ZendeskDialog'; +const renderDescription = ( + desc?: React.ReactNode | string, + transformHtml?: (html: string) => React.ReactNode, +) => { + if (!desc) { + return null; + } + + if (typeof desc === 'string' && transformHtml) { + return transformHtml(desc); + } + + return

{desc}

; +}; + // you can define HTML button attributes or event props that exist in your Button like variant, size, etc. const Button = ({ children, @@ -57,9 +72,7 @@ const Input = ({ field, fieldData, fieldState }: FieldComponentProps) => { /> )} - {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {fieldState.error && (

{fieldState.error.message}

)} @@ -111,9 +124,7 @@ const Select = ({ field, fieldData, fieldState }: FieldComponentProps) => {
- {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {fieldState.error && (

{fieldState.error.message}

@@ -134,9 +145,7 @@ const Textarea = ({ field, fieldData, fieldState }: FieldComponentProps) => { maxLength={fieldData.maxLength} {...field} /> - {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {fieldState.error && (

{fieldState.error.message}

)} @@ -166,9 +175,7 @@ const Radio = ({ field, fieldData, fieldState }: FieldComponentProps) => { ); })}
- {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {hasError &&

{fieldState.error?.message}

}
); @@ -183,9 +190,7 @@ const Checkbox = ({ field, fieldData, fieldState }: FieldComponentProps) => { - {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {hasError &&

{fieldState.error?.message}

} ); @@ -236,9 +241,7 @@ export const Countries = ({ - {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {fieldState.error && (

{fieldState.error.message}

@@ -283,9 +286,7 @@ const FileUploadField = ({ accept={fieldData.accept} multiple={fieldData.multiple} /> - {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {fieldState.error && (

{fieldState.error.message}

)} @@ -309,9 +310,7 @@ const DatePickerInput = ({ field?.onChange?.(e.target.value); }} /> - {fieldData.description && ( -

{fieldData.description}

- )} + {renderDescription(fieldData.description, fieldData.transformHtml)} {fieldState.error && (

{fieldState.error.message}

)} diff --git a/example/src/Onboarding.tsx b/example/src/Onboarding.tsx index 81a14055c..1e368062f 100644 --- a/example/src/Onboarding.tsx +++ b/example/src/Onboarding.tsx @@ -21,6 +21,7 @@ import { RemoteFlows } from './RemoteFlows'; import { AlertError } from './AlertError'; import './css/main.css'; import { transformHtmlToComponents } from './utils/transformHtml'; +import { components } from './Components'; export const InviteSection = ({ title, @@ -359,6 +360,7 @@ const OnboardingWithProps = ({ Date: Thu, 30 Apr 2026 13:00:54 +0200 Subject: [PATCH 14/17] remove docs --- HTML_TRANSFORMER_TODO.md | 135 --------------------------------------- 1 file changed, 135 deletions(-) diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md index 6db84b9b9..3cf5983b8 100644 --- a/HTML_TRANSFORMER_TODO.md +++ b/HTML_TRANSFORMER_TODO.md @@ -14,141 +14,6 @@ ## 📝 What's Left -### 1. Create Usage Example (USER TASK) - -**Priority: HIGH** -**Estimated effort: 30-60 minutes** - -Create an example in `example/src/Onboarding.tsx` demonstrating the Accordion transformation. - -#### Steps: - -1. **Install dependencies** (if not already installed): - -```bash -npm install html-react-parser dompurify -npm install -D @types/dompurify -``` - -2. **Create an Accordion component** (example/src/components/Accordion.tsx): - -```typescript -import React, { useState } from 'react'; - -export const Accordion = ({ - summary, - children -}: { - summary: React.ReactNode; - children: React.ReactNode -}) => { - const [isOpen, setIsOpen] = useState(false); - - return ( -
setIsOpen(e.currentTarget.open)} - > - - {summary} - -
- {children} -
-
- ); -}; -``` - -3. **Create the transformer function** (example/src/utils/transformHtml.tsx): - -```typescript -import parse, { domToReact, HTMLReactParserOptions, Element } from 'html-react-parser'; -import DOMPurify from 'dompurify'; -import { Accordion } from '../components/Accordion'; - -export const transformHtmlToComponents = (htmlContent: string) => { - // 1. Sanitize HTML first (IMPORTANT for security) - const clean = DOMPurify.sanitize(htmlContent); - - // 2. Define transformation options - const options: HTMLReactParserOptions = { - replace: (domNode) => { - // Check if it's an element node - if (domNode.type === 'tag' && domNode.name === 'details') { - const element = domNode as Element; - const dataComponent = element.attribs?.['data-component']; - - // Transform
to custom Accordion - if (dataComponent === 'Accordion') { - // Find the tag - const summaryNode = element.children?.find( - (child: any) => child.type === 'tag' && child.name === 'summary' - ); - - // Extract summary content - const summary = summaryNode - ? domToReact((summaryNode as Element).children, options) - : 'Details'; - - // Get all other content (not the summary) - const content = element.children?.filter( - (child: any) => !(child.type === 'tag' && child.name === 'summary') - ); - - return ( - - {domToReact(content || [], options)} - - ); - } - } - }, - }; - - // 3. Parse and transform - return parse(clean, options); -}; -``` - -4. **Update Onboarding.tsx to use the transformer**: - -```typescript -import { transformHtmlToComponents } from './utils/transformHtml'; - -// In your component: - - - -``` - -5. **Test it**: - -```bash -npm run dev -# Navigate to onboarding flow -# Look for fields with descriptions containing Accordion HTML -``` - -#### Expected HTML format from API: - -```html -
- Important information about probation periods in Germany -

- In Germany, post-probation terminations are very difficult and require a - valid reason... -

-
-``` - ---- ### 2. Add Integration Tests for Custom Components with Transformer From 2cabb7de492e4af5178d590f141ee203cb05a7c3 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Thu, 30 Apr 2026 13:09:50 +0200 Subject: [PATCH 15/17] add tests --- HTML_TRANSFORMER_TODO.md | 1 - src/components/ui/tests/form.test.tsx | 137 +++++++++++++++++++++++++- 2 files changed, 136 insertions(+), 2 deletions(-) diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md index 3cf5983b8..a361bc424 100644 --- a/HTML_TRANSFORMER_TODO.md +++ b/HTML_TRANSFORMER_TODO.md @@ -14,7 +14,6 @@ ## 📝 What's Left - ### 2. Add Integration Tests for Custom Components with Transformer **Priority: MEDIUM** diff --git a/src/components/ui/tests/form.test.tsx b/src/components/ui/tests/form.test.tsx index 5464ce027..ea55a7cb7 100644 --- a/src/components/ui/tests/form.test.tsx +++ b/src/components/ui/tests/form.test.tsx @@ -2,10 +2,11 @@ import { FormDescription } from '@/src/components/ui/form'; import { screen, render } from '@testing-library/react'; import { TestProviders } from '@/src/tests/testHelpers'; import { PropsWithChildren, ReactNode } from 'react'; -import { FormProvider, useForm } from 'react-hook-form'; +import { Controller, FormProvider, useForm } from 'react-hook-form'; import { $TSFixMe } from '@/src/types/remoteFlows'; import { FormFieldsContext } from '@/src/context'; import { lazyDefaultComponents } from '@/src/lazy-default-components'; +import { FieldComponentProps, FieldDataProps } from '@/src/types/fields'; const wrapper = ({ children }: PropsWithChildren) => { const TestComponent = () => { @@ -226,4 +227,138 @@ describe('Form', () => { expect(screen.getByTestId('safe')).toBeInTheDocument(); }); }); + + describe('Custom field components with transformer', () => { + const createCustomTextField = ( + renderLogic?: (fieldData: FieldDataProps) => React.ReactNode, + ) => { + return ({ field, fieldData }: FieldComponentProps) => { + const renderDescription = () => { + if (renderLogic) { + return renderLogic(fieldData); + } + + if ( + fieldData.transformHtml && + typeof fieldData.description === 'string' + ) { + return fieldData.transformHtml(fieldData.description); + } + return ( + + {fieldData.description} + + ); + }; + + return ( +
+ + {fieldData.description && ( +
+ {renderDescription()} +
+ )} +
+ ); + }; + }; + + const renderFieldWithTransformer = ( + description: string, + transformer?: (html: string) => React.ReactNode, + customComponent?: React.ComponentType, + ) => { + const CustomField = customComponent || createCustomTextField(); + const transformerFn = transformer; + + const Wrapper = ({ children }: PropsWithChildren) => { + const methods = useForm({ defaultValues: { testField: '' } }); + return ( + + + {children} + + + ); + }; + + const TestFormField = () => { + const { control } = useForm({ defaultValues: { testField: '' } }); + return ( + ( + + )} + /> + ); + }; + + return render(, { wrapper: Wrapper }); + }; + + it('should pass transformHtml to custom field component via fieldData', () => { + const customTransformer = (html: string) => ( + {html} + ); + + renderFieldWithTransformer( + 'Test description', + customTransformer, + ); + + expect(screen.getByTestId('transformed-text')).toBeInTheDocument(); + expect(screen.getByTestId('description-container')).toBeInTheDocument(); + }); + + it('should work when no transformer is provided (fallback)', () => { + renderFieldWithTransformer('Simple description text', undefined); + + expect(screen.getByTestId('fallback-description')).toBeInTheDocument(); + expect(screen.getByTestId('fallback-description').textContent).toBe( + 'Simple description text', + ); + }); + + it('should transform HTML descriptions in custom field components', () => { + const accordionTransformer = (html: string) => { + if (html.includes('data-component="Accordion"')) { + return ( +
+ +
Accordion content
+
+ ); + } + return ; + }; + + renderFieldWithTransformer( + '
Title

Content

', + accordionTransformer, + ); + + expect(screen.getByTestId('accordion-component')).toBeInTheDocument(); + expect(screen.getByTestId('accordion-toggle')).toBeInTheDocument(); + expect(screen.getByTestId('accordion-body')).toBeInTheDocument(); + }); + }); }); From 5f0361038a595fe97bca307c982f2e277187bb43 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Thu, 30 Apr 2026 13:14:17 +0200 Subject: [PATCH 16/17] remove docs --- HTML_TRANSFORMER_TODO.md | 49 +--------------------------------------- 1 file changed, 1 insertion(+), 48 deletions(-) diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md index a361bc424..17ad37ea0 100644 --- a/HTML_TRANSFORMER_TODO.md +++ b/HTML_TRANSFORMER_TODO.md @@ -14,53 +14,6 @@ ## 📝 What's Left -### 2. Add Integration Tests for Custom Components with Transformer - -**Priority: MEDIUM** -**Estimated effort: 30-45 minutes** - -Add tests to verify that custom field components receive and can use `fieldData.transformHtml`. - -#### Location: - -`src/components/ui/tests/form.test.tsx` - Add new describe block after existing transformer tests - -#### Test cases to add: - -```typescript -describe('Custom field components with transformer', () => { - it('should pass transformHtml to custom field component via fieldData', () => { - // Test that custom TextField receives transformHtml function - // Verify it can call it and render transformed HTML - }); - - it('should work when no transformer is provided (fallback)', () => { - // Custom component should handle undefined transformHtml gracefully - }); - - it('should transform HTML descriptions in custom field components', () => { - // Full integration: TextField with description containing Accordion HTML - // Custom component uses transformHtml - // Verify Accordion renders correctly - }); -}); -``` - -#### What this tests: - -- ✅ Custom field components receive `transformHtml` in `fieldData` -- ✅ Custom components can call transformer and render result -- ✅ Fallback behavior when transformer is undefined -- ✅ Full integration: HTML description → transformer → custom component → rendered output - -#### Benefits: - -- Complements existing `FormDescription` transformer tests -- Uses existing `createWrapperWithTransformer` helper -- Verifies the feature works end-to-end with custom components -- Minimal duplication, clear test organization - ---- ### 3. Documentation (Optional but Recommended) @@ -102,7 +55,7 @@ const transformHtmlToComponents = (htmlContent: string) => { ``` ```` -### Security Note +### Security Noteº ⚠️ **The transformer receives RAW UNSANITIZED HTML**. You are responsible for sanitizing untrusted HTML before parsing. We recommend using [DOMPurify](https://www.npmjs.com/package/dompurify). From bfef372ebb82be8916604ddd76feb926e72f9e50 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Thu, 30 Apr 2026 13:21:41 +0200 Subject: [PATCH 17/17] format --- HTML_TRANSFORMER_TODO.md | 1 - 1 file changed, 1 deletion(-) diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md index 17ad37ea0..989afc55c 100644 --- a/HTML_TRANSFORMER_TODO.md +++ b/HTML_TRANSFORMER_TODO.md @@ -14,7 +14,6 @@ ## 📝 What's Left - ### 3. Documentation (Optional but Recommended) **Priority: MEDIUM**