diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..c2f6421 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +10.22.1 diff --git a/jest.config.js b/jest.config.js index e44509d..0c4b51c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,6 +5,7 @@ module.exports = { }, moduleNameMapper: { "\\.(css)$": "identity-obj-proxy", + "\\.svg$": "/__mocks__/fileMock.js", }, setupFilesAfterEnv: [ "../node_modules/@testing-library/jest-dom/dist/index.js", diff --git a/package-lock.json b/package-lock.json index a9c08ca..ab09a5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1105,7 +1105,6 @@ "version": "7.11.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -2822,6 +2821,11 @@ "pretty-format": "^25.2.1" } }, + "@types/js-cookie": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.6.tgz", + "integrity": "sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==" + }, "@types/json-schema": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", @@ -3218,6 +3222,11 @@ "@xtuc/long": "4.2.2" } }, + "@xobotyi/scrollbar-width": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz", + "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==" + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -3965,6 +3974,11 @@ } } }, + "bowser": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz", + "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4699,6 +4713,14 @@ "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", "dev": true }, + "copy-to-clipboard": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", + "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "requires": { + "toggle-selection": "^1.0.6" + } + }, "core-js": { "version": "2.6.11", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz", @@ -4902,6 +4924,15 @@ } } }, + "css-in-js-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", + "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==", + "requires": { + "hyphenate-style-name": "^1.0.2", + "isobject": "^3.0.1" + } + }, "css-loader": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz", @@ -4948,6 +4979,22 @@ } } }, + "css-tree": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.1.tgz", + "integrity": "sha512-NVN42M2fjszcUNpDbdkvutgQSlFYsr1z7kqeuCagHnNLBfYor6uP1WL1KrkmdYZ5Y1vTBCIOI/C/+8T98fJ71w==", + "requires": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -5416,6 +5463,14 @@ "is-arrayish": "^0.2.1" } }, + "error-stack-parser": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz", + "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==", + "requires": { + "stackframe": "^1.1.1" + } + }, "es-abstract": { "version": "1.18.0-next.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", @@ -6131,8 +6186,7 @@ "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "fast-diff": { "version": "1.2.0", @@ -6152,6 +6206,16 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "fast-shallow-equal": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz", + "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==" + }, + "fastest-stable-stringify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-1.0.1.tgz", + "integrity": "sha1-kSLUBtTJ2YvqZEpraFPVh0uHsCg=" + }, "faye-websocket": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", @@ -6194,6 +6258,40 @@ "flat-cache": "^2.0.1" } }, + "file-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz", + "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -7032,6 +7130,11 @@ "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==", "dev": true }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -7142,6 +7245,15 @@ "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true }, + "inline-style-prefixer": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz", + "integrity": "sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==", + "requires": { + "bowser": "^1.7.3", + "css-in-js-utils": "^2.0.0" + } + }, "inquirer": { "version": "7.3.3", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz", @@ -7567,8 +7679,7 @@ "isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, "isstream": { "version": "0.1.2", @@ -10707,6 +10818,11 @@ } } }, + "js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11051,6 +11167,11 @@ "safe-buffer": "^5.1.2" } }, + "mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -11294,6 +11415,28 @@ "dev": true, "optional": true }, + "nano-css": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.0.tgz", + "integrity": "sha512-uM/9NGK9/E9/sTpbIZ/bQ9xOLOIHZwrrb/CRlbDHBU/GFS7Gshl24v/WJhwsVViWkpOXUmiZ66XO7fSB4Wd92Q==", + "requires": { + "css-tree": "^1.0.0-alpha.28", + "csstype": "^2.5.5", + "fastest-stable-stringify": "^1.0.1", + "inline-style-prefixer": "^4.0.0", + "rtl-css-js": "^1.9.0", + "sourcemap-codec": "^1.4.1", + "stacktrace-js": "^2.0.0", + "stylis": "3.5.0" + }, + "dependencies": { + "csstype": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", + "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + } + } + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -12498,6 +12641,39 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-universal-interface": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz", + "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==" + }, + "react-use": { + "version": "15.3.4", + "resolved": "https://registry.npmjs.org/react-use/-/react-use-15.3.4.tgz", + "integrity": "sha512-cHq1dELW6122oi1+xX7lwNyE/ugZs5L902BuO8eFJCfn2api1KeuPVG1M/GJouVARoUf54S2dYFMKo5nQXdTag==", + "requires": { + "@types/js-cookie": "2.2.6", + "@xobotyi/scrollbar-width": "1.9.5", + "copy-to-clipboard": "^3.2.0", + "fast-deep-equal": "^3.1.3", + "fast-shallow-equal": "^1.0.0", + "js-cookie": "^2.2.1", + "nano-css": "^5.2.1", + "react-universal-interface": "^0.6.2", + "resize-observer-polyfill": "^1.5.1", + "screenfull": "^5.0.0", + "set-harmonic-interval": "^1.0.1", + "throttle-debounce": "^2.1.0", + "ts-easing": "^0.2.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -12581,8 +12757,7 @@ "regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", - "dev": true + "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==" }, "regenerator-transform": { "version": "0.14.5", @@ -12785,6 +12960,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.17.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", @@ -12893,6 +13073,14 @@ "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==", "dev": true }, + "rtl-css-js": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.0.tgz", + "integrity": "sha512-Dl5xDTeN3e7scU1cWX8c9b6/Nqz3u/HgR4gePc1kWXYiQWVQbKCEyK6+Hxve9LbcJ5EieHy1J9nJCN3grTtGwg==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -12982,6 +13170,11 @@ "ajv-keywords": "^3.1.0" } }, + "screenfull": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.0.2.tgz", + "integrity": "sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ==" + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -13127,6 +13320,11 @@ "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true }, + "set-harmonic-interval": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz", + "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==" + }, "set-value": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", @@ -13454,6 +13652,11 @@ "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", "dev": true }, + "sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" + }, "spawn-command": { "version": "0.0.2-1", "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz", @@ -13573,12 +13776,51 @@ "figgy-pudding": "^3.5.1" } }, + "stack-generator": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz", + "integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==", + "requires": { + "stackframe": "^1.1.1" + } + }, "stack-utils": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz", "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==", "dev": true }, + "stackframe": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz", + "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==" + }, + "stacktrace-gps": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz", + "integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==", + "requires": { + "source-map": "0.5.6", + "stackframe": "^1.1.1" + }, + "dependencies": { + "source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=" + } + } + }, + "stacktrace-js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz", + "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==", + "requires": { + "error-stack-parser": "^2.0.6", + "stack-generator": "^2.0.5", + "stacktrace-gps": "^3.0.4" + } + }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -13826,6 +14068,11 @@ } } }, + "stylis": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.0.tgz", + "integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -13976,6 +14223,11 @@ "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==", "dev": true }, + "throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==" + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -14076,6 +14328,11 @@ "repeat-string": "^1.6.1" } }, + "toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", @@ -14113,6 +14370,11 @@ "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==", "dev": true }, + "ts-easing": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz", + "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==" + }, "tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", diff --git a/package.json b/package.json index 2bd7689..3299a29 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "eslint-config-prettier": "^6.7.0", "eslint-config-react-important-stuff": "^2.0.0", "eslint-plugin-prettier": "^3.1.1", + "file-loader": "^6.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^25.2.7", "jest-cli": "^25.2.7", @@ -47,6 +48,7 @@ "@reach/router": "^1.3.4", "express": "^4.17.1", "react": "^16.12.0", - "react-dom": "^16.12.0" + "react-dom": "^16.12.0", + "react-use": "^15.3.4" } } diff --git a/src/__mocks__/@topcoder/micro-frontends-navbar-app.js b/src/__mocks__/@topcoder/micro-frontends-navbar-app.js new file mode 100644 index 0000000..7d1024f --- /dev/null +++ b/src/__mocks__/@topcoder/micro-frontends-navbar-app.js @@ -0,0 +1,9 @@ +module.exports = { + login: () => {}, + logout: () => {}, + setAppMenu: () => {}, + getAuthUserTokens: () => new Promise(() => {}), + getAuthUserProfile: () => new Promise(() => {}), + disableSidebarForRoute: () => {}, + enableSidebarForRoute: () => {}, +}; diff --git a/src/__mocks__/fileMock.js b/src/__mocks__/fileMock.js new file mode 100644 index 0000000..38b08af --- /dev/null +++ b/src/__mocks__/fileMock.js @@ -0,0 +1 @@ +module.exports = ""; diff --git a/src/assets/images/home-green.svg b/src/assets/images/home-green.svg new file mode 100644 index 0000000..075d434 --- /dev/null +++ b/src/assets/images/home-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/home.svg b/src/assets/images/home.svg new file mode 100644 index 0000000..5674242 --- /dev/null +++ b/src/assets/images/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/react-green.svg b/src/assets/images/react-green.svg new file mode 100644 index 0000000..afd5d41 --- /dev/null +++ b/src/assets/images/react-green.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/images/react-grey.svg b/src/assets/images/react-grey.svg new file mode 100644 index 0000000..119eb46 --- /dev/null +++ b/src/assets/images/react-grey.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/AuthDemo/index.js b/src/components/AuthDemo/index.js new file mode 100644 index 0000000..bf988a0 --- /dev/null +++ b/src/components/AuthDemo/index.js @@ -0,0 +1,63 @@ +import React from "react"; +import { useAsync } from "react-use"; +import { + login, + logout, + getAuthUserTokens, + getAuthUserProfile, +} from "@topcoder/micro-frontends-navbar-app"; + +const Profile = ({ authUserProfile }) => ( + <> +

