feat(configs): configure TypeScript build system (#563)

* chore(configs): set up TypeScript to compile code * style(configs): configure Eslint to lint TypeScript * feat(types): add basic types * chore(configs): exclude spec and story files from build * chore(configs): configure Jest for TypeScript * chore(configs): configure Storybook for TypeScript * chore(configs): configure static style script for TypeScript * fix(theme): add missing colors to theme interface * chore(deps): upgrade to Foundry v2.1 * chore(configs): configure Plop and lint-staged for TypeScript Co-authored-by: Hugo <hleote@gmail.com> BREAKING CHANGE: Compile code with TypeScript. The compiler targets ES2020 syntax, so users need to transpile the Circuit UI code themselves.
sumup-oss · Apr 15, 2020 · db9d865 · db9d865
1 parent 42ae124
commit db9d865
Show file tree

Hide file tree

Showing 19 changed files with 1,398 additions and 503 deletions.
diff --git a/.babelrc b/.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",
           {

diff --git a/.eslintignore b/.eslintignore
@@ -7,3 +7,8 @@ static/
 public/
 coverage/
 __coverage__/
+__reports__/
+/*.config.js
+/*rc.js
+/plopfile.js
+/jest.*.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,13 +1,16 @@
 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']
     }
   }
 );
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -15,15 +15,17 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: 10.x
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Cache dependencies
         uses: actions/cache@v1
+        id: yarn-cache
         with:
-          path: node_modules
-          key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.OS }}-node-${{ env.cache-name }}-
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
+            ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: |
           npm install -g yarn

diff --git a/.storybook/main.js b/.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',

diff --git a/jest.config.js b/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/**'
   ],

diff --git a/jsconfig.json b/jsconfig.json
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -14,5 +14,5 @@
  */
 
 module.exports = require('@sumup/foundry/lint-staged')({
-  language: 'JavaScript'
+  language: 'TypeScript'
 });
diff --git a/package.json b/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,18 +93,24 @@
     "@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",
+    "@sumup/foundry": "^2.1.0",
     "@svgr/webpack": "^4.3.3",
     "@testing-library/dom": "^6.5.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@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": {

diff --git a/plopfile.js b/plopfile.js
@@ -13,4 +13,4 @@
  * limitations under the License.
  */
 
-module.exports = require('@sumup/foundry/plop')({ language: 'JavaScript' });
+module.exports = require('@sumup/foundry/plop')({ language: 'TypeScript' });
diff --git a/src/components/Sidebar/components/Aggregator/Aggregator.spec.js b/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');

diff --git a/src/index.js b/src/index.js
@@ -147,3 +147,6 @@ const theme = {
 export { theme };
 
 export { styleHelpers, constants as styleConstants } from './styles';
+
+// Types
+export { Theme } from './types/theme';
diff --git a/src/styles/style-helpers.js b/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) {

diff --git a/src/themes/circuit.js b/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)'
-};