PolishDevCom · staszekz · Mar 14, 2021 · Mar 20, 2021 · Mar 20, 2021 · Mar 23, 2021
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,11 +18,13 @@
     "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",
     "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/src/components/Form/Form.styled.tsx 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;
+`;
diff --git a/frontend/src/components/Form/Form.tsx 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 = () => (
+  <StyledForm>
+    <Input
+      label="name"
+      placeholder="name"
+      withError={false}
+      disabled={true}
+      errorMessage=""
+    />
+    <Input
+      label="surname"
+      placeholder="surname"
+      withError={false}
+      disabled={false}
+      errorMessage=""
+    />
+    <Input
+      label="e-mail"
+      placeholder="e-mail"
+      disabled={false}
+      withError={true}
+      errorMessage="enter proper e-mail address"
+    />
+  </StyledForm>
+);
+
+export default Form;
diff --git a/frontend/src/components/Input/Input.styled.tsx 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
@@ -0,0 +1,51 @@
+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 = ({
+  disabled,
+  label,
+  withError,
+  placeholder,
+  errorMessage,
+}: Props) => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const handleInputChange = (e: { target: { value: string } }) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <StyledInputWrapper>
+      <StyledLabel
+        disabled={disabled}
+        htmlFor={placeholder}
+        withError={withError}
+      >
+        {label}
+      </StyledLabel>
+      <StyledInput
+        placeholder={placeholder}
+        id={placeholder}
+        disabled={disabled}
+        withError={withError}
+        value={inputValue}
+        onChange={handleInputChange}
+      />
+      {withError && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}
+    </StyledInputWrapper>
+  );
+};
+
+export default Input;
diff --git 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 = () => {
       <Typography.Body>
         Edit <code>pages/App.tsx</code> and save to test HMR updates.
       </Typography.Body>
-
       <WelcomeImage
         alt=""
         src="https://media.giphy.com/media/YcFOfbeTcHtVS/giphy.gif"
       />
 
+      <Form />
+
+
       <Typography.Body>
         Project bootstraped with{' '}
         <Typography.Body

diff --git 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"
@@ -3188,6 +3215,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"
@@ -3756,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"
@@ -4024,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"