Refactor Storybook theme sync to remove script injection and improve security

[yasnazariel]

Summary

This PR refactors the Storybook preview theme synchronization logic to remove script injection and replace it with a React-based approach.

Changes

• Removed dynamic <script> injection from Storybook decorators
• Replaced it with a useEffect-based message listener
• Added proper cleanup to prevent memory leaks
• Improved security by validating incoming postMessage events
• Simplified class toggling using classList.toggle
• Made the implementation more idiomatic to React and Storybook

Why this matters

The previous implementation:

• Relied on injecting scripts at runtime (anti-pattern)
• Could lead to duplicated listeners and memory leaks
• Did not validate incoming messages (potential security issue)
• Was harder to maintain and reason about

The new approach:

• Uses React lifecycle correctly
• Ensures a single listener with proper cleanup
• Improves security and readability
• Aligns with Storybook best practices

Type of change

• Refactor
• Security improvement
• Code quality improvement

Testing

• Verified theme switching works correctly (light/dark)
• Confirmed no duplicate listeners are added
• Tested iframe background updates via postMessage
• Ensured no errors in cross-origin environments

[cb-heimdall]

🟡 Heimdall Review Status

Requirement	Status	More Info
Reviews	🟡 0/1	Denominator calculation Show calculation 1 if user is bot 0 1 if user is external 0 2 if repo is sensitive 0 From .codeflow.yml 1 Additional review requirements Show calculation Max 0 0 From CODEOWNERS 0 Global minimum 0 Max 1 1 1 if commit is unverified 0 Sum 1

[ifti6171]

Great