fix(codegen-ui-react): prevent useless props forward to custom components

[JJK801]

Problem

When we create composite components (components with nested components) in Figma and they go through the studio and amplify-codegen-ui, any props are forwarded to the nested component (including the defaults that were not configured in the studio).

When using variants with logic inside the components (breakpoint, displayMode, ...), this breaks the logic because the forwarded prop will always be the default variant.

Example:

GIVEN i created a NavBar component in Figma with 2 breakpoint variants (small, medium)
GIVEN i nested my NavBar component in a PageLayout component in Figma
WHEN codegen-amplify-ui generates my PageLayout component
THEN the nested NavBar component will receive a breakpoint="small" prop from PageLayout
THEN the forwarded prop overrides the breakpoint value generated inside the NavBar component

Solution

Studio produced JSON includes a configured key for props added via the studio, so we can use it to filter custom components props. Implemented forwarding filter rule is the following:

• Component IS a Primitive => Because Primitives needs explicit props forwarding
• Component IS a HTML tag => Because HTML tags needs explicit props forwarding
• Prop value is dynamic (prop key is in localStateReferences)
• Prop value is a Collection binding
• Prop value is a concat
• Prop value has been configured in the studio

Additional Notes

I fixed most of the specs by simply adding the configured prop to the dataset. It seems the best way to do, but pay attention so that doesn't change the nature of the test.

Links

Ticket

Other links

Verification

Manual tests

Automated tests

• Unit tests added/updated
• E2E tests added/updated
• N/A - (provide a reason)
• deferred - (provide GitHub issue for tracking)

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.71%. Comparing base (b3f340a) to head (208bbf6).
⚠️ Report is 150 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #1009       +/-   ##
===========================================
+ Coverage   81.26%   93.71%   +12.45%     
===========================================
  Files         121      122        +1     
  Lines        5369     5428       +59     
  Branches     1599     1620       +21     
===========================================
+ Hits         4363     5087      +724     
+ Misses        935      323      -612     
+ Partials       71       18       -53     

Files with missing lines	Coverage Δ
...s/codegen-ui-react/lib/react-component-renderer.ts	100.00% <100.00%> (+11.11%)	⬆️

... and 29 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5e23c0c...208bbf6. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[JJK801]

Hi 🖖

Any news about this PR ?