[SDK-366] parse-styles-for-components

[lposen]

🔹 JIRA Ticket(s) if any

• SDK-366

✏️ Description

Parses styles according for each component type, with the ability to override them externally

Test

• Run the example app
• Click "get messages for placement ids" -- A slew of default styles should appear in the section below the hr
• Switch between banner, card and notification -- The styles should change depending on the component
• Click "set view config"
• Update the json to override any of the styles. EG: {"backgroundColor":"blue"}
• Look at the styles again -- They should have been overridden to apply your change

Screen.Recording.2026-02-23.at.5.02.20.PM.mov

[github-actions]

Lines	Statements	Branches	Functions
	63.81% (432/677)	45.67% (132/289)	60.92% (145/238)

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (4)

Rating	File	% Diff	Uncovered Line #s
	src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts	100.0%
	src/embedded/components/IterableEmbeddedView.tsx	100.0%
	src/embedded/constants/embeddedViewDefaults.ts	100.0%
	src/embedded/hooks/useEmbeddedView/getStyles.ts	100.0%
	Total	100.0%

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

[qltysh]

All good ✅

[sumeruchat]

Good work on the style-parsing system — clean separation of concerns, solid test coverage on getStyles, and the config override pattern using ?? is correct. A few items to address before merge, most notably the debug output left in the production component.

[sumeruchat]

Blocker: This entire debug block (lines 51-81) renders raw style values as <Text> nodes on screen, and wraps <Cmp> in an extra <View>. This looks like scaffolding/dev output and should be removed before merge.

[lposen]

This is just for demonstration and easy testing purposes. It will be removed in future PRs.

[sumeruchat]

parsedStyles is computed but never passed to <Cmp>. The child components (Banner/Card/Notification) won't receive or apply these styles. Should this be something like <Cmp {...props} parsedStyles={parsedStyles} />?

[lposen]

The whole function is going to go inside the other components in future PRs. This is just for making it easy to test.

[sumeruchat]

embeddedMediaImageBorderColors and embeddedMediaImageBackgroundColors are defined and added to embeddedStyles, but never consumed in getStyles.ts. Remove them or add the corresponding style resolution to avoid dead code.

[lposen]

You're 100% correct. Good eye. They ended up in here because I was breaking down a very large PR. I'll remove them and add them back in later when they are needed.

[joaodordio]

+1 on the comments Sumeru already added, other than that looks good!

[franco-zalamena-iterable]

This is a really technical implementation and I lack the needed knowledge to give helpful insights for React Native. I tested the app with this branch and everything seems to be working.