Add Timer (countdown) component#40
Conversation
The @unlayer/exporters engine already shipped a first-class Timer (countdown) exporter, defaults, and types, but the React package never exposed a wrapper. Countdown timers are a core email-marketing element, so wire one through the existing component factory. - Add Timer via createItemComponent (TimerExporters/TimerDefaults), exported from the barrel with TimerProps + TimerValues re-exported through shared. - Expose an `imageUrl` prop (alias for countdown.countdownUrl) so authors can point at any server-rendered countdown image (NiftyImages, Sendtric, etc.). A countdown in email is a plain <img>, not JS, so it is Gmail/Outlook-safe. - Map `alt` -> altText and `href` -> action (storage shape) so links round-trip through renderToJson; pull `width` out to the display group to avoid the countdown.width name collision. - Tests: Timer.test.tsx (no <script>, imageUrl verbatim, JSON round-trip), snapshot cases, and index export assertions. Add Timer stories and regenerate the Storybook visual-drift baseline. - Commit the Storybook Node-global shims required for the exporter-backed stories to render in-browser (needed by the visual/smoke gates). Co-Authored-By: Cursor <cursoragent@cursor.com>
|
Thanks for the contribution! @SouravBandyopadhyay would you mind checking the failing CI? you need to update the baseline for the storybook tests |
Regenerate the visual-drift baseline to include the new Timer component's 6 stories (x2 viewports). Verified no existing story fingerprints changed. Co-authored-by: Cursor <cursoragent@cursor.com>
Extend and rework packages/react/scripts/storybook-visual-baseline.json: add many new baseline CSS entries and component mappings for custom tools (accordion, map, product library, QR, tabs, etc.) and registered tools (countdown, product card, inside-a-full-design). Update example/story index arrays and reorder references to support new visual tests and components. This change ensures Storybook visual regression tests include the new custom tool layouts and updated style baselines.
|
fix(timer): resolve the baseline issue and updated json
|
|
Thanks for the contribution! After discussing this further, we’re going to pause this PR while we revisit the timer API. The Timer component should ideally work by accepting countdown props directly, without requiring users to generate or provide an imageUrl. Supporting that properly requires some backend work so we can securely generate and meter the countdown URL. We’d prefer to settle that API contract before exposing the component publicly, rather than introduce an API we may need to change shortly afterward. We really appreciate the work you’ve put into this! |
The @unlayer/exporters engine already shipped a first-class Timer (countdown) exporter, defaults, and types, but the React package never exposed a wrapper. Countdown timers are a core email-marketing element, so wire one through the existing component factory.
imageUrlprop (alias for countdown.countdownUrl) so authors can point at any server-rendered countdown image (NiftyImages, Sendtric, etc.). A countdown in email is a plainalt-> altText andhref-> action (storage shape) so links round-trip through renderToJson; pullwidthout to the display group to avoid the countdown.width name collision.Test Plan
pnpm buildpassespnpm testpasses