Play/pomodoro timer

[deansereigns]

Before creating this PR, please confirm the following:

• I have read the ReactPlay Contributor Guidelines and Discussion
• I have reviewed the ReactPlay Code Review Checklist
• I have tested my changes locally and verified there are no new warnings or errors

---

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

This PR adds a new play called Pomodoro Timer with Custom Sessions.

The Pomodoro Timer is a productivity tool that allows users to manage focus sessions and breaks efficiently. It includes:

• Focus, Short Break, and Long Break sessions
• Scroll-based interactive time selection (minutes and seconds)
• Start, Pause, and Reset controls
• Automatic session handling and switching
• Clean and modular architecture using React functional components and hooks
• TypeScript support for type safety

This play demonstrates proper state management, custom hooks, reusable components, and interactive UI design.

Fixes #1676

---

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

---

How Has This Been Tested?

Steps to reproduce:

1. Run the project locally using npm run start
2. Open the Pomodoro Timer play from the plays list
3. Select any session (Focus, Short Break, Long Break)
4. Click on the time to open the scroll picker
5. Change minutes and seconds using scroll
6. Click Start, Pause, and Reset to verify functionality
7. Verify that the timer updates and works correctly

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Functionality Testing Checklist

• Focus session timer works correctly
• Short break session timer works correctly
• Long break session timer works correctly
• Scroll-based time picker updates minutes correctly
• Scroll-based time picker updates seconds correctly
• Selected time reflects immediately without requiring reset
• Start button starts the timer correctly
• Pause button pauses the timer correctly
• Reset button resets the timer correctly
• Session selector switches between Focus, Short Break, and Long Break
• Timer automatically handles session timing logic
• UI updates correctly when time is changed
• No console errors during execution
• No TypeScript errors
• No ESLint or Prettier errors
• Play renders correctly inside ReactPlay

Screenshots

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	f68b6a8
🔍 Latest deploy log	https://app.netlify.com/projects/reactplayio/deploys/6992171cfdbc2c000886615e
😎 Deploy Preview	https://deploy-preview-1680--reactplayio.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[priyankarpal]

are you apertre contributor?

[deansereigns]

@priyankarpal No, I'm not an Apertre contributor.