User Profile

+ {authUserProfile.loading ? ( +
User Profile Loading...
+ ) : authUserProfile.error ? ( +
Profile Loading Error: {authUserProfile.error.message}
+ ) : ( + + )} + +); + +const AuthDemo = () => { + // see how the `useAsync` hook works here https://github.com/streamich/react-use/blob/master/docs/useAsync.md + const authUserTokens = useAsync(getAuthUserTokens); + const authUserProfile = useAsync(getAuthUserProfile); + + return ( + <> +

Authentication

+ {authUserTokens.loading ? ( +
Authentication...
+ ) : authUserTokens.error ? ( +
Authentication Error: {authUserTokens.error.message}
+ ) : ( +
+ {authUserTokens.value.tokenV3 ? ( +
+ User is logged-in + +
+ ) : ( + <> + User is logged-out + + )} +
+ )} + + ); +}; + +export default AuthDemo; diff --git a/src/components/NoSidebarDemo/index.js b/src/components/NoSidebarDemo/index.js new file mode 100644 index 0000000..dcbe38f --- /dev/null +++ b/src/components/NoSidebarDemo/index.js @@ -0,0 +1,38 @@ +/** + * This component demonstrates how we can disable sidebar for some subroutes. + * + * For example this component disables sidebar for routes "/micro-frontends-react-route/no-sidebar/*". + */ +import React, { useLayoutEffect } from "react"; +import { + disableSidebarForRoute, + enableSidebarForRoute, +} from "@topcoder/micro-frontends-navbar-app"; + +const COMPONENT_ROUTE = "/micro-frontends-react-route/no-sidebar/*"; + +const NoSidebarDemo = () => { + // use "useLayoutEffect" to remove the sidebar as early as possible + // without waiting the component to be rendered + useLayoutEffect(() => { + disableSidebarForRoute(COMPONENT_ROUTE); + }, []); + + return ( + <> +

Sidebar

+
Enable/disable sidebar for routes that match:
+ 
{COMPONENT_ROUTE}
+
+ + +
+ + ); +}; + +export default NoSidebarDemo; diff --git a/src/constants/appMenu.js b/src/constants/appMenu.js new file mode 100644 index 0000000..216f9a1 --- /dev/null +++ b/src/constants/appMenu.js @@ -0,0 +1,30 @@ +/** + * React app side menu structure + */ +import reactIcon from "../assets/images/react-grey.svg"; +import reactActiveIcon from "../assets/images/react-green.svg"; +import homeIcon from "../assets/images/home.svg"; +import homeActiveIcon from "../assets/images/home-green.svg"; + +const appMenu = [ + { + title: "React App", + path: "/micro-frontends-react-route", + icon: reactIcon, + activeIcon: reactActiveIcon, + }, + { + title: "Auth Demo", + path: "/micro-frontends-react-route/auth", + icon: homeIcon, + activeIcon: homeActiveIcon, + }, + { + title: "No Sidebar Demo", + path: "/micro-frontends-react-route/no-sidebar", + icon: homeIcon, + activeIcon: homeActiveIcon, + }, +]; + +export default appMenu; diff --git a/src/root.component.js b/src/root.component.js index 4038b0b..313381c 100644 --- a/src/root.component.js +++ b/src/root.component.js @@ -1,7 +1,16 @@ -import React from "react"; -import { Link } from "@reach/router"; +import React, { useEffect } from "react"; +import { Link, Router } from "@reach/router"; +import { setAppMenu } from "@topcoder/micro-frontends-navbar-app"; +import appMenu from "./constants/appMenu"; +import AuthDemo from "./components/AuthDemo"; +import NoSidebarDemo from "./components/NoSidebarDemo"; + +export default function Root() { + useEffect(() => { + // when app starts it should set its side menu structure + setAppMenu("/micro-frontends-react-route", appMenu); + }, []); -export default function Root(props) { return (

React child app example

@@ -19,8 +28,15 @@ export default function Root(props) {
- Link to Angular child app + + Link to Angular child app +
+ + + + +
); } diff --git a/webpack.config.js b/webpack.config.js index e07946f..ee9bd14 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,5 @@ +/* global __dirname */ + const webpackMerge = require("webpack-merge"); const singleSpaDefaults = require("webpack-config-single-spa-react"); @@ -8,7 +10,24 @@ module.exports = (webpackConfigEnv) => { webpackConfigEnv, }); + // modify the webpack config however you'd like to by adding to this object return webpackMerge.smart(defaultConfig, { - // modify the webpack config however you'd like to by adding to this object + // we have to list here all the microapps which we would like to use in imports + // so webpack doesn't tries to import them + externals: { + "@topcoder/micro-frontends-navbar-app": + "@topcoder/micro-frontends-navbar-app", + }, + module: { + rules: [ + { + test: /\.svg$/, + exclude: /node_modules/, + use: { + loader: require.resolve("file-loader", { paths: [__dirname] }), + }, + }, + ], + }, }); };