docs: add docs about migrating to react-jss from jss-theme-reactor

read more:
* Migrating from jss-theme-reactor to react-jss https://git.io/v7d6e
* v1.7.0 migrations https://git.io/v7d6I

README.md

@@ -15,20 +15,30 @@ yarn add nordnet-ui-kit
 ## Usage
 
 ``` javascript
+// src/root.js
 import { ThemeProvider } from 'react-jss';
-import { Button } from 'nordnet-ui-kit';
+import { theme } from 'nordnet-ui-kit';
+import App from './App'
 
 const Root = (
-  <ThemeProvider>
-    <Component />
+  <ThemeProvider theme={theme}>
+    <App />
   </ThemeProvider>
 );
+ReactDOM.render(Root, document.getElementById('app'));
 
-const Component = (
-  <Button variant="primary" modifier="success">Success</Button>
+// src/App.js
+import { Button } from 'nordnet-ui-kit';
+
+const App = props => (
+  <div>
+    <Button variant="primary" modifier="success">
+      Success
+    </Button>
+  </div>
 );
 
-ReactDOM.render(Root, document.getElementById('app'));
+export default App;
 ```
 
 *To see what is exported from nordnet-ui-kit, please see the documentation below or [index.js](https://github.com/nordnet/nordnet-ui-kit/blob/master/src/index.js)*
@@ -39,7 +49,9 @@ ReactDOM.render(Root, document.getElementById('app'));
 * `v1.6.0+` depends on `@iamstarkov/jss-theme-reactor` and `jss@8`, so please update your components to use `@iamstarkov/jss-theme-reactor` instead of `jss-theme-reactor`
 * `v1.7.0+` depends on `react-jss` and `jss@8`, so please update your components to use `react-jss` instead of `@iamstarkov/jss-theme-reactor`.
   Also, `v1.7.0` deprecates exported `ThemeProvider`, `createShallow` and `createMount`.
-  It will be removed in next major release.
+  It will be removed in next major release. Read more in [v1.7.0 migration docs][./docs/migrations/v1.7.0.md]
+* `v1.7.0` also features `react-jss` over `jss-theme-reactor`, please read how to migrate your components.
+* We can't expect all components to be rewritten to react-jss instantly, so you will need to use both jss-theme-reactor based component  and react-jss components at the same time, read in the [jss-theme-reactor migration docs][./docs/migrations/jss-theme-reactor.md] how to do it.
 
 ## Documentation for the latest release is available [here](https://nordnet.github.io/nordnet-ui-kit).
 

docs/README.md

@@ -1,5 +1,6 @@
 # Documentation
 
+* [In App usage](./in-app-usage.md)
 * [Writing a component](./writing-component.md)
 * [Styling a component](./styling-component.md)
 * [Testing a component](./testing-component.md)

docs/in-app-usage.md

@@ -0,0 +1,33 @@
+# In App usage
+
+You need `ThemeProvider` from `react-jss` and `theme` from `nordnet-ui-kit` in your App.
+
+```js
+// src/root.js
+import { ThemeProvider } from 'react-jss';
+import { theme } from 'nordnet-ui-kit';
+import App from './App'
+
+const Root = (
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>
+);
+
+ReactDOM.render(Root, document.getElementById('app'));
+```
+
+```js
+// src/App.js
+import { Button } from 'nordnet-ui-kit';
+
+const App = props => (
+  <div>
+    <Button variant="primary" modifier="success">
+      Success
+    </Button>
+  </div>
+);
+
+export default App;
+```

docs/migrations/jss-theme-reactor.md

@@ -0,0 +1,71 @@
+# migration from jss-theme-reactor to react-jss
+
+## ThemeProviders duplication in the meantime
+
+If you use any components which are not yet refactored into `react-jss`, then you need to use two `ThemeProviders`:
+So jss-theme-reactor based components will not be broken, because of lack of context.
+
+```js
+// src/root.js
+import { ThemeProvider } from 'react-jss';
+import { theme, ThemeProvider as UiThemeProvider } from 'nordnet-ui-kit';
+import App from './App'
+
+const Root = (
+  <ThemeProvider theme={theme}>
+    <UiThemeProvider>
+      <App />
+    </UiThemeProvider>
+  </ThemeProvider>
+);
+
+ReactDOM.render(Root, document.getElementById('app'));
+```
+
+## Components refactoring
+
+TL:DR:
+
+* you dont care about context anymore.
+* you will get classes as prop from now on.
+
+```diff
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+-import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
+-// or
+-import { createStyleSheet } from 'jss-theme-reactor';
++import injectSheet from 'react-jss';
+
+- export const styleSheet = createStyleSheet('Badge', theme => {
++ const styles = theme => {
+  const { palette, typography, mixins } = theme;
+
+  return {
+    /* … */
+  };
+});
+
+-function Badge({ modifier, children }, { styleManager }) {
+-  const classes = styleManager.render(styleSheet);
++ function Badge({ classes, modifier, children })
+
+/* … */
+
+Badge.propTypes = {
++  /** @ignore */
++  classes: PropTypes.object.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  modifier: PropTypes.oneOf(['success', 'warning', 'danger']),
+};
+
+-Badge.contextTypes = {
+-  styleManager: PropTypes.object.isRequired,
+-};
+
+-export default Badge;
++export { Badge as Component, styles };
++export default injectSheet(styles)(Badge);
+```

docs/migrations/v1.7.0.md

@@ -0,0 +1,9 @@
+# v1.7.0 migrations
+
+in v1.7.0 test utils are deprecated:
+
+* `ThemeProvider`— use `import { ThemeProvider } from 'react-jss';` instead, read more [in app usage documentation](../in-app-usage.md)
+* `createShallow` and `createMount`—use `mockClasses` helper, read more in [testing documentation](../testing-component.md)
+* `Animate` component doesn't require `animationName` anymore.
+
+in `2.0` aforementioned helpers will be removed.