Feature/jss 8 migration

README.md

@@ -32,6 +32,11 @@ ReactDOM.render(Root, document.getElementById('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)*
 
+## Compatibility
+
+* `v1.5.1` and lower depends on `jss-theme-reactor` and `jss@7`
+* `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`
+
 ## Documentation for the latest release is available [here](https://nordnet.github.io/nordnet-ui-kit).
 
 ## [Changelog](https://github.com/nordnet/nordnet-ui-kit/blob/master/CHANGELOG.md)

package.json

@@ -71,11 +71,9 @@
   "homepage": "https://nordnet.github.io/nordnet-ui-kit",
   "license": "MIT",
   "dependencies": {
+    "@iamstarkov/jss-theme-reactor": "^0.12.1",
     "classnames": "^2.2.3",
     "color": "^1.0.3",
-    "jss": "^7.1.0",
-    "jss-preset-default": "^2.0.0",
-    "jss-theme-reactor": "^0.11.1",
     "lodash": "^4.17.4",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",

src/components/alert/alert-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export default createStyleSheet('Alert', theme => {
   const { palette, mixins } = theme;

src/components/animate/animate.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cn from 'classnames';
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import modifierHeight from './modifierHeight';
 import easings from '../../styles/transitions/easings';

src/components/animate/animate.md

@@ -14,7 +14,7 @@ Below is an example of how it behaves when animating.
     // component. This was needed to have a toggle button with state.
     const React = require('react');
     const PropTypes = require('prop-types');
-    const { createStyleSheet } = require('jss-theme-reactor');
+    const { createStyleSheet } = require('@iamstarkov/jss-theme-reactor');
 
     const divStyle = { height: 50, padding: 10 };
     const outerDivStyle = { backgroundColor: 'tomato', height: 100, padding: 10, color: 'white' };

src/components/avatar/avatar.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cn from 'classnames';
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export const styleSheet = createStyleSheet('Avatar', theme => {
   const { palette, typography, mixins } = theme;

src/components/badge/badge.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cn from 'classnames';
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export const styleSheet = createStyleSheet('Badge', theme => {
   const { palette, typography, mixins } = theme;

src/components/button/button-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import c from 'color';
 
 // This function was created because 'focused' versions on colors were not found in the palette

src/components/dropdown/dropdown-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export default createStyleSheet('Dropdown', theme => {
   const { palette, mixins } = theme;

src/components/input/help-text.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 const styleSheet = createStyleSheet('HelpText', theme => {
   const { palette } = theme;

src/components/input/input-checkbox-radio-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export default createStyleSheet('InputCheckboxRadio', theme => {
   const { palette, transitions, mixins } = theme;

src/components/input/input-default-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import Color from 'color';
 
 export default createStyleSheet('InputDefault', theme => {

src/components/input/input-select-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export default createStyleSheet('InputSelect', theme => {
   const { palette, transitions, mixins } = theme;

src/components/labeled-value/labeled-value.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cn from 'classnames';
 import { kebabCase } from 'lodash';
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export const styleSheet = createStyleSheet('LabeledValue', theme => {
   const { palette, typography, mixins } = theme;

src/components/li/li.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import classNames from 'classnames';
 
 const styleSheet = createStyleSheet('Li', theme => ({

src/components/pane/pane-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export default createStyleSheet('Pane', theme => {
   const { palette, mixins, typography } = theme;

src/components/segmented-control/segmented-control-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 export default createStyleSheet('SegmentedControl', theme => {
   const { palette, typography } = theme;

src/components/spinner/spinner-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 const identifier = `spinner-${Math.round(1000 * Math.random())}`;
 

src/components/table/table-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import styleUtils from './style-utilities';
 
 export default createStyleSheet('Table', theme => {

src/components/tbody/tbody-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import styleUtils from '../table/style-utilities';
 
 export default createStyleSheet('Tbody', theme => {

src/components/td/td-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import styleUtils from '../table/style-utilities';
 
 export default createStyleSheet('Td', theme => {

src/components/tfoot/tfoot-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import styleUtils from '../table/style-utilities';
 
 export default createStyleSheet('Tfoot', theme => {

src/components/th/th-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import styleUtils from '../table/style-utilities';
 
 export default createStyleSheet('Th', theme => {

src/components/thead/thead-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import styleUtils from '../table/style-utilities';
 import color from '../../styles/color';
 

src/components/tooltip/tooltip-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 
 const zIndexTooltip = 2;
 

src/components/tr/tr-styles.jsx

@@ -1,4 +1,4 @@
-import { createStyleSheet } from 'jss-theme-reactor';
+import { createStyleSheet } from '@iamstarkov/jss-theme-reactor';
 import styleUtils from '../table/style-utilities';
 import color from '../../styles/color';
 

src/styles/ThemeProvider.jsx

@@ -1,70 +1,5 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import { create as createJss } from 'jss';
-import jssPreset from 'jss-preset-default';
-import { createStyleManager } from 'jss-theme-reactor/styleManager';
+import { createThemeProvider } from '@iamstarkov/jss-theme-reactor/ThemeProvider';
 import { createTheme } from './theme';
 
-// https://github.com/callemall/material-ui/tree/next/src/styles
-
-export default class ThemeProvider extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    styleManager: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
-    theme: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
-  };
-
-  static defaultProps = {
-    styleManager: null,
-    theme: null,
-  };
-
-  static childContextTypes = {
-    styleManager: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired,
-  };
-
-  static createDefaultContext(props = {}) {
-    const theme = props.theme || createTheme();
-    const styleManager =
-      props.styleManager ||
-      createStyleManager({
-        theme,
-        jss: createJss(jssPreset()),
-      });
-
-    return { theme, styleManager };
-  }
-
-  getChildContext() {
-    const { theme, styleManager } = this;
-    return {
-      theme,
-      styleManager,
-    };
-  }
-
-  componentWillMount() {
-    const { theme, styleManager } = ThemeProvider.createDefaultContext(this.props);
-    this.theme = theme;
-    this.styleManager = styleManager;
-  }
-
-  componentWillUpdate(nextProps) {
-    if (this.styleManager !== nextProps.styleManager) {
-      const { theme, styleManager } = ThemeProvider.createDefaultContext(nextProps);
-      this.theme = theme;
-      this.styleManager = styleManager;
-    } else if (this.theme && nextProps.theme && nextProps.theme !== this.theme) {
-      this.theme = nextProps.theme;
-      this.styleManager.updateTheme(this.theme);
-    }
-  }
-
-  theme = undefined;
-  styleManager = undefined;
-
-  render() {
-    return this.props.children;
-  }
-}
+// https://github.com/RikardGehlin/jss-theme-reactor/blob/master/src/ThemeProvider.js
+export default createThemeProvider(createTheme);