diff --git a/.babelrc.js b/.babelrc.js index 569c3fc8..86c5b009 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -1,11 +1,17 @@ const config = { - presets: ['@babel/preset-env', '@babel/preset-react', '@emotion/babel-preset-css-prop'], + comments: true, + presets: [ + '@babel/preset-env', + ['@babel/typescript', { allExtensions: true, isTSX: true }], + '@babel/preset-react', + '@emotion/babel-preset-css-prop', + ], plugins: [ '@babel/plugin-proposal-class-properties', ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }], '@babel/plugin-syntax-dynamic-import', '@babel/plugin-transform-runtime', - 'emotion', + '@emotion', ], }; diff --git a/.eslintrc.js b/.eslintrc.js index ee995450..6191a3aa 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -4,6 +4,7 @@ module.exports = { USE_ANALYTICS: false, }, rules: { + '@typescript-eslint/rule-name': 'error', 'react/jsx-props-no-spreading': 'off', }, overrides: [ @@ -21,6 +22,8 @@ module.exports = { }, }, ], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint', '@emotion'], settings: { 'import/ignore': ['utils/testing'], }, diff --git a/jest.config.js b/jest.config.js index ae4e7f01..edbc6b43 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,6 @@ module.exports = { collectCoverage: false, - collectCoverageFrom: ['src/**/**.js'], + collectCoverageFrom: ['src/**/**.jsx', 'src/**/**.js', 'src/**/**.ts', 'src/**/**.tsx'], coveragePathIgnorePatterns: ['/node_modules/'], coverageReporters: ['lcov', 'html', 'text-summary'], moduleNameMapper: { @@ -14,8 +14,8 @@ module.exports = { testPathIgnorePatterns: ['/node_modules/', '/styleguide/'], testURL: 'http://localhost', transform: { - '^.+\\.(js|jsx)$': 'babel-jest', + '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest', // Replace other files with their filename. - '^(?!.*\\.(js|jsx|json)$)': '/utils/jest.file-transform.js', + '^(?!.*\\.(ts|tsx|js|jsx|json)$)': '/utils/jest.file-transform.js', }, }; diff --git a/package-lock.json b/package-lock.json index 226e1e93..d749ec72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -104,17 +104,167 @@ } }, "@babel/helper-create-class-features-plugin": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.0.tgz", - "integrity": "sha512-MZiB5qvTWoyiFOgootmRSDV1udjIqJW/8lmxgzKq6oDqxdmHUjeP2ZUOmgHdYjmUVNABqRrHjYAYRvj8Eox/UA==", + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.5.tgz", + "integrity": "sha512-IipaxGaQmW4TfWoXdqjY0TzoXQ1HRS0kPpEgvjosb3u7Uedcq297xFqDQiCcQtRRwzIMif+N1MLVI8C5a4/PAA==", "dev": true, "requires": { - "@babel/helper-function-name": "^7.7.0", - "@babel/helper-member-expression-to-functions": "^7.7.0", - "@babel/helper-optimise-call-expression": "^7.7.0", - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/helper-replace-supers": "^7.7.0", - "@babel/helper-split-export-declaration": "^7.7.0" + "@babel/helper-function-name": "^7.9.5", + "@babel/helper-member-expression-to-functions": "^7.8.3", + "@babel/helper-optimise-call-expression": "^7.8.3", + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/helper-replace-supers": "^7.8.6", + "@babel/helper-split-export-declaration": "^7.8.3" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", + "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==", + "dev": true, + "requires": { + "@babel/highlight": "^7.8.3" + } + }, + "@babel/generator": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz", + "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==", + "dev": true, + "requires": { + "@babel/types": "^7.9.5", + "jsesc": "^2.5.1", + "lodash": "^4.17.13", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz", + "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.8.3", + "@babel/template": "^7.8.3", + "@babel/types": "^7.9.5" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz", + "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz", + "integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz", + "integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", + "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", + "dev": true + }, + "@babel/helper-replace-supers": { + "version": "7.8.6", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz", + "integrity": "sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.8.3", + "@babel/helper-optimise-call-expression": "^7.8.3", + "@babel/traverse": "^7.8.6", + "@babel/types": "^7.8.6" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz", + "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/highlight": { + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz", + "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.9.0", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.9.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz", + "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==", + "dev": true + }, + "@babel/template": { + "version": "7.8.6", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz", + "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.8.3", + "@babel/parser": "^7.8.6", + "@babel/types": "^7.8.6" + } + }, + "@babel/traverse": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz", + "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.8.3", + "@babel/generator": "^7.9.5", + "@babel/helper-function-name": "^7.9.5", + "@babel/helper-split-export-declaration": "^7.8.3", + "@babel/parser": "^7.9.0", + "@babel/types": "^7.9.5", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.13" + } + }, + "@babel/types": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz", + "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.9.5", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } } }, "@babel/helper-create-regexp-features-plugin": { @@ -277,6 +427,12 @@ "@babel/types": "^7.7.0" } }, + "@babel/helper-validator-identifier": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz", + "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==", + "dev": true + }, "@babel/helper-wrap-function": { "version": "7.7.0", "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.7.0.tgz", @@ -329,13 +485,21 @@ } }, "@babel/plugin-proposal-class-properties": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.7.0.tgz", - "integrity": "sha512-tufDcFA1Vj+eWvwHN+jvMN6QsV5o+vUlytNKrbMiCeDL0F2j92RURzUsUMWE5EJkLyWxjdUslCsMQa9FWth16A==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz", + "integrity": "sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==", "dev": true, "requires": { - "@babel/helper-create-class-features-plugin": "^7.7.0", - "@babel/helper-plugin-utils": "^7.0.0" + "@babel/helper-create-class-features-plugin": "^7.8.3", + "@babel/helper-plugin-utils": "^7.8.3" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", + "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", + "dev": true + } } }, "@babel/plugin-proposal-dynamic-import": { @@ -359,13 +523,61 @@ } }, "@babel/plugin-proposal-object-rest-spread": { - "version": "7.6.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.6.2.tgz", - "integrity": "sha512-LDBXlmADCsMZV1Y9OQwMc0MyGZ8Ta/zlD9N67BfQT8uYwkRswiu2hU6nJKrjrt/58aH/vqfQlR/9yId/7A2gWw==", + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.5.tgz", + "integrity": "sha512-VP2oXvAf7KCYTthbUHwBlewbl1Iq059f6seJGsxMizaCdgHIeczOr7FBqELhSqfkIl04Fi8okzWzl63UKbQmmg==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-syntax-object-rest-spread": "^7.2.0" + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/plugin-syntax-object-rest-spread": "^7.8.0", + "@babel/plugin-transform-parameters": "^7.9.5" + }, + "dependencies": { + "@babel/helper-get-function-arity": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz", + "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", + "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", + "dev": true + }, + "@babel/plugin-syntax-object-rest-spread": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz", + "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.0" + } + }, + "@babel/plugin-transform-parameters": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.5.tgz", + "integrity": "sha512-0+1FhHnMfj6lIIhVvS4KGQJeuhe1GI//h5uptK4PvLt+BGBxsoUJbd3/IW002yk//6sZPlFgsG1hY6OHLcy6kA==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.8.3", + "@babel/helper-plugin-utils": "^7.8.3" + } + }, + "@babel/types": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz", + "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.9.5", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/plugin-proposal-optional-catch-binding": { @@ -451,6 +663,23 @@ "@babel/helper-plugin-utils": "^7.0.0" } }, + "@babel/plugin-syntax-typescript": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz", + "integrity": "sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.3" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", + "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", + "dev": true + } + } + }, "@babel/plugin-transform-arrow-functions": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz", @@ -799,6 +1028,25 @@ "@babel/helper-plugin-utils": "^7.0.0" } }, + "@babel/plugin-transform-typescript": { + "version": "7.9.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.4.tgz", + "integrity": "sha512-yeWeUkKx2auDbSxRe8MusAG+n4m9BFY/v+lPjmQDgOFX5qnySkUY5oXzkp6FwPdsYqnKay6lorXYdC0n3bZO7w==", + "dev": true, + "requires": { + "@babel/helper-create-class-features-plugin": "^7.8.3", + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/plugin-syntax-typescript": "^7.8.3" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", + "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", + "dev": true + } + } + }, "@babel/plugin-transform-unicode-regex": { "version": "7.7.0", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.0.tgz", @@ -881,10 +1129,29 @@ "@babel/plugin-transform-react-jsx-source": "^7.0.0" } }, + "@babel/preset-typescript": { + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz", + "integrity": "sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/plugin-transform-typescript": "^7.9.0" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", + "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", + "dev": true + } + } + }, "@babel/runtime": { "version": "7.7.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "dev": true, "requires": { "regenerator-runtime": "^0.13.2" } @@ -946,62 +1213,115 @@ } } }, - "@emotion/babel-plugin-jsx-pragmatic": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.4.tgz", - "integrity": "sha512-5LfpS5JWi0e+ss9nQdLByslCSjM2Gl72+WnUg60lJFvGk2ecr0tL86f5z8FbvlhpIhoIIIRBpFKMLr0BuIaLWg==", + "@emotion/babel-plugin": { + "version": "11.0.0-next.12", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.0.0-next.12.tgz", + "integrity": "sha512-Je1XOoC4pctGkEzMJhUsAPwBxzmaDLOAYsQsx51BYpo09ZQa3bzQb6Aq5CzoamRID49ElTO17K0FdVHMtydv7A==", "dev": true, "requires": { - "@babel/plugin-syntax-jsx": "^7.2.0" - } - }, - "@emotion/babel-preset-css-prop": { - "version": "10.0.23", - "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.23.tgz", - "integrity": "sha512-XG1s1SQF8twf/ufh+j3EdVjQW7SjcAPOdPZDxEsVVahoR1mF2/nWl4adc5ROppSr/P84QJEdquA6lmyZWcnaBQ==", - "dev": true, - "requires": { - "@babel/plugin-transform-react-jsx": "^7.3.0", - "@babel/runtime": "^7.5.5", - "@emotion/babel-plugin-jsx-pragmatic": "^0.1.4", - "babel-plugin-emotion": "^10.0.23" + "@babel/helper-module-imports": "^7.7.0", + "@babel/plugin-syntax-jsx": "^7.2.0", + "@babel/runtime": "^7.7.2", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^1.0.0-next.1", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "dev": true + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "dev": true + }, + "@emotion/serialize": { + "version": "1.0.0-next.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.0-next.1.tgz", + "integrity": "sha512-4Wqs0UTUIv0xTsDw4O6SwFR5uxZOq0Jarho9gfMflPzzp3o31o2oAWqjF/py7Uf5TO9vLv469UKoZc55x2C1Jw==", + "dev": true, + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.6.7" + } + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", + "dev": true + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", + "dev": true + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } } }, - "@emotion/cache": { - "version": "10.0.19", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz", - "integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==", + "@emotion/babel-plugin-jsx-pragmatic": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz", + "integrity": "sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ==", "dev": true, "requires": { - "@emotion/sheet": "0.9.3", - "@emotion/stylis": "0.8.4", - "@emotion/utils": "0.11.2", - "@emotion/weak-memoize": "0.2.4" + "@babel/plugin-syntax-jsx": "^7.2.0" } }, - "@emotion/core": { - "version": "10.0.22", - "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.22.tgz", - "integrity": "sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==", + "@emotion/babel-preset-css-prop": { + "version": "11.0.0-next.10", + "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.0.0-next.10.tgz", + "integrity": "sha512-IQzw38r9HA6dD8zep7wsTze1TMSyBjRArx5MErYw4zW6xv0/870z7qBXKlOF7lhncb9J31/yAh+NOGEVvPOvPg==", "dev": true, "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/cache": "^10.0.17", - "@emotion/css": "^10.0.22", - "@emotion/serialize": "^0.11.12", - "@emotion/sheet": "0.9.3", - "@emotion/utils": "0.11.2" + "@babel/plugin-transform-react-jsx": "^7.7.0", + "@babel/runtime": "^7.7.2", + "@emotion/babel-plugin": "^11.0.0-next.10", + "@emotion/babel-plugin-jsx-pragmatic": "^0.1.4" } }, - "@emotion/css": { - "version": "10.0.22", - "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.22.tgz", - "integrity": "sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==", + "@emotion/cache": { + "version": "11.0.0-next.12", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.0.0-next.12.tgz", + "integrity": "sha512-6fMuPtXQcORvFaoAkyrtCntBnyLn7SRX7hsg/bz/1rXgQUxB3hawFDLMTKttvwr2zDd1Jfy9iit8Jz4Bz5jlcA==", "dev": true, "requires": { - "@emotion/serialize": "^0.11.12", - "@emotion/utils": "0.11.2", - "babel-plugin-emotion": "^10.0.22" + "@emotion/sheet": "0.10.0-next.1", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + }, + "dependencies": { + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", + "dev": true + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", + "dev": true + } } }, "@emotion/hash": { @@ -1016,29 +1336,55 @@ "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==", "dev": true }, - "@emotion/serialize": { - "version": "0.11.14", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz", - "integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==", + "@emotion/react": { + "version": "11.0.0-next.10", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.0.0-next.10.tgz", + "integrity": "sha512-OgsMiAKDQgugzOkV33+3jPICPEJ7FdyDcf/IJgup3TKxHrVlvT+S7WdxHcStcrq/xcwDx8Qf3EUmx1D+pGz9Kw==", "dev": true, "requires": { - "@emotion/hash": "0.7.3", - "@emotion/memoize": "0.7.3", - "@emotion/unitless": "0.7.4", + "@babel/runtime": "^7.7.2", + "@emotion/cache": "^11.0.0-next.10", + "@emotion/serialize": "^0.12.0-next.3", + "@emotion/sheet": "0.10.0-next.1", "@emotion/utils": "0.11.2", - "csstype": "^2.5.7" + "@emotion/weak-memoize": "0.2.4", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@emotion/serialize": { + "version": "0.12.0-next.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.12.0-next.3.tgz", + "integrity": "sha512-/bznLGIry2OZ5hcbWaV79DcpBko3z27ifRU1cQNf5WClBvNg9ps/HTobAIlxiVfE/AFMumtGP+fW8RFwnW7zvg==", + "dev": true, + "requires": { + "@emotion/hash": "0.7.3", + "@emotion/memoize": "0.7.3", + "@emotion/unitless": "0.7.4", + "@emotion/utils": "0.11.2", + "csstype": "^2.6.7" + } + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "requires": { + "react-is": "^16.7.0" + } + } } }, "@emotion/sheet": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz", - "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==", + "version": "0.10.0-next.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.10.0-next.1.tgz", + "integrity": "sha512-dKzGmnML1bDTvKDZ3joyiNghIMCKgCwjUQZjqwFvPRN1n/M9HFZR+Iq3/I8xnfUhUDmFGIsL2A2ER4Dol75hyw==", "dev": true }, "@emotion/stylis": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz", - "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==", + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", "dev": true }, "@emotion/unitless": { @@ -1056,7 +1402,8 @@ "@emotion/weak-memoize": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz", - "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==" + "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==", + "dev": true }, "@essentials/request-timeout": { "version": "1.0.1", @@ -1449,6 +1796,12 @@ "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", "dev": true }, + "@types/eslint-visitor-keys": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz", + "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==", + "dev": true + }, "@types/events": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz", @@ -1466,6 +1819,12 @@ "@types/node": "*" } }, + "@types/history": { + "version": "4.7.5", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.5.tgz", + "integrity": "sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==", + "dev": true + }, "@types/istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -1491,12 +1850,6 @@ "@types/istanbul-lib-report": "*" } }, - "@types/jest": { - "version": "23.3.14", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.3.14.tgz", - "integrity": "sha512-Q5hTcfdudEL2yOmluA1zaSyPbzWPmJ3XfSWeP3RyoYvS9hnje1ZyagrZOuQ6+1nQC1Gw+7gap3pLNL3xL6UBug==", - "dev": true - }, "@types/json-schema": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz", @@ -1521,6 +1874,32 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true + }, + "@types/reach__router": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.4.tgz", + "integrity": "sha512-DZgYfxUIlVSjvf0AvBbYNbpXLrTFNNpU1HrvCRbnMtx3nvGUUWC1/zlAe4dD4FCPFtc+LQuIPEsDiTb0zQkthg==", + "dev": true, + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react": { + "version": "16.9.34", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz", + "integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -1568,6 +1947,82 @@ "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==", "dev": true }, + "@typescript-eslint/eslint-plugin": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.28.0.tgz", + "integrity": "sha512-w0Ugcq2iatloEabQP56BRWJowliXUP5Wv6f9fKzjJmDW81hOTBxRoJ4LoEOxRpz9gcY51Libytd2ba3yLmSOfg==", + "dev": true, + "requires": { + "@typescript-eslint/experimental-utils": "2.28.0", + "functional-red-black-tree": "^1.0.1", + "regexpp": "^3.0.0", + "tsutils": "^3.17.1" + }, + "dependencies": { + "@typescript-eslint/experimental-utils": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.28.0.tgz", + "integrity": "sha512-4SL9OWjvFbHumM/Zh/ZeEjUFxrYKtdCi7At4GyKTbQlrj1HcphIDXlje4Uu4cY+qzszR5NdVin4CCm6AXCjd6w==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.3", + "@typescript-eslint/typescript-estree": "2.28.0", + "eslint-scope": "^5.0.0", + "eslint-utils": "^2.0.0" + } + }, + "@typescript-eslint/typescript-estree": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.28.0.tgz", + "integrity": "sha512-HDr8MP9wfwkiuqzRVkuM3BeDrOC4cKbO5a6BymZBHUt5y/2pL0BXD6I/C/ceq2IZoHWhcASk+5/zo+dwgu9V8Q==", + "dev": true, + "requires": { + "debug": "^4.1.1", + "eslint-visitor-keys": "^1.1.0", + "glob": "^7.1.6", + "is-glob": "^4.0.1", + "lodash": "^4.17.15", + "semver": "^6.3.0", + "tsutils": "^3.17.1" + } + }, + "eslint-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz", + "integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + } + }, + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "regexpp": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz", + "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "@typescript-eslint/experimental-utils": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-1.13.0.tgz", @@ -1591,6 +2046,76 @@ } } }, + "@typescript-eslint/parser": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.28.0.tgz", + "integrity": "sha512-RqPybRDquui9d+K86lL7iPqH6Dfp9461oyqvlXMNtap+PyqYbkY5dB7LawQjDzot99fqzvS0ZLZdfe+1Bt3Jgw==", + "dev": true, + "requires": { + "@types/eslint-visitor-keys": "^1.0.0", + "@typescript-eslint/experimental-utils": "2.28.0", + "@typescript-eslint/typescript-estree": "2.28.0", + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "@typescript-eslint/experimental-utils": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.28.0.tgz", + "integrity": "sha512-4SL9OWjvFbHumM/Zh/ZeEjUFxrYKtdCi7At4GyKTbQlrj1HcphIDXlje4Uu4cY+qzszR5NdVin4CCm6AXCjd6w==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.3", + "@typescript-eslint/typescript-estree": "2.28.0", + "eslint-scope": "^5.0.0", + "eslint-utils": "^2.0.0" + } + }, + "@typescript-eslint/typescript-estree": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.28.0.tgz", + "integrity": "sha512-HDr8MP9wfwkiuqzRVkuM3BeDrOC4cKbO5a6BymZBHUt5y/2pL0BXD6I/C/ceq2IZoHWhcASk+5/zo+dwgu9V8Q==", + "dev": true, + "requires": { + "debug": "^4.1.1", + "eslint-visitor-keys": "^1.1.0", + "glob": "^7.1.6", + "is-glob": "^4.0.1", + "lodash": "^4.17.15", + "semver": "^6.3.0", + "tsutils": "^3.17.1" + } + }, + "eslint-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz", + "integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + } + }, + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "@typescript-eslint/typescript-estree": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-1.13.0.tgz", @@ -2349,32 +2874,6 @@ "object.assign": "^4.1.0" } }, - "babel-plugin-emotion": { - "version": "10.0.23", - "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz", - "integrity": "sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==", - "dev": true, - "requires": { - "@babel/helper-module-imports": "^7.0.0", - "@emotion/hash": "0.7.3", - "@emotion/memoize": "0.7.3", - "@emotion/serialize": "^0.11.14", - "babel-plugin-macros": "^2.0.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "convert-source-map": "^1.5.0", - "escape-string-regexp": "^1.0.5", - "find-root": "^1.1.0", - "source-map": "^0.5.7" - }, - "dependencies": { - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - } - } - }, "babel-plugin-istanbul": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz", @@ -2407,12 +2906,6 @@ "resolve": "^1.10.0" } }, - "babel-plugin-syntax-jsx": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", - "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", - "dev": true - }, "babel-preset-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz", @@ -4410,16 +4903,6 @@ "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", "dev": true }, - "emotion-theming": { - "version": "10.0.19", - "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.19.tgz", - "integrity": "sha512-dQRBPLAAQ6eA8JKhkLCIWC8fdjPbiNC1zNTdFF292h9amhZXofcNGUP7axHoHX4XesqQESYwZrXp53OPInMrKw==", - "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/weak-memoize": "0.2.4", - "hoist-non-react-statics": "^3.3.0" - } - }, "empty": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/empty/-/empty-0.10.1.tgz", @@ -4848,9 +5331,9 @@ } }, "eslint-plugin-emotion": { - "version": "10.0.14", - "resolved": "https://registry.npmjs.org/eslint-plugin-emotion/-/eslint-plugin-emotion-10.0.14.tgz", - "integrity": "sha512-kI0hTPA5oo7MAc2YcdF1JcT36TZ1Ci0S5sbA9aojZ3leEPyCH34YBB76/8NQ3/9gybqrekIEuEhr8MP6JZf95Q==", + "version": "11.0.0-next.10", + "resolved": "https://registry.npmjs.org/eslint-plugin-emotion/-/eslint-plugin-emotion-11.0.0-next.10.tgz", + "integrity": "sha512-VXrkqvS2LzzTOvBFO5SM2kV4QN2OW1o181vLZwx2v+XOUoUSnamahT2LYjnNfYk2FAvCbki1QODz2OfnnltKxw==", "dev": true }, "eslint-plugin-import": { @@ -5970,11 +6453,6 @@ "number-is-nan": "^1.0.0" } }, - "minimist": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" - }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -6500,6 +6978,7 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "dev": true, "requires": { "react-is": "^16.7.0" } @@ -7631,16 +8110,10 @@ } }, "jest-emotion": { - "version": "10.0.17", - "resolved": "https://registry.npmjs.org/jest-emotion/-/jest-emotion-10.0.17.tgz", - "integrity": "sha512-Z0SqaeXGr9dshhY5z9ctfPiw2qTw5BRbCsbBWziTtSdiLnqFprj2NuF38lMrpSMFKjNY+q+rioRI5gVyQZrrxA==", - "dev": true, - "requires": { - "@babel/runtime": "^7.5.5", - "@types/jest": "^23.0.2", - "chalk": "^2.4.1", - "css": "^2.2.1" - } + "version": "11.0.0-next.10", + "resolved": "https://registry.npmjs.org/jest-emotion/-/jest-emotion-11.0.0-next.10.tgz", + "integrity": "sha512-lfzgaWiLKbJ9w8wQgUuTmC0N1EYY4RR2euX1P2ygFXJInIoy+y4QCOpY8Asx0ETgjluS8L38w03iTUrldKRicQ==", + "dev": true }, "jest-environment-jsdom": { "version": "24.9.0", @@ -11339,6 +11812,12 @@ } } }, + "react-docgen-typescript": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.16.3.tgz", + "integrity": "sha512-xYISCr8mFKfV15talgpicOF/e0DudTucf1BXzu/HteMF4RM3KsfxXkhWybZC3LTVbYrdbammDV26Z4Yuk+MoWg==", + "dev": true + }, "react-dom": { "version": "16.11.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.11.0.tgz", @@ -11682,7 +12161,8 @@ "regenerator-runtime": { "version": "0.13.3", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", - "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==", + "dev": true }, "regenerator-transform": { "version": "0.14.1", @@ -13840,6 +14320,15 @@ "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==", "dev": true }, + "tsutils": { + "version": "3.17.1", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz", + "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==", + "dev": true, + "requires": { + "tslib": "^1.8.1" + } + }, "tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", @@ -13898,6 +14387,12 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "typescript": { + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz", + "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==", + "dev": true + }, "ua-parser-js": { "version": "0.7.20", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", diff --git a/package.json b/package.json index 963ccdf6..13774305 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,13 @@ "version": "0.4.0", "description": "Nautilus design system for React", "main": "dist/main.js", - "module": "src/index.js", + "module": "src/index.ts", "scripts": { "build:package": "NODE_ENV=production webpack", "build:styleguide": "DISABLE_PEER_DEPS_PLUGIN=true NODE_ENV=production styleguidist build", "build": "npm run build:package && npm run build:styleguide", "clean": "shx rm -rf coverage/ dist/", + "check-types": "tsc", "lint:eslint:fix": "eslint --fix .", "lint:eslint": "eslint .", "lint:fix": "npm run lint:eslint:fix && npm run lint:prettier:fix && npm run lint:stylelint:fix", @@ -50,7 +51,6 @@ "dependencies": { "chroma-js": "^2.1.0", "classnames": "^2.2.6", - "emotion-theming": "^10.0.19", "feather-icons": "^4.24.1", "invariant": "^2.2.4", "prop-types": "^15.7.2", @@ -59,29 +59,35 @@ }, "devDependencies": { "@babel/core": "^7.6.4", - "@babel/plugin-proposal-class-properties": "^7.5.5", - "@babel/plugin-proposal-object-rest-spread": "^7.6.2", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-proposal-object-rest-spread": "^7.9.5", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-react-jsx-source": "^7.5.0", "@babel/plugin-transform-runtime": "^7.6.2", "@babel/preset-env": "^7.6.3", "@babel/preset-react": "^7.6.3", - "@emotion/babel-preset-css-prop": "^10.0.23", - "@emotion/core": "^10.0.22", + "@babel/preset-typescript": "^7.9.0", + "@emotion/babel-plugin": "^11.0.0-next.12", + "@emotion/babel-preset-css-prop": "^11.0.0-next.10", + "@emotion/react": "^11.0.0-next.10", "@octopusthink/eslint-config": "^0.5.0", "@octopusthink/prettier-config": "^0.5.2", "@reach/router": "^1.2.1", "@react-hook/window-size": "^1.0.8", "@testing-library/react": "^8.0.9", + "@types/prop-types": "^15.7.3", + "@types/reach__router": "^1.3.4", + "@types/react": "^16.9.34", + "@typescript-eslint/eslint-plugin": "^2.28.0", + "@typescript-eslint/parser": "^2.28.0", "acorn": "^6.3.0", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", "babel-loader": "^8.0.6", - "babel-plugin-emotion": "^10.0.23", "eslint": "^6.6.0", "eslint-config-airbnb": "^18.0.1", "eslint-config-prettier": "^6.5.0", - "eslint-plugin-emotion": "^10.0.14", + "eslint-plugin-emotion": "^11.0.0-next.10", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jest": "^22.21.0", "eslint-plugin-jsx-a11y": "^6.2.3", @@ -93,11 +99,12 @@ "jest": "^24.9.0", "jest-axe": "^3.2.0", "jest-dom": "^3.5.0", - "jest-emotion": "^10.0.17", + "jest-emotion": "^11.0.0-next.10", "lint-staged": "^10.0.9", "peer-deps-externals-webpack-plugin": "^1.0.4", "prettier": "1.17.1", "react": "^16.11.0", + "react-docgen-typescript": "^1.16.3", "react-dom": "^16.11.0", "react-router-dom": "^5.1.2", "react-styleguidist": "^9.2.0", @@ -109,11 +116,12 @@ "stylelint-order": "^3.1.1", "stylelint-prettier": "^1.1.0", "stylelint-processor-styled-components": "^1.7.0", + "typescript": "^3.8.3", "webpack": "^4.41.2", "webpack-cli": "^3.3.10" }, "peerDependencies": { - "@emotion/core": "^10.0.22", + "@emotion/react": "^11.0.0-next.10", "react": ">=16.8.6", "react-dom": ">=16.8.6" } diff --git a/src/components/hoc/Nautilus/context.js b/src/components/hoc/Nautilus/context.js deleted file mode 100644 index c153d5ce..00000000 --- a/src/components/hoc/Nautilus/context.js +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from 'react'; - -export const NautilusLinkComponentContext = createContext(); diff --git a/src/components/hoc/Nautilus/context.ts b/src/components/hoc/Nautilus/context.ts new file mode 100644 index 00000000..ee1380e6 --- /dev/null +++ b/src/components/hoc/Nautilus/context.ts @@ -0,0 +1,5 @@ +import { ReactElement, createContext } from 'react'; + +import LinkComponent from '../../ui/Link'; + +export const NautilusLinkComponentContext = createContext(LinkComponent); diff --git a/src/components/hoc/Nautilus/index.test.js b/src/components/hoc/Nautilus/index.test.tsx similarity index 100% rename from src/components/hoc/Nautilus/index.test.js rename to src/components/hoc/Nautilus/index.test.tsx diff --git a/src/components/hoc/Nautilus/index.js b/src/components/hoc/Nautilus/index.tsx similarity index 66% rename from src/components/hoc/Nautilus/index.js rename to src/components/hoc/Nautilus/index.tsx index ed5c2d48..eed79a0c 100644 --- a/src/components/hoc/Nautilus/index.js +++ b/src/components/hoc/Nautilus/index.tsx @@ -1,15 +1,26 @@ -import { Global, css } from '@emotion/core'; -import { ThemeProvider } from 'emotion-theming'; -import PropTypes from 'prop-types'; -import React from 'react'; +import { Global, css, ThemeProvider, Theme } from '@emotion/react'; +import React, { ReactNode } from 'react'; -import { nautilus as nautilusDefaultTheme, themePropTypes } from '../../../themes'; +import { nautilusDefaultTheme } from '../../../themes'; import { NautilusLinkComponentContext } from './context'; -const Nautilus = (props) => { - const { children, config, theme } = props; +interface Props { + /** @ignore */ + children?: React.ReactNode; + /** Config values affect all component rendered underneath this `Nautilus` component. Used to set default `Link` components, etc. */ + config: { + LinkComponent?: ReactNode; + }; + /** Theme object used to style this instance of Nautilus and its components. */ + theme: Theme; +} - const { LinkComponent } = config; +const Nautilus = ({ + children, + config = { LinkComponent: undefined }, + theme = nautilusDefaultTheme, +}: Props) => { + const { LinkComponent } = config || {}; return ( @@ -43,21 +54,4 @@ const Nautilus = (props) => { ); }; -Nautilus.defaultProps = { - children: undefined, - config: { LinkComponent: undefined }, - theme: nautilusDefaultTheme, -}; - -Nautilus.propTypes = { - /** @ignore */ - children: PropTypes.node, - /** Config values affect all component rendered underneath this `Nautilus` component. Used to set default `Link` components, etc. */ - config: PropTypes.shape({ - LinkComponent: PropTypes.elementType, - }), - /** Theme object used to style this instance of Nautilus and its components. */ - theme: themePropTypes, -}; - export default Nautilus; diff --git a/src/components/index.js b/src/components/index.ts similarity index 100% rename from src/components/index.js rename to src/components/index.ts diff --git a/src/components/inline/Emphasis/__snapshots__/index.test.js.snap b/src/components/inline/Emphasis/__snapshots__/index.test.tsx.snap similarity index 100% rename from src/components/inline/Emphasis/__snapshots__/index.test.js.snap rename to src/components/inline/Emphasis/__snapshots__/index.test.tsx.snap diff --git a/src/components/inline/Emphasis/index.js b/src/components/inline/Emphasis/index.js deleted file mode 100644 index d14f3e87..00000000 --- a/src/components/inline/Emphasis/index.js +++ /dev/null @@ -1,44 +0,0 @@ -import { css } from '@emotion/core'; -import PropTypes from 'prop-types'; -import React from 'react'; - -import { useTheme } from '../../../themes'; - -const Emphasis = (props) => { - const { children, unstyled, ...otherProps } = props; - - const theme = useTheme(); - - return ( - - {children} - - ); -}; - -Emphasis.defaultProps = { - children: undefined, - unstyled: false, -}; - -Emphasis.propTypes = { - /** @ignore */ - children: PropTypes.node, - /* @ignore Don't output any CSS styles. */ - unstyled: PropTypes.bool, -}; - -export const { defaultProps, propTypes } = Emphasis; - -export default Emphasis; diff --git a/src/components/inline/Emphasis/index.test.js b/src/components/inline/Emphasis/index.test.tsx similarity index 100% rename from src/components/inline/Emphasis/index.test.js rename to src/components/inline/Emphasis/index.test.tsx diff --git a/src/components/inline/Emphasis/index.tsx b/src/components/inline/Emphasis/index.tsx new file mode 100644 index 00000000..23f10ab7 --- /dev/null +++ b/src/components/inline/Emphasis/index.tsx @@ -0,0 +1,32 @@ +import { css } from '@emotion/react'; +import React, { FunctionComponent } from 'react'; + +import { NautilusComponentProps } from '../../types'; +import { useTheme } from '../../../themes'; + +interface Props + extends React.PropsWithoutRef, + NautilusComponentProps {} + +const Emphasis: FunctionComponent = ({ children, unstyled, ...otherProps }: Props) => { + const theme = useTheme(); + + return ( + + {children} + + ); +}; + +export default Emphasis; diff --git a/src/components/inline/Strong/__snapshots__/index.test.js.snap b/src/components/inline/Strong/__snapshots__/index.test.tsx.snap similarity index 100% rename from src/components/inline/Strong/__snapshots__/index.test.js.snap rename to src/components/inline/Strong/__snapshots__/index.test.tsx.snap diff --git a/src/components/inline/Strong/index.test.js b/src/components/inline/Strong/index.test.tsx similarity index 100% rename from src/components/inline/Strong/index.test.js rename to src/components/inline/Strong/index.test.tsx diff --git a/src/components/inline/Strong/index.js b/src/components/inline/Strong/index.tsx similarity index 57% rename from src/components/inline/Strong/index.js rename to src/components/inline/Strong/index.tsx index de3017d2..58798031 100644 --- a/src/components/inline/Strong/index.js +++ b/src/components/inline/Strong/index.tsx @@ -1,10 +1,12 @@ -import { css } from '@emotion/core'; -import PropTypes from 'prop-types'; -import React from 'react'; +import { css } from '@emotion/react'; +import React, { FunctionComponent } from 'react'; +import { NautilusComponentProps } from '../../types'; import { useTheme } from '../../../themes'; -const Strong = (props) => { +interface Props extends NautilusComponentProps {} + +const Strong: FunctionComponent = (props: Props) => { const { children, unstyled, ...otherProps } = props; const theme = useTheme(); @@ -27,18 +29,4 @@ const Strong = (props) => { ); }; -Strong.defaultProps = { - children: undefined, - unstyled: false, -}; - -Strong.propTypes = { - /** @ignore */ - children: PropTypes.node, - /* @ignore Don't output any CSS styles. */ - unstyled: PropTypes.bool, -}; - -export const { defaultProps, propTypes } = Strong; - export default Strong; diff --git a/src/components/types/index.ts b/src/components/types/index.ts new file mode 100644 index 00000000..b9312312 --- /dev/null +++ b/src/components/types/index.ts @@ -0,0 +1,6 @@ +export interface NautilusComponentProps { + /** @ignore */ + children?: React.ReactNode; + /** Don't output any CSS styles. */ + unstyled?: Boolean; +} diff --git a/src/components/ui/Button/index.js b/src/components/ui/Button/index.js index 2965a78a..58d45dbc 100644 --- a/src/components/ui/Button/index.js +++ b/src/components/ui/Button/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import invariant from 'invariant'; import PropTypes from 'prop-types'; import React from 'react'; diff --git a/src/components/ui/Heading/index.js b/src/components/ui/Heading/index.js index 740e40d9..41f1c853 100644 --- a/src/components/ui/Heading/index.js +++ b/src/components/ui/Heading/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; import invariant from 'invariant'; diff --git a/src/components/ui/Icon/index.js b/src/components/ui/Icon/index.js index b560e31a..9b0d63b1 100644 --- a/src/components/ui/Icon/index.js +++ b/src/components/ui/Icon/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import Feather from 'feather-icons'; import PropTypes from 'prop-types'; import React, { useState, useMemo } from 'react'; diff --git a/src/components/ui/Link/index.js b/src/components/ui/Link/index.js index 625536f9..43b53a7a 100644 --- a/src/components/ui/Link/index.js +++ b/src/components/ui/Link/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React, { useContext } from 'react'; diff --git a/src/components/ui/List/Item.js b/src/components/ui/List/Item.js index 82e52c42..f7e23522 100644 --- a/src/components/ui/List/Item.js +++ b/src/components/ui/List/Item.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; diff --git a/src/components/ui/List/index.js b/src/components/ui/List/index.js index 08bc9846..efa7357d 100644 --- a/src/components/ui/List/index.js +++ b/src/components/ui/List/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import React, { Children, cloneElement, useMemo, useState } from 'react'; diff --git a/src/components/ui/PageTitle/index.js b/src/components/ui/PageTitle/index.js index 8e5b64da..b7ce797a 100644 --- a/src/components/ui/PageTitle/index.js +++ b/src/components/ui/PageTitle/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; diff --git a/src/components/ui/Paragraph/index.js b/src/components/ui/Paragraph/index.js index fef197f5..d0cbe82e 100644 --- a/src/components/ui/Paragraph/index.js +++ b/src/components/ui/Paragraph/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import classnames from 'classnames'; import invariant from 'invariant'; import PropTypes from 'prop-types'; diff --git a/src/components/ui/SkipLink/index.js b/src/components/ui/SkipLink/index.js index fb00ef95..49d5643d 100644 --- a/src/components/ui/SkipLink/index.js +++ b/src/components/ui/SkipLink/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; diff --git a/src/components/ui/Tabs/Tab.js b/src/components/ui/Tabs/Tab.js index bf9c17ba..ddefc5d2 100644 --- a/src/components/ui/Tabs/Tab.js +++ b/src/components/ui/Tabs/Tab.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React, { forwardRef } from 'react'; diff --git a/src/components/ui/Tabs/index.js b/src/components/ui/Tabs/index.js index 84325738..18bf7a41 100644 --- a/src/components/ui/Tabs/index.js +++ b/src/components/ui/Tabs/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React, { Children, diff --git a/src/components/ui/Tags/Tag.js b/src/components/ui/Tags/Tag.js index 7349c8ae..baced38a 100644 --- a/src/components/ui/Tags/Tag.js +++ b/src/components/ui/Tags/Tag.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React, { useState } from 'react'; diff --git a/src/components/ui/Tags/index.js b/src/components/ui/Tags/index.js index 0cc51209..cef79617 100644 --- a/src/components/ui/Tags/index.js +++ b/src/components/ui/Tags/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React, { Children, cloneElement, Fragment, useMemo, useState } from 'react'; import shortid from 'shortid'; diff --git a/src/components/ui/TextField/index.js b/src/components/ui/TextField/index.js index 8e0ef742..fc4a50e7 100644 --- a/src/components/ui/TextField/index.js +++ b/src/components/ui/TextField/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React, { cloneElement, forwardRef, useCallback, useMemo, useRef, useState } from 'react'; import shortid from 'shortid'; diff --git a/src/components/ui/VisuallyHidden/styles.js b/src/components/ui/VisuallyHidden/styles.js index 2b98bdfc..29f1d215 100644 --- a/src/components/ui/VisuallyHidden/styles.js +++ b/src/components/ui/VisuallyHidden/styles.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; export const VisuallyHiddenStyles = css` border: 0; diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 81cdc841..00000000 --- a/src/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import { Nautilus } from './components'; -import * as themes from './themes'; - -export * from './components'; -export * from './styles'; -export { default as useTheme } from './themes'; -export { themes }; - -export default Nautilus; diff --git a/src/index.test.js b/src/index.test.ts similarity index 97% rename from src/index.test.js rename to src/index.test.ts index 1599478f..85e8c263 100644 --- a/src/index.test.js +++ b/src/index.test.ts @@ -71,7 +71,7 @@ describe('Package entrypoint', () => { it(`exports theme in ./themes/${themeName}`, () => { // eslint-disable-next-line global-require, import/no-dynamic-require - const theme = require(`./themes/${themeName}/index.js`); + const theme = require(`./themes/${themeName}/index.ts`); expect(NautilusExports.themes[themeName]).toBeDefined(); expect(NautilusExports.themes[themeName]).toEqual(theme.default); diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 00000000..f7ec0e87 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,7 @@ +import Nautilus from './components/hoc/Nautilus'; + +export * from './components'; +export * from './styles'; +export { themes, useTheme } from './themes'; + +export default Nautilus; diff --git a/src/styles/mixins.js b/src/styles/mixins.js index 2d2de467..b0f45b06 100644 --- a/src/styles/mixins.js +++ b/src/styles/mixins.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { toUnits } from './toUnits'; import { body } from './typeTokens'; diff --git a/src/themes/index.js b/src/themes/index.js deleted file mode 100644 index 43d0d95f..00000000 --- a/src/themes/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { ThemeContext } from '@emotion/core'; -import { useContext } from 'react'; - -export const useTheme = () => useContext(ThemeContext); - -export * from './propTypes'; - -export { default as nautilus } from './nautilus'; - -export default useTheme; diff --git a/src/themes/index.ts b/src/themes/index.ts new file mode 100644 index 00000000..82375b3c --- /dev/null +++ b/src/themes/index.ts @@ -0,0 +1,11 @@ +import { ThemeContext, Theme, useTheme } from '@emotion/react'; +import { createContext, useContext } from 'react'; + +import { default as nautilus } from './nautilus'; +import { default as styleguide } from './styleguide'; +import './types'; + +const nautilusDefaultTheme = nautilus; + +export const themes = { nautilus, styleguide }; +export { nautilusDefaultTheme, useTheme }; diff --git a/src/themes/nautilus/index.js b/src/themes/nautilus/index.ts similarity index 100% rename from src/themes/nautilus/index.js rename to src/themes/nautilus/index.ts diff --git a/src/themes/propTypes.js b/src/themes/propTypes.js deleted file mode 100644 index a852daa8..00000000 --- a/src/themes/propTypes.js +++ /dev/null @@ -1,114 +0,0 @@ -import PropTypes from 'prop-types'; - -export const themePropTypes = PropTypes.shape({ - components: PropTypes.shape({ - TextInput: PropTypes.shape({ - /** Message used for TextInput fields that are marked as `optional`. */ - optionalMessage: PropTypes.string, - }), - }), - colors: PropTypes.shape({ - accent: PropTypes.shape({ - primary: PropTypes.string, - primaryDark: PropTypes.string, - primaryLight: PropTypes.string, - }), - neutral: PropTypes.shape({ - white: PropTypes.string, - grey0: PropTypes.string, - grey200: PropTypes.string, - grey400: PropTypes.string, - grey600: PropTypes.string, - grey800: PropTypes.string, - black: PropTypes.string, - }), - intent: PropTypes.shape({ - success: PropTypes.string, - successDark: PropTypes.string, - successLight: PropTypes.string, - warning: PropTypes.string, - warningDark: PropTypes.string, - warningLight: PropTypes.string, - danger: PropTypes.string, - dangerDark: PropTypes.string, - dangerLight: PropTypes.string, - }), - - text: PropTypes.shape({ - default: PropTypes.string, - dark: PropTypes.string, - light: PropTypes.string, - inverse: PropTypes.string, - inverseLight: PropTypes.string, - inverseDark: PropTypes.string, - }), - - buttons: PropTypes.shape({ - neutral: PropTypes.string, - default: PropTypes.string, - defaultDark: PropTypes.string, - defaultLight: PropTypes.string, - disabled: PropTypes.string, - disabledDark: PropTypes.string, - disabledLight: PropTypes.string, - }), - }), - - typography: PropTypes.shape({ - fonts: PropTypes.shape({ - body: PropTypes.string, - heading: PropTypes.string, - interfaceUI: PropTypes.string, - }), - - fontWeights: PropTypes.shape({ - body: PropTypes.number, - bodyBold: PropTypes.number, - heading: PropTypes.number, - pageTitle: PropTypes.number, - subtitle: PropTypes.number, - interfaceUI: PropTypes.number, - interfaceUIBold: PropTypes.number, - }), - - baseSizes: PropTypes.shape({ - desktop: PropTypes.number, - mobile: PropTypes.number, - }), - - scaleModifiers: PropTypes.shape({ - desktop: PropTypes.number, - mobile: PropTypes.number, - }), - - lineHeights: PropTypes.shape({ - heading: PropTypes.number, - body: PropTypes.number, - interfaceUI: PropTypes.number, - }), - }), - - spacing: PropTypes.shape({ - margin: PropTypes.shape({ - none: PropTypes.number, - xxSmall: PropTypes.number, - xSmall: PropTypes.number, - s: PropTypes.number, - m: PropTypes.number, - l: PropTypes.number, - xLarge: PropTypes.number, - xxLarge: PropTypes.number, - }), - - padding: PropTypes.shape({ - none: PropTypes.number, - xxSmall: PropTypes.number, - xSmall: PropTypes.number, - s: PropTypes.number, - m: PropTypes.number, - l: PropTypes.number, - xLarge: PropTypes.number, - xxLarge: PropTypes.number, - }), - }), -}); diff --git a/src/themes/types.ts b/src/themes/types.ts new file mode 100644 index 00000000..0efe8e41 --- /dev/null +++ b/src/themes/types.ts @@ -0,0 +1,402 @@ +type CSSBackground = any; +type CSSColor = string; +type CSSMargin = string; +type CSSNumber = any; + +declare module '@emotion/react' { + export interface Theme { + // All themeable colour variables go here. + colors: { + accent: { + primary: CSSColor; + primaryDark: CSSColor; + primaryLight: CSSColor; + secondary: CSSColor; + secondaryDark: CSSColor; + secondaryLight: CSSColor; + }; + + neutral: { + white: CSSColor; + grey0: CSSColor; + grey200: CSSColor; + grey400: CSSColor; + grey600: CSSColor; + grey800: CSSColor; + black: CSSColor; + }; + + intent: { + success: CSSColor; + successDark: CSSColor; + successLight: CSSColor; + warning: CSSColor; + warningDark: CSSColor; + warningLight: CSSColor; + danger: CSSColor; + dangerDark: CSSColor; + dangerLight: CSSColor; + neutral: CSSColor; + neutralDark: CSSColor; + neutralLight: CSSColor; + inProgress: CSSColor; + inProgressDark: CSSColor; + inProgressLight: CSSColor; + new: CSSColor; + newDark: CSSColor; + newLight: CSSColor; + }; + + state: { + interactive: CSSColor; + interactiveText: CSSColor; + hover: CSSColor; + hoverText: CSSColor; + focusOutline: CSSColor; + focusText: CSSColor; + disabled: CSSColor; + disabledDark: CSSColor; + disabledLight: CSSColor; + errorOutline: CSSColor; + errorText: CSSColor; + }; + + text: { + default: CSSColor; + dark: CSSColor; + light: CSSColor; + inverse: CSSColor; + inverseLight: CSSColor; + inverseDark: CSSColor; + emphasis: CSSColor; + emphasisBackground: CSSBackground; + strong: CSSColor; + strongBackground: CSSColor; + }; + + buttons: { + neutral: CSSColor; + default: CSSColor; + defaultDark: CSSColor; + defaultLight: CSSColor; + }; + }; + + // Component-specific text and values. + components: { + TextField: { + optionalMessage: String; + }; + + Icon: { + sizes: { + xSmall: { + borderWidth: CSSNumber; + marginSize: CSSMargin; + padding: CSSNumber; + size: CSSNumber; + strokeWidth: CSSNumber; + }; + small: { + borderWidth: CSSNumber; + marginSize: CSSMargin; + padding: CSSNumber; + size: CSSNumber; + strokeWidth: CSSNumber; + }; + medium: { + borderWidth: CSSNumber; + marginSize: CSSMargin; + padding: CSSNumber; + size: CSSNumber; + strokeWidth: CSSNumber; + }; + large: { + borderWidth: CSSNumber; + marginSize: CSSMargin; + padding: CSSNumber; + size: CSSNumber; + strokeWidth: CSSNumber; + }; + xLarge: { + borderWidth: CSSNumber; + marginSize: CSSMargin; + padding: CSSNumber; + size: CSSNumber; + strokeWidth: CSSNumber; + }; + }; + + // TODO: implement these! + Tag: { + capitalization: String; // 'uppercase' | 'lowercase' | 'sentence' | 'title'; + colorPosition: String; // 'background' | 'border'; + borderRadius: CSSNumber; + padding: String; // 'toUnits(theme.spacing.padding.xSmall) toUnits(theme.spacing.padding.small)'; + }; + }; + }; + + // All themeable typography variables go here. + typography: { + fonts: { + body: String; + heading: String; + interfaceUI: String; + }; + + fontWeights: { + body: CSSNumber; + bodyBold: CSSNumber; + heading: CSSNumber; + pageTitle: CSSNumber; + subtitle: CSSNumber; + interfaceUI: CSSNumber; + interfaceUIBold: CSSNumber; + }; + + baseSizes: { + desktop: CSSNumber; + mobile: CSSNumber; + }; + + scaleModifiers: { + desktop: CSSNumber; + mobile: CSSNumber; + }; + + lineHeights: { + heading: CSSNumber; + body: CSSNumber; + interfaceUI: CSSNumber; + }; + }; + + // All themeable spacing variables go here. + // 1rem = 10px. + spacing: { + margin: { + none: CSSNumber; + xxSmall: CSSNumber; + xSmall: CSSNumber; + small: CSSNumber; + medium: CSSNumber; + large: CSSNumber; + xLarge: CSSNumber; + xxLarge: CSSNumber; + }; + + padding: { + none: CSSNumber; + xxSmall: CSSNumber; + xSmall: CSSNumber; + small: CSSNumber; + medium: CSSNumber; + large: CSSNumber; + xLarge: CSSNumber; + xxLarge: CSSNumber; + }; + }; + } +} + +// declare global { +// namespace Emotion { +// export interface Theme { +// // All themeable colour variables go here. +// colors: { +// accent: { +// primary: CSSColor; +// primaryDark: CSSColor; +// primaryLight: CSSColor; +// secondary: CSSColor; +// secondaryDark: CSSColor; +// secondaryLight: CSSColor; +// }; + +// neutral: { +// white: CSSColor; +// grey0: CSSColor; +// grey200: CSSColor; +// grey400: CSSColor; +// grey600: CSSColor; +// grey800: CSSColor; +// black: CSSColor; +// }; + +// intent: { +// success: CSSColor; +// successDark: CSSColor; +// successLight: CSSColor; +// warning: CSSColor; +// warningDark: CSSColor; +// warningLight: CSSColor; +// danger: CSSColor; +// dangerDark: CSSColor; +// dangerLight: CSSColor; +// neutral: CSSColor; +// neutralDark: CSSColor; +// neutralLight: CSSColor; +// inProgress: CSSColor; +// inProgressDark: CSSColor; +// inProgressLight: CSSColor; +// new: CSSColor; +// newDark: CSSColor; +// newLight: CSSColor; +// }; + +// state: { +// interactive: CSSColor; +// interactiveText: CSSColor; +// hover: CSSColor; +// hoverText: CSSColor; +// focusOutline: CSSColor; +// focusText: CSSColor; +// disabled: CSSColor; +// disabledDark: CSSColor; +// disabledLight: CSSColor; +// errorOutline: CSSColor; +// errorText: CSSColor; +// }; + +// text: { +// default: CSSColor; +// dark: CSSColor; +// light: CSSColor; +// inverse: CSSColor; +// inverseLight: CSSColor; +// inverseDark: CSSColor; +// emphasis: CSSColor; +// emphasisBackground: String; +// strong: CSSColor; +// strongBackground: CSSColor; +// }; + +// buttons: { +// neutral: CSSColor; +// default: CSSColor; +// defaultDark: CSSColor; +// defaultLight: CSSColor; +// }; +// }; + +// // Component-specific text and values. +// components: { +// TextField: { +// optionalMessage: String; +// }; + +// Icon: { +// sizes: { +// xSmall: { +// borderWidth: CSSNumber; +// marginSize: CSSMargin; +// padding: CSSNumber; +// size: CSSNumber; +// strokeWidth: CSSNumber; +// }; +// small: { +// borderWidth: CSSNumber; +// marginSize: CSSMargin; +// padding: CSSNumber; +// size: CSSNumber; +// strokeWidth: CSSNumber; +// }; +// medium: { +// borderWidth: CSSNumber; +// marginSize: CSSMargin; +// padding: CSSNumber; +// size: CSSNumber; +// strokeWidth: CSSNumber; +// }; +// large: { +// borderWidth: CSSNumber; +// marginSize: CSSMargin; +// padding: CSSNumber; +// size: CSSNumber; +// strokeWidth: CSSNumber; +// }; +// xLarge: { +// borderWidth: CSSNumber; +// marginSize: CSSMargin; +// padding: CSSNumber; +// size: CSSNumber; +// strokeWidth: CSSNumber; +// }; +// }; + +// // TODO: implement these! +// Tag: { +// capitalization: 'uppercase' | 'lowercase' | 'sentence' | 'title'; +// colorPosition: 'background' | 'border'; +// borderRadius: CSSNumber; +// padding: String; // 'toUnits(theme.spacing.padding.xSmall) toUnits(theme.spacing.padding.small)'; +// }; +// }; +// }; + +// // All themeable typography variables go here. +// typography: { +// fonts: { +// body: String; +// heading: String; +// interfaceUI: String; +// }; + +// fontWeights: { +// body: CSSNumber; +// bodyBold: CSSNumber; +// heading: CSSNumber; +// pageTitle: CSSNumber; +// subtitle: CSSNumber; +// interfaceUI: CSSNumber; +// interfaceUIBold: CSSNumber; +// }; + +// baseSizes: { +// desktop: CSSNumber; +// mobile: CSSNumber; +// }; + +// scaleModifiers: { +// desktop: CSSNumber; +// mobile: CSSNumber; +// }; + +// lineHeights: { +// heading: CSSNumber; +// body: CSSNumber; +// interfaceUI: CSSNumber; +// }; +// }; + +// // All themeable spacing variables go here. +// // 1rem = 10px. +// spacing: { +// margin: { +// none: CSSNumber; +// xxSmall: CSSNumber; +// xSmall: CSSNumber; +// small: CSSNumber; +// medium: CSSNumber; +// large: CSSNumber; +// xLarge: CSSNumber; +// xxLarge: CSSNumber; +// }; + +// padding: { +// none: CSSNumber; +// xxSmall: CSSNumber; +// xSmall: CSSNumber; +// small: CSSNumber; +// medium: CSSNumber; +// large: CSSNumber; +// xLarge: CSSNumber; +// xxLarge: CSSNumber; +// }; +// }; +// } +// } +// } + +export {}; diff --git a/styleguide.config.js b/styleguide.config.js index 416cd35b..9ba2a429 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -1,10 +1,13 @@ const path = require('path'); +// eslint-disable-next-line import/no-extraneous-dependencies +const typeScriptDocGen = require('react-docgen-typescript'); + module.exports = { assetsDir: 'styleguide/assets', - ignore: ['src/components/index.js', '**/*.test.{js,jsx,ts,tsx}'], + ignore: ['src/components/index.ts', '**/*.test.{js,jsx,ts,tsx}'], moduleAliases: { - '@octopusthink/nautilus': path.resolve(__dirname, 'src/index'), + '@octopusthink/nautilus': path.resolve(__dirname, 'src/index.ts'), }, title: 'Nautilus Design System', skipComponentsWithoutExample: true, @@ -37,6 +40,7 @@ module.exports = { }, styleguideDir: 'dist/styleguide', pagePerSection: true, + propsParser: typeScriptDocGen.withCustomConfig('./tsconfig.json', [{}]).parse, sections: [ { name: 'Introduction', diff --git a/styleguide/components/Code/index.js b/styleguide/components/Code/index.js index 40adaa15..2f556ecd 100644 --- a/styleguide/components/Code/index.js +++ b/styleguide/components/Code/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import PropTypes from 'prop-types'; @@ -22,8 +22,5 @@ export function Code({ children }) { ); } -Code.propTypes = { - children: PropTypes.node.isRequired, -}; export default Code; diff --git a/styleguide/components/ComponentsList/index.js b/styleguide/components/ComponentsList/index.js index 68bf893a..e6d8348d 100644 --- a/styleguide/components/ComponentsList/index.js +++ b/styleguide/components/ComponentsList/index.js @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; import Link from 'rsg-components/Link'; diff --git a/styleguide/components/Footer/index.js b/styleguide/components/Footer/index.js index 48114580..77d7523d 100644 --- a/styleguide/components/Footer/index.js +++ b/styleguide/components/Footer/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; diff --git a/styleguide/components/Header/index.js b/styleguide/components/Header/index.js index 759f9653..04853fef 100644 --- a/styleguide/components/Header/index.js +++ b/styleguide/components/Header/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; import Version from 'rsg-components/Version'; diff --git a/styleguide/components/Playground/index.js b/styleguide/components/Playground/index.js index 032d6947..17a58a89 100644 --- a/styleguide/components/Playground/index.js +++ b/styleguide/components/Playground/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import PropTypes from 'prop-types'; diff --git a/styleguide/components/SectionHeading/index.js b/styleguide/components/SectionHeading/index.js index 0b893f72..d2a78dd5 100644 --- a/styleguide/components/SectionHeading/index.js +++ b/styleguide/components/SectionHeading/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import PropTypes from 'prop-types'; import Heading from 'rsg-components/Heading'; diff --git a/styleguide/components/StyleGuide/index.js b/styleguide/components/StyleGuide/index.js index 11b9e1c7..f1915481 100644 --- a/styleguide/components/StyleGuide/index.js +++ b/styleguide/components/StyleGuide/index.js @@ -2,7 +2,7 @@ // https://github.com/styleguidist/react-styleguidist/blob/0f461ab8f5070d5e91e8911bc2b22d805c07fb98/src/client/rsg-components/StyleGuide/StyleGuide.js, // but adds a `` wrapper so we can use our own components as // the output components of React Styleguidist's Markdown. -import { Global, css } from '@emotion/core'; +import { Global, css } from '@emotion/react'; import PropTypes from 'prop-types'; import React, { useEffect, useRef, useState } from 'react'; import Markdown from 'rsg-components/Markdown'; diff --git a/styleguide/components/TabButton/index.js b/styleguide/components/TabButton/index.js index e330eb41..f8e32fc5 100644 --- a/styleguide/components/TabButton/index.js +++ b/styleguide/components/TabButton/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import PropTypes from 'prop-types'; diff --git a/styleguide/components/TableOfContents/index.js b/styleguide/components/TableOfContents/index.js index d0c879b2..2bb2fd77 100644 --- a/styleguide/components/TableOfContents/index.js +++ b/styleguide/components/TableOfContents/index.js @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..be1e2d2c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "jsx": "react", + // Target latest version of ECMAScript. + "target": "esnext", + // Search under node_modules for non-relative imports. + "moduleResolution": "node", + // Process & infer types from .js files. + "allowJs": true, + // Don't emit; allow Babel to transform files. + "noEmit": true, + // Enable strictest settings like strictNullChecks & noImplicitAny. + "strict": true, + // Disallow features that require cross-file information for emit. + "isolatedModules": true, + // Import non-ES modules as default imports. + "esModuleInterop": true + }, + "include": [ + "src", + "utils" + ] +} diff --git a/utils/jest.setup.js b/utils/jest.setup.js index 88c21469..7c6ea8aa 100644 --- a/utils/jest.setup.js +++ b/utils/jest.setup.js @@ -6,7 +6,7 @@ import 'jest-axe/extend-expect'; // eslint-disable-next-line import/no-extraneous-dependencies import 'jest-dom/extend-expect'; -global.window.matchMedia = jest.fn().mockImplementation((query) => { +window.matchMedia = jest.fn().mockImplementation((query) => { return { matches: false, media: query, diff --git a/utils/testing.js b/utils/testing.js index 19642a13..dde656cb 100644 --- a/utils/testing.js +++ b/utils/testing.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import Nautilus from '../src/components/hoc/Nautilus'; -import { nautilus as nautilusDefaultTheme, themePropTypes } from '../src/themes'; +import { nautilusDefaultTheme, themePropTypes } from '../src/themes'; // Wrap `react-testing-library`'s `render` function with our providers. const NautilusProviders = ({ children, theme }) => { diff --git a/webpack.config.js b/webpack.config.js index 3962b542..d382b8f9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,13 +5,13 @@ const PeerDepsExternalsPlugin = require('peer-deps-externals-webpack-plugin'); const webpack = require('webpack'); const config = { - entry: ['./src/index.js'], + entry: ['./src/index.ts'], mode: process.env.NODE_ENV, module: { rules: [ // Transform ES6 with Babel { - test: /\.(js|jsx|mjs)$/, + test: /\.(ts|tsx|js|jsx|mjs)$/, use: [ { loader: require.resolve('babel-loader'), @@ -41,7 +41,7 @@ const config = { }), ], resolve: { - extensions: ['.mjs', '.jsx', '.js', '.json'], + extensions: ['tsx', 'ts', '.mjs', '.jsx', '.js', '.json'], }, };