adding input fields for custom screen size and validations

rahulchaudhary2244 commented 1 month ago

Pull Request Template

Description

This PR adds a feature for passing custom screen sizes.

Closes # (issue) https://github.com/suryanshsingh2001/mockly/issues/4

Changes Made

1.) Implemented separate state variables to manage the dimensions of "customScreenSize" and "presetScreenSize". This allows for better tracking and control over the values for each screen size type. 2.) Updated the "screenSize" state based on the currently active tab, either "custom" or "preset". This ensures that the displayed screen size reflects the user's selection accurately. 3.) Added "handleCustomSizeChange" function to validate input for "customScreenSize". The validation allows only positive numerical values, ensuring data integrity and preventing invalid entries.

Type of Change

Select the type of change made with this pull request:

[ ] Bug fix (non-breaking change that fixes an issue)
[x] New feature (non-breaking change that adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] Documentation update

Screenshots (if applicable)

https://github.com/user-attachments/assets/3c418488-1d7d-46c2-91ae-a8e62771812d

How Has This Been Tested?

Manually tested on local environment

Checklist

Check off the following items before submitting the pull request:

[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my code
[x] I have commented my code, particularly in hard-to-understand areas
[ ] I have made corresponding changes to the documentation
[x] My changes generate no new warnings
[ ] I have added tests that prove my fix is effective or that my feature works
[x] New and existing unit tests pass locally with my changes
[ ] Any dependent changes have been merged and published in downstream modules

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mockly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 1, 2024 7:11pm

suryanshsingh2001 commented 1 month ago

Hi @rahulchaudhary2244 ,

I noticed that changing the screen size to a very large value, such as 140000, breaks the image rendering and the state becomes irreversible. To address this, we should set maximum and minimum limits for both height and width in the custom screen size input to prevent such issues.

Task List:

[ ] Define appropriate maximum (e.g., 2000px) and minimum (e.g., 100px) limits for height and width in the custom screen size input.
[ ] Implement validation to ensure input values stay within the defined range.
[ ] Display an error message when values outside the allowed range are entered.

https://github.com/user-attachments/assets/c0dbd65f-7ed9-43c5-888f-3721b9ce79ff

rahulchaudhary2244 commented 1 month ago

Hi @suryanshsingh2001 , Thank you for your suggestion! I appreciate your input and will give it a try to resolve the issues. I'll keep you posted on how it goes.

suryanshsingh2001 commented 1 month ago

@rahulchaudhary2244 Just a quick reminder to pull the latest changes from the master repository to ensure you’re all up to date and avoid any potential merge conflicts as you work on new updates.

rahulchaudhary2244 commented 1 month ago

Hi @suryanshsingh2001 ,Thank you for reviewing the changes! I have implemented the following updates:

Added submit functionality for both the Enter key and the onBlur event.

Increased the maximum resolution to 2K.
When a user clicks on a different input field, the onBlur event is triggered. This will either display an error state or update the screenSize if the input is valid.

suryanshsingh2001 commented 1 month ago

Hey, everything good and working. Only issue left.

[ ] Take the latest pull from master branch. Your branch in one commit behind right now.

Please resolve this.

rahulchaudhary2244 commented 1 month ago

Hi @suryanshsingh2001 , just rebased the branch., should be fine now

suryanshsingh2001 commented 1 month ago

@rahulchaudhary2244 Hi, I wanted to take a moment to personally thank you for your valuable contributions. Your insights and solutions have truly shaped the way Mockly has progressed, and I’m incredibly grateful for your work.

If there are any other issues you’d like to explore or areas for further improvement, feel free to dive in. I’d love the opportunity to collaborate with you again in the future.

suryanshsingh2001 commented 1 month ago

One more small request @rahulchaudhary2244 Please make sure to star this to increase the overall reach of this repository to more open source traffic.

suryanshsingh2001 / mockly