Skip to content

Commit 31dc792

Browse files
author
Austin Green
authored
feat(datepickers): introduce Datepicker component (#373)
1 parent 4a3b6a6 commit 31dc792

33 files changed

+2493
-13
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ to install.
2222
| [`@zendeskgarden/react-breadcrumbs`](packages/breadcrumbs) | [![npm version][breadcrumbs npm version]][breadcrumbs npm link] | [![Dependency Status][breadcrumbs dependency status]][breadcrumbs dependency link] |
2323
| [`@zendeskgarden/react-buttons`](packages/buttons) | [![npm version][buttons npm version]][buttons npm link] | [![Dependency Status][buttons dependency status]][buttons dependency link] |
2424
| [`@zendeskgarden/react-chrome`](packages/chrome) | [![npm version][chrome npm version]][chrome npm link] | [![Dependency Status][chrome dependency status]][chrome dependency link] |
25+
| [`@zendeskgarden/react-datepickers`](packages/datepickers) | [![npm version][datepickers npm version]][datepickers npm link] | [![Dependency Status][datepickers dependency status]][datepickers dependency link] |
2526
| [`@zendeskgarden/react-dropdowns`](packages/dropdowns) | [![npm version][dropdowns npm version]][dropdowns npm link] | [![Dependency Status][dropdowns dependency status]][dropdowns dependency link] |
2627
| [`@zendeskgarden/react-forms`](packages/forms) | [![npm version][forms npm version]][forms npm link] | [![Dependency Status][forms dependency status]][forms dependency link] |
2728
| [`@zendeskgarden/react-grid`](packages/grid) | [![npm version][grid npm version]][grid npm link] | [![Dependency Status][grid dependency status]][grid dependency link] |
@@ -59,6 +60,10 @@ to install.
5960
[chrome npm link]: https://www.npmjs.com/package/@zendeskgarden/react-chrome
6061
[chrome dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/chrome&style=flat-square
6162
[chrome dependency link]: https://david-dm.org/zendeskgarden/react-components?path=packages/chrome
63+
[datepickers npm version]: https://img.shields.io/npm/v/@zendeskgarden/react-datepickers.svg?style=flat-square
64+
[datepickers npm link]: https://www.npmjs.com/package/@zendeskgarden/react-datepickers
65+
[datepickers dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/datepickers&style=flat-square
66+
[datepickers dependency link]: https://david-dm.org/zendeskgarden/react-components?path=packages/datepickers
6267
[dropdowns npm version]: https://img.shields.io/npm/v/@zendeskgarden/react-dropdowns.svg?style=flat-square
6368
[dropdowns npm link]: https://www.npmjs.com/package/@zendeskgarden/react-dropdowns
6469
[dropdowns dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/dropdowns&style=flat-square

‎babel.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,10 @@ module.exports = {
2020
'@babel/plugin-proposal-class-properties',
2121
'@babel/proposal-object-rest-spread',
2222
'babel-plugin-styled-components'
23-
]
23+
],
24+
env: {
25+
production: {
26+
plugins: [['react-remove-properties', { properties: [/data-test/u] }]]
27+
}
28+
}
2429
};

‎demo/index.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,17 +105,20 @@ <h1 class="c-main__title">React Components</h1>
105105
<div class="u-mb-sm">
106106
<a class="u-fg-inherit" href="chrome">Chrome</a>
107107
</div>
108+
<div class="u-mb-sm">
109+
<a class="u-fg-inherit" href="datepickers">Datepickers</a>
110+
</div>
108111
<div class="u-mb-sm">
109112
<a class="u-fg-inherit" href="dropdowns">Dropdowns</a>
110113
</div>
111114
<div class="u-mb-sm">
112115
<a class="u-fg-inherit" href="forms">Forms</a>
113116
</div>
117+
</div>
118+
<div class="col-xl-4 col-sm-6">
114119
<div class="u-mb-sm">
115120
<a class="u-fg-inherit" href="grid">Grid</a>
116121
</div>
117-
</div>
118-
<div class="col-xl-4 col-sm-6">
119122
<div class="u-mb-sm">
120123
<a class="u-fg-inherit" href="loaders">Loaders</a>
121124
</div>
@@ -134,11 +137,11 @@ <h1 class="c-main__title">React Components</h1>
134137
<div class="u-mb-sm">
135138
<a class="u-fg-inherit" href="selection">Selection</a>
136139
</div>
140+
</div>
141+
<div class="col-xl-4 col-sm-6">
137142
<div class="u-mb-sm">
138143
<a class="u-fg-inherit" href="tables">Tables</a>
139144
</div>
140-
</div>
141-
<div class="col-xl-4 col-sm-6">
142145
<div class="u-mb-sm">
143146
<a class="u-fg-inherit" href="tabs">Tabs</a>
144147
</div>

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"babel-eslint": "10.0.2",
5555
"babel-jest": "24.8.0",
5656
"babel-loader": "8.0.6",
57+
"babel-plugin-react-remove-properties": "0.3.0",
5758
"babel-plugin-styled-components": "1.10.5",
5859
"chalk": "2.4.2",
5960
"commander": "2.20.0",
@@ -96,6 +97,7 @@
9697
"markdown-loader": "5.0.0",
9798
"markdownlint-cli": "0.17.0",
9899
"mini-css-extract-plugin": "0.7.0",
100+
"mockdate": "2.0.3",
99101
"node-fetch": "2.6.0",
100102
"optimize-css-assets-webpack-plugin": "5.0.3",
101103
"prettier": "1.18.2",

‎packages/datepickers/README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# @zendeskgarden/react-datepickers [![npm version](https://img.shields.io/npm/v/@zendeskgarden/react-datepickers.svg?style=flat-square)](https://www.npmjs.com/package/@zendeskgarden/react-datepickers)
2+
3+
This package includes components relating to datepickers in the
4+
[Garden Design System](https://zendeskgarden.github.io/).
5+
6+
## Installation
7+
8+
```sh
9+
npm install @zendeskgarden/react-datepickers
10+
11+
# Peer Dependencies - Also Required
12+
npm install react react-dom prop-types styled-components @zendeskgarden/react-theming
13+
```
14+
15+
## Usage
16+
17+
```jsx static
18+
/**
19+
* Include datepickers styling at the root of your application
20+
*/
21+
import '@zendeskgarden/react-datepickers/dist/styles.css';
22+
23+
import { ThemeProvider } from '@zendeskgarden/react-theming';
24+
import { Field, Label, Input } from '@zendeskgarden/react-forms';
25+
import { Datepicker } from '@zendeskgarden/react-datepickers';
26+
27+
/**
28+
* Place a `ThemeProvider` at the root of your React application
29+
*/
30+
<ThemeProvider>
31+
<Field>
32+
<Label>Example datepicker</Label>
33+
<Datepicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
34+
<Input />
35+
</Datepicker>
36+
</Field>
37+
</ThemeProvider>;
38+
```
39+
40+
## date-fns dependency
41+
42+
We currently use the v2, `date-fns@next`, distribution of [date-fns](https://date-fns.org/).
43+
This allows us to provide a wider range of locales and include non-strict date parsing.
44+
Ensure you are depending on locales from this version of `date-fns`.

‎packages/datepickers/package.json‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "@zendeskgarden/react-datepickers",
3+
"description": "Components relating to datepickers in the Garden Design System",
4+
"license": "Apache-2.0",
5+
"author": "Zendesk Garden <garden@zendesk.com>",
6+
"homepage": "https://garden.zendesk.com/",
7+
"repository": "https://github.com/zendeskgarden/react-components",
8+
"bugs": {
9+
"url": "https://github.com/zendeskgarden/react-components/issues"
10+
},
11+
"version": "0.0.0",
12+
"main": "./dist/index.js",
13+
"files": [
14+
"dist"
15+
],
16+
"scripts": {
17+
"build": "../../utils/scripts/build.sh",
18+
"build:demo": "../../utils/scripts/build-demo.sh",
19+
"start": "../../utils/scripts/start.sh"
20+
},
21+
"types": "dist/typings/index.d.ts",
22+
"dependencies": {
23+
"@zendeskgarden/container-utilities": "^0.1.0",
24+
"classnames": "^2.2.5",
25+
"date-fns": "^2.0.0-beta.2",
26+
"polished": "^3.4.1",
27+
"react-popper": "^1.3.3"
28+
},
29+
"peerDependencies": {
30+
"@zendeskgarden/react-theming": "^6.0.0",
31+
"prop-types": "^15.6.1",
32+
"react": "^16.8.0",
33+
"react-dom": "^16.8.0",
34+
"styled-components": "^4.2.0"
35+
},
36+
"devDependencies": {
37+
"@zendeskgarden/css-arrows": "3.1.1",
38+
"@zendeskgarden/css-menus": "9.0.11",
39+
"@zendeskgarden/react-theming": "^6.0.1",
40+
"@zendeskgarden/svg-icons": "6.3.0"
41+
},
42+
"keywords": [
43+
"components",
44+
"garden",
45+
"react",
46+
"zendesk"
47+
],
48+
"publishConfig": {
49+
"access": "public"
50+
},
51+
"zendeskgarden:library": "GardenDatepickers",
52+
"zendeskgarden:src": "src/index.ts"
53+
}

0 commit comments

Comments
 (0)