initial commit for V2

Author: mkg0

. eslintignore

@@ -1,3 +1,3 @@
 /node_modules/*
 /lib/*
-/dist/*
+/dist/*

.babelrc

@@ -4,9 +4,8 @@
     "react"
   ],
   "plugins": [
-    [
-      "transform-object-rest-spread",
-      "add-module-exports"
-    ]
+    "date-fns",
+    "transform-object-rest-spread",
+    "transform-export-extensions"
   ]
 }

.eslintrc.js

@@ -24,6 +24,5 @@ module.exports = {
         "node": true,
         "browser": true,
         "jest": true,
-
       },
 };

README.md

@@ -5,41 +5,49 @@
 [![npm](https://img.shields.io/npm/l/react-date-range.svg?style=flat-square)]()
 [![npm](https://img.shields.io/npm/dm/localeval.svg?style=flat-square)](https://www.npmjs.com/package/react-date-range)
 
+⚠️ Warning: the current branch represents v2 pre-release version. See [v1 branch](https://github.com/Adphorus/react-date-range/tree/v1).
 
-A React component for choosing dates and date ranges. Uses [Moment.js](http://momentjs.com/) for date operations.
+A library agnostic React component for choosing dates and date ranges. Uses [date-fns](http://date-fns.org/) for date operations.
+Stateless date operations, highly configurable, multiple range selection support, based on js dates.
 
 **Live Demo :** [http://adphorus.github.io/react-date-range](http://adphorus.github.io/react-date-range)
 
-![](https://cdn.pbrd.co/images/1fjQlZzy.png)
+![](https://raw.githubusercontent.com/Adphorus/react-date-range/next/demo/assets/src/ss.png)
 
-## React Range Picker v2 is coming!💥
-
-** Want to help us testing the next version? Let's go
-[next branch](https://github.com/adphorus/react-date-range/tree/next)!**
 
 ## Getting Started
 ### Installation
 
 ```
-$ npm install --save react-date-range
+yarn add react-date-range@next
+```
+
+If you don't use yarn
+```
+$ npm install --save react-date-range@next
 ```
 
 ## Usage
 ### Date Picker
 ```javascript
 import React, { Component } from 'react';
 import { Calendar } from 'react-date-range';
+// main style file
+import 'react-date-range/dist/styles.css';
+// theme css file
+import 'react-date-range/dist/theme/default.css';
+
 
 class MyComponent extends Component {
 	handleSelect(date){
-		console.log(date); // Momentjs object
+		console.log(date); // native Date object
 	}
 
 	render(){
 		return (
 			<div>
 				<Calendar
-					onInit={this.handleSelect}
+					date={new Date()}
 					onChange={this.handleSelect}
 				/>
 			</div>
@@ -49,17 +57,6 @@ class MyComponent extends Component {
 
 ```
 
-###### Available Options (props)
-* **date:** *(String, Moment.js object, Function)* - default: today
-* **format:** *(String)* - default: DD/MM/YYY
-* **firstDayOfWeek** *(Number)* - default: [moment.localeData().firstDayOfWeek()](http://momentjs.com/docs/#/i18n/locale-data/)
-* **theme:** *(Object)* see [Demo's source](https://github.com/Adphorus/react-date-range/blob/master/demo/src/components/Main.js#L130)
-* **onInit:** *(Function)* default: none
-* **onChange:** *(Function)* default: none
-* **minDate:** *(String, Moment.js object, Function)* default: none
-* **maxDate:** *(String, Moment.js object, Function)* default: none
-* **lang:** *(String, 'cn' - Chinese, 'jp' - Japanese, 'fr' - French, 'it' - Italian, 'de' - German, 'es' - Spanish, 'ru' - Russian, 'tr' - Turkish, 'pt'  - Portuguese, 'fi' - Finnish)* default: none
-
 ### Range Picker
 ```javascript
 import React, { Component } from 'react';
@@ -85,3 +82,42 @@ class MyComponent extends Component {
 }
 
 ```
+### Options (DateRange, Calendar)
+Property                             | type      | Default Value    | Desctiption
+-------------------------------------|-----------|------------------|-----------------------------------------------------------------
+locale                               | object    | enUS from locale | you can view full list from [here](https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/v2.0.0-alpha.7/docs/I18n#supported-languages).
+className                            | String    |                  | wrapper classname
+months                               | Number    | 1                | rendered month count
+showSelectionPreview                 | Boolean   | true             | show preview on focused/hovered dates
+previewColor                         | String    |                  | defines color for selection preview
+shownDate                            | Date      |                  | initial focus date
+specialDays                          | Date[]    | []               | defines special days
+onPreviewChange                      | Func      |                  | callback for preview changes. fn()
+minDate                              | Date      |                  | defines minimum date. Disabled earlier dates
+maxDate                              | Date      |                  | defines maximum date. Disabled later dates
+showMonthArrow                       | Boolean   | true             |
+ranges(Calendar)                     | *Object[] | []               |
+onChange(Calendar)                   | Func      |                  | callback function for date changes. fn(date: Date)
+color(Calendar)                      | String    | `#3d91ff`        | defines color for selected date in Calendar
+date(Calendar)                       | Date      |                  | date value for Calendar
+onChange(DateRange)                  | Func      |                  | callback function for range changes. fn(changes). changes contains `startDate` and `endDate` under an object key of changed range
+moveRangeOnFirstSelection(DateRange) | Boolean   | false            | move range on startDate selection. Otherwise endDate will replace with startDate.
+dateDisplayFormat(DateRange)         | String    | `MMM D,YYYY`     | selected range preview formatter. checkout [format option](https://date-fns.org/v2.0.0-alpha.7/docs/format)
+> *shape of range:
+> ```js
+>	{
+>		startDate: PropTypes.object,
+>		endDate: PropTypes.object,
+>		color: PropTypes.string,
+>		key: PropTypes.string,
+>		autoFocus: PropTypes.bool,
+>		disabled: PropTypes.bool,
+>	}
+>```
+
+TODOs
+
+- make mobile friendly (integrate tap and swipe actions)
+- add complex booking customization example with exposed renderer props
+- drag and drop date selection
+