From d03b211595af00bb57bf8d7357c8595025bfe995 Mon Sep 17 00:00:00 2001 From: andres Date: Sat, 29 Jul 2023 20:06:25 +0200 Subject: [PATCH] in progress --- package.json | 6 +- pnpm-lock.yaml | 241 ++++++++++++++++++ src/components/auth/index.ts | 1 + src/components/auth/login-form/index.ts | 1 + .../auth/login-form/login-form.stories.tsx | 14 + src/components/auth/login-form/login-form.tsx | 51 ++++ src/components/index.ts | 1 + src/components/ui/checkbox/checkbox.tsx | 6 +- .../controlled-checkbox.tsx | 36 +++ .../controlled/controlled-checkbox/index.ts | 1 + src/components/ui/controlled/index.ts | 1 + src/components/ui/index.ts | 2 + 12 files changed, 357 insertions(+), 4 deletions(-) create mode 100644 src/components/auth/index.ts create mode 100644 src/components/auth/login-form/index.ts create mode 100644 src/components/auth/login-form/login-form.stories.tsx create mode 100644 src/components/auth/login-form/login-form.tsx create mode 100644 src/components/ui/controlled/controlled-checkbox/controlled-checkbox.tsx create mode 100644 src/components/ui/controlled/controlled-checkbox/index.ts create mode 100644 src/components/ui/controlled/index.ts diff --git a/package.json b/package.json index 9c67231..0c4e51a 100644 --- a/package.json +++ b/package.json @@ -14,13 +14,17 @@ }, "dependencies": { "@fontsource/roboto": "^5.0.5", + "@hookform/resolvers": "^3.1.1", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-label": "^2.0.2", "clsx": "^2.0.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-hook-form": "^7.45.2", + "zod": "^3.21.4" }, "devDependencies": { + "@hookform/devtools": "^4.3.1", "@it-incubator/eslint-config": "^0.1.3", "@it-incubator/prettier-config": "^0.1.2", "@it-incubator/stylelint-config": "^0.1.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c9e14e9..0e8e3be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@fontsource/roboto': specifier: ^5.0.5 version: 5.0.5 + '@hookform/resolvers': + specifier: ^3.1.1 + version: 3.1.1(react-hook-form@7.45.2) '@radix-ui/react-checkbox': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0) @@ -23,8 +26,17 @@ dependencies: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-hook-form: + specifier: ^7.45.2 + version: 7.45.2(react@18.2.0) + zod: + specifier: ^3.21.4 + version: 3.21.4 devDependencies: + '@hookform/devtools': + specifier: ^4.3.1 + version: 4.3.1(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0) '@it-incubator/eslint-config': specifier: ^0.1.3 version: 0.1.3(prettier@3.0.0)(typescript@5.0.2) @@ -1496,6 +1508,106 @@ packages: engines: {node: '>=10.0.0'} dev: true + /@emotion/babel-plugin@11.11.0: + resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} + dependencies: + '@babel/helper-module-imports': 7.22.5 + '@babel/runtime': 7.22.6 + '@emotion/hash': 0.9.1 + '@emotion/memoize': 0.8.1 + '@emotion/serialize': 1.1.2 + babel-plugin-macros: 3.1.0 + convert-source-map: 1.9.0 + escape-string-regexp: 4.0.0 + find-root: 1.1.0 + source-map: 0.5.7 + stylis: 4.2.0 + dev: true + + /@emotion/cache@11.11.0: + resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==} + dependencies: + '@emotion/memoize': 0.8.1 + '@emotion/sheet': 1.2.2 + '@emotion/utils': 1.2.1 + '@emotion/weak-memoize': 0.3.1 + stylis: 4.2.0 + dev: true + + /@emotion/hash@0.9.1: + resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} + dev: true + + /@emotion/is-prop-valid@1.2.1: + resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} + dependencies: + '@emotion/memoize': 0.8.1 + dev: true + + /@emotion/memoize@0.8.1: + resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + dev: true + + /@emotion/react@11.11.1(@types/react@18.2.15)(react@18.2.0): + resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==} + peerDependencies: + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.6 + '@emotion/babel-plugin': 11.11.0 + '@emotion/cache': 11.11.0 + '@emotion/serialize': 1.1.2 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) + '@emotion/utils': 1.2.1 + '@emotion/weak-memoize': 0.3.1 + '@types/react': 18.2.15 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + dev: true + + /@emotion/serialize@1.1.2: + resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==} + dependencies: + '@emotion/hash': 0.9.1 + '@emotion/memoize': 0.8.1 + '@emotion/unitless': 0.8.1 + '@emotion/utils': 1.2.1 + csstype: 3.1.2 + dev: true + + /@emotion/sheet@1.2.2: + resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} + dev: true + + /@emotion/styled@11.11.0(@emotion/react@11.11.1)(@types/react@18.2.15)(react@18.2.0): + resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==} + peerDependencies: + '@emotion/react': ^11.0.0-rc.0 + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.6 + '@emotion/babel-plugin': 11.11.0 + '@emotion/is-prop-valid': 1.2.1 + '@emotion/react': 11.11.1(@types/react@18.2.15)(react@18.2.0) + '@emotion/serialize': 1.1.2 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) + '@emotion/utils': 1.2.1 + '@types/react': 18.2.15 + react: 18.2.0 + dev: true + + /@emotion/unitless@0.8.1: + resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} + dev: true + /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0): resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==} peerDependencies: @@ -1504,6 +1616,14 @@ packages: react: 18.2.0 dev: true + /@emotion/utils@1.2.1: + resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} + dev: true + + /@emotion/weak-memoize@0.3.1: + resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==} + dev: true + /@esbuild/android-arm64@0.18.17: resolution: {integrity: sha512-9np+YYdNDed5+Jgr1TdWBsozZ85U1Oa3xW0c7TWqH0y2aGghXtZsuT8nYRbzOMcl0bXZXjOGbksoTtVOlWrRZg==} engines: {node: '>=12'} @@ -1747,6 +1867,34 @@ packages: resolution: {integrity: sha512-IMXFq5AMgGx0sgNLfwWsmPuy3qa7lmDmQcXXihqwF4mT2UpD725cbxZj93ERY793OWon+6V1ANax02I3nt9+4w==} dev: false + /@hookform/devtools@4.3.1(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-CrWxEoHQZaOXJZVQ8KBgOuAa8p2LI8M0DAN5GTRTmdCieRwFVjVDEmuTAVazWVRRkpEQSgSt3KYp7VmmqXdEnw==} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + react-dom: ^16.8.0 || ^17 || ^18 + dependencies: + '@emotion/react': 11.11.1(@types/react@18.2.15)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.15)(react@18.2.0) + '@types/lodash': 4.14.196 + little-state-machine: 4.8.0(react@18.2.0) + lodash: 4.17.21 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-simple-animate: 3.5.2(react-dom@18.2.0) + use-deep-compare-effect: 1.8.1(react@18.2.0) + uuid: 8.3.2 + transitivePeerDependencies: + - '@types/react' + dev: true + + /@hookform/resolvers@3.1.1(react-hook-form@7.45.2): + resolution: {integrity: sha512-tS16bAUkqjITNSvbJuO1x7MXbn7Oe8ZziDTJdA9mMvsoYthnOOiznOTGBYwbdlYBgU+tgpI/BtTU3paRbCuSlg==} + peerDependencies: + react-hook-form: ^7.0.0 + dependencies: + react-hook-form: 7.45.2(react@18.2.0) + dev: false + /@humanwhocodes/config-array@0.11.10: resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} engines: {node: '>=10.10.0'} @@ -3324,6 +3472,10 @@ packages: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} dev: true + /@types/parse-json@4.0.0: + resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==} + dev: true + /@types/pretty-hrtime@1.0.1: resolution: {integrity: sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==} dev: true @@ -3935,6 +4087,15 @@ packages: - supports-color dev: true + /babel-plugin-macros@3.1.0: + resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} + engines: {node: '>=10', npm: '>=6'} + dependencies: + '@babel/runtime': 7.22.6 + cosmiconfig: 7.1.0 + resolve: 1.22.2 + dev: true + /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.22.9): resolution: {integrity: sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==} peerDependencies: @@ -4392,6 +4553,17 @@ packages: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: true + /cosmiconfig@7.1.0: + resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} + engines: {node: '>=10'} + dependencies: + '@types/parse-json': 4.0.0 + import-fresh: 3.3.0 + parse-json: 5.2.0 + path-type: 4.0.0 + yaml: 1.10.2 + dev: true + /cosmiconfig@8.2.0: resolution: {integrity: sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==} engines: {node: '>=14'} @@ -5403,6 +5575,10 @@ packages: pkg-dir: 4.2.0 dev: true + /find-root@1.1.0: + resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==} + dev: true + /find-up@3.0.0: resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==} engines: {node: '>=6'} @@ -5811,6 +5987,12 @@ packages: function-bind: 1.1.1 dev: true + /hoist-non-react-statics@3.3.2: + resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + dependencies: + react-is: 16.13.1 + dev: true + /hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} dev: true @@ -6482,6 +6664,14 @@ packages: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true + /little-state-machine@4.8.0(react@18.2.0): + resolution: {integrity: sha512-xfi5+iDxTLhu0hbnNubUs+qoQQqxhtEZeObP5ELjUlHnl74bbasY7mOonsGQrAouyrbag3ebNLSse5xX1T7buQ==} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + dependencies: + react: 18.2.0 + dev: true + /locate-path@3.0.0: resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==} engines: {node: '>=6'} @@ -7541,6 +7731,15 @@ packages: react-is: 18.1.0 dev: true + /react-hook-form@7.45.2(react@18.2.0): + resolution: {integrity: sha512-9s45OdTaKN+4NSTbXVqeDITd/nwIg++nxJGL8+OD5uf1DxvhsXQ641kaYHk5K28cpIOTYm71O/fYk7rFaygb3A==} + engines: {node: '>=12.22.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + dependencies: + react: 18.2.0 + dev: false + /react-inspector@6.0.2(react@18.2.0): resolution: {integrity: sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==} peerDependencies: @@ -7566,6 +7765,14 @@ packages: engines: {node: '>=0.10.0'} dev: true + /react-simple-animate@3.5.2(react-dom@18.2.0): + resolution: {integrity: sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==} + peerDependencies: + react-dom: ^16.8.0 || ^17 || ^18 + dependencies: + react-dom: 18.2.0(react@18.2.0) + dev: true + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -8033,6 +8240,11 @@ packages: source-map: 0.6.1 dev: true + /source-map@0.5.7: + resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} + engines: {node: '>=0.10.0'} + dev: true + /source-map@0.6.1: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} @@ -8397,6 +8609,10 @@ packages: - supports-color dev: true + /stylis@4.2.0: + resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} + dev: true + /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -8837,6 +9053,17 @@ packages: punycode: 2.3.0 dev: true + /use-deep-compare-effect@1.8.1(react@18.2.0): + resolution: {integrity: sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==} + engines: {node: '>=10', npm: '>=6'} + peerDependencies: + react: '>=16.13' + dependencies: + '@babel/runtime': 7.22.6 + dequal: 2.0.3 + react: 18.2.0 + dev: true + /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==} peerDependencies: @@ -8867,6 +9094,11 @@ packages: engines: {node: '>= 0.4.0'} dev: true + /uuid@8.3.2: + resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} + hasBin: true + dev: true + /uuid@9.0.0: resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==} hasBin: true @@ -9110,6 +9342,11 @@ packages: resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} dev: true + /yaml@1.10.2: + resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} + engines: {node: '>= 6'} + dev: true + /yargs-parser@20.2.9: resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==} engines: {node: '>=10'} @@ -9139,3 +9376,7 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} dev: true + + /zod@3.21.4: + resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==} + dev: false diff --git a/src/components/auth/index.ts b/src/components/auth/index.ts new file mode 100644 index 0000000..4807c6f --- /dev/null +++ b/src/components/auth/index.ts @@ -0,0 +1 @@ +export * from './login-form' \ No newline at end of file diff --git a/src/components/auth/login-form/index.ts b/src/components/auth/login-form/index.ts new file mode 100644 index 0000000..4807c6f --- /dev/null +++ b/src/components/auth/login-form/index.ts @@ -0,0 +1 @@ +export * from './login-form' \ No newline at end of file diff --git a/src/components/auth/login-form/login-form.stories.tsx b/src/components/auth/login-form/login-form.stories.tsx new file mode 100644 index 0000000..a67bab6 --- /dev/null +++ b/src/components/auth/login-form/login-form.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { LoginForm } from './login-form' + +const meta = { + title: 'Auth/LoginForm', + component: LoginForm, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Primary: Story = {} diff --git a/src/components/auth/login-form/login-form.tsx b/src/components/auth/login-form/login-form.tsx new file mode 100644 index 0000000..c48c9b2 --- /dev/null +++ b/src/components/auth/login-form/login-form.tsx @@ -0,0 +1,51 @@ +import { DevTool } from '@hookform/devtools' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import { z } from 'zod' + +import { Button, TextField } from '@/components' +import { ControlledCheckbox } from '@/components/ui/controlled/controlled-checkbox' + +const loginSchema = z.object({ + email: z.string().email(), + password: z + .string() + .nonempty('Password is required') + .min(3, 'Password must be at least 3 characters'), + rememberMe: z.boolean().default(false), +}) + +export type LoginFormSchema = z.infer +export const LoginForm = () => { + const { + register, + handleSubmit, + control, + formState: { errors }, + } = useForm({ + resolver: zodResolver(loginSchema), + mode: 'onSubmit', + }) + + const onSubmit = (data: LoginFormSchema) => { + console.log(data) + } + + return ( +
+ {/*rhf dev tool*/} + + {/*rhf dev tool*/} + + + + + + + + ) +} diff --git a/src/components/index.ts b/src/components/index.ts index ed58495..8d7ccf9 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,2 @@ export * from './ui' +export * from './auth' \ No newline at end of file diff --git a/src/components/ui/checkbox/checkbox.tsx b/src/components/ui/checkbox/checkbox.tsx index b833184..9e5f357 100644 --- a/src/components/ui/checkbox/checkbox.tsx +++ b/src/components/ui/checkbox/checkbox.tsx @@ -12,7 +12,7 @@ import { Typography } from '@/components' export type CheckboxProps = { className?: string checked?: boolean - onChange?: (checked: boolean) => void + onValueChange?: (checked: boolean) => void disabled?: boolean required?: boolean label?: string @@ -22,7 +22,7 @@ export type CheckboxProps = { export const Checkbox: FC = ({ checked, - onChange, + onValueChange, position, disabled, required, @@ -46,7 +46,7 @@ export const Checkbox: FC = ({ = UseControllerProps & + Omit + +export const ControlledCheckbox = ({ + name, + rules, + shouldUnregister, + control, + defaultValue, + ...checkboxProps +}: Props) => { + const { + field: { onChange, value }, + } = useController({ + name, + rules, + shouldUnregister, + control, + defaultValue, + }) + + return ( + + ) +} diff --git a/src/components/ui/controlled/controlled-checkbox/index.ts b/src/components/ui/controlled/controlled-checkbox/index.ts new file mode 100644 index 0000000..3071eb5 --- /dev/null +++ b/src/components/ui/controlled/controlled-checkbox/index.ts @@ -0,0 +1 @@ +export * from './controlled-checkbox' diff --git a/src/components/ui/controlled/index.ts b/src/components/ui/controlled/index.ts new file mode 100644 index 0000000..3071eb5 --- /dev/null +++ b/src/components/ui/controlled/index.ts @@ -0,0 +1 @@ +export * from './controlled-checkbox' diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 92e7644..fe3aa12 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -2,3 +2,5 @@ export * from './button' export * from './card' export * from './typography' export * from './checkbox' +export * from './text-field' +export * from './controlled'