Skip to content

Add Timer (countdown) component#40

Open
SouravBandyopadhyay wants to merge 4 commits into
unlayer:mainfrom
SouravBandyopadhyay:feat/timer-countdown-component
Open

Add Timer (countdown) component#40
SouravBandyopadhyay wants to merge 4 commits into
unlayer:mainfrom
SouravBandyopadhyay:feat/timer-countdown-component

Conversation

@SouravBandyopadhyay

@SouravBandyopadhyay SouravBandyopadhyay commented Jul 4, 2026

Copy link
Copy Markdown

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 , 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).

Test Plan

  • pnpm build passes
  • pnpm test passes
  • Tested in Storybook (if UI change)
  • Added/updated tests for new behavior

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>
@ivoIturrieta

Copy link
Copy Markdown
Collaborator

Thanks for the contribution! @SouravBandyopadhyay would you mind checking the failing CI? you need to update the baseline for the storybook tests

SouravBandyopadhyay and others added 3 commits July 6, 2026 12:19
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.
@SouravBandyopadhyay

Copy link
Copy Markdown
Author

fix(timer): resolve the baseline issue and updated json

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