Add wildcard/calendar component based on 'react-calendar' npm package
Created by: erzhtor
Part 1 of https://github.com/sourcegraph/sourcegraph/issues/40593.
For the new user-management page, we need to add column filters, and some columns are of date type. This PR adds a Calendar component based on react-calendar, with basic Sourcegraph styles (light/dark mode) that supports date or date range selection.
Note: there are not many existing react library options that would be simple and yet allow us fully style it.
@sourcegraph/frontend-platform, @rrhyne I thought that this base Calendar could be useful to extract into wildcard in case there will be some other places where a calendar or date range picker will be needed. However, if you think this should not be included in the wildcard yet, I can close this PR and just include it directly in the user-management page folder.
Test plan
yarn storybook:wildcard- Open http://localhost:9001/?path=/story/wildcard-calendar--mode-range
Screenshots
| Description | screenshot |
|---|---|
| single date select mode |  |
<Calendar value={value as [Date, Date]} onChange={onChange} /> |
|
| date range select mode |  |
<Calendar mode="range" value={value as [Date, Date]} onChange={onChange} /> |
|
| dark mode |  |
App preview:
Check out the client app preview documentation to learn more.
