✨(react) add DatePicker component

Based on the Figma DS design by Alex, a mono date-picker
component has been added. It uses react-aria headless ui
component capabilities, with downshift headless ui component.
React-aria was not supporting by default dropdown menus to
select months and years. We could not reuse Popover component
from react-aria because we are not using their headless ui
component for the button one. Clicking on the toggle calendar
button triggers both the button and the popover click outside
events. React-aria button uses a custom onPress props that is
disabled by their popover. Instead, I have implemented a simple
custom hook. This is the first acceptable version of the component.
Some minor user interaction are missing. This first component
doesn't support time selection.

packages/react/src/components/Forms/DatePicker/index.mdx

@@ -0,0 +1,114 @@
+
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { DatePicker } from "./index";
+
+<Meta title="Components/Forms/DatePicker/Doc" component={DatePicker}/>
+
+
+# DatePicker
+
+
+Cunningham provides a versatile DatePicker component to select or input a date in your form. It uses the headless
+UI components provided by [React-Spectrum](https://react-spectrum.adobe.com/react-aria/useDatePicker.html) from Adobe.
+
+> For now it is only available for single date selection, a range date picker and time features will be available soon.
+
+
+## Basic
+
+<Canvas>
+  <Story id="components-forms-datepicker--default"/>
+</Canvas>
+
+## Default value
+You can use the following props to change the default value of the DatePicker component by using the `state` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--default-value"/>
+</Canvas>
+
+
+## States
+
+You can use the following props to change the state of the DatePicker component by using the `state` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--error"/>
+  <Story id="components-forms-datepicker--success"/>
+</Canvas>
+
+## Disabled
+
+As a regular input, you can disable it by using the `disabled` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--disabled"/>
+  <Story id="components-forms-datepicker--disabled-value"/>
+</Canvas>
+
+## Texts
+
+As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--with-text"/>
+</Canvas>
+
+## Controlled / Non Controlled
+
+Like a native input, you can use the DatePicker component in a controlled or non controlled way. You can see the example below
+using the component in a controlled way.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--controlled"/>
+</Canvas>
+
+## MinValue / MaxValue
+
+You can pass a date range that are valid using the `minValue` and `maxValue` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--min-max-value"/>
+</Canvas>
+
+## Invalid date
+
+When passing an invalid date, for example outside of the valid range, the DatePicker component would render invalid.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--invalid-value"/>
+</Canvas>
+
+## Props
+
+You can see the list of props below.
+
+<ArgsTable of={DatePicker} />
+
+
+## Design tokens
+
+Here are the custom design tokens defined by the datepicker.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| background-color   	| Background color of the datepicker    	|
+| border-color   	| Border color of the datepicker    	|
+| border-color--hover   	| Border color of the datepicker on mouse hover   	|
+| border-color--focus   	| Border color of the datepicker when focus   	|
+| border-radius     	| Border radius of the datepicker      	|
+| border-width     	| Border width of the datepicker      	|
+| border-radius--hover   	| Border radius of the datepicker on mouse hover    	|
+| border-radius--focus   	| Border radius of the datepicker when focused    	|
+| color   	| Value color  	|
+| font-size        	| Value font size        	|
+| height | Height of the combo box |
+| item-background-color--hover | Background color of the item on mouse hover (months/years menus)   	|
+| item-background-color--selected | Background color of the selected item (months/years menus)   	|
+| item-color | Color of the item (months/years menus)    	|
+| item-font-size | Font size of the item (months/years menus)    	|
+| menu-background-color | Background color of the menu (months/years menus)    	|
+| grid-cell--border-color--today | Border color of the today grid-cell    	|
+| grid-cell--color--today | Value color of the today grid-cell    	|
+
+See also [Field](?path=/story/components-forms-field-doc--page)