From fb29caadecf12014354f31d97aa2d4b0e15df2b2 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 11:41:43 -0700 Subject: [PATCH 01/18] Fix eslint patterns --- client/.eslintrc.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/.eslintrc.js b/client/.eslintrc.js index f5cce5a37..8376591cf 100644 --- a/client/.eslintrc.js +++ b/client/.eslintrc.js @@ -31,8 +31,8 @@ module.exports = { // Unit tests { - files: ['./src/**/*.test.ts', './jest/**/*.ts'], - extends: [configs.typescript, configs.dev, configs.tests], + files: ['./src/**/*.test.ts{,x}', './jest/**/*.ts'], + extends: [configs.typescript, configs.react, configs.dev, configs.tests], }, // E2E tests @@ -43,7 +43,7 @@ module.exports = { // TypeScript and React source code. { - files: ['./src/**/*.ts', './src/**/*.tsx'], + files: ['./src/**/*.ts{,x}'], extends: [configs.typescript, configs.react], }, From 9c5f629919854596f4e92b9f1c400becea49841c Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Apr 2021 11:58:14 -0700 Subject: [PATCH 02/18] Fix test package scripts --- client/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/package.json b/client/package.json index e7d90b95d..f24301f8d 100644 --- a/client/package.json +++ b/client/package.json @@ -13,8 +13,8 @@ "postinstall": "cd .. && husky install", "start": "next start -p 8080", "test": "jest -c jest/test.config.js", - "test:watch": "yarn jest --watch", - "test:update": "yarn jest --updateSnapshot" + "test:watch": "yarn test --watch", + "test:update": "yarn test --updateSnapshot" }, "dependencies": { "axios": "^0.21.1", From b1307087c91aa9e57922e13600c57e2140b41dde Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 11:42:02 -0700 Subject: [PATCH 03/18] Added react-use and framer-motion --- client/package.json | 4 +- client/yarn.lock | 255 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 254 insertions(+), 5 deletions(-) diff --git a/client/package.json b/client/package.json index f24301f8d..ab7509727 100644 --- a/client/package.json +++ b/client/package.json @@ -19,10 +19,12 @@ "dependencies": { "axios": "^0.21.1", "clsx": "^1.1.1", + "framer-motion": "^4.1.3", "next": "10.1.3", "react": "17.0.2", "react-dom": "17.0.2", - "react-query": "^3.13.5" + "react-query": "^3.13.5", + "react-use": "^17.2.3" }, "devDependencies": { "@babel/core": "^7.13.15", diff --git a/client/yarn.lock b/client/yarn.lock index 5b0bc7c2b..5a3e5e8a7 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -273,7 +273,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2": version "7.13.10" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== @@ -334,6 +334,18 @@ exec-sh "^0.3.2" minimist "^1.2.0" +"@emotion/is-prop-valid@^0.8.2": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@eslint/eslintrc@^0.4.0": version "0.4.0" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.0.tgz#99cc0a0584d72f1df38b900fb062ba995f395547" @@ -839,6 +851,11 @@ jest-diff "^26.0.0" pretty-format "^26.0.0" +"@types/js-cookie@^2.2.6": + version "2.2.6" + resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f" + integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw== + "@types/json-schema@^7.0.3": version "7.0.7" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" @@ -1032,6 +1049,11 @@ "@typescript-eslint/types" "4.21.0" eslint-visitor-keys "^2.0.0" +"@xobotyi/scrollbar-width@^1.9.5": + version "1.9.5" + resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d" + integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ== + abab@^2.0.3, abab@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a" @@ -2218,6 +2240,13 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= +copy-to-clipboard@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae" + integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw== + dependencies: + toggle-selection "^1.0.6" + core-js-pure@^3.0.0: version "3.10.1" resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.10.1.tgz#28642697dfcf02e0fd9f4d9891bd03a22df28ecf" @@ -2312,6 +2341,14 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-in-js-utils@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99" + integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA== + dependencies: + hyphenate-style-name "^1.0.2" + isobject "^3.0.1" + css-modules-loader-core@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16" @@ -2332,6 +2369,14 @@ css-selector-tokenizer@^0.7.0: cssesc "^3.0.0" fastparse "^1.1.2" +css-tree@^1.1.2: + version "1.1.3" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" + integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q== + dependencies: + mdn-data "2.0.14" + source-map "^0.6.1" + css-unit-converter@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21" @@ -2389,7 +2434,7 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^3.0.2: +csstype@^3.0.2, csstype@^3.0.6: version "3.0.7" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b" integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g== @@ -2832,6 +2877,13 @@ error-ex@^1.2.0, error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" +error-stack-parser@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8" + integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ== + dependencies: + stackframe "^1.1.1" + es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2: version "1.18.0" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4" @@ -3318,7 +3370,7 @@ extsprintf@^1.2.0: resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8= -fast-deep-equal@^3.1.1: +fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== @@ -3350,11 +3402,21 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= +fast-shallow-equal@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b" + integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw== + fastest-levenshtein@^1.0.12: version "1.0.12" resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2" integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow== +fastest-stable-stringify@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76" + integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q== + fastparse@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" @@ -3555,6 +3617,26 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" +framer-motion@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.3.tgz#fdde56885910f516233233073f8f0ed6aab6492e" + integrity sha512-WJ3iZiMgzR3cf/W5/o5OwGyNeXvjuIriItPnDtqbAGgd8rCq5ysAW3RS4cC2i2wVA9EfrlxWmosTt+lKhaVI3Q== + dependencies: + framesync "5.3.0" + hey-listen "^1.0.8" + popmotion "9.3.5" + style-value-types "4.1.4" + tslib "^2.1.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + +framesync@5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b" + integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA== + dependencies: + tslib "^2.1.0" + fromentries@^1.2.0: version "1.3.2" resolved "https://registry.yarnpkg.com/fromentries/-/fromentries-1.3.2.tgz#e4bca6808816bf8f93b52750f1127f5a6fd86e3a" @@ -3994,6 +4076,11 @@ header-case@^1.0.0: no-case "^2.2.0" upper-case "^1.1.3" +hey-listen@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" + integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== + hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -4099,6 +4186,11 @@ husky@^6.0.0: resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e" integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ== +hyphenate-style-name@^1.0.2: + version "1.0.4" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" + integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== + iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -4219,6 +4311,13 @@ ini@^1.3.4, ini@^1.3.5, ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== +inline-style-prefixer@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz#f73d5dbf2855733d6b153a4d24b7b47a73e9770b" + integrity sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg== + dependencies: + css-in-js-utils "^2.0.0" + inquirer@^7.1.0: version "7.3.3" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003" @@ -5217,6 +5316,11 @@ jpeg-js@^0.4.2: resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b" integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q== +js-cookie@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8" + integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ== + js-sha3@0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840" @@ -5782,6 +5886,11 @@ mdast-util-to-string@^2.0.0: resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b" integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w== +mdn-data@2.0.14: + version "2.0.14" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" + integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== + memorystream@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2" @@ -5971,6 +6080,20 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== +nano-css@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.1.tgz#b709383e07ad3be61f64edffacb9d98250b87a1f" + integrity sha512-ENPIyNzANQRyYVvb62ajDd7PAyIgS2LIUnT9ewih4yrXSZX4hKoUwssy8WjUH++kEOA5wUTMgNnV7ko5n34kUA== + dependencies: + css-tree "^1.1.2" + csstype "^3.0.6" + fastest-stable-stringify "^2.0.2" + inline-style-prefixer "^6.0.0" + rtl-css-js "^1.14.0" + sourcemap-codec "^1.4.8" + stacktrace-js "^2.0.2" + stylis "^4.0.6" + nano-time@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef" @@ -6955,6 +7078,16 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +popmotion@9.3.5: + version "9.3.5" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.5.tgz#e821aff3424a021b0f2c93922db31c55cfe64149" + integrity sha512-Lr2rq8OP0j8D7CO2/6eO17ALeFCxjx1hfTGbMg+TLqFj+KZSGOoj6gRBVTzDINGqo6LQrORQSSSDaCL5OrB3bw== + dependencies: + framesync "5.3.0" + hey-listen "^1.0.8" + style-value-types "4.1.4" + tslib "^2.1.0" + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -7401,6 +7534,31 @@ react-refresh@0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-universal-interface@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" + integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw== + +react-use@^17.2.3: + version "17.2.3" + resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.2.3.tgz#ba3e5711d6ec4d51637641d6db63897e98c5904f" + integrity sha512-cHLG5mwv9NSkydhlY3J1B/Z5gGzRF43QXzFaMisSaFClg0o1VeWJaYj2d9HJIiTGC+imt47FY4TpnZNRhbOyaQ== + dependencies: + "@types/js-cookie" "^2.2.6" + "@xobotyi/scrollbar-width" "^1.9.5" + copy-to-clipboard "^3.3.1" + fast-deep-equal "^3.1.3" + fast-shallow-equal "^1.0.0" + js-cookie "^2.2.1" + nano-css "^5.3.1" + react-universal-interface "^0.6.2" + resize-observer-polyfill "^1.5.1" + screenfull "^5.1.0" + set-harmonic-interval "^1.0.1" + throttle-debounce "^3.0.1" + ts-easing "^0.2.0" + tslib "^2.1.0" + react@17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -7658,6 +7816,11 @@ reserved-words@^0.1.2: resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1" integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE= +resize-observer-polyfill@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" @@ -7770,6 +7933,13 @@ rsvp@^4.8.4: resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734" integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA== +rtl-css-js@^1.14.0: + version "1.14.1" + resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.14.1.tgz#f79781d6a0c510abe73fde60aa3cbe9dfd134a45" + integrity sha512-G9N1s/6329FpJr8k9e1U/Lg0IDWThv99sb7k0IrXHjSnubxe01h52/ajsPRafJK1/2Vqrhz3VKLe3E1dx6jS9Q== + dependencies: + "@babel/runtime" "^7.1.2" + run-async@^2.4.0: version "2.4.1" resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455" @@ -7848,6 +8018,11 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +screenfull@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.1.0.tgz#85c13c70f4ead4c1b8a935c70010dfdcd2c0e5c8" + integrity sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA== + semver-compare@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" @@ -7890,6 +8065,11 @@ set-blocking@^2.0.0: resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= +set-harmonic-interval@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249" + integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g== + set-value@^2.0.0, set-value@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b" @@ -8070,6 +8250,11 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56" integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== +source-map@0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" + integrity sha1-dc449SvwczxafwwRjYEzSiu19BI= + source-map@0.7.3, source-map@^0.7.3: version "0.7.3" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" @@ -8092,6 +8277,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +sourcemap-codec@^1.4.8: + version "1.4.8" + resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" + integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== + spawn-wrap@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-2.0.0.tgz#103685b8b8f9b79771318827aa78650a610d457e" @@ -8172,6 +8362,13 @@ sshpk@^1.7.0: safer-buffer "^2.0.2" tweetnacl "~0.14.0" +stack-generator@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36" + integrity sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q== + dependencies: + stackframe "^1.1.1" + stack-utils@^2.0.2, stack-utils@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277" @@ -8179,6 +8376,28 @@ stack-utils@^2.0.2, stack-utils@^2.0.3: dependencies: escape-string-regexp "^2.0.0" +stackframe@^1.1.1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303" + integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA== + +stacktrace-gps@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz#7688dc2fc09ffb3a13165ebe0dbcaf41bcf0c69a" + integrity sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg== + dependencies: + source-map "0.5.6" + stackframe "^1.1.1" + +stacktrace-js@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b" + integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg== + dependencies: + error-stack-parser "^2.0.6" + stack-generator "^2.0.5" + stacktrace-gps "^3.0.4" + stacktrace-parser@0.1.10: version "0.1.10" resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a" @@ -8408,6 +8627,14 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= +style-value-types@4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75" + integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg== + dependencies: + hey-listen "^1.0.8" + tslib "^2.1.0" + styled-jsx@3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018" @@ -8524,6 +8751,11 @@ stylis@3.5.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== +stylis@^4.0.6: + version "4.0.10" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240" + integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg== + sugarss@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d" @@ -8677,6 +8909,11 @@ throat@^5.0.0: resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b" integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA== +throttle-debounce@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb" + integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg== + through@^2.3.6, through@^2.3.8: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" @@ -8756,6 +8993,11 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI= + toidentifier@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" @@ -8814,6 +9056,11 @@ trough@^1.0.0: resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406" integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA== +ts-easing@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec" + integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ== + ts-pnp@^1.1.6: version "1.2.0" resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" @@ -8834,7 +9081,7 @@ tslib@^1.8.1, tslib@^1.9.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.3: +tslib@^2.0.3, tslib@^2.1.0: version "2.2.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c" integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w== From a7a252b18b34f4fd0c2b3bb0389091321ac60f99 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 11:53:28 -0700 Subject: [PATCH 04/18] Added svg assets --- client/public/icons/close.svg | 4 ++++ client/public/icons/menu.svg | 5 +++++ client/public/icons/search.svg | 3 +++ 3 files changed, 12 insertions(+) create mode 100644 client/public/icons/close.svg create mode 100644 client/public/icons/menu.svg create mode 100644 client/public/icons/search.svg diff --git a/client/public/icons/close.svg b/client/public/icons/close.svg new file mode 100644 index 000000000..b1882159c --- /dev/null +++ b/client/public/icons/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/icons/menu.svg b/client/public/icons/menu.svg new file mode 100644 index 000000000..ebadcaf86 --- /dev/null +++ b/client/public/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/public/icons/search.svg b/client/public/icons/search.svg new file mode 100644 index 000000000..69106d6fd --- /dev/null +++ b/client/public/icons/search.svg @@ -0,0 +1,3 @@ + + + From 25866cff1c4a4b0ab637e78ccd74cffc129a8a0e Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 12:06:37 -0700 Subject: [PATCH 05/18] Make viewport responsive --- client/src/pages/_app.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index 967c93302..fe42a9781 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -7,6 +7,7 @@ import '@/tailwind.scss'; import { AppProps } from 'next/app'; +import Head from 'next/head'; import { ReactNode, useRef } from 'react'; import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from 'react-query/devtools'; @@ -37,10 +38,16 @@ function ReactQueryProvider({ children, dehydratedState }: QueryProviderProps) { export default function App({ Component, pageProps }: AppProps) { return ( - - - - - + <> + + + + + + + + + + ); } From 0cfed06a7a094e4acaeb6a11af46506ce05b011a Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Apr 2021 12:22:20 -0700 Subject: [PATCH 06/18] Make page scroll by default to prevent layout shift --- client/src/global.scss | 8 ++++++++ client/src/pages/_app.tsx | 1 + 2 files changed, 9 insertions(+) create mode 100644 client/src/global.scss diff --git a/client/src/global.scss b/client/src/global.scss new file mode 100644 index 000000000..a4414f484 --- /dev/null +++ b/client/src/global.scss @@ -0,0 +1,8 @@ +html { + /* + Enable scrollbar for the entire page by default. This is to prevent + layout shift when switching between pages that have content long enough / + not long enough for a scrollbar. + */ + overflow-y: scroll; +} diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index fe42a9781..4dfdca57b 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -5,6 +5,7 @@ */ import '@/tailwind.scss'; +import '@/global.scss'; import { AppProps } from 'next/app'; import Head from 'next/head'; From 577861dfcbabc079e25f85e4cafd36e930602196 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Apr 2021 12:24:26 -0700 Subject: [PATCH 07/18] Added Link wrapper component for Next.js Link --- client/src/components/Link/Link.test.tsx | 17 +++++++++++++++++ client/src/components/Link/Link.tsx | 21 +++++++++++++++++++++ client/src/components/Link/index.ts | 1 + client/src/components/index.ts | 1 + 4 files changed, 40 insertions(+) create mode 100644 client/src/components/Link/Link.test.tsx create mode 100644 client/src/components/Link/Link.tsx create mode 100644 client/src/components/Link/index.ts diff --git a/client/src/components/Link/Link.test.tsx b/client/src/components/Link/Link.test.tsx new file mode 100644 index 000000000..a2b91c86c --- /dev/null +++ b/client/src/components/Link/Link.test.tsx @@ -0,0 +1,17 @@ +import { render, screen } from '@testing-library/react'; + +import { Link } from './Link'; + +describe('', () => { + const text = 'Hello, World!'; + + it('should match snapshot', () => { + const component = render({text}); + expect(component.asFragment()).toMatchSnapshot(); + }); + + it('should render child', () => { + render({text}); + expect(screen.getByText(text)).toBeTruthy(); + }); +}); diff --git a/client/src/components/Link/Link.tsx b/client/src/components/Link/Link.tsx new file mode 100644 index 000000000..a921eea64 --- /dev/null +++ b/client/src/components/Link/Link.tsx @@ -0,0 +1,21 @@ +import NextLink, { LinkProps } from 'next/link'; +import { ReactNode } from 'react'; + +interface Props extends LinkProps { + children?: ReactNode; + className?: string; +} + +/** + * Component for rendering a Next.js link using an anchor tag. This is mostly + * to allow Next.js to preload routes and for the anchor tag to pass a11y. + */ +export function Link({ className, children, ...props }: Props) { + return ( + + + {children} + + + ); +} diff --git a/client/src/components/Link/index.ts b/client/src/components/Link/index.ts new file mode 100644 index 000000000..3db78f51f --- /dev/null +++ b/client/src/components/Link/index.ts @@ -0,0 +1 @@ +export * from './Link'; diff --git a/client/src/components/index.ts b/client/src/components/index.ts index 9877e7f4a..59719b0ec 100644 --- a/client/src/components/index.ts +++ b/client/src/components/index.ts @@ -1 +1,2 @@ export * from './Layout'; +export * from './Link'; From 2a5a9c00b21210bb96b7af86a9418c8947b13df9 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Apr 2021 12:33:21 -0700 Subject: [PATCH 08/18] Added SearchBar component --- .../SearchBar/SearchBar.module.scss | 28 +++++++++++++++++++ .../SearchBar/SearchBar.module.scss.d.ts | 10 +++++++ .../components/SearchBar/SearchBar.test.tsx | 10 +++++++ client/src/components/SearchBar/SearchBar.tsx | 24 ++++++++++++++++ client/src/components/SearchBar/index.ts | 1 + client/src/components/index.ts | 1 + 6 files changed, 74 insertions(+) create mode 100644 client/src/components/SearchBar/SearchBar.module.scss create mode 100644 client/src/components/SearchBar/SearchBar.module.scss.d.ts create mode 100644 client/src/components/SearchBar/SearchBar.test.tsx create mode 100644 client/src/components/SearchBar/SearchBar.tsx create mode 100644 client/src/components/SearchBar/index.ts diff --git a/client/src/components/SearchBar/SearchBar.module.scss b/client/src/components/SearchBar/SearchBar.module.scss new file mode 100644 index 000000000..8f254ad11 --- /dev/null +++ b/client/src/components/SearchBar/SearchBar.module.scss @@ -0,0 +1,28 @@ +.form { + // Flex layout + @apply flex flex-auto items-center; + + // Borders + @apply border-b-2 border-black; +} + +.input { + // Flex layout + @apply flex flex-auto; + + // Remove border and focus outline around input + @apply border-none outline-none; + + // Remove white colored input background + @apply bg-transparent; + + // Font size + @apply text-napari-app-bar; + + /* + Inputs have a default width defined by the browser, so we have to set + this explicitly to make the input flexible: + https://stackoverflow.com/a/42421490 + */ + @apply w-0; +} diff --git a/client/src/components/SearchBar/SearchBar.module.scss.d.ts b/client/src/components/SearchBar/SearchBar.module.scss.d.ts new file mode 100644 index 000000000..90f47b736 --- /dev/null +++ b/client/src/components/SearchBar/SearchBar.module.scss.d.ts @@ -0,0 +1,10 @@ +export type Styles = { + form: string; + input: string; +}; + +export type ClassNames = keyof Styles; + +declare const styles: Styles; + +export default styles; diff --git a/client/src/components/SearchBar/SearchBar.test.tsx b/client/src/components/SearchBar/SearchBar.test.tsx new file mode 100644 index 000000000..7bd19e6de --- /dev/null +++ b/client/src/components/SearchBar/SearchBar.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { SearchBar } from './SearchBar'; + +describe('', () => { + it('should match snapshot', () => { + const component = render(); + expect(component.asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/SearchBar/SearchBar.tsx b/client/src/components/SearchBar/SearchBar.tsx new file mode 100644 index 000000000..33a9782b6 --- /dev/null +++ b/client/src/components/SearchBar/SearchBar.tsx @@ -0,0 +1,24 @@ +import Image from 'next/image'; + +import styles from './SearchBar.module.scss'; + +const SEARCH_ICON_SIZE = 14; + +/** + * Search bar component. This renders an input field with a underline and + * magnifying glass icon to the right of the component. + */ +export function SearchBar() { + return ( +
+ + Icon for napari search bar +
+ ); +} diff --git a/client/src/components/SearchBar/index.ts b/client/src/components/SearchBar/index.ts new file mode 100644 index 000000000..3d7e42eb5 --- /dev/null +++ b/client/src/components/SearchBar/index.ts @@ -0,0 +1 @@ +export * from './SearchBar'; diff --git a/client/src/components/index.ts b/client/src/components/index.ts index 59719b0ec..bc75f47d1 100644 --- a/client/src/components/index.ts +++ b/client/src/components/index.ts @@ -1,2 +1,3 @@ export * from './Layout'; export * from './Link'; +export * from './SearchBar'; From 3b62d76ac31011012a06d87854f23f167fadb4a3 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 12:08:18 -0700 Subject: [PATCH 09/18] Added Overlay component --- .../components/Overlay/Overlay.module.scss | 5 ++++ .../Overlay/Overlay.module.scss.d.ts | 9 +++++++ .../src/components/Overlay/Overlay.test.tsx | 22 ++++++++++++++++ client/src/components/Overlay/Overlay.tsx | 26 +++++++++++++++++++ client/src/components/Overlay/index.ts | 1 + client/src/components/index.ts | 1 + 6 files changed, 64 insertions(+) create mode 100644 client/src/components/Overlay/Overlay.module.scss create mode 100644 client/src/components/Overlay/Overlay.module.scss.d.ts create mode 100644 client/src/components/Overlay/Overlay.test.tsx create mode 100644 client/src/components/Overlay/Overlay.tsx create mode 100644 client/src/components/Overlay/index.ts diff --git a/client/src/components/Overlay/Overlay.module.scss b/client/src/components/Overlay/Overlay.module.scss new file mode 100644 index 000000000..ccad55dd8 --- /dev/null +++ b/client/src/components/Overlay/Overlay.module.scss @@ -0,0 +1,5 @@ +.overlay { + @apply bg-black bg-opacity-50; + @apply w-screen h-screen; + @apply fixed top-0 right-0; +} diff --git a/client/src/components/Overlay/Overlay.module.scss.d.ts b/client/src/components/Overlay/Overlay.module.scss.d.ts new file mode 100644 index 000000000..d3da745bc --- /dev/null +++ b/client/src/components/Overlay/Overlay.module.scss.d.ts @@ -0,0 +1,9 @@ +export type Styles = { + overlay: string; +}; + +export type ClassNames = keyof Styles; + +declare const styles: Styles; + +export default styles; diff --git a/client/src/components/Overlay/Overlay.test.tsx b/client/src/components/Overlay/Overlay.test.tsx new file mode 100644 index 000000000..b44715539 --- /dev/null +++ b/client/src/components/Overlay/Overlay.test.tsx @@ -0,0 +1,22 @@ +import { render, waitFor } from '@testing-library/react'; +import { ComponentProps } from 'react'; + +import { Overlay } from './Overlay'; + +function renderOverlay(props: ComponentProps = {}) { + const component = render(); + return component.getByTestId('overlay'); +} + +describe('', () => { + it('should render nothing when visible=false', () => { + expect(renderOverlay).toThrow(); + }); + + it('should render overlay when visible=true', async () => { + const overlay = renderOverlay({ visible: true }); + await waitFor(() => { + expect(overlay).toBeVisible(); + }); + }); +}); diff --git a/client/src/components/Overlay/Overlay.tsx b/client/src/components/Overlay/Overlay.tsx new file mode 100644 index 000000000..4926d7f9f --- /dev/null +++ b/client/src/components/Overlay/Overlay.tsx @@ -0,0 +1,26 @@ +import { AnimatePresence, motion } from 'framer-motion'; + +import styles from './Overlay.module.scss'; + +interface Props { + visible?: boolean; +} + +/** + * Screen overlay that animates in and out of view. + */ +export function Overlay({ visible = false }: Props) { + return ( + + {visible && ( + + )} + + ); +} diff --git a/client/src/components/Overlay/index.ts b/client/src/components/Overlay/index.ts new file mode 100644 index 000000000..6dbcd51b8 --- /dev/null +++ b/client/src/components/Overlay/index.ts @@ -0,0 +1 @@ +export * from './Overlay'; diff --git a/client/src/components/index.ts b/client/src/components/index.ts index bc75f47d1..49945575c 100644 --- a/client/src/components/index.ts +++ b/client/src/components/index.ts @@ -1,3 +1,4 @@ export * from './Layout'; export * from './Link'; +export * from './Overlay'; export * from './SearchBar'; From ac2ae138dbc34a4658fae29efdbe8e1323cdc721 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 12:08:41 -0700 Subject: [PATCH 10/18] Added MenuDrawer component --- .../MenuDrawer/MenuDrawer.module.scss | 38 ++++++++++ .../MenuDrawer/MenuDrawer.module.scss.d.ts | 9 +++ .../components/MenuDrawer/MenuDrawer.test.tsx | 63 +++++++++++++++++ .../src/components/MenuDrawer/MenuDrawer.tsx | 69 +++++++++++++++++++ client/src/components/MenuDrawer/index.ts | 1 + client/src/components/MenuDrawer/types.ts | 4 ++ client/src/components/index.ts | 1 + 7 files changed, 185 insertions(+) create mode 100644 client/src/components/MenuDrawer/MenuDrawer.module.scss create mode 100644 client/src/components/MenuDrawer/MenuDrawer.module.scss.d.ts create mode 100644 client/src/components/MenuDrawer/MenuDrawer.test.tsx create mode 100644 client/src/components/MenuDrawer/MenuDrawer.tsx create mode 100644 client/src/components/MenuDrawer/index.ts create mode 100644 client/src/components/MenuDrawer/types.ts diff --git a/client/src/components/MenuDrawer/MenuDrawer.module.scss b/client/src/components/MenuDrawer/MenuDrawer.module.scss new file mode 100644 index 000000000..f2d6746ca --- /dev/null +++ b/client/src/components/MenuDrawer/MenuDrawer.module.scss @@ -0,0 +1,38 @@ +.menuDrawer { + // Fixed positioning to keep entire menu in viewport + @apply fixed top-0 right-0; + + // Layout + @apply flex flex-row items-start; + + // High z-index so that drawer overlays everything on the website + @apply z-40; + + // Dimensions + @apply w-9/12 h-screen; + + // Padding + @apply p-napari-sm; + + // Color + @apply bg-black; + + // Item list + ul { + @apply flex flex-auto flex-col; + } + + // Menu items + li { + @apply text-white; + } + + li:not(:last-child) { + margin-bottom: 20px; + } + + // Close button + button { + @apply flex; + } +} diff --git a/client/src/components/MenuDrawer/MenuDrawer.module.scss.d.ts b/client/src/components/MenuDrawer/MenuDrawer.module.scss.d.ts new file mode 100644 index 000000000..d18a489fa --- /dev/null +++ b/client/src/components/MenuDrawer/MenuDrawer.module.scss.d.ts @@ -0,0 +1,9 @@ +export type Styles = { + menuDrawer: string; +}; + +export type ClassNames = keyof Styles; + +declare const styles: Styles; + +export default styles; diff --git a/client/src/components/MenuDrawer/MenuDrawer.test.tsx b/client/src/components/MenuDrawer/MenuDrawer.test.tsx new file mode 100644 index 000000000..424f53535 --- /dev/null +++ b/client/src/components/MenuDrawer/MenuDrawer.test.tsx @@ -0,0 +1,63 @@ +import { fireEvent, render, screen } from '@testing-library/react'; +import { ComponentProps } from 'react'; + +import { MenuDrawer } from './MenuDrawer'; +import { MenuDrawerItem } from './types'; + +const noop = () => {}; + +describe('', () => { + const mockItems: MenuDrawerItem[] = [ + { + title: 'foo', + link: '/foo', + }, + { + title: 'bar', + link: '/bar', + }, + ]; + + type Props = ComponentProps; + + const renderComponent = ({ + items = mockItems, + onMenuClose = noop, + visible = true, + }: Partial = {}) => { + const props = { + items, + onMenuClose, + visible, + } as Props; + + return render(); + }; + + it('should match snapshot', () => { + renderComponent({ visible: true }); + const menu = screen.getByTestId('menu'); + expect(menu).toMatchSnapshot(); + }); + + it('should render items', () => { + renderComponent({ visible: true }); + const items = screen.getAllByTestId('drawerItem'); + + items.forEach((item, index) => { + const link = item.querySelector('a'); + expect(link).toHaveTextContent(mockItems[index].title); + expect(link).toHaveAttribute('href', mockItems[index].link); + }); + }); + + it('should call onClose when close button is clicked', () => { + const onMenuClose = jest.fn(); + renderComponent({ onMenuClose, visible: true }); + + const closeButton = screen.getByTestId('drawerClose'); + fireEvent.click(closeButton); + + expect(onMenuClose).toHaveBeenCalled(); + }); +}); diff --git a/client/src/components/MenuDrawer/MenuDrawer.tsx b/client/src/components/MenuDrawer/MenuDrawer.tsx new file mode 100644 index 000000000..019aa8e82 --- /dev/null +++ b/client/src/components/MenuDrawer/MenuDrawer.tsx @@ -0,0 +1,69 @@ +import { motion } from 'framer-motion'; +import Image from 'next/image'; +import { useRef } from 'react'; +import { useClickAway } from 'react-use'; + +import { Link, Overlay } from '@/components'; + +import styles from './MenuDrawer.module.scss'; +import { MenuDrawerItem } from './types'; + +interface Props { + items: MenuDrawerItem[]; + onMenuClose: () => void; + visible: boolean; +} + +const CLOSE_ICON_SIZE = 16; + +/** + * Navigation drawer that slides out from the right. An overlay is rendered + * below the menu to emphasize the drawer being in view. + * + * The drawer closes automatically if the user clicks outside of the drawer. + * This is handled using the `useClickAway()` hook: + * https://git.io/JOmWl + */ +export function MenuDrawer({ items, onMenuClose, visible }: Props) { + const menuRef = useRef(null); + useClickAway(menuRef, onMenuClose); + + return ( + <> + + + + {/* Menu links */} +
    + {items.map((item) => ( +
  • + {item.title} +
    • + ))} +
+ + {/* Close button */} + + + + ); +} diff --git a/client/src/components/MenuDrawer/index.ts b/client/src/components/MenuDrawer/index.ts new file mode 100644 index 000000000..1148e6546 --- /dev/null +++ b/client/src/components/MenuDrawer/index.ts @@ -0,0 +1 @@ +export * from './MenuDrawer'; diff --git a/client/src/components/MenuDrawer/types.ts b/client/src/components/MenuDrawer/types.ts new file mode 100644 index 000000000..6f8af5719 --- /dev/null +++ b/client/src/components/MenuDrawer/types.ts @@ -0,0 +1,4 @@ +export interface MenuDrawerItem { + title: string; + link: string; +} diff --git a/client/src/components/index.ts b/client/src/components/index.ts index 49945575c..24e3be63e 100644 --- a/client/src/components/index.ts +++ b/client/src/components/index.ts @@ -1,4 +1,5 @@ export * from './Layout'; export * from './Link'; +export * from './MenuDrawer'; export * from './Overlay'; export * from './SearchBar'; From 89a9bd61115d3c886c8fcacb0169cb564fe43d1b Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Apr 2021 12:34:11 -0700 Subject: [PATCH 11/18] Added AppBar component --- .../src/components/AppBar/AppBar.module.scss | 56 ++++++++++++ .../components/AppBar/AppBar.module.scss.d.ts | 13 +++ client/src/components/AppBar/AppBar.test.tsx | 10 +++ client/src/components/AppBar/AppBar.tsx | 90 +++++++++++++++++++ client/src/components/AppBar/index.ts | 1 + client/src/components/index.ts | 1 + client/tailwind.config.js | 7 ++ 7 files changed, 178 insertions(+) create mode 100644 client/src/components/AppBar/AppBar.module.scss create mode 100644 client/src/components/AppBar/AppBar.module.scss.d.ts create mode 100644 client/src/components/AppBar/AppBar.test.tsx create mode 100644 client/src/components/AppBar/AppBar.tsx create mode 100644 client/src/components/AppBar/index.ts diff --git a/client/src/components/AppBar/AppBar.module.scss b/client/src/components/AppBar/AppBar.module.scss new file mode 100644 index 000000000..f2bdf0f45 --- /dev/null +++ b/client/src/components/AppBar/AppBar.module.scss @@ -0,0 +1,56 @@ +.appBar { + // Color and height + @apply bg-napari-primary h-napari-app-bar; + + // Padding + @apply px-napari-sm md:px-napari-lg 2xl:p-0; + + // Grid Layout + @apply grid grid-cols-napari-nav-mobile; + @apply justify-center items-center; + + // Grid gap + @apply gap-napari-sm md:gap-napari-lg; + + // Change to 2 column grid layout when 2xl+ screens + @apply 2xl:grid 2xl:grid-cols-napari-2-col; + + // Use 3 column layout when 3xl+ screens + @apply 3xl:grid-cols-napari-3-col; +} + +.header { + @apply flex; + + h1 { + @apply text-napari-app-bar; + @apply whitespace-nowrap; + } +} + +.searchContainer { + // Flex layout + @apply flex items-center; + + // Take 100% of width, but limit to center column width. + @apply w-full max-w-napari-center-col; + + // Align container to the right of the grid cell + @apply justify-self-end; +} + +.links { + // Hide links on smaller layouts + @apply hidden lg:flex; + @apply ml-napari-lg; + + :not(:first-child) { + @apply ml-napari-sm; + } +} + +.menuButton { + // Show menu button on smaller layouts + @apply flex lg:hidden; + @apply ml-napari-sm; +} diff --git a/client/src/components/AppBar/AppBar.module.scss.d.ts b/client/src/components/AppBar/AppBar.module.scss.d.ts new file mode 100644 index 000000000..637989878 --- /dev/null +++ b/client/src/components/AppBar/AppBar.module.scss.d.ts @@ -0,0 +1,13 @@ +export type Styles = { + appBar: string; + header: string; + links: string; + menuButton: string; + searchContainer: string; +}; + +export type ClassNames = keyof Styles; + +declare const styles: Styles; + +export default styles; diff --git a/client/src/components/AppBar/AppBar.test.tsx b/client/src/components/AppBar/AppBar.test.tsx new file mode 100644 index 000000000..27a54f9c5 --- /dev/null +++ b/client/src/components/AppBar/AppBar.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { AppBar } from './AppBar'; + +describe('', () => { + it('should match snapshot', () => { + const component = render(); + expect(component.asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/AppBar/AppBar.tsx b/client/src/components/AppBar/AppBar.tsx new file mode 100644 index 000000000..20639701b --- /dev/null +++ b/client/src/components/AppBar/AppBar.tsx @@ -0,0 +1,90 @@ +import Image from 'next/image'; +import { ReactElement, useState } from 'react'; + +import { Link, MenuDrawer, SearchBar } from '@/components'; +import { MenuDrawerItem } from '@/components/MenuDrawer/types'; + +import styles from './AppBar.module.scss'; + +const IMAGE_SIZE = 16; + +const MENU_ITEMS: MenuDrawerItem[] = [ + { + title: 'About', + link: '/about', + }, + { + title: 'Help', + link: '/help', + }, +]; + +/** + * Header that links back to the home page. + */ +function AppBarHeader() { + return ( +
+

+ + napari hub + +

+
+ ); +} + +/** + * Link bar for rendering menu links. This only shows up on (screen >= lg). + */ +function AppBarLinks() { + return ( +
+ {MENU_ITEMS.map((item) => ( + + {item.title} + + ))} +
+ ); +} + +/** + * App bar component that renders the home link, search bar, and menu. + */ +export function AppBar(): ReactElement { + const [visible, setVisible] = useState(false); + + return ( + <> + setVisible(false)} + visible={visible} + /> + + + + ); +} diff --git a/client/src/components/AppBar/index.ts b/client/src/components/AppBar/index.ts new file mode 100644 index 000000000..60f2f0e90 --- /dev/null +++ b/client/src/components/AppBar/index.ts @@ -0,0 +1 @@ +export * from './AppBar'; diff --git a/client/src/components/index.ts b/client/src/components/index.ts index 24e3be63e..571c89d72 100644 --- a/client/src/components/index.ts +++ b/client/src/components/index.ts @@ -1,3 +1,4 @@ +export * from './AppBar'; export * from './Layout'; export * from './Link'; export * from './MenuDrawer'; diff --git a/client/tailwind.config.js b/client/tailwind.config.js index d837417af..29921f54e 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -30,16 +30,23 @@ module.exports = { 'napari-lg': '50px', }, + width: { + 'napari-center-col': '775px', + }, + height: { 'napari-app-bar': '75px', }, gridTemplateColumns: { + 'napari-nav-mobile': 'min-content 1fr', 'napari-2-col': '225px 775px', 'napari-3-col': '225px 775px 225px', }, gap: (theme) => theme('margin'), + maxWidth: (theme) => theme('width'), + padding: (theme) => theme('margin'), }, }, }; From f0919c4b6c7713d8661a3265ae10bb6bfc03e516 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Apr 2021 12:41:42 -0700 Subject: [PATCH 12/18] Added AppBar to Layout component --- client/src/components/Layout/Layout.tsx | 9 ++++++++- .../Layout/__snapshots__/Layout.test.tsx.snap | 11 ----------- 2 files changed, 8 insertions(+), 12 deletions(-) delete mode 100644 client/src/components/Layout/__snapshots__/Layout.test.tsx.snap diff --git a/client/src/components/Layout/Layout.tsx b/client/src/components/Layout/Layout.tsx index c549a5d9f..bafa59434 100644 --- a/client/src/components/Layout/Layout.tsx +++ b/client/src/components/Layout/Layout.tsx @@ -1,9 +1,16 @@ import { ReactNode } from 'react'; +import { AppBar } from '@/components'; + interface Props { children: ReactNode; } export function Layout({ children }: Props) { - return
{children}
; + return ( + <> + +
{children}
+ + ); } diff --git a/client/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/client/src/components/Layout/__snapshots__/Layout.test.tsx.snap deleted file mode 100644 index 180df8cbb..000000000 --- a/client/src/components/Layout/__snapshots__/Layout.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should match snapshot 1`] = ` - -
-

- Hello, World! -

-
- -`; From 9494c1db06e4cb708e2b6ee70c4794dd392d0a60 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 12:14:18 -0700 Subject: [PATCH 13/18] Added test snapshots --- .../AppBar/__snapshots__/AppBar.test.tsx.snap | 129 +++++++++++++++++ .../Layout/__snapshots__/Layout.test.tsx.snap | 134 ++++++++++++++++++ .../Link/__snapshots__/Link.test.tsx.snap | 11 ++ .../__snapshots__/MenuDrawer.test.tsx.snap | 46 ++++++ .../__snapshots__/SearchBar.test.tsx.snap | 24 ++++ 5 files changed, 344 insertions(+) create mode 100644 client/src/components/AppBar/__snapshots__/AppBar.test.tsx.snap create mode 100644 client/src/components/Layout/__snapshots__/Layout.test.tsx.snap create mode 100644 client/src/components/Link/__snapshots__/Link.test.tsx.snap create mode 100644 client/src/components/MenuDrawer/__snapshots__/MenuDrawer.test.tsx.snap create mode 100644 client/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap diff --git a/client/src/components/AppBar/__snapshots__/AppBar.test.tsx.snap b/client/src/components/AppBar/__snapshots__/AppBar.test.tsx.snap new file mode 100644 index 000000000..6cfec24aa --- /dev/null +++ b/client/src/components/AppBar/__snapshots__/AppBar.test.tsx.snap @@ -0,0 +1,129 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should match snapshot 1`] = ` + +
+ + +
+ + +`; diff --git a/client/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/client/src/components/Layout/__snapshots__/Layout.test.tsx.snap new file mode 100644 index 000000000..5d27c9e05 --- /dev/null +++ b/client/src/components/Layout/__snapshots__/Layout.test.tsx.snap @@ -0,0 +1,134 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should match snapshot 1`] = ` + +
+ + +
+ +
+

+ Hello, World! +

+
+ +`; diff --git a/client/src/components/Link/__snapshots__/Link.test.tsx.snap b/client/src/components/Link/__snapshots__/Link.test.tsx.snap new file mode 100644 index 000000000..9cde74593 --- /dev/null +++ b/client/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should match snapshot 1`] = ` + + + Hello, World! + + +`; diff --git a/client/src/components/MenuDrawer/__snapshots__/MenuDrawer.test.tsx.snap b/client/src/components/MenuDrawer/__snapshots__/MenuDrawer.test.tsx.snap new file mode 100644 index 000000000..a0900c637 --- /dev/null +++ b/client/src/components/MenuDrawer/__snapshots__/MenuDrawer.test.tsx.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should match snapshot 1`] = ` +
+ + +
+`; diff --git a/client/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap b/client/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap new file mode 100644 index 000000000..7fd3b7c5c --- /dev/null +++ b/client/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should match snapshot 1`] = ` + +
+ +
+
+
+ +`; From 947c9d600a553e2392698178855c2d0cb5482de5 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Tue, 13 Apr 2021 12:37:04 -0700 Subject: [PATCH 14/18] Close drawer when opening link --- client/src/components/Link/Link.tsx | 5 +++-- client/src/components/MenuDrawer/MenuDrawer.tsx | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/client/src/components/Link/Link.tsx b/client/src/components/Link/Link.tsx index a921eea64..5952a7af5 100644 --- a/client/src/components/Link/Link.tsx +++ b/client/src/components/Link/Link.tsx @@ -3,6 +3,7 @@ import { ReactNode } from 'react'; interface Props extends LinkProps { children?: ReactNode; + onClick?: () => void; className?: string; } @@ -10,10 +11,10 @@ interface Props extends LinkProps { * Component for rendering a Next.js link using an anchor tag. This is mostly * to allow Next.js to preload routes and for the anchor tag to pass a11y. */ -export function Link({ className, children, ...props }: Props) { +export function Link({ className, children, onClick, ...props }: Props) { return ( - + {children} diff --git a/client/src/components/MenuDrawer/MenuDrawer.tsx b/client/src/components/MenuDrawer/MenuDrawer.tsx index 019aa8e82..49b0ba659 100644 --- a/client/src/components/MenuDrawer/MenuDrawer.tsx +++ b/client/src/components/MenuDrawer/MenuDrawer.tsx @@ -48,7 +48,9 @@ export function MenuDrawer({ items, onMenuClose, visible }: Props) {
    {items.map((item) => (
  • - {item.title} + + {item.title} +
    • ))}
From 481ea38b1ab3a5700e9fdf854da634d5d58c4cd5 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Wed, 14 Apr 2021 11:36:34 -0700 Subject: [PATCH 15/18] Move Link and Overlay to components/common folder --- client/src/components/AppBar/AppBar.tsx | 3 ++- client/src/components/MenuDrawer/MenuDrawer.tsx | 2 +- client/src/components/{ => common}/Link/Link.test.tsx | 0 client/src/components/{ => common}/Link/Link.tsx | 0 .../{ => common}/Link/__snapshots__/Link.test.tsx.snap | 0 client/src/components/{ => common}/Link/index.ts | 0 client/src/components/{ => common}/Overlay/Overlay.module.scss | 0 .../components/{ => common}/Overlay/Overlay.module.scss.d.ts | 0 client/src/components/{ => common}/Overlay/Overlay.test.tsx | 0 client/src/components/{ => common}/Overlay/Overlay.tsx | 0 client/src/components/{ => common}/Overlay/index.ts | 0 client/src/components/common/index.ts | 2 ++ client/src/components/index.ts | 2 -- 13 files changed, 5 insertions(+), 4 deletions(-) rename client/src/components/{ => common}/Link/Link.test.tsx (100%) rename client/src/components/{ => common}/Link/Link.tsx (100%) rename client/src/components/{ => common}/Link/__snapshots__/Link.test.tsx.snap (100%) rename client/src/components/{ => common}/Link/index.ts (100%) rename client/src/components/{ => common}/Overlay/Overlay.module.scss (100%) rename client/src/components/{ => common}/Overlay/Overlay.module.scss.d.ts (100%) rename client/src/components/{ => common}/Overlay/Overlay.test.tsx (100%) rename client/src/components/{ => common}/Overlay/Overlay.tsx (100%) rename client/src/components/{ => common}/Overlay/index.ts (100%) create mode 100644 client/src/components/common/index.ts diff --git a/client/src/components/AppBar/AppBar.tsx b/client/src/components/AppBar/AppBar.tsx index 20639701b..988b4f6e6 100644 --- a/client/src/components/AppBar/AppBar.tsx +++ b/client/src/components/AppBar/AppBar.tsx @@ -1,7 +1,8 @@ import Image from 'next/image'; import { ReactElement, useState } from 'react'; -import { Link, MenuDrawer, SearchBar } from '@/components'; +import { MenuDrawer, SearchBar } from '@/components'; +import { Link } from '@/components/common'; import { MenuDrawerItem } from '@/components/MenuDrawer/types'; import styles from './AppBar.module.scss'; diff --git a/client/src/components/MenuDrawer/MenuDrawer.tsx b/client/src/components/MenuDrawer/MenuDrawer.tsx index 49b0ba659..692f4ddf6 100644 --- a/client/src/components/MenuDrawer/MenuDrawer.tsx +++ b/client/src/components/MenuDrawer/MenuDrawer.tsx @@ -3,7 +3,7 @@ import Image from 'next/image'; import { useRef } from 'react'; import { useClickAway } from 'react-use'; -import { Link, Overlay } from '@/components'; +import { Link, Overlay } from '@/components/common'; import styles from './MenuDrawer.module.scss'; import { MenuDrawerItem } from './types'; diff --git a/client/src/components/Link/Link.test.tsx b/client/src/components/common/Link/Link.test.tsx similarity index 100% rename from client/src/components/Link/Link.test.tsx rename to client/src/components/common/Link/Link.test.tsx diff --git a/client/src/components/Link/Link.tsx b/client/src/components/common/Link/Link.tsx similarity index 100% rename from client/src/components/Link/Link.tsx rename to client/src/components/common/Link/Link.tsx diff --git a/client/src/components/Link/__snapshots__/Link.test.tsx.snap b/client/src/components/common/Link/__snapshots__/Link.test.tsx.snap similarity index 100% rename from client/src/components/Link/__snapshots__/Link.test.tsx.snap rename to client/src/components/common/Link/__snapshots__/Link.test.tsx.snap diff --git a/client/src/components/Link/index.ts b/client/src/components/common/Link/index.ts similarity index 100% rename from client/src/components/Link/index.ts rename to client/src/components/common/Link/index.ts diff --git a/client/src/components/Overlay/Overlay.module.scss b/client/src/components/common/Overlay/Overlay.module.scss similarity index 100% rename from client/src/components/Overlay/Overlay.module.scss rename to client/src/components/common/Overlay/Overlay.module.scss diff --git a/client/src/components/Overlay/Overlay.module.scss.d.ts b/client/src/components/common/Overlay/Overlay.module.scss.d.ts similarity index 100% rename from client/src/components/Overlay/Overlay.module.scss.d.ts rename to client/src/components/common/Overlay/Overlay.module.scss.d.ts diff --git a/client/src/components/Overlay/Overlay.test.tsx b/client/src/components/common/Overlay/Overlay.test.tsx similarity index 100% rename from client/src/components/Overlay/Overlay.test.tsx rename to client/src/components/common/Overlay/Overlay.test.tsx diff --git a/client/src/components/Overlay/Overlay.tsx b/client/src/components/common/Overlay/Overlay.tsx similarity index 100% rename from client/src/components/Overlay/Overlay.tsx rename to client/src/components/common/Overlay/Overlay.tsx diff --git a/client/src/components/Overlay/index.ts b/client/src/components/common/Overlay/index.ts similarity index 100% rename from client/src/components/Overlay/index.ts rename to client/src/components/common/Overlay/index.ts diff --git a/client/src/components/common/index.ts b/client/src/components/common/index.ts new file mode 100644 index 000000000..dfe590858 --- /dev/null +++ b/client/src/components/common/index.ts @@ -0,0 +1,2 @@ +export * from './Link'; +export * from './Overlay'; diff --git a/client/src/components/index.ts b/client/src/components/index.ts index 571c89d72..f7e4bf434 100644 --- a/client/src/components/index.ts +++ b/client/src/components/index.ts @@ -1,6 +1,4 @@ export * from './AppBar'; export * from './Layout'; -export * from './Link'; export * from './MenuDrawer'; -export * from './Overlay'; export * from './SearchBar'; From 92d54a5775ce329a57470d0e5fbc1bcee3a62420 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Wed, 14 Apr 2021 14:38:16 -0700 Subject: [PATCH 16/18] Changed menu close button alt --- client/src/components/MenuDrawer/MenuDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/MenuDrawer/MenuDrawer.tsx b/client/src/components/MenuDrawer/MenuDrawer.tsx index 692f4ddf6..2f47b3bdb 100644 --- a/client/src/components/MenuDrawer/MenuDrawer.tsx +++ b/client/src/components/MenuDrawer/MenuDrawer.tsx @@ -59,7 +59,7 @@ export function MenuDrawer({ items, onMenuClose, visible }: Props) {