Skip to content

feat(htmltocomponents) - add example and expose props#993

Merged
gabrielseco merged 16 commits into
mainfrom
add-example-and-expose-prop
May 12, 2026
Merged

feat(htmltocomponents) - add example and expose props#993
gabrielseco merged 16 commits into
mainfrom
add-example-and-expose-prop

Conversation

@gabrielseco
Copy link
Copy Markdown
Collaborator

@gabrielseco gabrielseco commented May 4, 2026

This PR, adds transformHTMLToComponents to the API and adds an example on the repo

We have a follow up PR with the docs explaining this functionality

The problem

JSON schemas can inject html and that html supposes a problem for partners as they cannot replace them with their own design system accordion

The solution

There was several PRs before doing changes across the repo, this one just makes the example work

How to test

Start the OnboardingFlow, select Germany and navigate to contract details

Loom

Germany.transformHTMLToComponents.mp4

Note

Medium Risk
Medium risk because it threads a new optional HTML-to-React transformation hook through SDK context and field rendering paths, which can affect how descriptions render and introduces partner-provided HTML parsing/sanitization concerns.

Overview
Adds an optional HTML-to-React transformation hook to the SDK. RemoteFlows/FormFieldsProvider now accept and provide transformHtmlToComponents via context so field descriptions can be rendered as transformed React nodes rather than plain text/HTML.

Updates the example app to demonstrate the feature. The example adds dompurify + html-react-parser, implements transformHtmlToComponents (including a custom Accordion), and updates field components to use fieldData.transformHtml; it also wires the transformer into RemoteFlows and bumps the DEU contract_details schema version.

Reviewed by Cursor Bugbot for commit 76c1c6f. Bugbot is set up for automated code reviews on this repo. Configure here.

@gabrielseco gabrielseco self-assigned this May 4, 2026
@gabrielseco gabrielseco changed the base branch from main to fields-transformer May 4, 2026 09:53
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

📦 Bundle Size Report

Metric Current Previous Change Status
Total (gzip) 211.45 kB 211.3 kB +151 B (+0.1%) 🔴
Total (raw) 572.65 kB 571.98 kB +671 B (+0.1%) 🔴
CSS (gzip) 20.86 kB 20.75 kB +111 B (+0.5%) 🔴
CSS (raw) 108.83 kB 108.29 kB +538 B (+0.5%) 🔴

Size Limits

  • ✅ Total gzipped: 211.45 kB / 250 kB (84.6%)
  • ✅ Total raw: 572.65 kB / 600 kB (95.4%)
  • ✅ CSS gzipped: 20.86 kB / 25 kB (83.4%)

Largest Files (Top 5)

  1. chunk-XG6ASTX5.js - 14 kB (0 B (0%))
  2. styles.css - 10.43 kB (+55 B (+0.5%))
  3. index.css - 10.43 kB (+56 B (+0.5%))
  4. index.js - 6.09 kB (+38 B (+0.6%))
  5. chunk-TNQKP2XT.js - 5.89 kB (0 B (0%))
View All Files (312 total)
File Size (gzip) Change
chunk-XG6ASTX5.js 14 kB 0 B (0%)
styles.css 10.43 kB +55 B (+0.5%)
index.css 10.43 kB +56 B (+0.5%)
index.js 6.09 kB +38 B (+0.6%)
chunk-TNQKP2XT.js 5.89 kB 0 B (0%)
chunk-KAHAW4HH.js 5.81 kB 0 B (0%)
chunk-RZCU2MT3.js 5.23 kB 0 B (0%)
chunk-WUSKSXW2.js 4.62 kB 0 B (0%)
chunk-I66TFXX4.js 4.35 kB 0 B (0%)
chunk-QYNWADPG.js 4.06 kB 0 B (0%)

✅ Bundle size check passed

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

📊 Coverage Report

✅ Coverage increased! 🎉

Metric Current Previous Change Status
Lines 90.03% 90.02% 0%
Statements 89.70% 89.69% 0%
Functions 87.69% 87.68% +0.01% 🟢
Branches 80.06% 80.06% 0%

Detailed Breakdown

Lines Coverage
  • Covered: 3675 / 4082
  • Coverage: 90.03%
  • Change: 0% (2 lines)
Statements Coverage
  • Covered: 3736 / 4165
  • Coverage: 89.70%
  • Change: 0% (2 statements)
Functions Coverage
  • Covered: 997 / 1137
  • Coverage: 87.69%
  • Change: +0.01% (1 functions)
Branches Coverage
  • Covered: 2272 / 2838
  • Coverage: 80.06%
  • Change: 0% (0 branches)

✅ Coverage check passed

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

Deploy preview for remote-flows ready!

Project:remote-flows
Status: ✅  Deploy successful!
Preview URL:https://remote-flows-d2svzm19h-remotecom.vercel.app
Latest Commit:76c1c6f
Inspect:View deployment

Deployed with vercel-action

@gabrielseco gabrielseco changed the title Add example and expose prop feat(htmltocomponents) - add example and expose props May 4, 2026
Base automatically changed from fields-transformer to main May 5, 2026 11:42
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit f29ec0c. Configure here.

Comment thread example/src/Onboarding.tsx Outdated
@gabrielseco gabrielseco requested a review from jordividaller May 12, 2026 08:10
@gabrielseco gabrielseco merged commit 90fe984 into main May 12, 2026
10 checks passed
@gabrielseco gabrielseco deleted the add-example-and-expose-prop branch May 12, 2026 08:47
@gabrielseco gabrielseco mentioned this pull request May 12, 2026
jordividaller pushed a commit that referenced this pull request May 15, 2026
* add context and utility

* feat(form) - add transformer to the description

* changes

* fix mock tests

* sanitize

* fix tests

* feat(fieldsets) - add transformation to fieldsets

* feat(fields) - add transformer

* feat(onboarding) - add example

* add example

* fix
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants