feat(configs): configure TypeScript build system

.babelrc

@@ -12,44 +12,6 @@
     ]
   ],
   "env": {
-    "cjs": {
-      "plugins": [
-        "@babel/plugin-proposal-class-properties",
-        "lodash",
-        "inline-react-svg",
-        "dev-expression"
-      ],
-      "presets": [
-        ["@babel/preset-env", { "loose": true }],
-        "@babel/preset-react",
-        [
-          "@emotion/babel-preset-css-prop",
-          {
-            "autoLabel": false,
-            "labelFormat": "[filename]--[local]"
-          }
-        ]
-      ]
-    },
-    "es": {
-      "plugins": [
-        "@babel/plugin-proposal-class-properties",
-        "lodash",
-        "inline-react-svg",
-        "dev-expression"
-      ],
-      "presets": [
-        ["@babel/preset-env", { "loose": true, "modules": false }],
-        "@babel/preset-react",
-        [
-          "@emotion/babel-preset-css-prop",
-          {
-            "autoLabel": false,
-            "labelFormat": "[filename]--[local]"
-          }
-        ]
-      ]
-    },
     "static": {
       "plugins": [
         "@babel/plugin-proposal-class-properties",
@@ -59,6 +21,7 @@
         "react-docgen"
       ],
       "presets": [
+        "@babel/preset-typescript",
         [
           "@babel/preset-env",
           {

.eslintignore

@@ -7,3 +7,4 @@ static/
 public/
 coverage/
 __coverage__/
+/*.js

.eslintrc.js

@@ -1,13 +1,24 @@
 module.exports = require('@sumup/foundry/eslint')(
   {
-    language: 'JavaScript',
+    language: 'TypeScript',
     environments: ['Browser'],
     frameworks: ['React', 'Emotion', 'Jest'],
     openSource: true
   },
   {
     rules: {
       'arrow-parens': 'off'
-    }
+    },
+    parserOptions: {
+      project: ['./tsconfig.eslint.json']
+    },
+    overrides: [
+      {
+        files: ['**/*.js', '**/*.jsx'],
+        rules: {
+          '@typescript-eslint/explicit-function-return-type': 'off'
+        }
+      }
+    ]
   }
 );

.storybook/main.js

@@ -4,6 +4,10 @@ module.exports = {
     '../docs/**/*.(stories|story).(js|ts|tsx|mdx)'
   ],
   addons: [
+    {
+      name: '@storybook/preset-typescript',
+      options: { transpileManager: true }
+    },
     '@storybook/addon-docs/',
     '@storybook/addon-storysource',
     '@storybook/addon-actions',

jest.config.js

@@ -14,15 +14,16 @@
  */
 
 module.exports = {
+  preset: 'ts-jest',
   testURL: 'http://localhost',
   coverageDirectory: './__coverage__',
   rootDir: '.',
   roots: ['src', 'scripts'],
-  moduleFileExtensions: ['js', 'jsx', 'json'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   collectCoverageFrom: [
-    'src/@(components|util|styles)/**/*.{js,jsx}',
-    '!src/@(components|util|styles)/**/index.{js,jsx}',
-    '!src/@(components|util|styles)/**/*.story.{js,jsx}',
+    'src/@(components|util|styles)/**/*.{ts,tsx,js,jsx}',
+    '!src/@(components|util|styles)/**/index.{ts,tsx,js,jsx}',
+    '!src/@(components|util|styles)/**/*.story.{jts,tsx,s,jsx}',
     '!src/@(components|util|styles)/**/*.docs.mdx',
     '!**/node_modules/**'
   ],

package.json

@@ -3,31 +3,26 @@
   "sideEffects": false,
   "version": "0.0.0-semantically-released",
   "description": "SumUp's React UI component library",
-  "main": "build/index.js",
-  "module": "build/es/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "files": [
-    "build",
+    "dist",
     "README.md"
   ],
   "scripts": {
     "commit": "git-cz",
     "start": "start-storybook -p 6006 -s .storybook/public",
+    "dev": "tsc --watch",
+    "build": "tsc",
     "create:component": "foundry run plop component",
-    "static-styles": "cross-env BABEL_ENV=static babel-node ./scripts/static-styles/cli.js",
-    "build": "rm -rf build && yarn build:cjs && yarn build:es",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir build --ignore *.spec.js,*.story.js,*.docs.mdx",
-    "build:es": "cross-env BABEL_ENV=es babel src --out-dir build/es --ignore *.spec.js,*.story.js,*.docs.mdx",
+    "static-styles": "cross-env BABEL_ENV=static babel-node --extensions '.js,.ts,.tsx' ./scripts/static-styles/cli.js",
     "build:docs": "yarn build:storybook && yarn build:stylesheets",
     "prebuild:storybook": "yarn test:output",
     "build:storybook": "build-storybook -c .storybook -o public -s .storybook/public",
     "build:stylesheets": "mkdir -p public/static && yarn static-styles --global --filePath=./public/static/circuit-ui-v1.css",
-    "build:js": "yarn clean:js && yarn build:js:cjs && yarn build:js:es",
-    "build:js:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir build --ignore *.spec.js,*.story.js,*.docs.mdx",
-    "build:js:es": "cross-env BABEL_ENV=es babel src --out-dir build/es --ignore *.spec.js,*.story.js,*.docs.mdx",
-    "clean:js": "rimraf build",
-    "lint": "foundry run eslint . --ext .js,.jsx",
+    "lint": "foundry run eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "yarn lint --fix",
-    "lint:watch": "onchange \"src/**/*.js\" -- yarn lint",
+    "lint:watch": "onchange \"src/**/*\" -- yarn lint",
     "lint:ci": "yarn lint --format junit -o __reports__/eslint-results.xml",
     "test": "jest --silent",
     "test:watch": "yarn test --watch",
@@ -81,6 +76,7 @@
     "@babel/node": "^7.6.2",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
+    "@babel/preset-typescript": "^7.9.0",
     "@emotion/babel-preset-css-prop": "^10.0.9",
     "@emotion/cache": "^10.0.19",
     "@emotion/core": "^10.0.21",
@@ -97,6 +93,7 @@
     "@storybook/addon-storysource": "^5.2.0",
     "@storybook/addon-viewport": "^5.2.4",
     "@storybook/addons": "^5.2.0",
+    "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^5.2.0",
     "@storybook/source-loader": "^5.2.4",
     "@sumup/foundry": "^2.0.0",
@@ -106,9 +103,14 @@
     "@testing-library/react": "^9.1.4",
     "@testing-library/react-hooks": "^2.0.1",
     "@testing-library/user-event": "^7.0.1",
+    "@types/jest": "^25.2.1",
+    "@types/lodash": "^4.14.149",
+    "@types/react": "^16.9.32",
+    "@types/react-dom": "^16.9.6",
+    "@types/recompose": "^0.30.7",
     "audit-ci": "^2.1.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.5.0",
+    "babel-jest": "^25.0.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-dev-expression": "^0.2.2",
     "babel-plugin-dynamic-import-node": "^2.2.0",
@@ -125,9 +127,10 @@
     "emotion-theming": "^10.0.19",
     "eslint-plugin-prettier": "^3.1.0",
     "expect": "^24.5.0",
-    "jest": "^24.5.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.2",
+    "jest": "^25.0.0",
     "jest-axe": "^3.1.1",
-    "jest-cli": "^24.5.0",
+    "jest-cli": "^25.0.0",
     "jest-emotion": "^10.0.10",
     "license-checker": "^25.0.1",
     "onchange": "^6.1.0",
@@ -141,6 +144,9 @@
     "react-swipeable": "^5.4.0",
     "react-test-renderer": "^16.8.6",
     "style-loader": "^1.0.0",
+    "ts-jest": "^25.3.1",
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.8.3",
     "webpack-merge": "^4.2.1"
   },
   "peerDependencies": {

src/components/Sidebar/components/Aggregator/Aggregator.spec.js

@@ -63,7 +63,7 @@ describe('Aggregator', () => {
       expect(actual).toMatchSnapshot();
     });
 
-    it('should render and match snapshot when open', async () => {
+    it('should render and match snapshot when open', () => {
       const { container, getByTestId } = render(
         <Aggregator {...props}>
           <div data-testid="child">child</div>
@@ -133,7 +133,7 @@ describe('Aggregator', () => {
       expect(childEl).toBeVisible();
     });
 
-    it('should not toggle when clicking again on the aggregator with a selected child', async () => {
+    it('should not toggle when clicking again on the aggregator with a selected child', () => {
       const onClick = jest.fn();
       const { getByTestId } = render(
         <Aggregator {...props} onClick={onClick}>
@@ -161,7 +161,7 @@ describe('Aggregator', () => {
       expect(childEl).toBeVisible();
     });
 
-    it('should close when there are no selected children', async () => {
+    it('should close when there are no selected children', () => {
       const onClick = jest.fn();
       const { getByTestId } = render(<MockedNavigation onClick={onClick} />);
       const aggregatorEl = getByTestId('aggregator');

src/index.js

@@ -147,3 +147,6 @@ const theme = {
 export { theme };
 
 export { styleHelpers, constants as styleConstants } from './styles';
+
+// Types
+export { Theme } from './types/theme';

src/styles/style-helpers.js

@@ -103,7 +103,7 @@ const divide = (a, b) => a / b;
 
 const transformUnit = (values, transform, allowMultipleUnits = true) => {
   const getUnit = (value, otherUnit) => {
-    const [unit] = String(value).match(/[a-zA-Z]+/) || [];
+    const [unit] = /[a-zA-Z]+/.exec(value) || [];
 
     const multipleValuesWithUnit = !allowMultipleUnits && unit && otherUnit;
     if (multipleValuesWithUnit) {

src/themes/circuit.js

@@ -293,7 +293,3 @@ export const zIndex = {
   sidebar: 800,
   modal: 1000
 };
-
-export const palette = {
-  divider: 'rgba(0, 0, 0, 0.12)'
-};