.eslintrc

{
  "extends": [
    "standard",
    "plugin:react/recommended",
    "prettier",
    "prettier/react",
    "prettier/standard",
    "plugin:jest/recommended"
  ],
  "plugins": ["typescript", "react", "prettier", "standard", "jest", "graphql"],
  "parser": "typescript-eslint-parser",
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "curly": [2, "all"],
    "prettier/prettier": "off",
    "react/prop-types": 0,
    "no-script-url": 0,
    "no-useless-escape": 0,
    "react/display-name": 0,
    "react/no-find-dom-node": 0,
    "camelcase": 0,
    "no-multi-str": "off",
    "no-useless-call": 0,
    "no-use-before-define": 0,
    "typescript/no-unused-vars": "error",
    "typescript/no-empty-interface": "error",
    "no-undef": "off",
    "no-unused-vars": "off",
    "no-restricted-globals": "off",
    "no-useless-constructor": "off",
    "no-restricted-imports": ["error", "lodash"],
    "import-name": [true, { "react": "React" }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      },
      "eslint-import-resolver-typescript": true
    },
    "react": {
      "version": "16.0"
    }
  }
}

babel.config.js

module.exports = function(api) {
  api.cache.forever();
  const isTest = process.env.NODE_ENV === 'test';

  const presets = [
    ['@babel/preset-env',
    {
      targets: {
        esmodules: !isTest
      }
    }],
    '@babel/preset-react',
    ['@babel/typescript', { isTSX: true, allExtensions: true }]
  ];

  const plugins = [
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-runtime',
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true
      }
    ]
  ];

  if (isTest) {
    plugins.push('./config/jest/babel-plugin-use-lodash');
  }

  return {
    presets,
    plugins
  };
};

