💥[BREAKING] Switch, TextField APIs; commonjs/module build changes (#10)

* 💥 [BREAKING] [Switch] [TextField] remove auto-generated aria-labeledby (breaks SSR hydration)

* [Switch] [TextField] update docs for new labelId prop

* fix linter errs

* 💥 fix CommonJS, Module builds

* [karma.conf.js] Fix broken IE11 test (has-flag module uses arrow fns)

* [BottomNavigation] fix missing import

* [Ripple] fix missing import

* [Switch] [TextField] simplify export syntax

* delete unused webpack config file

Author: petermikitsh

.babelrc

@@ -1,11 +1,48 @@
 {
   "env": {
-    "production": {
+    "commonjs": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": "commonjs",
+            "targets": {
+              "browsers": ["last 2 versions"]
+            }
+          }
+        ]
+      ],
       "plugins": [
         "babel-plugin-transform-react-remove-prop-types",
         [
-          "babel-plugin-transform-define", {
-            "__TEST__": false
+          "babel-plugin-css-modules-transform",
+          {
+            "generateScopedName": "[name].[local]",
+            "prepend": [ "./postcss.config.js" ],
+            "keepImport": true,
+            "extractCss": {
+              "dir": "./dist/",
+              "relativeRoot": "./src/",
+              "filename": "[path]/[name].css"
+            }
+          }
+        ]
+      ]
+    },
+    "module": {
+      "plugins": [
+        "babel-plugin-transform-react-remove-prop-types",
+        [
+          "babel-plugin-css-modules-transform",
+          {
+            "generateScopedName": "[name].[local]",
+            "prepend": [ "./postcss.config.js" ],
+            "keepImport": true,
+            "extractCss": {
+              "dir": "./es/",
+              "relativeRoot": "./src/",
+              "filename": "[path]/[name].css"
+            }
           }
         ]
       ]
@@ -14,7 +51,12 @@
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-transform-runtime"
+    "@babel/plugin-transform-runtime",
+    [
+      "babel-plugin-transform-define", {
+        "__TEST__": false
+      }
+    ]
   ],
   "presets": [
     [
@@ -23,7 +65,7 @@
         "modules": false,
         "targets": {
           "browsers": ["last 2 versions"]
-        },
+        }
       }
     ],
     "@babel/preset-react"

docs/pages/Switch/index.js

