pmndrs
Add dates plugin
Folowing suggestion #382 I've implemented a dates plugin, I can't decide whether it's an overkill to add a custom date-fns + react-datepicker implementation when this can also be achieved with a custom plugin (I could add better docs there too).
I took a look around and tweakpane doesn't have an official date plugin either, likely due to complexity, bundle size and lack of real use cases.
After a bit of tinkering I ended up with the following benchmarks through size-limit,
Before plugin-dates:
After plugin-dates:
🦋 Changeset detected
Latest commit: 2616ba4cd3ae5c9dea17f49c0527fbf20fd1c211
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| @leva-ui/plugin-dates | Major |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated |
|---|---|---|---|
| leva | ✅ Ready (Inspect) | Visit Preview | Oct 21, 2022 at 9:32AM (UTC) |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 2616ba4cd3ae5c9dea17f49c0527fbf20fd1c211:
| Sandbox | Source |
|---|---|
| leva-minimal | Configuration |
| leva-busy | Configuration |
| leva-scroll | Configuration |
| leva-advanced-panels | Configuration |
| leva-ui | Configuration |
| leva-theme | Configuration |
| leva-transient | Configuration |
| leva-plugin-plot | Configuration |
| leva-plugin-bezier | Configuration |
| leva-plugin-spring | Configuration |
| leva-plugin-dates | Configuration |
| leva-custom-plugin | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey @alex-streza thanks for this! Finally had the time to have a look at it. It looks awesome :)
I see that you're calling format from date-fns/format, any reasons why you're not using toLocalDateString? The API might not be as nice, but it includes all possible locales without dealing with bundling the language file... What do you think?
Hey @dbismut, indeed your solution is much simpler yet effective for localization.
I tested it and works flawlessly until date picking due to those 2 react-datepicker issues:
- https://github.com/Hacker0x01/react-datepicker/issues/3716
- https://github.com/Hacker0x01/react-datepicker/issues/3781
My workaround was adding an inputFormat setting so you can customize the date-picker input as you please and use the locale way you suggested for the formattedDate.
I also updated size-limit since I couldn't run it on Windows with the previous config.