feat(lemon-ui): add date limit when selecting dates.

[rodrigoi]

Problem

We need to allow the user to update the stop date of experiments (a common practice), that is currently using the LemmonCalendarSelect component. We need to prevent the user from selecting a stop date before the experiment start date.

To support this feature, we need to add a limit to how many days one can select forward or backward.

Changes

This PR adds a new optional prop to the LemonCalendarSelect component so we can set a limit date. We also refactor the logic for setting a date to disable reason, add two new stories to storybook, and two more tests.

Also, the tests have been refactored to improve readability and reduce code duplication.

To run the tests from the /frontend folder:

pnpm jest src/lib/lemon-ui/LemonCalendar/

Limiting Upcoming Selection	Limiting Past Selection

Important

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

How did you test this code?

[greptile-apps]

PR Summary

Added a new selectionPeriodLimit prop to LemonCalendarSelect component to restrict date selection ranges, with comprehensive test coverage and documentation.

• Added getDateDisabledReason function in /frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.tsx to handle date validation with limits
• Added two new Storybook stories in LemonCalendarSelect.stories.tsx demonstrating limit functionality for both past and future selections
• Refactored test code in LemonCalendarSelect.test.tsx to reduce duplication with helper functions and added specific test cases for date limits
• Integrated limit validation seamlessly with existing time selection functionality while maintaining backward compatibility

_{3 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[github-actions]

Size Change: +188 B (0%)

Total Size: 9.75 MB

ℹ️ View Unchanged

Filename	Size	Change
frontend/dist/toolbar.js	9.75 MB	+188 B (0%)

_{compressed-size-action}