New dev

.eslintrc.js

@@ -0,0 +1,52 @@
+module.exports = {
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 6
+  },
+  extends: 'airbnb',
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+    node: true
+  },
+  plugins: [
+    'compat',
+    'import',
+    'jest',
+    'jsx-a11y',
+    'react'
+  ],
+  rules: {
+    'compat/compat': 'error',
+    'func-names': 'off',
+    'global-require': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: true,
+        optionalDependencies: false,
+        peerDependencies: false
+      }
+    ],
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/label-has-associated-control': [
+      'error', {
+        depth: 3,
+      },
+    ],
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    'jsx-a11y/no-noninteractive-tabindex': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
+    'no-underscore-dangle': 'off',
+    'no-use-before-define': 'off',
+    'react/destructuring-assignment': 'off',
+    'react/jsx-filename-extension': 'off',
+    'react/jsx-no-bind': 'error',
+    'react/no-find-dom-node': 'off',
+    'react/require-default-props': 'off',
+    'react/sort-prop-types': 'error'
+  }
+}

README.md

@@ -1,6 +1,6 @@
-# <a href='http://react-toolbox.com'><img src='http://i.imgur.com/VCSElQX.png' height='50'></a>
+# <a href='http://react-toolbox.io'><img src='http://i.imgur.com/VCSElQX.png' height='50'></a>
 
