8000
Skip to content

Add dates plugin#387

Merged
dbismut merged 10 commits intopmndrs:mainfrom
alex-streza:main
Oct 21, 2022
Merged

Add dates plugin#387
dbismut merged 10 commits intopmndrs:mainfrom
alex-streza:main

Conversation

@alex-streza
Copy link
Copy Markdown
Contributor

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:

image

After plugin-dates:

image

@changeset-bot
Copy link
Copy Markdown
changeset-bot bot commented Oct 6, 2022

🦋 Changeset detected

Latest commit: 2616ba4

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

@vercel
Copy link
Copy Markdown
vercel bot commented Oct 6, 2022

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)

@codesandbox-ci
Copy link
Copy Markdown
codesandbox-ci bot commented Oct 6, 2022

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 2616ba4:

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

@dbismut
Copy link
Copy Markdown
Collaborator
dbismut commented Oct 20, 2022

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?

@alex-streza
Copy link
Copy Markdown
Contributor Author

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:

  1. The default date format should be the local date format Hacker0x01/react-datepicker#3716
  2. Setting attribute locale={"en-US"} throws 391-395 console warnings Hacker0x01/react-datepicker#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.

Copy link
Copy Markdown
Collaborator
@dbismut dbismut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @alex-streza thanks for the quick fix! I just have one little comment and then we're good to go.

Comment thread packages/plugin-dates/src/Date.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

0