fix(react-grid): Put the dx-react-grid dependencies in order (#148)

BREAKING CHANGE:
The following package has become a peer dependency of the `@devexpress/dx-react-grid` one and has to be installed by your app:

```
npm i --save @devexpress/dx-react-core
```

packages/dx-react-demos/package.json

@@ -31,12 +31,13 @@
     "output": "../../shippable/testresults/dx-react-grid-demos.xml"
   },
   "dependencies": {
-    "@devexpress/dx-react-grid": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-grid-bootstrap3": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-grid-material-ui": "^1.0.0-alpha.3",
+    "@devexpress/dx-react-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-grid": "1.0.0-alpha.3",
+    "@devexpress/dx-react-grid-bootstrap3": "1.0.0-alpha.3",
+    "@devexpress/dx-react-grid-material-ui": "1.0.0-alpha.3",
     "core-js": "^2.4.1",
     "material-ui": "^1.0.0-alpha.14",
-    "material-ui-icons": "^1.0.0-alpha.3",
+    "material-ui-icons": "1.0.0-alpha.3",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-bootstrap": "^0.31.0",

packages/dx-react-grid-bootstrap3/README.md

@@ -4,11 +4,16 @@ A template suite used to customize React Grid with the Bootstrap3 rendering.
 
 ## Installation
 
-Install the package and its dependencies:
+Install the main dx-react-grid package and its templates for Bootstrap 3:
 
 ```
-npm i @devexpress/dx-react-grid --save
-npm i @devexpress/dx-react-grid-bootstrap3 --save
+npm i --save @devexpress/dx-react-grid @devexpress/dx-react-grid-bootstrap3
+```
+
+**Note:** The packages mentioned above have peer dependencies that should be installed manually. Use the following command to install them.
+
+```
+npm i --save @devexpress/dx-react-core
 ```
 
 Add the required modules to your project:

packages/dx-react-grid-bootstrap3/package.json

@@ -56,10 +56,10 @@
     "output": "../../shippable/testresults/dx-react-grid-bootstrap3.xml"
   },
   "devDependencies": {
-    "@devexpress/dx-testing": "^1.0.0-alpha.3",
-    "@devexpress/dx-grid-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-grid": "^1.0.0-alpha.3",
+    "@devexpress/dx-testing": "1.0.0-alpha.3",
+    "@devexpress/dx-grid-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-grid": "1.0.0-alpha.3",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-jest": "^19.0.0",
@@ -93,9 +93,9 @@
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "@devexpress/dx-grid-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-grid": "^1.0.0-alpha.3",
+    "@devexpress/dx-grid-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-grid": "1.0.0-alpha.3",
     "react": "^15.5.4",
     "react-bootstrap": "^0.31.0"
   }

packages/dx-react-grid-material-ui/README.md

@@ -4,11 +4,16 @@ A template suite used to customize React Grid with the Material UI rendering.
 
 ## Installation
 
-Install the package and its dependencies:
+Install the main dx-react-grid package and its templates for Material UI:
 
 ```
-npm i @devexpress/dx-react-grid --save
-npm i @devexpress/dx-react-grid-material-ui --save
+npm i --save @devexpress/dx-react-grid @devexpress/dx-react-grid-material-ui
+```
+
+**Note:** The packages mentioned above have peer dependencies that should be installed manually. Use the following command to install them.
+
+```
+npm i --save @devexpress/dx-react-core
 ```
 
 Add the required modules to your project:

packages/dx-react-grid-material-ui/package.json

@@ -56,10 +56,10 @@
     "output": "../../shippable/testresults/dx-react-grid-material-ui.xml"
   },
   "devDependencies": {
-    "@devexpress/dx-testing": "^1.0.0-alpha.3",
-    "@devexpress/dx-grid-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-grid": "^1.0.0-alpha.3",
+    "@devexpress/dx-testing": "1.0.0-alpha.3",
+    "@devexpress/dx-grid-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-grid": "1.0.0-alpha.3",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-jest": "^19.0.0",
@@ -83,7 +83,7 @@
     "jss-preset-default": "^2.0.0",
     "jss-theme-reactor": "^0.11.1",
     "material-ui": "^1.0.0-alpha.14",
-    "material-ui-icons": "^1.0.0-alpha.3",
+    "material-ui-icons": "1.0.0-alpha.3",
     "react": "^15.5.4",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.5.4",
@@ -100,11 +100,11 @@
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "@devexpress/dx-grid-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-grid": "^1.0.0-alpha.3",
+    "@devexpress/dx-grid-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-core": "1.0.0-alpha.3",
+    "@devexpress/dx-react-grid": "1.0.0-alpha.3",
     "material-ui": "^1.0.0-alpha.14",
-    "material-ui-icons": "^1.0.0-alpha.3",
+    "material-ui-icons": "1.0.0-alpha.3",
     "react": "^15.5.4"
   }
 }

