From a3e1e48f28431b9f6423a88afbc1ef80341fac7d Mon Sep 17 00:00:00 2001 From: Staszek Zajaczkowski Date: Sun, 14 Mar 2021 21:08:48 +0100 Subject: [PATCH 1/4] reack-hook-form added --- frontend/package.json | 1 + frontend/yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index 0dcd8b3..049a279 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "date-fns": "^2.17.0", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-hook-form": "^6.15.4", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "redux": "^4.0.5", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index ed794d3..bebeb7d 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3188,6 +3188,11 @@ react-dom@^17.0.1: object-assign "^4.1.1" scheduler "^0.20.1" +react-hook-form@^6.15.4: + version "6.15.4" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.4.tgz#328003e1ccc096cd158899ffe7e3b33735a9b024" + integrity sha512-K+Sw33DtTMengs8OdqFJI3glzNl1wBzSefD/ksQw/hJf9CnOHQAU6qy82eOrh0IRNt2G53sjr7qnnw1JDjvx1w== + react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From de35b6a686f1fec1b58b2e82d00183797378ed6d Mon Sep 17 00:00:00 2001 From: Staszek Zajaczkowski Date: Sat, 20 Mar 2021 18:30:59 +0100 Subject: [PATCH 2/4] frontend: added yup for better form validation --- frontend/package.json | 3 ++- frontend/yarn.lock | 45 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 049a279..1f0f0a9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,7 +23,8 @@ "react-router-dom": "^5.2.0", "redux": "^4.0.5", "reselect": "^4.0.0", - "styled-components": "^5.2.1" + "styled-components": "^5.2.1", + "yup": "^0.32.9" }, "devDependencies": { "@testing-library/react": "^11.0.0", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index bebeb7d..cc9f1ed 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -217,6 +217,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.10.5": + version "7.13.10" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" + integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.12.13": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" @@ -544,6 +551,11 @@ "@types/koa-compose" "*" "@types/node" "*" +"@types/lodash@^4.14.165": + version "4.14.168" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" + integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== + "@types/mime@^1": version "1.3.2" resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a" @@ -2615,6 +2627,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash-es@^4.17.15: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.camelcase@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" @@ -2761,6 +2778,11 @@ ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== +nanoclone@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4" + integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA== + nanoid@^3.1.20: version "3.1.20" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788" @@ -3118,6 +3140,11 @@ prop-types@^15.6.2, prop-types@^15.7.2: object-assign "^4.1.1" react-is "^16.8.1" +property-expr@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910" + integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg== + proxy-from-env@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" @@ -3761,6 +3788,11 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== +toposort@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" + integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA= + tr46@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479" @@ -4029,3 +4061,16 @@ ylru@^1.2.0: version "1.2.1" resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f" integrity sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ== + +yup@^0.32.9: + version "0.32.9" + resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.9.tgz#9367bec6b1b0e39211ecbca598702e106019d872" + integrity sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg== + dependencies: + "@babel/runtime" "^7.10.5" + "@types/lodash" "^4.14.165" + lodash "^4.17.20" + lodash-es "^4.17.15" + nanoclone "^0.2.1" + property-expr "^2.0.4" + toposort "^2.0.2" From 1f63d62ad3ff99c95472f2f41cffda5bb97acecc Mon Sep 17 00:00:00 2001 From: Staszek Zajaczkowski Date: Sat, 20 Mar 2021 20:50:40 +0100 Subject: [PATCH 3/4] added input and form components - first look ' --- frontend/src/components/Form/Form.styled.tsx | 10 ++++ frontend/src/components/Form/Form.tsx | 31 +++++++++++ .../src/components/Input/Input.styled.tsx | 43 +++++++++++++++ frontend/src/components/Input/Input.tsx | 52 +++++++++++++++++++ frontend/src/pages/Home.tsx | 5 +- 5 files changed, 140 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/Form/Form.styled.tsx create mode 100644 frontend/src/components/Form/Form.tsx create mode 100644 frontend/src/components/Input/Input.styled.tsx create mode 100644 frontend/src/components/Input/Input.tsx diff --git a/frontend/src/components/Form/Form.styled.tsx b/frontend/src/components/Form/Form.styled.tsx new file mode 100644 index 0000000..013f8cc --- /dev/null +++ b/frontend/src/components/Form/Form.styled.tsx @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +export const StyledForm = styled.form` +width: 293px; +height: 247px; +display: flex; +flex-direction: column; +justify-content: space-evenly; +align-items: center; +`; \ No newline at end of file diff --git a/frontend/src/components/Form/Form.tsx b/frontend/src/components/Form/Form.tsx new file mode 100644 index 0000000..231fc79 --- /dev/null +++ b/frontend/src/components/Form/Form.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import Input from '../Input/Input'; +import { StyledForm } from './Form.styled'; + +const Form: React.FC = () => ( + + + + + +); + +export default Form; + diff --git a/frontend/src/components/Input/Input.styled.tsx b/frontend/src/components/Input/Input.styled.tsx new file mode 100644 index 0000000..37365b1 --- /dev/null +++ b/frontend/src/components/Input/Input.styled.tsx @@ -0,0 +1,43 @@ +import styled from 'styled-components'; + +export const StyledInputWrapper = styled.div` + width: 90%; + display: flex; + flex-direction: column; +`; + +export const StyledInput = styled.input` + width: 90%; + height: 36px; + border: ${(props) => + props.withError ? '1px solid #F53314' : '1px solid #272727'}; + border-radius: 6px; + padding-left: 5.2%; + + &:disabled { + border: 1px solid #d1d1d1; + } + &::placeholder { + color: #d1d1d1; + } +`; + +export const StyledLabel = styled.label` + font-size: 10px; + margin-bottom: 2%; + ${(props) => { + if (props.withError) { + return `color: #9C1B07`; + } + if (props.disabled) { + return `color: #D1D1D1`; + } + return `color: black`; + }} +`; + +export const StyledErrorMessage = styled.div` + width: 100%; + color: #9c1b07; + font-size: 10px; +`; diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx new file mode 100644 index 0000000..1293b46 --- /dev/null +++ b/frontend/src/components/Input/Input.tsx @@ -0,0 +1,52 @@ +import React, {useState} from 'react'; +import { + StyledInput, + StyledInputWrapper, + StyledLabel, + StyledErrorMessage, +} from './Input.styled'; + +interface Props { + disabled: boolean; + label: string; + withError: boolean; + placeholder: string; + errorMessage: string; +} + +const Input: React.FC = ({ + disabled, + label, + withError, + placeholder, + errorMessage, +}) => { + +const [inputValue, setInputValue] = useState('') +const handleInputChange = (e: { target: { value: string; } }) => { + setInputValue(e.target.value) +} + + return ( + + + {label} + + + {withError && {errorMessage}} + + ); +} + +export default Input; diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 1ee77e9..175c4c0 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -8,6 +8,7 @@ import { import { useInterval } from '../hooks/useInterval'; import { DefaultLayout } from '../components/Layout/DefaultLayout'; import { Typography } from '../components/Typography/Typography'; +import Form from '../components/Form/Form'; export const Home = () => { const dispatch = useAppDispatch(); @@ -31,12 +32,14 @@ export const Home = () => { Edit pages/App.tsx and save to test HMR updates. - +
+ + Project bootstraped with{' '} Date: Tue, 23 Mar 2021 21:33:55 +0100 Subject: [PATCH 4/4] removed React.FC from components, and added type to useState hook --- frontend/src/components/Form/Form.tsx | 42 +++++++++++----------- frontend/src/components/Input/Input.tsx | 47 ++++++++++++------------- 2 files changed, 44 insertions(+), 45 deletions(-) diff --git a/frontend/src/components/Form/Form.tsx b/frontend/src/components/Form/Form.tsx index 231fc79..646326f 100644 --- a/frontend/src/components/Form/Form.tsx +++ b/frontend/src/components/Form/Form.tsx @@ -2,30 +2,30 @@ import React from 'react'; import Input from '../Input/Input'; import { StyledForm } from './Form.styled'; -const Form: React.FC = () => ( +const Form = () => ( - - + label="name" + placeholder="name" + withError={false} + disabled={true} + errorMessage="" + /> + + ); export default Form; - diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx index 1293b46..f862eda 100644 --- a/frontend/src/components/Input/Input.tsx +++ b/frontend/src/components/Input/Input.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; import { StyledInput, StyledInputWrapper, @@ -14,39 +14,38 @@ interface Props { errorMessage: string; } -const Input: React.FC = ({ +const Input = ({ disabled, label, withError, placeholder, errorMessage, -}) => { - -const [inputValue, setInputValue] = useState('') -const handleInputChange = (e: { target: { value: string; } }) => { - setInputValue(e.target.value) -} +}: Props) => { + const [inputValue, setInputValue] = useState(''); + const handleInputChange = (e: { target: { value: string } }) => { + setInputValue(e.target.value); + }; return ( - - {label} - - + - {withError && {errorMessage}} - + {withError && {errorMessage}} + ); -} +}; export default Input;