Use custom configuration (remove presets) (#168)

* feat(build-process): move babel preset to internal script

* chore: use custom setup

This drops the @commercetools-frontend's application-kit presets in favor of custom setup. The preset is great when working on MC apps, but it gets in the way when developing ui-kit.

* chore: remove unused configuration

* chore: fail CI in case of unhandled rejections

.eslintrc.yaml

@@ -1,5 +1,33 @@
 ---
-extends: "@commercetools-frontend/eslint-config-mc-app"
+parser: babel-eslint
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 8
+  sourceType: module
+extends:
+  - 'airbnb-base'
+  - 'plugin:jest/recommended'
+  - 'plugin:react/recommended'
+  - 'prettier'
+  - 'prettier/react'
+env:
+  browser: true
+  es6: true
+  jest: true
+  node: true
+  mocha: false
+plugins:
+  - 'import'
+  - 'jest'
+  - 'jsx-a11y'
+  - 'prettier'
+  - 'prefer-object-spread'
+  - 'react'
+overrides:
+  - files: ['*.spec.js']
+    rules:
+      'react/display-name': 0
 settings:
   import/ignore:
     # included by default, but replaced if explicitly configured
@@ -9,3 +37,61 @@ settings:
     # Because we export the whole namespace, the `import/ignore` rule can't find
     # the named exports. So we disable the rule for imports of that file.
     - test-utils.js
+
+rules:
+    'class-methods-use-this':
+      - 'error'
+      - exceptMethods: [
+          'render',
+          'getInitialState',
+          'getDefaultProps',
+          'getChildContext',
+          'shouldComponentUpdate',
+          'UNSAFE_componentWillMount',
+          'UNSAFE_componentWillReceiveProps',
+          'UNSAFE_componentWillUpdate',
+          'componentWillUnmount',
+          'componentDidMount',
+          'componentDidUpdate',
+        ]
+    'function-paren-newline': 0
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        js: 'never',
+      },
+    ]
+    'import/no-extraneous-dependencies': 0
+    'import/no-named-as-default': 0
+    'import/no-unresolved': 0
+    'import/first': 0
+    'import/order': 2
+    'no-restricted-globals': ['error', 'find', 'name', 'location']
+    'no-warning-comments': 0
+    'no-use-before-define': [
+      'error',
+      {
+        functions: false,
+      },
+    ]
+    'no-underscore-dangle': 0
+    'jest/no-identical-title': 'warn'
+    'jest/no-focused-tests': 2
+    'react/jsx-uses-vars': 2
+    'react/wrap-multilines': 0
+    'react/no-deprecated': 'error'
+    'react/no-find-dom-node': 0
+    'react/display-name': [
+      1,
+      {
+        ignoreTranspilerName: true,
+      }
+    ]
+    'prefer-object-spread/prefer-object-spread': 2
+    'prefer-destructuring': 0
+    'prefer-promise-reject-errors': 'warn'
+    'react/jsx-no-target-blank': 0
+    'lines-between-class-members': 0
+    # NOTE: The regular rule does not support do-expressions. The equivalent rule of babel does.
+    'no-unused-expressions': 0

.gitignore

@@ -80,3 +80,7 @@ typings/
 .idea
 .vscode
 !.vscode/settings.json
+
+
+# File used to fail tests on CI
+fail-tests-because-there-was-an-unhandled-rejection.lock

.storybook/webpack.config.js