-[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco) [![OpenCollective](https://opencollective.com/react-toolbox/backers/badge.svg)](#backers) 
+[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco) [![OpenCollective](https://opencollective.com/react-toolbox/backers/badge.svg)](#backers) 
 [![OpenCollective](https://opencollective.com/react-toolbox/sponsors/badge.svg)](#sponsors)
 
 React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
@@ -17,7 +17,7 @@ $ npm install --save react-toolbox
 
 ## Prerequisites
 
-React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using PostCSS/[cssnext](http://cssnext.io/) features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using [PostCSS](https://github.com/postcss/postcss) & [postcss-preset-env](https://preset-env.cssdb.org/) features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.
 
 Although we recommend [webpack](https://webpack.github.io/), you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your `node_modules`. If you are experiencing require errors, make sure your configuration satisfies this requirement.
 
@@ -33,8 +33,7 @@ Follow [these instructions](https://github.com/react-toolbox/react-toolbox-themr
 
 ```bash
 npm install postcss-loader --save-dev
-npm install postcss --save
-npm install postcss-cssnext --save
+npm install postcss postcss-preset-env postcss-calc --save
 ```
 
 Configure webpack 1.x loader for .css files to use postcss:
@@ -49,15 +48,46 @@ Configure webpack 1.x loader for .css files to use postcss:
 ```
 Declare plugins to be used by postcss (as part of webpack's config object):
 ```js
+  // webpack.config.js
   postcss: () => {
     return [
       /* eslint-disable global-require */
-      require('postcss-cssnext'),
+      require('postcss-preset-env')({
+        stage: 0, // required to get all features that were from cssnext without enabling them one by one
+        features: {
+          'custom-properties': {
+            preserve: false, // required to output values instead of variables
+          },
+          'color-mod-function': true, // required to use color-mod()
+        }
+      }),
+      require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
       /* eslint-enable global-require */
     ];
   },
 ```
 
+Configure webpack 2.x or 3.x loader for .css files to use postcss:
+```js
+  // webpack.config.js
+  {
+    test: /\.css$/,
+    use: [
+      "style-loader",
+      {
+        loader: "css-loader",
+        options: {
+          modules: true, // default is false
+          sourceMap: true,
+          importLoaders: 1,
+          localIdentName: "[name]--[local]--[hash:base64:8]"
+        }
+      },
+      "postcss-loader"
+    ]
+  }
+```
+
 ## Basic usage
 
 In this minimal example, we import a `Button` with styles already bundled:
@@ -95,7 +125,7 @@ First let's take a look on how the components are structured in the project. The
  |---- theme.css
 ```
 
-As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme PostCSS/cssnext stylesheet and a config.css with configuration variables (CSS Custom Properties). Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
+As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme PostCSS/preset-env stylesheet and a config.css with configuration variables (CSS Custom Properties). Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
 
 ### Bundled component
 
@@ -192,14 +222,13 @@ export default App;
 
 ## Theming (configuration variables)
 
-You can apply theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written using PostCSS with cssnext features and use CSS Custom Properties from the **config** files we saw earlier. In addition, there are some global CSS Properties imported by each component: [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.css). You can override both the global and component-specific **variables** to get the results you want using one of the methods below.
+You can apply theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written using PostCSS with postcss-preset-env features and use CSS Custom Properties from the **config** files we saw earlier. In addition, there are some global CSS Properties imported by each component: [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.module.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.module.css). You can override both the global and component-specific **variables** to get the results you want using one of the methods below.
 
 ### Settings configuration variables in JavaScript
 
-You can override both the global and component-specific CSS Custom Properties at build-time by supplying an object with these variable names and your desired values to the PostCSS customProperties plugin. i.e. if using postcss-next in webpack:
+You can override both the global and component-specific CSS Custom Properties at build-time by supplying an object with these variable names and your desired values to the PostCSS `custom-properties` plugin. i.e. if using [postcss-preset-env](https://github.com/csstools/postcss-preset-env) in webpack:
 
 ```js
-
 // This can also be stored in a separate file:
 const reactToolboxVariables = { 
   'color-text': '#444548',
@@ -208,31 +237,34 @@ const reactToolboxVariables = {
   'button-height': '30px',
 };
 
-// webpack's config object:
+// webpack's config object: (webpack.config.js)
 const config = {
 ...
     postcss: () => {
     return [
       /* eslint-disable global-require */
-      require('postcss-cssnext')({
+      require('postcss-preset-env')({
+        stage: 0, // required to get all features that were from cssnext without enabling them one by one
         features: {
-          customProperties: {
-            variables: reactToolboxVariables,
+          'custom-properties': {
+            preserve: false, // required to output values instead of variables
+            importFrom: reactToolboxVariables, // see postcss-preset-env for config options
           },
-        },
+          'color-mod-function': true, // required to use color-mod()
+        }
       }),
+      require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
       /* optional - see next section */
       require('postcss-modules-values'),
       /* eslint-enable global-require */
     ];
   },
 }
-
 ```
 
 ### Settings configuration variables using CSS Module Values
 
-Instead of using a JavaScript object for variables, you can use [CSS Module Values](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/modules-values-extract) utility to declare these variables in component-specific theme .css files, where you would typically store additional style overrides.
+Instead of using a JavaScript object for variables, you can use [CSS Module Values](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/modules-values-extract) utility to declare these variables in component-specific theme `.css` files, where you would typically store additional style overrides.
 
 CSS Module Values also offer the advantage that importing a css file with @value declarations makes these values properties of the imported style object, i.e.:
 
@@ -248,7 +280,7 @@ import styleVariables from './css/variables.css';
 styleVariables.buttonPrimaryBackgroundColor
 ```
 
-In [this demo project](https://github.com/alexhisen/mobx-forms-demo), modules-values-extract utility is used to extract all @values with dashes in their name from all css files in the /css folder and to feed them to customProperties in [webpack](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/button.css). Note that button.css also imports certain values from variables.css just to demonstrate this capability \(the import can also be used in a @value declaration\) and it uses CSS overrides instead of color variables that exist in the React-Toolbox Button component to show an alternative method if the variables are not sufficient.
+In [this demo project](https://github.com/alexhisen/mobx-forms-demo), modules-values-extract utility is used to extract all @values with dashes in their name from all css files in the `/css` folder and to feed them to customProperties in [webpack](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/button.css). Note that button.css also imports certain values from variables.css just to demonstrate this capability \(the import can also be used in a @value declaration\) and it uses CSS overrides instead of color variables that exist in the React-Toolbox Button component to show an alternative method if the variables are not sufficient.
 
 > **IMPORTANT: Changes to the module values do not take effect immediately with Webpack Hot-Module-Reload - webpack / webpack-dev-server must be restarted!**
 

ROADMAP.md

@@ -1,4 +1,4 @@
-This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.com). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
+This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.io). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
 
 ## The Manifesto 
 
@@ -68,7 +68,7 @@ There is no fixed date, sorry. Being an open source project, it depends on contr
 
 ### Is there any migration guide to 2.0?
 
-Not really. At the end we are just providing components and there are no big changes on them apart from huge refactors of some specific components that will be coming. If should be enough by checking changelogs and new documentation. In any case if you feel like a migration guide is needed, feel free to leave for feedback.
+There is a [migration guide](https://github.com/react-toolbox/react-toolbox/wiki/Migrating-from-version-1.3-to-2.0) in the wiki.
 
 ### When will be released the new playground?
 

babel.config.js

@@ -0,0 +1,35 @@
+module.exports = function (api) {
+  const env = api.env();
+  api.cache.using(() => env === 'development');
+
+  return {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+    plugins: [
+      '@babel/plugin-transform-runtime',
+      // Stage 0
+      '@babel/plugin-proposal-function-bind',
+
+      // Stage 1
+      '@babel/plugin-proposal-export-default-from',
+      '@babel/plugin-proposal-logical-assignment-operators',
+      ['@babel/plugin-proposal-optional-chaining', { loose: false }],
+      ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
+      ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
+      '@babel/plugin-proposal-do-expressions',
+
+      // Stage 2
+      ['@babel/plugin-proposal-decorators', { legacy: true }],
+      '@babel/plugin-proposal-function-sent',
+      '@babel/plugin-proposal-export-namespace-from',
+      '@babel/plugin-proposal-numeric-separator',
+      '@babel/plugin-proposal-throw-expressions',
+
+      // Stage 3
+      '@babel/plugin-syntax-dynamic-import',
+      '@babel/plugin-syntax-import-meta',
+      ['@babel/plugin-proposal-class-properties', { loose: false }],
+      '@babel/plugin-proposal-json-strings',
+      'react-hot-loader/babel',
+    ],
+  };
+};

components/ThemeProvider.d.ts

@@ -0,0 +1,3 @@
+import {ThemeProvider} from 'react-css-themr'
+
+export default ThemeProvider

docs/postcss.config.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const toolboxVariables = require('./toolbox-variables');
+
+module.exports = {
+  plugins: [
+    require('postcss-import')({
+      root: path.join(__dirname, './../'),
+      path: [
+        path.join(__dirname, './app'),
+        path.join(__dirname, './../components')
+      ]
+    }),
+    require('postcss-mixins')(),
+    require('postcss-each')(),
+    require('postcss-apply')(),
+    require('postcss-preset-env')({
+      stage: 0,
+      features: {
+        'custom-properties': {
+          variables: toolboxVariables,
+          preserve: false
+        }
+      }
+    }),
+    require('postcss-reporter')({ clearMessages: true })
+  ]
+}

husky.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  hooks: {
+    'pre-commit': 'npm run lint:staged',
+  },
+};

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  moduleDirectories: [
+    'node_modules',
+  ],
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+  },
+  modulePaths: [
+    '<rootDir>/components',
+  ],
+  setupFiles: [
+    './jest.setup.js',
+  ],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
+  ],
+};

jest.setup.js

@@ -1 +1,7 @@
-Object.defineProperty(window, 'requestAnimationFrame', { value: fn => fn() });
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({
+  adapter: new Adapter(),
+  disableLifecycleMethods: true,
+});

lint-staged.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  '*.js': [
+    'eslint --fix',
+    'git add',
+  ],
+};