From 5e0ad73c4454705db9cc23a30b2d1eee4e97be2b Mon Sep 17 00:00:00 2001 From: Kellar Date: Tue, 16 Jul 2024 15:39:54 +0100 Subject: [PATCH 01/10] Add styled calendar component --- package-lock.json | 162 ++++++++++++++++- package.json | 1 + src/assets/css/Calendar.css | 172 ++++++++++++++++++ .../theme/colors/color.styles.tokens.json | 4 + src/components/ui/utils/DecentDatePicker.tsx | 60 ++++++ 5 files changed, 395 insertions(+), 4 deletions(-) create mode 100644 src/assets/css/Calendar.css create mode 100644 src/components/ui/utils/DecentDatePicker.tsx diff --git a/package-lock.json b/package-lock.json index fc2296c84..65f4c0097 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,6 +53,7 @@ "lodash.isequal": "^4.5.0", "moralis": "^2.26.3", "react": "^18.2.0", + "react-calendar": "^5.0.0", "react-dom": "^18.2.0", "react-i18next": "^13.5.0", "react-idle-timer": "^5.5.3", @@ -13412,6 +13413,14 @@ "tslib": "^2.3.1" } }, + "node_modules/@wojtekmaj/date-utils": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz", + "integrity": "sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==", + "funding": { + "url": "https://github.com/wojtekmaj/date-utils?sponsor=1" + } + }, "node_modules/@wry/context": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.0.tgz", @@ -13602,6 +13611,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "peer": true, "dependencies": { "debug": "4" }, @@ -13613,6 +13623,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", + "peer": true, "dependencies": { "clean-stack": "^2.0.0", "indent-string": "^4.0.0" @@ -14367,6 +14378,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", + "peer": true, "dependencies": { "buffer": "^5.5.0", "inherits": "^2.0.4", @@ -14391,6 +14403,7 @@ "url": "https://feross.org/support" } ], + "peer": true, "dependencies": { "base64-js": "^1.3.1", "ieee754": "^1.1.13" @@ -14564,7 +14577,8 @@ "node_modules/buffer-from": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", - "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "peer": true }, "node_modules/buffer-xor": { "version": "1.0.3", @@ -15067,6 +15081,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", + "peer": true, "engines": { "node": ">=6" } @@ -15075,6 +15090,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", + "peer": true, "dependencies": { "restore-cursor": "^3.1.0" }, @@ -15086,6 +15102,7 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz", "integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==", + "peer": true, "engines": { "node": ">=6" }, @@ -15330,6 +15347,7 @@ "version": "9.5.0", "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "peer": true, "engines": { "node": "^12.20.0 || >=14" } @@ -15488,6 +15506,7 @@ "version": "0.4.2", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "peer": true, "engines": { "node": ">= 0.6" } @@ -15822,6 +15841,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==", + "peer": true, "dependencies": { "clone": "^1.0.2" }, @@ -15833,6 +15853,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==", + "peer": true, "engines": { "node": ">=0.8" } @@ -15914,6 +15935,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "peer": true, "engines": { "node": ">= 0.8" } @@ -16252,6 +16274,7 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "peer": true, "engines": { "node": ">=6" } @@ -16260,6 +16283,7 @@ "version": "7.8.1", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==", + "peer": true, "bin": { "envinfo": "dist/cli.js" }, @@ -16947,6 +16971,7 @@ "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "peer": true, "engines": { "node": ">= 0.6" } @@ -17252,6 +17277,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", + "peer": true, "dependencies": { "cross-spawn": "^6.0.0", "get-stream": "^4.0.0", @@ -17269,6 +17295,7 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", + "peer": true, "dependencies": { "nice-try": "^1.0.4", "path-key": "^2.0.1", @@ -17284,6 +17311,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==", + "peer": true, "engines": { "node": ">=4" } @@ -17292,6 +17320,7 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "peer": true, "bin": { "semver": "bin/semver" } @@ -17300,6 +17329,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==", + "peer": true, "dependencies": { "shebang-regex": "^1.0.0" }, @@ -17311,6 +17341,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -17319,6 +17350,7 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "peer": true, "dependencies": { "isexe": "^2.0.0" }, @@ -18172,6 +18204,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "peer": true, "dependencies": { "pump": "^3.0.0" }, @@ -18196,6 +18229,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-user-locale": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-2.3.2.tgz", + "integrity": "sha512-O2GWvQkhnbDoWFUJfaBlDIKUEdND8ATpBXD6KXcbhxlfktyD/d8w6mkzM/IlQEqGZAMz/PW6j6Hv53BiigKLUQ==", + "dependencies": { + "mem": "^8.0.0" + }, + "funding": { + "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1" + } + }, "node_modules/get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -18800,6 +18844,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "peer": true, "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", @@ -18815,6 +18860,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "peer": true, "engines": { "node": ">= 0.8" } @@ -18857,6 +18903,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", + "peer": true, "dependencies": { "agent-base": "6", "debug": "4" @@ -19410,6 +19457,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", + "peer": true, "engines": { "node": ">=8" } @@ -19550,6 +19598,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -19614,6 +19663,7 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", + "peer": true, "engines": { "node": ">=10" }, @@ -20979,6 +21029,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==", + "peer": true, "dependencies": { "chalk": "^4.1.0", "is-unicode-supported": "^0.1.0" @@ -21133,6 +21184,17 @@ "tmpl": "1.0.5" } }, + "node_modules/map-age-cleaner": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz", + "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==", + "dependencies": { + "p-defer": "^1.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/map-cache": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", @@ -21388,6 +21450,29 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mem": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz", + "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==", + "dependencies": { + "map-age-cleaner": "^0.1.3", + "mimic-fn": "^3.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sindresorhus/mem?sponsor=1" + } + }, + "node_modules/mem/node_modules/mimic-fn": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz", + "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/memoize-one": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", @@ -22677,6 +22762,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", + "peer": true, "engines": { "node": ">=6" } @@ -39012,7 +39098,8 @@ "node_modules/nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", - "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==" + "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", + "peer": true }, "node_modules/no-case": { "version": "3.0.4", @@ -39127,6 +39214,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==", + "peer": true, "dependencies": { "path-key": "^2.0.0" }, @@ -39138,6 +39226,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==", + "peer": true, "engines": { "node": ">=4" } @@ -39507,6 +39596,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", + "peer": true, "dependencies": { "mimic-fn": "^2.1.0" }, @@ -39563,6 +39653,7 @@ "version": "5.4.1", "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==", + "peer": true, "dependencies": { "bl": "^4.1.0", "chalk": "^4.1.0", @@ -39590,10 +39681,19 @@ "node": ">=0.10.0" } }, + "node_modules/p-defer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", + "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==", + "engines": { + "node": ">=4" + } + }, "node_modules/p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==", + "peer": true, "engines": { "node": ">=4" } @@ -39630,6 +39730,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", + "peer": true, "dependencies": { "aggregate-error": "^3.0.0" }, @@ -40392,6 +40493,7 @@ "version": "2.5.2", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", + "peer": true, "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", @@ -40406,6 +40508,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "peer": true, "engines": { "node": ">= 0.8" } @@ -40414,6 +40517,7 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3" }, @@ -40432,6 +40536,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-calendar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-5.0.0.tgz", + "integrity": "sha512-bHcE5e5f+VUKLd4R19BGkcSQLpuwjKBVG0fKz74cwPW5xDfNsReHdDbfd4z3mdjuUuZzVtw4Q920mkwK5/ZOEg==", + "dependencies": { + "@wojtekmaj/date-utils": "^1.1.3", + "clsx": "^2.0.0", + "get-user-locale": "^2.2.1", + "warning": "^4.0.0" + }, + "funding": { + "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-calendar/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/react-clientside-effect": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz", @@ -41213,6 +41349,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==", + "peer": true, "dependencies": { "onetime": "^5.1.0", "signal-exit": "^3.0.2" @@ -41814,7 +41951,8 @@ "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", - "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", + "peer": true }, "node_modules/sha.js": { "version": "2.4.11", @@ -41896,7 +42034,8 @@ "node_modules/signal-exit": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", - "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", + "peer": true }, "node_modules/signedsource": { "version": "1.0.0", @@ -42303,6 +42442,7 @@ "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "peer": true, "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -42312,6 +42452,7 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -42693,6 +42834,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -43106,6 +43248,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "peer": true, "engines": { "node": ">=0.6" } @@ -43731,6 +43874,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "peer": true, "engines": { "node": ">= 0.8" } @@ -45261,10 +45405,19 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==", + "peer": true, "dependencies": { "defaults": "^1.0.3" } @@ -45605,6 +45758,7 @@ "version": "2.4.3", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz", "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==", + "peer": true, "dependencies": { "graceful-fs": "^4.1.11", "imurmurhash": "^0.1.4", diff --git a/package.json b/package.json index c4fc02dc7..028a58daa 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "lodash.isequal": "^4.5.0", "moralis": "^2.26.3", "react": "^18.2.0", + "react-calendar": "^5.0.0", "react-dom": "^18.2.0", "react-i18next": "^13.5.0", "react-idle-timer": "^5.5.3", diff --git a/src/assets/css/Calendar.css b/src/assets/css/Calendar.css new file mode 100644 index 000000000..f222fcb9b --- /dev/null +++ b/src/assets/css/Calendar.css @@ -0,0 +1,172 @@ +.react-calendar { + width: 350px; + max-width: 100%; + background: var(--Neutral-2, #221d25); + border-radius: var(--Small, 0.5rem) var(--Small, 0.5rem) 0rem 0rem; + border: 0; + font-family: 'TT Firs Neue Variable'; + box-shadow: + 0px 0px 0px 1px #100414, + 0px 0px 0px 1px rgba(248, 244, 252, 0.04) inset, + 0px 1px 0px 0px rgba(248, 244, 252, 0.04) inset; +} + +.react-calendar--doubleView { + width: 700px; +} + +.react-calendar--doubleView .react-calendar__viewContainer { + display: flex; + margin: -0.5em; +} + +.react-calendar--doubleView .react-calendar__viewContainer > * { + width: 50%; + margin: 0.5em; +} + +.react-calendar, +.react-calendar *, +.react-calendar *:before, +.react-calendar *:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.react-calendar button { + margin: 0; + border: 0; + outline: none; + font-size: 0.875rem; +} + +.react-calendar button:enabled:hover { + cursor: pointer; +} + +.react-calendar__navigation { + display: flex; + height: 44px; + margin-bottom: 1em; +} + +.react-calendar__navigation button { + min-width: 44px; + background: var(--Neutral-2); + display: flex; + justify-content: center; + align-items: center; + border-radius: 0.5rem; +} + +.react-calendar__navigation button:disabled { + background-color: var(--Neutral-2); + color: #524f55; +} + +.react-calendar__navigation button:enabled:focus { + background-color: var(--Neutral-2); +} + +.react-calendar__navigation button:enabled:hover { + background: var(--Neutral-3, #2e2833); + border-radius: 0.5rem; +} + +.react-calendar__month-view__weekdays { + text-decoration: dotted double none; + text-align: center; + text-transform: capitalize; + text-underline-offset: 2rem; + font-size: 0.75rem; + color: #9ea8b3; +} + +.react-calendar__month-view__weekdays__weekday { + padding: 0.5em; +} +/* +.react-calendar__month-view__days__day--weekend { + color: #d10000; +} */ + +.react-calendar__month-view__days__day--neighboringMonth, +.react-calendar__decade-view__years__year--neighboringDecade, +.react-calendar__century-view__decades__decade--neighboringCentury { + color: #8f8796; +} + +.react-calendar__year-view .react-calendar__tile, +.react-calendar__decade-view .react-calendar__tile, +.react-calendar__century-view .react-calendar__tile { + padding: 2em 0.5em; +} + +.react-calendar__tile { + height: 2.5rem; + width: 2.5rem; + max-width: 100%; + padding: 10px 6.6667px; + background: none; + text-align: center; + line-height: 16px; + font: inherit; + font-size: 0.833em; +} + +.react-calendar__tile:disabled { + background-color: #221d25; + color: #524f55; + cursor: not-allowed; +} + +.react-calendar__month-view__days__day--neighboringMonth:disabled, +.react-calendar__decade-view__years__year--neighboringDecade:disabled, +.react-calendar__century-view__decades__decade--neighboringCentury:disabled { + color: #524f55; +} + +.react-calendar__tile:enabled:hover, +.react-calendar__tile:enabled:focus { + background-color: #221d25; +} + +.react-calendar__tile--now { + /* background: #ffff76; */ +} + +.react-calendar__tile--now:enabled:hover, +.react-calendar__tile--now:enabled:focus { + /* background: #ffffa9; */ +} + +.react-calendar__tile--hasActive { + border-radius: 0.5rem; + background: #dcc8f0; + color: #501464; +} + +.react-calendar__tile--hasActive:enabled:hover, +.react-calendar__tile--hasActive:enabled:focus { + border-radius: 0.5rem; + background: #dcc8f0; + color: #501464; +} + +.react-calendar__tile--active { + border-radius: 0.5rem; + background: #dcc8f0; + color: #501464; +} + +.react-calendar__tile--active:enabled:hover, +.react-calendar__tile--active:enabled:focus { + border-radius: 0.5rem; + background: #dcc8f0; + color: #501464; +} + +.react-calendar--selectRange .react-calendar__tile--hover { + background-color: #e6e6e6; +} diff --git a/src/assets/theme/colors/color.styles.tokens.json b/src/assets/theme/colors/color.styles.tokens.json index 0dbd5b158..cac18dd41 100644 --- a/src/assets/theme/colors/color.styles.tokens.json +++ b/src/assets/theme/colors/color.styles.tokens.json @@ -243,6 +243,10 @@ "0": { "$type": "color", "$value": "#f8f4fc" + }, + "1": { + "$type": "color", + "$value": "#D9D9D9" } }, "White Alpha": { diff --git a/src/components/ui/utils/DecentDatePicker.tsx b/src/components/ui/utils/DecentDatePicker.tsx new file mode 100644 index 000000000..39fa73421 --- /dev/null +++ b/src/components/ui/utils/DecentDatePicker.tsx @@ -0,0 +1,60 @@ +import { Box, Icon } from '@chakra-ui/react'; +import { CaretLeft, CaretRight } from '@phosphor-icons/react'; + +import { Calendar } from 'react-calendar'; +import '../../../assets/css/Calendar.css'; + +interface DecentDatePickerProps { + minDate?: Date; +} + +export function DecentDatePicker({ minDate }: DecentDatePickerProps) { + const isToday = (someDate: Date) => { + const today = new Date(); + return ( + someDate.getDate() === today.getDate() && + someDate.getMonth() === today.getMonth() && + someDate.getFullYear() === today.getFullYear() + ); + }; + + return ( + + date.toString().slice(0, 2)} + minDate={minDate || new Date()} + prevLabel={ + + } + nextLabel={ + + } + next2Label={null} + prev2Label={null} + tileContent={({ date }) => + isToday(date) ? ( + + ) : null + } + onChange={e => { + console.log(e); + }} + /> + + ); +} From 19716854cc0fcf91522f1ea87842ba500cc489af Mon Sep 17 00:00:00 2001 From: Kellar Date: Tue, 16 Jul 2024 15:48:25 +0100 Subject: [PATCH 02/10] Tighten up calendar styles, cleanup unused --- src/assets/css/Calendar.css | 49 +++++--------------- src/components/ui/utils/DecentDatePicker.tsx | 33 ++++++------- 2 files changed, 28 insertions(+), 54 deletions(-) diff --git a/src/assets/css/Calendar.css b/src/assets/css/Calendar.css index f222fcb9b..1a152fa0b 100644 --- a/src/assets/css/Calendar.css +++ b/src/assets/css/Calendar.css @@ -11,20 +11,6 @@ 0px 1px 0px 0px rgba(248, 244, 252, 0.04) inset; } -.react-calendar--doubleView { - width: 700px; -} - -.react-calendar--doubleView .react-calendar__viewContainer { - display: flex; - margin: -0.5em; -} - -.react-calendar--doubleView .react-calendar__viewContainer > * { - width: 50%; - margin: 0.5em; -} - .react-calendar, .react-calendar *, .react-calendar *:before, @@ -39,6 +25,7 @@ border: 0; outline: none; font-size: 0.875rem; + border-radius: 0.5rem; } .react-calendar button:enabled:hover { @@ -58,6 +45,7 @@ justify-content: center; align-items: center; border-radius: 0.5rem; + color: #dcc8f0; } .react-calendar__navigation button:disabled { @@ -75,10 +63,10 @@ } .react-calendar__month-view__weekdays { - text-decoration: dotted double none; + text-decoration: none; + text-underline-offset: 2rem; text-align: center; text-transform: capitalize; - text-underline-offset: 2rem; font-size: 0.75rem; color: #9ea8b3; } @@ -86,10 +74,6 @@ .react-calendar__month-view__weekdays__weekday { padding: 0.5em; } -/* -.react-calendar__month-view__days__day--weekend { - color: #d10000; -} */ .react-calendar__month-view__days__day--neighboringMonth, .react-calendar__decade-view__years__year--neighboringDecade, @@ -101,6 +85,9 @@ .react-calendar__decade-view .react-calendar__tile, .react-calendar__century-view .react-calendar__tile { padding: 2em 0.5em; + display: flex; + align-items: center; + justify-content: center; } .react-calendar__tile { @@ -127,46 +114,32 @@ color: #524f55; } -.react-calendar__tile:enabled:hover, -.react-calendar__tile:enabled:focus { - background-color: #221d25; -} - -.react-calendar__tile--now { - /* background: #ffff76; */ +.react-calendar__tile:enabled:hover { + background: var(--Neutral-3); } -.react-calendar__tile--now:enabled:hover, -.react-calendar__tile--now:enabled:focus { - /* background: #ffffa9; */ +.react-calendar__tile:enabled:focus { + background-color: #221d25; } .react-calendar__tile--hasActive { - border-radius: 0.5rem; background: #dcc8f0; color: #501464; } .react-calendar__tile--hasActive:enabled:hover, .react-calendar__tile--hasActive:enabled:focus { - border-radius: 0.5rem; background: #dcc8f0; color: #501464; } .react-calendar__tile--active { - border-radius: 0.5rem; background: #dcc8f0; color: #501464; } .react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus { - border-radius: 0.5rem; background: #dcc8f0; color: #501464; } - -.react-calendar--selectRange .react-calendar__tile--hover { - background-color: #e6e6e6; -} diff --git a/src/components/ui/utils/DecentDatePicker.tsx b/src/components/ui/utils/DecentDatePicker.tsx index 39fa73421..d65abe677 100644 --- a/src/components/ui/utils/DecentDatePicker.tsx +++ b/src/components/ui/utils/DecentDatePicker.tsx @@ -1,14 +1,19 @@ import { Box, Icon } from '@chakra-ui/react'; import { CaretLeft, CaretRight } from '@phosphor-icons/react'; - +import { useState } from 'react'; import { Calendar } from 'react-calendar'; + import '../../../assets/css/Calendar.css'; interface DecentDatePickerProps { minDate?: Date; + onChange?: (date: Date) => void; } -export function DecentDatePicker({ minDate }: DecentDatePickerProps) { +type DateOrNull = Date | null; +type OnDateChangeValue = DateOrNull | [DateOrNull, DateOrNull]; + +export function DecentDatePicker({ minDate, onChange }: DecentDatePickerProps) { const isToday = (someDate: Date) => { const today = new Date(); return ( @@ -18,6 +23,8 @@ export function DecentDatePicker({ minDate }: DecentDatePickerProps) { ); }; + const [selectedDate, setSelectedDate] = useState(); + return ( date.toString().slice(0, 2)} minDate={minDate || new Date()} - prevLabel={ - - } - nextLabel={ - - } + prevLabel={} + nextLabel={} next2Label={null} prev2Label={null} tileContent={({ date }) => isToday(date) ? ( ) : null } - onChange={e => { + onChange={(e: OnDateChangeValue) => { console.log(e); + if (e instanceof Date) { + setSelectedDate(e); + onChange?.(e); + } }} /> From fdcfa6183392817b5354503b0a882d3117ddabb3 Mon Sep 17 00:00:00 2001 From: Kellar Date: Tue, 16 Jul 2024 16:40:36 +0100 Subject: [PATCH 03/10] Further tuning; remove box shadow on mobile --- src/assets/css/Calendar.css | 8 ++------ src/components/ui/utils/DecentDatePicker.tsx | 7 ++++++- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/assets/css/Calendar.css b/src/assets/css/Calendar.css index 1a152fa0b..db8f3a7e3 100644 --- a/src/assets/css/Calendar.css +++ b/src/assets/css/Calendar.css @@ -1,14 +1,10 @@ .react-calendar { - width: 350px; + /* width: 350px; */ max-width: 100%; background: var(--Neutral-2, #221d25); - border-radius: var(--Small, 0.5rem) var(--Small, 0.5rem) 0rem 0rem; + border-radius: 0.5rem; border: 0; font-family: 'TT Firs Neue Variable'; - box-shadow: - 0px 0px 0px 1px #100414, - 0px 0px 0px 1px rgba(248, 244, 252, 0.04) inset, - 0px 1px 0px 0px rgba(248, 244, 252, 0.04) inset; } .react-calendar, diff --git a/src/components/ui/utils/DecentDatePicker.tsx b/src/components/ui/utils/DecentDatePicker.tsx index d65abe677..fbcf3b80b 100644 --- a/src/components/ui/utils/DecentDatePicker.tsx +++ b/src/components/ui/utils/DecentDatePicker.tsx @@ -1,9 +1,10 @@ -import { Box, Icon } from '@chakra-ui/react'; +import { Box, Icon, useBreakpointValue } from '@chakra-ui/react'; import { CaretLeft, CaretRight } from '@phosphor-icons/react'; import { useState } from 'react'; import { Calendar } from 'react-calendar'; import '../../../assets/css/Calendar.css'; +import { CARD_SHADOW, SEXY_BOX_SHADOW_T_T } from '../../../constants/common'; interface DecentDatePickerProps { minDate?: Date; @@ -25,10 +26,14 @@ export function DecentDatePicker({ minDate, onChange }: DecentDatePickerProps) { const [selectedDate, setSelectedDate] = useState(); + const boxShadow = useBreakpointValue({ base: 'none', md: SEXY_BOX_SHADOW_T_T }); + return ( date.toString().slice(0, 2)} From 87b3e93e46b4a9dc63378374d0d798046920c0fd Mon Sep 17 00:00:00 2001 From: Kellar Date: Wed, 17 Jul 2024 11:29:34 +0100 Subject: [PATCH 04/10] Payroll no longer coming soon. IT IS HERE (but still WIP) --- .../pages/Roles/forms/RoleFormTabs.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx index b5cd5f754..a090925b6 100644 --- a/src/components/pages/Roles/forms/RoleFormTabs.tsx +++ b/src/components/pages/Roles/forms/RoleFormTabs.tsx @@ -93,22 +93,17 @@ export default function RoleFormTabs({ hatId, push }: { hatId: Hex; push: (obj: }; }, [existingRoleHat, isRoleNameUpdated, isRoleDescriptionUpdated, isMemberUpdated]); - const payrollTabContainerRef = useRef(null); const vestingTabContainerRef = useRef(null); if (!daoAddress) return null; - function ComingSoonTooltip({ - children, - type, - }: { + function ComingSoonTooltip({children}: { children: ReactNode; - type: 'payroll' | 'vesting'; }) { - if (payrollTabContainerRef || vestingTabContainerRef) { + if (vestingTabContainerRef) { return ( @@ -137,20 +132,18 @@ export default function RoleFormTabs({ hatId, push }: { hatId: Hex; push: (obj: {t('roleInfo')} - - + {t('payroll')} - - + Date: Wed, 17 Jul 2024 15:37:16 +0100 Subject: [PATCH 05/10] Wire up datepicker --- src/assets/css/Calendar.css | 4 -- .../pages/Roles/forms/RoleFormPayroll.tsx | 64 +++++++++++++++---- src/components/pages/Roles/types.tsx | 2 +- src/components/ui/utils/DecentDatePicker.tsx | 1 + 4 files changed, 53 insertions(+), 18 deletions(-) diff --git a/src/assets/css/Calendar.css b/src/assets/css/Calendar.css index db8f3a7e3..150e58908 100644 --- a/src/assets/css/Calendar.css +++ b/src/assets/css/Calendar.css @@ -91,10 +91,6 @@ width: 2.5rem; max-width: 100%; padding: 10px 6.6667px; - background: none; - text-align: center; - line-height: 16px; - font: inherit; font-size: 0.833em; } diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx index aa2f6e6cb..685a9cc45 100644 --- a/src/components/pages/Roles/forms/RoleFormPayroll.tsx +++ b/src/components/pages/Roles/forms/RoleFormPayroll.tsx @@ -19,6 +19,7 @@ import { } from '@chakra-ui/react'; import { ArrowUpRight, + CalendarBlank, CaretDown, CaretUp, CheckCircle, @@ -27,7 +28,7 @@ import { Plus, } from '@phosphor-icons/react'; import { Field, FieldProps, useFormikContext } from 'formik'; -import { useRef } from 'react'; +import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CARD_SHADOW, TOOLTIP_MAXW } from '../../../../constants/common'; import { useFractal } from '../../../../providers/App/AppProvider'; @@ -37,6 +38,7 @@ import { BigIntInput } from '../../../ui/forms/BigIntInput'; import LabelWrapper from '../../../ui/forms/LabelWrapper'; import ExternalLink from '../../../ui/links/ExternalLink'; import ModalTooltip from '../../../ui/modals/ModalTooltip'; +import { DecentDatePicker } from '../../../ui/utils/DecentDatePicker'; import Divider from '../../../ui/utils/Divider'; import { EaseOutComponent } from '../../../ui/utils/EaseOutComponent'; import { RoleFormValues, frequencyAmountLabel, frequencyOptions } from '../types'; @@ -373,21 +375,57 @@ function FrequencySelector() { } function PaymentStartDatePicker() { - // @todo implement date picker - const { t } = useTranslation(['roles']); + const { t } = useTranslation(['common']); + + const { setFieldValue, values } = useFormikContext(); + + const [showDatePicker, setShowDatePicker] = useState(false); + + const selectedDate = values.roleEditing?.payroll?.paymentStartDate; + const selectedDateStr = + selectedDate && + `${selectedDate.getUTCFullYear()}-${selectedDate.getMonth() < 9 ? '0' : ''}${selectedDate.getMonth() + 1}-${selectedDate.getDate() < 10 ? '0' : ''}${selectedDate.getDate()}`; + return ( - + {({ field }: FieldProps) => ( - } - > - ''} - /> - + + <> + setShowDatePicker(!showDatePicker)} + > + + + {selectedDateStr ?? t('select')} + + + + { + console.log(date); + setFieldValue(field.name, date); + }} + /> + + + )} diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx index 420102caf..3290d930c 100644 --- a/src/components/pages/Roles/types.tsx +++ b/src/components/pages/Roles/types.tsx @@ -91,7 +91,7 @@ export interface RoleFormPayrollValue { }; amount: BigIntValuePair; paymentFrequency: string; - paymentStartDate: string; + paymentStartDate: Date; paymentFrequencyNumber: number; } diff --git a/src/components/ui/utils/DecentDatePicker.tsx b/src/components/ui/utils/DecentDatePicker.tsx index fbcf3b80b..1286173cb 100644 --- a/src/components/ui/utils/DecentDatePicker.tsx +++ b/src/components/ui/utils/DecentDatePicker.tsx @@ -34,6 +34,7 @@ export function DecentDatePicker({ minDate, onChange }: DecentDatePickerProps) { justifySelf="center" borderRadius="0.5rem" boxShadow={boxShadow} + maxW="26.875rem" > date.toString().slice(0, 2)} From 9ae361994e3189fb44f12875ffd7ed1925556fce Mon Sep 17 00:00:00 2001 From: Kellar Date: Wed, 17 Jul 2024 15:47:52 +0100 Subject: [PATCH 06/10] Fix payroll frequency ticker --- .../pages/Roles/forms/RoleFormPayroll.tsx | 22 ++++++++++--------- .../pages/Roles/forms/RoleFormTabs.tsx | 16 ++++++-------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx index 685a9cc45..a112adb2e 100644 --- a/src/components/pages/Roles/forms/RoleFormPayroll.tsx +++ b/src/components/pages/Roles/forms/RoleFormPayroll.tsx @@ -432,7 +432,7 @@ function PaymentStartDatePicker() { ); } -function PaymentFrequencyAmount() { +function PaymentFrequency() { const { t } = useTranslation(['roles']); return ( @@ -442,6 +442,7 @@ function PaymentFrequencyAmount() { const frequencyLabel = !!paymentFrequency ? t(frequencyAmountLabel[paymentFrequency]) : ''; + return ( } onClick={() => { - if (field.value === undefined || Number(field.value) <= 0) return; + if (field.value === undefined || Number(field.value) <= 1) return; setFieldValue(field.name, Number(field.value) - 1); }} /> - - { - setFieldValue(field.name, field.value); - }} - /> + { + setFieldValue(field.name, field.value); + }} + > + - + )} diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx index a090925b6..645ff0cc8 100644 --- a/src/components/pages/Roles/forms/RoleFormTabs.tsx +++ b/src/components/pages/Roles/forms/RoleFormTabs.tsx @@ -97,9 +97,7 @@ export default function RoleFormTabs({ hatId, push }: { hatId: Hex; push: (obj: if (!daoAddress) return null; - function ComingSoonTooltip({children}: { - children: ReactNode; - }) { + function ComingSoonTooltip({ children }: { children: ReactNode }) { if (vestingTabContainerRef) { return ( {t('roleInfo')} - - {t('payroll')} - + + {t('payroll')} + From b9d81c58bf865da51d8a0b663ea7c1e77b9138c2 Mon Sep 17 00:00:00 2001 From: Kellar Date: Wed, 17 Jul 2024 20:02:28 +0100 Subject: [PATCH 07/10] cleanup --- src/components/pages/Roles/forms/RoleFormPayroll.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx index a112adb2e..27dac3145 100644 --- a/src/components/pages/Roles/forms/RoleFormPayroll.tsx +++ b/src/components/pages/Roles/forms/RoleFormPayroll.tsx @@ -27,13 +27,14 @@ import { Minus, Plus, } from '@phosphor-icons/react'; +import { format } from 'date-fns'; import { Field, FieldProps, useFormikContext } from 'formik'; -import { useRef, useState } from 'react'; +import { useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { CARD_SHADOW, TOOLTIP_MAXW } from '../../../../constants/common'; import { useFractal } from '../../../../providers/App/AppProvider'; import { BigIntValuePair } from '../../../../types'; -import { formatUSD } from '../../../../utils'; +import { DEFAULT_DATE_FORMAT, formatUSD } from '../../../../utils'; import { BigIntInput } from '../../../ui/forms/BigIntInput'; import LabelWrapper from '../../../ui/forms/LabelWrapper'; import ExternalLink from '../../../ui/links/ExternalLink'; @@ -379,12 +380,8 @@ function PaymentStartDatePicker() { const { setFieldValue, values } = useFormikContext(); - const [showDatePicker, setShowDatePicker] = useState(false); - const selectedDate = values.roleEditing?.payroll?.paymentStartDate; - const selectedDateStr = - selectedDate && - `${selectedDate.getUTCFullYear()}-${selectedDate.getMonth() < 9 ? '0' : ''}${selectedDate.getMonth() + 1}-${selectedDate.getDate() < 10 ? '0' : ''}${selectedDate.getDate()}`; + const selectedDateStr = selectedDate && format(selectedDate, DEFAULT_DATE_FORMAT); return ( @@ -397,7 +394,6 @@ function PaymentStartDatePicker() { variant="unstyled" p="0" w="full" - onClick={() => setShowDatePicker(!showDatePicker)} > Date: Wed, 17 Jul 2024 20:03:15 +0100 Subject: [PATCH 08/10] Fix payment frequency ticker input not registering manual changes --- src/components/pages/Roles/forms/RoleFormPayroll.tsx | 7 +++---- src/components/ui/utils/DecentDatePicker.tsx | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx index 27dac3145..633258891 100644 --- a/src/components/pages/Roles/forms/RoleFormPayroll.tsx +++ b/src/components/pages/Roles/forms/RoleFormPayroll.tsx @@ -428,6 +428,7 @@ function PaymentStartDatePicker() { ); } +// @todo @dev is this frequency or period??? function PaymentFrequency() { const { t } = useTranslation(['roles']); return ( @@ -464,10 +465,8 @@ function PaymentFrequency() { /> { - setFieldValue(field.name, field.value); - }} + value={values.roleEditing?.payroll?.paymentFrequencyNumber} + onChange={(value: string) => setFieldValue(field.name, Number(value))} > diff --git a/src/components/ui/utils/DecentDatePicker.tsx b/src/components/ui/utils/DecentDatePicker.tsx index 1286173cb..4f401c3a9 100644 --- a/src/components/ui/utils/DecentDatePicker.tsx +++ b/src/components/ui/utils/DecentDatePicker.tsx @@ -2,9 +2,9 @@ import { Box, Icon, useBreakpointValue } from '@chakra-ui/react'; import { CaretLeft, CaretRight } from '@phosphor-icons/react'; import { useState } from 'react'; import { Calendar } from 'react-calendar'; +import { SEXY_BOX_SHADOW_T_T } from '../../../constants/common'; import '../../../assets/css/Calendar.css'; -import { CARD_SHADOW, SEXY_BOX_SHADOW_T_T } from '../../../constants/common'; interface DecentDatePickerProps { minDate?: Date; From 6d63bf4ab42bbe41818138d94d3bd8c2f97b3024 Mon Sep 17 00:00:00 2001 From: Kellar Date: Wed, 17 Jul 2024 20:03:57 +0100 Subject: [PATCH 09/10] Wrap up payroll validation --- src/hooks/schemas/roles/useRolesSchema.ts | 17 ++++++++++++----- src/i18n/locales/en/roles.json | 3 +++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/hooks/schemas/roles/useRolesSchema.ts b/src/hooks/schemas/roles/useRolesSchema.ts index fba078899..0800d1e5d 100644 --- a/src/hooks/schemas/roles/useRolesSchema.ts +++ b/src/hooks/schemas/roles/useRolesSchema.ts @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import * as Yup from 'yup'; -import { RoleFormPayrollValue, RoleValue } from '../../../components/pages/Roles/types'; +import { Frequency, RoleFormPayrollValue, RoleValue } from '../../../components/pages/Roles/types'; import { useValidationAddress } from '../common/useValidationAddress'; export const useRolesSchema = () => { @@ -34,7 +34,6 @@ export const useRolesSchema = () => { address: Yup.string(), symbol: Yup.string(), decimals: Yup.number(), - logo: Yup.string(), balance: Yup.string(), }), amount: Yup.object() @@ -58,9 +57,17 @@ export const useRolesSchema = () => { return (v.bigintValue as bigint) <= BigInt(balance); }, }), - paymentFrequency: Yup.string(), - paymentStartData: Yup.date(), - paymentFrequencyNumber: Yup.number(), + paymentFrequency: Yup.string().oneOf([ + Frequency.Monthly.toString(), + Frequency.EveryTwoWeeks.toString(), + Frequency.Weekly.toString(), + ]).required(t('roleInfoErrorPaymentFrequencyRequired')), + paymentStartDate: Yup.date().required( + t('roleInfoErrorPaymentStartDateRequired'), + ), + paymentFrequencyNumber: Yup.number().required( + t('roleInfoErrorPaymentFrequencyNumberRequired'), + ), }), }), }), diff --git a/src/i18n/locales/en/roles.json b/src/i18n/locales/en/roles.json index 04163d4c9..a43047bb1 100644 --- a/src/i18n/locales/en/roles.json +++ b/src/i18n/locales/en/roles.json @@ -39,6 +39,9 @@ "roleInfoErrorDescriptionRequired": "Role description is required.", "roleInfoErrorMemberRequired": "Role member is required.", "roleInfoErrorAmountInvalid": "Invalid amount.", + "roleInfoErrorPaymentStartDateRequired": "Payment start date is required.", + "roleInfoErrorPaymentFrequencyRequired": "Select a payment frequency.", + "roleInfoErrorPaymentFrequencyNumberRequired": "Payment frequency is required.", "monthly": "Monthly", "everyTwoWeeks": "Every Two Weeks", "weekly": "Weekly", From 0b8275a206c83144a7c65508fdb77e9f2b5ad8b6 Mon Sep 17 00:00:00 2001 From: Kellar Date: Wed, 17 Jul 2024 20:38:00 +0100 Subject: [PATCH 10/10] Use drawer for mobile datepicker --- .../pages/Roles/forms/RoleFormPayroll.tsx | 95 ++++++++++++------- .../ui/containers/DraggableDrawer.tsx | 1 + src/components/ui/utils/DecentDatePicker.tsx | 3 +- src/hooks/schemas/roles/useRolesSchema.ts | 12 ++- 4 files changed, 71 insertions(+), 40 deletions(-) diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx index 633258891..e663ef0fb 100644 --- a/src/components/pages/Roles/forms/RoleFormPayroll.tsx +++ b/src/components/pages/Roles/forms/RoleFormPayroll.tsx @@ -15,6 +15,7 @@ import { MenuList, NumberInput, NumberInputField, + Show, Text, } from '@chakra-ui/react'; import { @@ -29,12 +30,13 @@ import { } from '@phosphor-icons/react'; import { format } from 'date-fns'; import { Field, FieldProps, useFormikContext } from 'formik'; -import { useRef } from 'react'; +import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CARD_SHADOW, TOOLTIP_MAXW } from '../../../../constants/common'; import { useFractal } from '../../../../providers/App/AppProvider'; import { BigIntValuePair } from '../../../../types'; import { DEFAULT_DATE_FORMAT, formatUSD } from '../../../../utils'; +import DraggableDrawer from '../../../ui/containers/DraggableDrawer'; import { BigIntInput } from '../../../ui/forms/BigIntInput'; import LabelWrapper from '../../../ui/forms/LabelWrapper'; import ExternalLink from '../../../ui/links/ExternalLink'; @@ -383,45 +385,70 @@ function PaymentStartDatePicker() { const selectedDate = values.roleEditing?.payroll?.paymentStartDate; const selectedDateStr = selectedDate && format(selectedDate, DEFAULT_DATE_FORMAT); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + + function DatePickerTrigger() { + return ( + + + {selectedDateStr ?? t('select')} + + ); + } + return ( {({ field }: FieldProps) => ( - - <> - + + + + + + {}} + onClose={() => setIsDrawerOpen(false)} + > + setFieldValue(field.name, date)} /> + + + + + + <> + + + + + setFieldValue(field.name, date)} /> + + + + + )} diff --git a/src/components/ui/containers/DraggableDrawer.tsx b/src/components/ui/containers/DraggableDrawer.tsx index 7a4b459bb..2d49dd184 100644 --- a/src/components/ui/containers/DraggableDrawer.tsx +++ b/src/components/ui/containers/DraggableDrawer.tsx @@ -96,6 +96,7 @@ export default function DraggableDrawer({ onClose(); }} size="md" + onOverlayClick={onClose} > (); const boxShadow = useBreakpointValue({ base: 'none', md: SEXY_BOX_SHADOW_T_T }); + const maxBoxW = useBreakpointValue({ base: '100%', md: '26.875rem' }); return ( date.toString().slice(0, 2)} diff --git a/src/hooks/schemas/roles/useRolesSchema.ts b/src/hooks/schemas/roles/useRolesSchema.ts index 0800d1e5d..c56f8375b 100644 --- a/src/hooks/schemas/roles/useRolesSchema.ts +++ b/src/hooks/schemas/roles/useRolesSchema.ts @@ -57,11 +57,13 @@ export const useRolesSchema = () => { return (v.bigintValue as bigint) <= BigInt(balance); }, }), - paymentFrequency: Yup.string().oneOf([ - Frequency.Monthly.toString(), - Frequency.EveryTwoWeeks.toString(), - Frequency.Weekly.toString(), - ]).required(t('roleInfoErrorPaymentFrequencyRequired')), + paymentFrequency: Yup.string() + .oneOf([ + Frequency.Monthly.toString(), + Frequency.EveryTwoWeeks.toString(), + Frequency.Weekly.toString(), + ]) + .required(t('roleInfoErrorPaymentFrequencyRequired')), paymentStartDate: Yup.date().required( t('roleInfoErrorPaymentStartDateRequired'), ),