package.json

  "dependencies": {
    "@material-ui/core": "3.6.0",
    "@material-ui/icons": "3.0.1",
    "antlr4": "^4.7.1",
    "apollo-cache-inmemory": "^1.4.2",
    "apollo-client": "^2.4.12",
    "apollo-link": "^1.2.6",
    "apollo-link-context": "^1.0.12",
    "apollo-link-error": "^1.1.5",
    "apollo-upload-client": "^9.1.0",
    "big-integer": "^1.6.40",
    "chroma-js": "^1.4.1",
    "classnames": "^2.2.5",
    "codemirror": "^5.42.2",
    "copy-to-clipboard": "^3.0.8",
    "d3-array": "^2.0.3",
    "d3-ease": "^1.0.5",
    "d3-format": "^1.3.0",
    "d3-geo": "^1.11.3",
    "d3-interpolate": "^1.2.0",
    "d3-sankey": "^0.7.1",
    "d3-scale": "^2.1.0",
    "d3-shape": "^1.2.0",
    "email-regex": "^3.0.0",
    "focus-trap-react": "^4.0.1",
    "focus-visible": "^4.1.5",
    "formik": "^1.4.2",
    "fuse.js": "^3.3.0",
    "graphql": "^14.1.1",
    "history": "^4.7.2",
    "human-format": "^0.10.1",
    "humanize-string": "^1.0.2",
    "iframe-resizer": "^3.6.3",
    "ip-regex": "^4.0.0",
    "keycode": "^2.2.0",
    "loaders.css": "^0.1.2",
    "lodash-es": "^4.17.11",
    "mac-regex": "^1.0.0",
    "md5": "^2.2.1",
    "memoize-bind": "^1.0.3",
    "moment": "^2.23.0",
    "moment-duration-format": "^2.2.2",
    "moment-timezone": "^0.5.23",
    "mousetrap": "^1.6.2",
    "popper.js": "^1.14.6",
    "prop-types": "^15.6.2",
    "qrcode.react": "^0.8.0",
    "query-string": "^6.2.0",
    "rc-slider": "^8.6.3",
    "react": "^16.7.0",
    "react-apollo": "^2.4.0",
    "react-autosuggest": "^9.4.2",
    "react-codemirror2": "^5.1.0",
    "react-cookie": "^3.0.8",
    "react-dom": "^16.7.0",
    "react-dropzone": "^7.0.1",
    "react-flag-icon-css": "^1.0.23",
    "react-helmet": "^5.2.0",
    "react-highlight-words": "^0.14.0",
    "react-loaders": "^3.0.1",
    "react-moment": "^0.8.4",
    "react-pose": "^4.0.7",
    "react-redux": "^5.1.1",
    "react-router": "next",
    "react-router-dom": "next",
    "react-router-redux": "next",
    "react-scrolllock": "^3.0.2",
    "react-sizeme": "^2.5.2",
    "react-text-mask": "^5.4.3",
    "react-tippy": "^1.2.3",
    "react-transition-group": "^2.5.3",
    "react-virtualized": "^9.21.0",
    "redux": "^4.0.1",
    "redux-persist": "^5.10.0",
    "redux-saga": "^0.16.2",
    "reselect": "^4.0.0",
    "sha-regex": "^1.0.3",
    "text-mask-addons": "^3.8.0",
    "topojson-client": "^3.0.0",
    "url-regex": "^4.1.1",
    "whatwg-fetch": "^3.0.0",
    "world-atlas": "^1.1.4",
    "xss": "^1.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.1.0",
    "@babel/runtime": "^7.3.1",
    "@storybook/addon-centered": "^4.1.11",
    "@storybook/addon-info": "^4.1.11",
    "@storybook/addon-knobs": "^4.1.11",
    "@storybook/addon-options": "^4.1.11",
    "@storybook/addons": "^4.1.11",
    "@storybook/react": "^4.1.11",
    "@types/antlr4": "^4.7.0",
    "@types/classnames": "^2.2.6",
    "@types/d3-array": "^1.2.4",
    "@types/d3-geo": "^1.10.3",
    "@types/d3-sankey": "^0.7.4",
    "@types/d3-scale": "^2.0.2",
    "@types/d3-shape": "^1.2.6",
    "@types/humanize-string": "^1.0.0",
    "@types/jest": "^23.3.10",
    "@types/lodash-es": "^4.17.1",
    "@types/mousetrap": "^1.6.0",
    "@types/react": "16.7.6",
    "@types/react-dom": "^16.0.9",
    "@types/react-helmet": "^5.0.6",
    "@types/react-redux": "^6.0.10",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-virtualized": "^9.18.9",
    "@types/topojson-client": "^3.0.0",
    "antlr4-tool": "^1.0.26",
    "apollo": "^1.9.2",
    "autoprefixer": "^9.3.1",
    "babel-core": "^7.0.0-0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^1.0.0",
    "eslint": "^5.10.0",
    "eslint-cli": "^1.1.1",
    "eslint-config-prettier": "^3.3.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-formatter-friendly": "^6.0.0",
    "eslint-import-resolver-typescript": "^1.1.1",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-graphql": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jest": "^22.1.2",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-promise": "^4.0.0",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-typescript": "^0.14.0",
    "fork-ts-checker-webpack-plugin": "^0.5.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "gh-pages": "^2.0.1",
    "glob": "^7.1.2",
    "graphql-cli": "^2.17.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.2.0",
    "jest": "^23.6.0",
    "jest-dom": "^2.1.1",
    "jest-junit": "^5.2.0",
    "lint-staged": "^8.1.0",
    "lodash-webpack-plugin": "^0.11.5",
    "mini-css-extract-plugin": "^0.4.5",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "postcss-focus-visible": "^4.0.0",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.15.3",
    "react-hot-loader": "^4.6.3",
    "react-perf-devtool": "^3.0.7",
    "react-test-renderer": "^16.7.0",
    "react-testing-library": "^5.4.1",
    "redux-devtools-extension": "^2.13.7",
    "sass-loader": "^7.1.0",
    "size-plugin": "^1.1.1",
    "source-map-explorer": "^1.5.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "stylelint": "^9.9.0",
    "stylelint-config-recommended": "^2.1.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "svg-react-loader": "^0.4.6",
    "terser-webpack-plugin": "^1.1.0",
    "thread-loader": "^1.2.0",
    "typescript": "^3.2.2",
    "typescript-eslint-parser": "^21.0.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-synchronizable-shell-plugin": "^0.0.7"
  },

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "typeRoots": ["./types", "./node_modules/@types"],
    "jsx": "react",
    "baseUrl": "./src",
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "pretty": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitThis": false
  },
  "types": ["node"],
  "exclude": ["node_modules", "build", "scripts", "src/**/*.test.tsx"]
}

webpack.config.js

const { resolve } = require('path');
const { sassRegex, sassModuleRegex } = require('../config/webpack/utils');
const postcssFocusVisible = require('postcss-focus-visible');
const autoprefixer = require('autoprefixer');

module.exports = (_baseConfig, _env, config) => {
  // Exclude SVGs in assets from the file loader
  const idx = config.module.rules.findIndex(r =>
    r.test.toString() === (/\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/.toString()));
  if (idx > -1) {
    config.module.rules[idx].exclude = /assets\/svg/;
  }

  config.module.rules.push(
    {
      test: /\.(ts|tsx)$/,
      include: resolve(__dirname, '../src'),
      loader: require.resolve('babel-loader')
    },
    {
      test: sassRegex,
      exclude: sassModuleRegex,
      loaders: ['style-loader', 'css-loader', 'sass-loader'],
      include: resolve(__dirname, '../')
    },
    {
      test: sassModuleRegex,
      include: resolve(__dirname, '../'),
      loaders: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () => [
              autoprefixer({
                flexbox: 'no-2009'
              }),
              postcssFocusVisible()
            ]
          }
        },
        'sass-loader'
      ]
    },
    {
      test: /\.svg$/,
      loader: 'svg-react-loader',
      include: /assets\/svg\/illustration/
    }, {
      test: /\.svg$/,
      loader: 'svg-react-loader',
      include: /assets\/svg\/icon/,
      query: {
        props: {
          className: 'svg-icon'
        }
      }
    }
  );

  config.node = {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  };

  config.resolve.modules.push(resolve(__dirname, '../src'));
  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};