Merge pull request #267 from SparkPost/upgrade-babel-rollup

Update Build, Testing Dependancies, and Storybook

.storybook/config.js

@@ -16,5 +16,4 @@ setDefaults({
   maxPropsIntoLine: 1
 });
 
-const req = require.context('../stories', true, /\.stories\.js$/)
-storybook.configure(() => req.keys().forEach((filename) => req(filename)), module);
+storybook.configure(require.context('../stories', true, /\.stories\.js$/), module);

.storybook/webpack.config.js

@@ -1,36 +1,34 @@
 const path = require('path');
 const autoprefixer = require('autoprefixer');
 
-module.exports = (baseConfig, env, defaults) => {
-  defaults.module.rules.push({
+module.exports = async ({ config, mode }) => {
+  config.module.rules.push({
     test: /\.scss$/,
     use: [
-      { loader: require.resolve('style-loader'), },
+      'style-loader',
       {
-        loader: require.resolve('css-loader'),
+        loader: 'css-loader',
         options: {
           modules: true,
-          importLoaders: 2,
-          sourceMap: true,
-          localIdentName: '[name]__[local]___[hash:base64:5]'
-        },
+          importLoaders: 2
+        }
       },
-      { loader: require.resolve('postcss-loader'), options: { plugins: () => [autoprefixer()]} },
       {
-        loader: require.resolve('sass-loader'),
-        options: { includePaths: ['node_modules']}
-      }
+        loader: 'postcss-loader',
+        options: { plugins: () => [autoprefixer()]}
+      },
+      'sass-loader'
     ],
-    include: path.resolve(__dirname, '..')
+    include: path.resolve(__dirname, '../'),
   });
 
-  defaults.resolve = {
+  config.resolve = {
     alias: {
       '@sparkpost/matchbox-icons': path.resolve(__dirname, '../packages/matchbox-icons/src'),
       '@sparkpost/matchbox': path.resolve(__dirname, '../packages/matchbox/src')
     },
     modules: [path.join(__dirname, '../node_modules')]
   }
 
-  return defaults;
+  return config;
 };

babel.config.js

@@ -0,0 +1,40 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            modules: "commonjs",
+            debug: false
+          }
+        ],
+        "@babel/preset-react",
+        "react-app"
+      ],
+      plugins: [
+        "@babel/plugin-proposal-class-properties"
+      ]
+    },
+    production: {
+      presets: [
+        ["@babel/preset-env"],
+        "@babel/preset-react",
+        "react-app"
+      ],
+      plugins: [
+        "@babel/plugin-proposal-class-properties"
+      ]
+    },
+    development: {
+      presets: [
+        ["@babel/preset-env"],
+        "@babel/preset-react",
+        "react-app"
+      ],
+      plugins: [
+        "@babel/plugin-proposal-class-properties"
+      ]
+    }
+  }
+};

jest.config.json

@@ -12,7 +12,7 @@
       "statements": 90
     }
   },
-  "setupTestFrameworkScriptFile": "<rootDir>/config/jest/setup.js",
+  "setupFilesAfterEnv": ["<rootDir>/config/jest/setup.js"],
   "setupFiles": [
     "<rootDir>/config/polyfills.js"
   ],
@@ -24,7 +24,7 @@
   "testEnvironment": "node",
   "testURL": "http://localhost",
   "transform": {
-    "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
+    "^.+\\.(js|jsx)$": "babel-jest",
     "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
     "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
   },