Doc(Migration): Add a migration guide

Initialized with the Date migration guide.

MIGRATION.md

@@ -0,0 +1,39 @@
+<h1>Migration Guide</h1>
+
+- [From version 1.x to 2.0.x](#from-version-1x-to-20x)
+  - [Date Input](#date-input)
+
+# From version 1.x to 2.0.x
+
+## Date Input
+
+We updated the React DatePicker from 1.X to 3.X. The library no longer uses moment. Instead it uses DateFns as a dependency for date management. Therefore, the Date Input no longer uses moment object for the value, but a Javascript [Date object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date). Also, the onChange callback return a Date value instead of a moment Value.
+
+The `locale` param also changed. It is a string which set the language of the component. You can find the full list on [DateFns's website](https://date-fns.org/v2.0.0-alpha.18/docs/I18n#supported-languages). 
+
+We also added a `format` param which allow to specify the way to display value in viewvalue and in the field. He have to be a [unicode format](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)
+
+In 1.X: 
+
+```javascript
+ <DateInput
+      label='Enter a date'
+      locale='fr-fr'
+      value={moment('11/26/2017', 'MM/DD/YYYY')}
+    />
+```
+
+In 2.0.x
+
+```javascript
+ <DateInput
+      label='Enter a date'
+      locale='fr'
+      value={new Date('11-26-2017')}
+      format='dd/MM/yyyyy'
+    />
+```
+
+
+
+

packages/Form/Input/date/README.md

@@ -18,18 +18,6 @@ import '@axa-fr/react-toolkit-form-input-date-phone/dist/datepicker.scss';
 The component reuses the following library:
 
 - react-datepicker: https://reactdatepicker.com
-- react-datepicker uses momentjs: https://momentjs.com that you must install in your application (mandatory)
-
-```
-npm install moment --save
-```
-
-Do not forget the right local when starting your application. By default, "create-react-app" excludes locals ​​for lightening the version of your final application. Adding it explicitly allows the local file to be present in the final application.
-
-```js
-require('moment/locale/fr.js');
-// in your start application file "index.js"
-```
 
 The date is a special component. It actually has 2 important props:
 
@@ -38,4 +26,12 @@ The date is a special component. It actually has 2 important props:
 
 This allows you to have control of what happens and to respond to all use cases. If you are an individual, you can use the "viewValue" or "value" property. In any case if "viewValue" is not a valid date in the current language, the value of "value" returned will always be "null".
 
+### Supported Languages
+
+The Date input allows to use various languages. French is the default locale, but you can change it using the `locale` property.  You can find the available languages full list on [DateFns's website](https://date-fns.org/v2.0.0-alpha.18/docs/I18n#supported-languages). 
+
+### Format
+
+Since Version 2.0, DateInput uses [Date-Fns](https://date-fns.org/) and returns a Javascript Date object. Moment is not required anymore. You can specify the string format for viewValue in the format property. The default format is "dd/MM/YYYY" you can find the list on the [Date-fns]( https://date-fns.org/docs/format) Website
+
 For more information about style component, you can see the [Form Date Style on Toolkit-core ](http://toolkit-intranet-axa.azurewebsites.net/#/form)

packages/Form/Input/date/src/CustomDate.md

@@ -22,13 +22,12 @@ The date is a special component. It actually has 2 important props:
 
 This allows you to have control of what happens and to respond to all use cases. If you are an individual, you can use the "viewValue" or "value" property. In any case if "viewValue" is not a valid date in the current language, the value of "value" returned will always be "null".
 
-
 ### Supported Languages
 
-The Date input allow to use a differents languages : Spanish(es-ES), English (en-GB or en-US), French (fr-FR) and German (de-DE). By default french is used, you can specify the langage in the locale property using the . If you want a new language, please create a [new Issue](https://github.com/AxaGuilDEv/react-toolkit/issues)
+The Date input allows to use various languages. French is the default locale, but you can change it using the `locale` property.  You can find the available languages full list on [DateFns's website](https://date-fns.org/v2.0.0-alpha.18/docs/I18n#supported-languages). 
 
 ### Format
 
-Since the Version 2.0, The DateInput uses [Date-Fns](https://date-fns.org/) and return a Javascript Date object. Moment is not required anymore. You can specify the string format for viewValue in the format property. The default format is "dd/MM/YYYY" you can find the list on the [Date-fns](https://date-fns.org/v2.0.0-alpha.18/docs/format) Website
+Since Version 2.0, DateInput uses [Date-Fns](https://date-fns.org/) and returns a Javascript Date object. Moment is not required anymore. You can specify the string format for viewValue in the format property. The default format is "dd/MM/YYYY" you can find the list on the [Date-fns]( https://date-fns.org/docs/format) Website
 
 For more information about style component, you can see the [Form Date Style on Toolkit-core ](http://toolkit-intranet-axa.azurewebsites.net/#/form)

packages/Form/Input/date/src/DateInput.stories.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import {
   FieldForm,
   HelpMessage,
@@ -44,8 +44,6 @@ const CustomTemplate = ({
 const dateStory = new Date('02/25/2010');
 
 export const DateInputStory = Template.bind({});
-export const DateInputStoryRequired = Template.bind({});
-export const CustomDateStory = CustomTemplate.bind({});
 
 DateInputStory.args = {
   label: 'Date de naissance',
@@ -63,11 +61,15 @@ DateInputStory.args = {
   yearDropdownItemNumber: 6,
 };
 
+export const DateInputStoryRequired = Template.bind({});
+
 DateInputStoryRequired.args = {
   ...DateInputStory.args,
   classModifier: 'required',
 };
 
+export const CustomDateStory = CustomTemplate.bind({});
+
 CustomDateStory.args = {
   name: 'birthday',
   helpMessage: 'jj/mm/aaaa',

packages/Form/Input/date/src/InputDate.md

@@ -22,13 +22,12 @@ The date is a special component. It actually has 2 important props:
 
 This allows you to have control of what happens and to respond to all use cases. If you are an individual, you can use the "viewValue" or "value" property. In any case if "viewValue" is not a valid date in the current language, the value of "value" returned will always be "null".
 
-
 ### Supported Languages
 
-The Date input allow to use a differents languages : Spanish(es-ES), English (en-GB or en-US), French (fr-FR) and German (de-DE). By default french is used, you can specify the langage in the locale property using the . If you want a new language, please create a [new Issue](https://github.com/AxaGuilDEv/react-toolkit/issues)
+The Date input allows to use various languages. French is the default locale, but you can change it using the `locale` property.  You can find the available languages full list on [DateFns's website](https://date-fns.org/v2.0.0-alpha.18/docs/I18n#supported-languages). 
 
 ### Format
 
-Since the Version 2.0, The DateInput uses [Date-Fns](https://date-fns.org/) and return a Javascript Date object. Moment is not required anymore. You can specify the string format for viewValue in the format property. The default format is "dd/MM/YYYY" you can find the list on the [Date-fns](https://date-fns.org/v2.0.0-alpha.18/docs/format) Website
+Since Version 2.0, DateInput uses [Date-Fns](https://date-fns.org/) and returns a Javascript Date object. Moment is not required anymore. You can specify the string format for viewValue in the format property. The default format is "dd/MM/YYYY" you can find the list on the [Date-fns]( https://date-fns.org/docs/format) Website
 
 For more information about style component, you can see the [Form Date Style on Toolkit-core ](http://toolkit-intranet-axa.azurewebsites.net/#/form)