@@ -35,9 +35,7 @@ module.exports = (storybookBaseConfig, configType) => {
           options: {
             babelrc: false,
             compact: false,
-            presets: [
-              require.resolve('@commercetools-frontend/babel-preset-mc-app'),
-            ],
+            presets: [require.resolve('../scripts/get-babel-preset')],
             // This is a feature of `babel-loader` for webpack (not Babel itself).
             // It enables caching results in ./node_modules/.cache/babel-loader/
             // directory for faster rebuilds.
@@ -57,9 +55,7 @@ module.exports = (storybookBaseConfig, configType) => {
           loader: require.resolve('babel-loader'),
           options: {
             babelrc: false,
-            presets: [
-              require.resolve('@commercetools-frontend/babel-preset-mc-app'),
-            ],
+            presets: [require.resolve('../scripts/get-babel-preset')],
             // This is a feature of `babel-loader` for webpack (not Babel itself).
             // It enables caching results in ./node_modules/.cache/babel-loader/
             // directory for faster rebuilds.

.travis.yml

@@ -11,7 +11,9 @@ cache:
   directories:
     - node_modules
 
-script: yarn run jest --projects jest.*.config.js --maxWorkers=4 --reporters jest-silent-reporter
+script:
+  - yarn run jest --projects jest.*.config.js --maxWorkers=4 --reporters jest-silent-reporter
+  - "! test -f fail-tests-because-there-was-an-unhandled-rejection.lock"
 
 before_deploy: yarn build
 

jest.test.config.js

@@ -1,5 +1,33 @@
+// Resolve the absolute path of the caller location.
+const rootPath = process.cwd();
+
 module.exports = {
-  preset: '@commercetools-frontend/jest-preset-mc-app',
+  displayName: 'test',
+  globals: {
+    'process.env': {
+      NODE_ENV: 'test',
+    },
+  },
   moduleDirectories: ['src', 'node_modules'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/test/transform-file.js',
+    '\\.css$': 'identity-obj-proxy',
+  },
+  rootDir: rootPath,
+  setupFiles: [
+    'raf/polyfill',
+    '<rootDir>/test/setup-tests.js',
+    'jest-localstorage-mock',
+  ],
   setupTestFrameworkScriptFile: '<rootDir>/scripts/setup-test-framework.js',
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  testEnvironment: 'jsdom',
+  testURL: 'https://mc.commercetools.com/',
+  testPathIgnorePatterns: ['node_modules'],
+  testRegex: '\\.spec\\.js$',
+  transform: {
+    '^.+\\.js$': '<rootDir>/test/transform-babel-jest.js',
+  },
+  watchPlugins: ['jest-plugin-filename', 'jest-watch-master'],
 };

package.json

@@ -74,10 +74,15 @@
   },
   "devDependencies": {
     "@babel/core": "7.1.2",
+    "@babel/plugin-proposal-do-expressions": "7.0.0",
+    "@babel/plugin-proposal-export-default-from": "7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "7.0.0",
+    "@babel/plugin-transform-destructuring": "7.1.3",
     "@babel/plugin-transform-react-constant-elements": "7.0.0",
-    "@commercetools-frontend/babel-preset-mc-app": "1.0.0-beta.32",
-    "@commercetools-frontend/eslint-config-mc-app": "1.0.0-beta.32",
-    "@commercetools-frontend/jest-preset-mc-app": "1.0.0-beta.32",
+    "@commercetools/enzyme-extensions": "3.0.1",
+    "@commercetools/jest-enzyme-matchers": "1.1.2",
     "@commitlint/cli": "7.2.1",
     "@commitlint/config-conventional": "7.1.2",
     "@storybook/addon-actions": "4.0.0-alpha.20",
@@ -88,31 +93,52 @@
     "@storybook/react": "4.0.0-alpha.20",
     "@svgr/rollup": "3.1.0",
     "@svgr/webpack": "3.1.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
     "babel-plugin-react-intl": "3.0.1",
     "babel-plugin-transform-dynamic-import": "2.1.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.19",
+    "babel-preset-jest": "23.2.0",
     "browserslist": "4.2.1",
+    "colors": "1.3.2",
     "common-tags": "1.8.0",
     "conventional-changelog-cli": "2.0.5",
     "cross-env": "5.2.0",
     "css": "2.2.4",
     "css-loader": "1.0.0",
     "enzyme": "3.7.0",
-    "eslint": "5.3.0",
+    "enzyme-adapter-react-16": "1.6.0",
+    "enzyme-to-json": "3.3.4",
+    "eslint": "5.7.0",
+    "eslint-config-airbnb-base": "13.1.0",
+    "eslint-config-prettier": "3.1.0",
+    "eslint-formatter-pretty": "1.3.0",
+    "eslint-plugin-import": "2.14.0",
+    "eslint-plugin-jest": "21.25.1",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-prefer-object-spread": "1.2.1",
+    "eslint-plugin-prettier": "3.0.0",
+    "eslint-plugin-react": "7.11.1",
     "flatpickr": "4.5.2",
     "formik": "1.3.1",
     "glob": "7.1.3",
     "graphql": "14.0.2",
     "graphql-tag": "2.10.0",
     "html-loader": "0.5.5",
     "husky": "1.1.2",
+    "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
     "jest-dom": "2.1.0",
+    "jest-enzyme": "7.0.0",
+    "jest-localstorage-mock": "2.2.0",
     "jest-plugin-filename": "0.0.1",
     "jest-runner-eslint": "0.6.0",
     "jest-runner-stylelint": "1.0.0",
     "jest-silent-reporter": "0.1.1",
     "jest-validate": "23.6.0",
+    "jest-watch-master": "1.0.0",
     "lint-staged": "7.3.0",
     "lodash.camelcase": "4.3.0",
     "lodash.pick": "4.4.0",

rollup.config.js

@@ -14,9 +14,10 @@ import postcssCustomMediaQueries from 'postcss-custom-media';
 import postcssPostcssColorModFunction from 'postcss-color-mod-function';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import svgrPlugin from '@svgr/rollup';
-import babelOptions from '@commercetools-frontend/babel-preset-mc-app';
 import pkg from './package.json';
 
+const babelOptions = require('./scripts/get-babel-preset');
+
 // Inspired by https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js
 const browserslist = {
   production: [

scripts/extract-intl.js

@@ -17,8 +17,7 @@ const path = require('path');
 const mri = require('mri');
 const nodeGlob = require('glob');
 const { transformAsync } = require('@babel/core');
-// TODO: adapt to using our own babel preset setup
-const getBabelPresetForMcApp = require('@commercetools-frontend/babel-preset-mc-app');
+const getBabelPreset = require('./get-babel-preset');
 
 const flags = mri(process.argv.slice(2), {
   alias: { help: ['h'] },
@@ -41,7 +40,7 @@ if (!flags['output-path']) {
   throw new Error('Missing required option "--output-path"');
 }
 
-const babelConfig = getBabelPresetForMcApp();
+const babelConfig = getBabelPreset();
 const { presets, plugins } = babelConfig;
 
 // Resolve the absolute path of the caller location. This is necessary