@@ -13,6 +13,7 @@ class SwitchDocs extends React.Component {
       checked: true,
       disabled: false,
       label: 'Switch Label',
+      labelId: 'foobar',
       primaryColor: Colors.$primary,
       switch1: false,
       switch2: true,
@@ -27,7 +28,7 @@ class SwitchDocs extends React.Component {
   }
 
   render() {
-    const {checked, disabled, label, primaryColor} = this.state;
+    const {checked, disabled, label, labelId, primaryColor} = this.state;
     return (
       <Page
         componentName="Switch"
@@ -37,6 +38,7 @@ class SwitchDocs extends React.Component {
               onChange={e => (this.onControlPanel('checked', e.target.checked))}
               disabled={disabled}
               label={label}
+              labelId={labelId}
               checked={checked}
               primaryColor={primaryColor}
               style={{justifyContent: 'center'}}
@@ -59,6 +61,11 @@ class SwitchDocs extends React.Component {
             label="label"
             value={label}
           />,
+          <TextField
+            onChange={e => (this.onControlPanel('labelId', e.target.value))}
+            label="labelId"
+            value={labelId}
+          />,
           <TextField
             onChange={e => (this.onControlPanel('primaryColor', e.target.value))}
             label="primaryColor"

docs/pages/TextField/index.js

@@ -12,6 +12,7 @@ class TextFieldDocs extends React.Component {
     this.onControlPanel = this.onControlPanel.bind(this);
     this.state = {
       label: 'Label',
+      labelId: 'foobar',
       value: '',
       disabled: false,
       placeholder: 'Placeholder',
@@ -39,7 +40,7 @@ class TextFieldDocs extends React.Component {
   }
 
   render() {
-    const {label, helperText, placeholder, primaryColor,
+    const {label, labelId, helperText, placeholder, primaryColor,
       errorColor, value, disabled, multiline, width} = this.state;
     return (
       <Page
@@ -48,6 +49,7 @@ class TextFieldDocs extends React.Component {
           <TextField
             onChange={e => (this.onControlPanel('value', e.target.value))}
             label={label}
+            labelId={labelId}
             value={value}
             disabled={disabled}
             placeholder={placeholder}
@@ -64,6 +66,11 @@ class TextFieldDocs extends React.Component {
             label="label"
             value={label}
           />,
+          <TextField
+            onChange={e => (this.onControlPanel('labelId', e.target.value))}
+            label="labelId"
+            value={labelId}
+          />,
           <TextField
             onChange={e => (this.onControlPanel('helperText', e.target.value))}
             label="helperText"

karma.conf.js

@@ -78,6 +78,12 @@ function getBrowserStackConfig(config) {
 const babelOptions = {
   plugins: [
     '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-object-rest-spread',
+    [
+      "babel-plugin-transform-define", {
+        "__TEST__": true
+      }
+    ],
     [
       'babel-plugin-istanbul', {
         exclude: [
@@ -204,7 +210,6 @@ module.exports = function (config) {
       },
       plugins: [
         new webpack.DefinePlugin({
-          __TEST__: true,
           'process.env': {
             NODE_ENV: JSON.stringify('development')
           }

package-lock.json

@@ -13,13 +13,10 @@
     "material-ui"
   ],
   "scripts": {
-    "build": "npm-run-all build:dist:* build:es:*",
-    "build:dist:js": "webpack --config webpack.config.dist.js -p",
-    "build:dist:main": "babel src/index.js > dist/index.js",
+    "build": "npm-run-all build:*",
+    "build:commonjs": "BABEL_ENV=commonjs babel src --out-dir dist --ignore '**/*.spec.js'",
     "build:docs": "NODE_ENV=production webpack --config webpack.config.docs.js --env.docs",
-    "build:es:css": "postcss src/**/*.css --base src --dir es",
-    "build:es:js": "NODE_ENV=production babel src --ignore *.spec.js --out-dir es",
-    "build:es:main": "cp src/index.js es/index.js",
+    "build:module": "BABEL_ENV=module babel src --out-dir es --ignore '**/*.spec.js'",
     "build:ssr": "webpack --config webpack.config.ssr.js",
     "coverage:open": "open .coverage/lcov-report/index.html",
     "lint": "npm run lint:css && npm run lint:js",
@@ -44,8 +41,7 @@
     "material-design-icons": "3.0.1",
     "react-scrollbar-size": "2.1.0",
     "react-transition-group": "1.2.1",
-    "tinycolor2": "1.4.1",
-    "uuid": "3.3.2"
+    "tinycolor2": "1.4.1"
   },
   "devDependencies": {
     "@babel/cli": "7.0.0-rc.1",
@@ -59,6 +55,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "8.2.6",
     "babel-loader": "7.1.5",
+    "babel-plugin-css-modules-transform": "1.6.1",
     "babel-plugin-istanbul": "4.1.6",
     "babel-plugin-transform-define": "1.3.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.14",

package.json

@@ -1,13 +1,13 @@
 const cssvariables = require('./src/variables');
 
 module.exports = () => ({
-  plugins: {
-    'postcss-simple-vars': {
+  plugins: [
+    require('postcss-simple-vars')({
       variables: () => (
         cssvariables
       )
-    },
-    autoprefixer: {
+    }),
+    require('autoprefixer')({
       browsers: [
         'last 4 versions',
         'Android >= 4.4',
@@ -18,6 +18,6 @@ module.exports = () => ({
         'iOS >= 8.4',
         'Safari >= 8'
       ]
-    }
-  }
+    })
+  ]
 });