packages/dx-react-grid/README.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-The DevExtreme React Grid component allows you to display table data with a set of different transformations, such as paging, sorting, filtering, grouping, etc. It also allows row selection and data editing. It has a composable and extensible plugin-based architecture. It supports the controlled and uncontrolled state modes, and can be easily used in either a regular or a Redux-based application. It's provided with the Twitter Bootstrap rendering and theming out-of-the-box.
+The DevExtreme React Grid component has a composable and extensible plugin-based architecture and allows you to display table data with a set of different transformations, such as paging, sorting, filtering, grouping, etc. It also allows row selection and data editing, supports the controlled and uncontrolled state modes and can be used in either a regular or a Redux-based application. It is provided with Twitter Bootstrap rendering and theming out-of-the-box.
 
 ## Installation
 
@@ -12,21 +12,27 @@ The DevExtreme React Grid component allows you to display table data with a set
 npm i @devexpress/dx-react-grid --save
 ```
 
-This package does not contain any visual components, so all examples provided below use the DevExtreme React Grid Bootstrap3 package to use Bootstrap rendering for the Grid visual components.
+This package does not contain any visual components. In the examples below, the DevExtreme React Grid Bootstrap 3 package is used to render visual components.
 
 Install the Grid Bootstrap3 components package:
 
 ```
 npm i @devexpress/dx-react-grid-bootstrap3 --save
 ```
 
+**Note:** The packages mentioned above have peer dependencies that should be installed manually using the following command:
+
+```
+npm i --save @devexpress/dx-react-core
+```
+
 Make sure that Bootstrap styles are linked to the page. If you have not yet configured Bootstrap for your project, check the [following link](http://getbootstrap.com/getting-started/#download).
 
 #### Add a Grid to your app:
 
-By default Grid renders nothing. All its functionality is implemented via plugin components that are nested into the root Grid component. So, we should specify at least one plugin that visualizes the data provided for the grid.
+The Grid renders nothing by default. All its functionality is implemented via plugin components that are nested into the root Grid component. You should specify at least one plugin that visualizes the data provided for the grid.
 
-To display the data as a simple table, you can use the TableView plugin as follows:
+You can use the TableView plugin as follows to display the data as a simple table:
 
 ```js
 import {

packages/dx-react-grid/docs/README.md

@@ -9,7 +9,7 @@
 
 ## Overview
 
-DevExtreme React Grid is a component that displays data from a local or remote source in the form of a grid. It supports paging, sorting, filtering, grouping and other data shaping options, row selection and data editing. Support for controlled and uncontrolled state modes allows you to use Grid in a regular or Redux-based application. The DevExtreme Grid component has a composable and extensible plugin-based architecture and is provided with the Twitter Bootstrap rendering and theming out of the box.
+DevExtreme React Grid is a component that displays data from a local or remote source in the form of a grid. It supports paging, sorting, filtering, grouping and other data shaping options, row selection, and data editing. Support for controlled and uncontrolled state modes allows you to use the Grid in a regular or Redux-based application. The DevExtreme Grid component has a composable and extensible plugin-based architecture and is provided with Twitter Bootstrap rendering and theming out of the box.
 
 ## Getting Started
 
@@ -20,12 +20,18 @@ npm i @devexpress/dx-react-grid --save
 ```
 This package does not contain visual components. In the examples below, the DevExtreme React Grid Bootstrap3 package is used to render visual components.
 
-Install the Grid Bootstrap3 components package:
+Install the Grid Bootstrap 3 components package:
 
 ```
 npm i @devexpress/dx-react-grid-bootstrap3 --save
 ```
 
+**Note:** The packages mentioned above have peer dependencies that should be installed manually using the following command:
+
+```
+npm i --save @devexpress/dx-react-core
+```
+
 Make sure that Bootstrap styles are linked to the page. If you have not yet configured Bootstrap for your project, check the [following link](http://getbootstrap.com/getting-started/#download).
 
 ### Polyfills
@@ -34,13 +40,13 @@ React Grid uses the latest standards of the web platform. This means that some o
 
 You may need to include ES2015 (ES6) polyfill to support some old browsers like IE11, Android 4.
 
-We recommend using [BABEL Polyfill](https://babeljs.io/docs/usage/polyfill/). Feel free to use any other alternative.
+We recommend using [BABEL Polyfill](https://babeljs.io/docs/usage/polyfill/), but you can use an alternative.
 
 ### Using Grid component
 
-By default, Grid renders nothing. All its functionality is implemented in nested plugin components of the root Grid component. Thus, it is required to specify at least one plugin that visualizes the grid data.
+The Grid renders nothing by default. All its functionality is implemented in nested plugin components of the root Grid component. Thus, it is required to specify at least one plugin that visualizes the grid data.
 
-To display the data as a simple table, you can use the TableView plugin as follows:
+Use the TableView plugin as follows to display the data as a simple table:
 
 ```js
 import {
@@ -58,24 +64,24 @@ const App = () => (
 
 ### Try Out React Grid
 
-If you are interested in playing around with React Grid, you can use Plunker. You don't need to install anything. Try to start from [this basic example](http://plnkr.co/edit/Hf3ez8?p=preview).
+You can use [Plunker](http://plnkr.co/edit/Hf3ez8?p=preview) if you are interested in trying out the React Grid. 
 
 ## Plugin Overview
 
-All the Grid functionality is provided by plugins. We can divide all the plugins into four logical groups:
+Plugins provide all the Grid functionality and can be divided into four logical groups:
 
-- **State Management plugins**. Contain a part of the Grid state or obtain it from outside and can change the state in a response to  specified user actions.
+- **State Management plugins**. Contain a part of the Grid state or obtain it from outside and can change the state in response to  specified user actions.
 - **Data Processing plugins**. Transform data passed to the Grid component before rendering it.
-- **UI Plugins**. Render transformed data using the current state and configuration. Also, these plugins can invoke actions provided by the state management plugins to change the Grid state.
+- **UI Plugins**. Render transformed data using the current state and configuration. Also, these plugins can invoke actions the state management plugins provide to change the Grid state.
 - **Core Plugins**. These plugins are the base building blocks for the previous three plugin groups. They can also be used separately in certain customization scenarios.
 
-Note that the plugins are composable and can technically be nested into each other.
+Note that the plugins are composable and can be nested into each other.
 
 Refer to the [Reference](reference) to see the complete plugin list.
 
 ### Plugin Order
 
-All Grid plugins consist of core plugins. Each core plugin component has unique behavior. That is why the order of the plugins is important. For example, if data processing is based on some state, it should be linked after an appropriate state plugin. See the following example:
+The plugins' order is important because all Grid plugins consist of core plugins, each of which has a unique behavior. For example, if data processing is based on some state, it should be linked after an appropriate state plugin. See the following example:
 
 
 ```js
@@ -95,7 +101,7 @@ const App = () => (
 );
 ```
 
-Note that in the previous example, the TableView plugin is linked after the data processing one. The same rule is applied to visualization plugins. See the following example:
+Note that in the previous example, the TableView plugin is linked after the data processing one. The same rule applies to visualization plugins. See the following example:
 
 ```js
 import {
@@ -119,15 +125,15 @@ NOTE: Refer to the plugin documentation for information on its requirements.
 
 ### UI Plugins
 
-It is required to specify a visual component for this type of plugins. They are not included by default. You can create your own templates based on the plugin specification or use one of the predefined ones:
+It is required to specify a visual component for this type of plugins (not included by default). You can create your templates based on the plugin specification or use one of the predefined ones:
 - DevExtreme React Grid for [Bootstrap 3](http://getbootstrap.com/) (used in examples)
 - DevExtreme React Grid for [Material UI](http://www.material-ui.com) (coming soon...)
 
 ## <a name="controlled-and-uncontrolled-modes"></a>Controlled (stateless) and Uncontrolled (stateful) modes
 
-Depending on a particular use-case, you may need to control the Grid state yourself or delegate state management to the component. For instance, to persist the Grid sorting configured by an end-user and restore it withing the next app usage session, you need to switch the sorting state to the controlled mode. In this case, Grid will accept the sorting configuration via the [SortingState](reference/sorting-state.md) plugin properties and notify you once an end-user has changed the sorting configuration. It's very similar to the [controlled components concept](https://facebook.github.io/react/docs/forms.html#controlled-components).
+You may need to control the Grid state or delegate state management to a component, for instance, you need to switch the sorting state to the controlled mode to persist the Grid sorting an end-user configured and restore it withing the next app usage session. In this case, the Grid accepts the sorting configuration via the [SortingState](reference/sorting-state.md) plugin properties and notifies you once an end-user has changed the sorting configuration, similar to the [controlled components concept](https://facebook.github.io/react/docs/forms.html#controlled-components).
 
-In your code, it will look as follows:
+In your code, it looks as follows:
 
 ```js
 export class MyApp extends React.PureComponent {
@@ -155,9 +161,9 @@ export class MyApp extends React.PureComponent {
 }
 ```
 
-So, `sorting` represents the Grid sorting configuration. In turn, the `changeSorting` function is a handler that is invoked every time the sorting configuration changes. Note that all state management plugins work with the serializable state. It means that you can persist and restore it in [localStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) or any other storage that can store string values. The controlled state mode can also be helpful if you need to indicate the current state in your UI or bind some controls existing outside the Grid. For instance, it's easy to put a ComboBox with available sort orders and let end-users use it for sorting Grid data.
+`Sorting` represents the Grid sorting configuration, and the `changeSorting` function is a handler that is invoked every time the sorting configuration changes. Note that all the state management plugins work with the serializable state. This means that you can persist and restore it in [localStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) or any other storage that can store string values. The controlled state mode can also be helpful if you need to indicate the current state in your UI or bind controls existing outside the Grid, for example, to put a ComboBox with the available sort orders and let end-users use it for sorting Grid data.
 
-In uncontrolled state mode, the Grid component manages its UI state internally. You do not need to specify the state value and state change handler properties. Yet, you can provide Grid with the initial state value using the property with the `default` prefix. For instance, we can convert the previous example into the uncontrolled mode:
+In the uncontrolled state mode, the Grid component manages its UI state internally. It is not necessary to specify the state value and state change handler properties. You can provide Grid with the initial state value using the property with the `default` prefix, for instance, converting the previous example into the uncontrolled mode:
 
 ```js
 <Grid rows={[...]} columns={[...]}>
@@ -166,7 +172,7 @@ In uncontrolled state mode, the Grid component manages its UI state internally.
 </Grid>
 ```
 
-If you want to specify the default sorting configuration, it will look as follows:
+Specify the default sorting configuration as follows:
 
 ```js
 <Grid rows={[...]} columns={[...]}>
@@ -175,7 +181,7 @@ If you want to specify the default sorting configuration, it will look as follow
 </Grid>
 ```
 
-Sometimes you may need to control the Grid state partially. For instance, you want to manage filters, but do not wish to manage sorting and grouping. You can configure Grid as follows:
+You can configure the Grid as follows when you need to control its state partially, for example, to manage filters without managing sorting and grouping:
 
 ```js
 <Grid rows={[...]} columns={[...]}>
@@ -186,4 +192,4 @@ Sometimes you may need to control the Grid state partially. For instance, you wa
 </Grid>
 ```
 
-Note: If you are using Redux and performing time traveling, the partially controlled state can cause side-effects. In this case, we recommend using the fully-controlled state so Grid behaves as a stateless component without side-effects.
+Note: We recommend using the fully-controlled state to avoid the side-effects the partially controlled state can cause when using Redux and performing time traveling.

packages/dx-react-grid/package.json

@@ -53,7 +53,8 @@
     "output": "../../shippable/testresults/dx-react-grid.xml"
   },
   "devDependencies": {
-    "@devexpress/dx-testing": "^1.0.0-alpha.3",
+    "@devexpress/dx-react-core": "1.0.0-alpha.3",
+    "@devexpress/dx-testing": "1.0.0-alpha.3",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-jest": "^19.0.0",
@@ -83,11 +84,11 @@
     "rollup-watch": "^3.2.2"
   },
   "dependencies": {
-    "@devexpress/dx-grid-core": "^1.0.0-alpha.3",
-    "@devexpress/dx-react-core": "^1.0.0-alpha.3",
+    "@devexpress/dx-grid-core": "1.0.0-alpha.3",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
+    "@devexpress/dx-react-core": "1.0.0-alpha.3",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   }