Merge pull request #94 from gpbl/utils-export

Update docs for new exports

Author: gpbl

README.md

@@ -31,7 +31,7 @@ react-day-picker is a flexible date picker component for [React](https://faceboo
 
 ## Quick start
 
-Install via npm
+**Install via npm**
 
 ```
 npm install react-day-picker --save

docs/APIProps.md

@@ -99,7 +99,7 @@ The last allowed month. Users won't be able to navigate or interact with the day
 #### localeUtils (Object)
 
 Object of functions to format dates and to get the first day of the week. Pass your own utils to support localization.
-By default the used locale is English (US). See also [Localization](Localization.md).
+By default the used locale is English (US). See also [Localization](Localization.md) and [LocaleUtils](LocaleUtils.md).
 
 --- 
 

docs/DateUtils.md

@@ -1,11 +1,10 @@
-# dateUtils
+# DateUtils
 
-`dateUtils` is a set of functions useful to work with dates and modifiers.
+`DateUtils` is a set of functions useful to work with dates and modifiers.
 
 ```js
-import { dateUtils } from "react-day-picker/utils";
-
-console.log(dateUtils.isPastDay(new Date())); // false
+import { DateUtils } from "react-day-picker";
+console.log(DateUtils.isPastDay(new Date())); // false
 ```
 
 ## Functions
@@ -30,20 +29,20 @@ Returns `true` if `day` is between the days `d1` and `d2`, without including tho
 
 Add `day` to a range of days, returning a new range including that dy. A range is an object with `from` and `to` keys. 
 
-See the [range examples](http://www.gpbl.org/react-day-picker/#examples/range) for an example using this function.
+See the [range example](http://www.gpbl.org/react-day-picker/#examples/range) for an example using this function.
 
 ```js
-import { dateUtils } from "react-day-picker/utils";
+import { DateUtils } from "react-day-picker";
 
 const range = {
   from: new Date(2015, 5, 14),
   to: new Date(2015, 5, 18)
 }
-const newRange = dateUtils.addDayToRange(new Date(2015, 5, 24), range);
+const newRange = DateUtils.addDayToRange(new Date(2015, 5, 24), range);
 
 console.log(newRange.from) // 2015-05-24
 ```
 
 ### `isDayInRange(day: date, range: object<from: ?date, to: ?date>) -> bool`
 
-Returns `true` if `day` is included in the specified range of days.  See the [range examples](http://www.gpbl.org/react-day-picker/#examples/range) for an example using this function.
+Returns `true` if `day` is included in the specified range of days.  See the [range example](http://www.gpbl.org/react-day-picker/#examples/range) for an example using this function.

docs/GettingStarted.md

@@ -146,20 +146,20 @@ then, the click handler stops the interaction when the day contains the `isSunda
 
 ```javascript
 handleDayClick(e, day, modifiers) {
-  if (modifiers.indefOf("isDisabled") > -1) {
+  if (modifiers.indexOf("isDisabled") > -1) {
     return; 
   }
   // etc.
 }
 
 ```
 
-### Use the included utilities to simplify the code
+### Use DateUtils to simplify the code
 
-react-day-picker comes with some utilities to simplify the creation of modifiers. For example, [dateUtils](DateUtils.md) contains a function called `isSameDay`  useful to detect if two days are the same. We can use it for the `selected` modifier:
+react-day-picker includes [DateUtils](DateUtils.md), a function library to simplify the creation of modifiers. For example, we can use `isSameDay()` to detect if two days are the same. We can use it for the `selected` modifier:
 
 ```jsx
-import { dateUtils } from "react-day-picker/utils";
+import DayPicker, { DateUtils } from "react-day-picker/utils";
 
 // snip
 

docs/LocaleUtils.md

@@ -1,12 +1,11 @@
-# localeUtils
+# LocaleUtils
 
-`localeUtils` is a set of functions used to work with localization. See also [Custom localization](LocalizationCustom.md).
+`LocaleUtils` is a set of functions used to localize the component (see: [Custom localization](LocalizationCustom.md)). You may want to implement your own `LocaleUtils`, or override some of its functions. 
 
-Usually, you want to implement your own `localeUtils`, or override the behavior of some of its functions. For example, the following code will render the month title as `M/YYYY` instead of the default:
+For example, this code renders the month's title as `M/YYYY` instead of the default:
 
 ```jsx
-import DayPicker from "react-day-picker";
-import { localeUtils } from "react-day-picker/utils"
+import DayPicker, { LocaleUtils } from "react-day-picker";
 
 function formatMonthTitle(d, locale) {
  return `${d.getMonth() + 1}/${d.getFullYear}` 

docs/LocalizationMoment.md

@@ -4,7 +4,7 @@ To localize the calendar with [moment.js](http://www.momentjs.com):
 
 1. make sure [moment](https://www.npmjs.com/package/moment) is included in your dependencies 
 2. make sure the required moment's locale data is loaded
-3. import `localeUtils` from `react-day-picker/moment` and pass it to the `localeUtils` props
+3. import `LocaleUtils` from `react-day-picker/moment` and pass it to the `localeUtils` props
 4. use the `locale` prop to pass the current locale
 
 ### Example
@@ -18,7 +18,7 @@ import DayPicker from "react-day-picker";
 
 // Use this util to format the calendar values according to the
 // selected locale with moment.js
-import { localeUtils } from "react-day-picker/moment";
+import LocaleUtils from "react-day-picker/moment";
 
 // Make sure moment.js has the required locale data
 import "moment/locale/ja";
@@ -30,16 +30,16 @@ function LocalizedExample() {
     <div>
 
       <p>English</p>
-      <DayPicker localeUtils={ localeUtils } locale="en" />
+      <DayPicker localeUtils={ LocaleUtils } locale="en" />
 
       <p>Japanese</p>
-      <DayPicker localeUtils={ localeUtils } locale="jp" />
+      <DayPicker localeUtils={ LocaleUtils } locale="jp" />
 
       <p>Arabic</p>
-      <DayPicker localeUtils={ localeUtils } locale="ar" />
+      <DayPicker localeUtils={ LocaleUtils } locale="ar" />
 
       <p>Italian</p>
-      <DayPicker localeUtils={ localeUtils } locale="it" />
+      <DayPicker localeUtils={ LocaleUtils } locale="it" />
 
     </div>
   );

docs/README.md

@@ -11,5 +11,5 @@
     * [Custom localization](/docs/LocalizationCustom.md)
 * [Tips](/docs/Tips.md)
 * [Utilities](/docs/Utilities.md)
-  * [dateUtils](/docs/DateUtils.md)
-  * [localeUtils](/docs/LocaleUtils.md)
+  * [DateUtils](/docs/DateUtils.md)
+  * [LocaleUtils](/docs/LocaleUtils.md)

docs/Utilities.md

@@ -1,4 +1,4 @@
 # Utilities
 
-* [dateUtils](DateUtils.md)
-* [localeUtils](LocaleUtils.md)
+* [DateUtils](DateUtils.md)
+* [LocaleUtils](LocaleUtils.md)

examples/src/examples/InputField.js

@@ -2,8 +2,8 @@ import React from "react";
 import moment from "moment";
 import reactTapEvent from "react-tap-event-plugin";
 
-import DayPicker from "react-day-picker";
-import { dateUtils } from "react-day-picker/utils";
+import DayPicker, { DateUtils } from "react-day-picker";
+
 import "react-day-picker/lib/style.css";
 
 // enable touch-tap events
@@ -49,8 +49,8 @@ export default class InputField extends React.Component {
     const selectedDay = moment(this.state.value, "L", true).toDate();
 
     const modifiers = {
-      disabled: dateUtils.isPastDay,
-      selected: day => dateUtils.isSameDay(selectedDay, day)
+      disabled: DateUtils.isPastDay,
+      selected: day => DateUtils.isSameDay(selectedDay, day)
     };
 
     return (

examples/src/examples/Localized.js

@@ -3,7 +3,7 @@ import DayPicker from "react-day-picker";
 
 // Use a custom util to format the calendar values according to the
 // selected locale. This one is based on moment.js
-import { localeUtils } from "react-day-picker/moment";
+import MomentLocaleUtils from "react-day-picker/moment";
 
 // Make sure moment.js has the required locale data
 import "moment/locale/ja";
@@ -26,12 +26,6 @@ export default class Localized extends React.Component {
   render() {
     const { locale } = this.state;
 
-    const modifiers = {
-      sunday(day) {
-        return day.getDay() === 0
-      }
-    };
-
     return (
       <div>
         <p>
@@ -42,7 +36,10 @@ export default class Localized extends React.Component {
             <option value="ar">Arabic</option>
           </select>
         </p>
-        <DayPicker locale={ locale } localeUtils={ localeUtils } modifiers={ modifiers } />
+        <DayPicker
+          locale={ locale }
+          localeUtils={ MomentLocaleUtils }
+          modifiers={{ sunday: day => day.getDay() === 0 }} />
       </div>
     );
   }