feat(components): Calendar Date Picker

[rjdestigter]

trafficstars

Motivations

Ticket: JOB-72836

This date picker implements the styles that came out of the Online Booking project are now also wanted for the Scheduling Recommendations project.

Added

Added a brand new component. Most code was ported over from the CalendarDatePicker used in the Jobber mobile app. I choose to port that over rather than fight with ReactDatePicker

CalendarDatePicker supports selecting single dates, multiple dates, and a date range.

^ 24 is selected and has keyboard focus while 31 has mouse hover styling

^ 1 has mouse hover styling

^ 2 has mouse hover styling

^ 2 is selected and has mouse hover styles applied while 9 is highlighted but has keyboard focus

https://github.com/GetJobber/atlantis/assets/14314519/02723574-8374-482d-87bf-4af5dbbb29c4

^ Today indicators on different states and with different interactions

https://github.com/GetJobber/Jobber/assets/14314519/9d2b2d0c-7d6c-4885-8a1f-72e6939b12aa

^ Range selection

Changed

This PR will not have the changes applied to InputDate and DatePicker (CalendarDatePicker + activator). I do have those changes ready to be PRed once this component is merged.

Testing

Storybook?

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages[bot]]

Deploying atlantis with    Cloudflare Pages

Latest commit:	890465c
Status:	✅  Deploy successful!
Preview URL:	https://bdc8bff6.atlantis.pages.dev
Branch Preview URL:	https://calendar-date-picker-compone.atlantis.pages.dev

View logs

[rjdestigter]

Ready for initial review, especially design review. A follow-up PR implements this for InputDate and I'll have another one for DatePicker (CalendarDatePicker + an activator)

I want to add some more tests for keyboard interactions but might look at upgrading @testing-libarary/user-events first

[rjdestigter]

I avoided making it dependant on date-fns as well. Not sure if we have thoughts on that. My opinion is that it's okay to have the few util functions defined by ourselves as part of the component. It doesn't add a lot of code and keeps the component dependency free.

[darryltec]

@rjdestigter re: dependency. i am in favour of that! this looks pretty cool tho! It's large, but cool!

[github-actions[bot]]

Could not publish Pre-release for 4580291980afcb1dd5cc109d83f3d9852e2fbcba. View Logs The problem is likely in the NPM Publish or NPM CI step in the Trigger Pre-release Build Job. .

[rjdestigter]

Todo: Implement style for todays date