Login signup Form components

package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.2",
     "formik": "^2.4.5",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",

src/components/Button/FormSubmitButton.js

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 
-export const FormSubmitButton = styled.button`
+const FormSubmitButton = styled.button`
   padding: 0.56rem 5.06rem;
   font-weight: 400;
-  color: #FFFFFF;
+  color: #000;
   margin-top: 10px;
-  border-radius: 0.25rem;
+  border-radius: 0.9rem;
   border: 1px solid transparent;
   font-size: 1.125rem;
   height: fit-content;
@@ -47,3 +47,5 @@ export const FormSubmitButton = styled.button`
     width: fit-content;
   }
 `;
+
+export default FormSubmitButton;

src/components/Button/TertiaryButton.js

@@ -1,9 +1,8 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
 
-export const TertiaryButton = ({ children }) => {
-  return <StyledButton>{children}</StyledButton>;
-};
+const TertiaryButton = ({ children }) => <StyledButton>{children}</StyledButton>;
 
 const StyledButton = styled.button`
   display: flex;
@@ -14,3 +13,9 @@ const StyledButton = styled.button`
   background-color: transparent;
   cursor: pointer;
 `;
+
+TertiaryButton.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default TertiaryButton;

src/components/Form/FormComponent.js

@@ -1,32 +1,48 @@
+import PropTypes from 'prop-types';
 import { Form, Formik } from 'formik';
 import styled from '@emotion/styled';
 
-
-export const FormComponent = ({
+const FormComponent = ({
   initialValues,
   schema,
   onSubmit,
   children,
   className,
-}) => {
-  return (
-    <Formik
-      initialValues={initialValues}
-      validationSchema={schema}
-      onSubmit={onSubmit}
-    >
-      <StyledForm className={className}>
-        {children}
-      </StyledForm>
-    </Formik>
-  );
+}) => (
+  <Formik
+    initialValues={initialValues}
+    validationSchema={schema}
+    onSubmit={onSubmit}
+  >
+    <StyledForm className={className}>
+      {children}
+    </StyledForm>
+  </Formik>
+);
+
+FormComponent.propTypes = {
+  initialValues: PropTypes.shape({
+    userName: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+    password: PropTypes.string.isRequired,
+    confirm_password: PropTypes.string.isRequired,
+  }).isRequired,
+  schema: PropTypes.shape({
+    userName: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+    password: PropTypes.string.isRequired,
+    confirm_password: PropTypes.string.isRequired,
+  }).isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string.isRequired,
 };
 
 const StyledForm = styled(Form)`
   border: 1px solid orange;
 
   &.flex {
-    dispaly: flex;
+    display: flex;
     width: 60%;
   }
 
@@ -35,7 +51,7 @@ const StyledForm = styled(Form)`
   }
 
   & > .margin {
-    gird-colum: span 2;
+    gird-column: span 2;
     margin-left: 15%;
     margin-right: 15%;
   }
@@ -45,3 +61,5 @@ const StyledForm = styled(Form)`
     align-items: last baseline;
   }
 `;
+
+export default FormComponent;

src/components/Form/FormField.js

@@ -1,9 +1,12 @@
-import { useField } from "formik";
-import React from 'react'
+import { useField } from 'formik';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import styled from "@emotion/styled";
+import styled from '@emotion/styled';
 
-export const SelectField = ({label, lpiSrc, rpiSrc, className, name, id, ...props}) => {
+export const SelectField = ({
+  label, lpiSrc, rpiSrc, className, name, id, ...props
+}) => {
   const [field, meta] = useField(name);
   return (
     <InputWrapper className={className}>
@@ -19,59 +22,89 @@ export const SelectField = ({label, lpiSrc, rpiSrc, className, name, id, ...prop
         <FieldErrorInfo>{meta.error}</FieldErrorInfo>
       ) : null}
     </InputWrapper>
-  )
-}
+  );
+};
 
-export const TextInputField = ({label, lpiSrc, rpiSrc, className, name, id, ...props}) => {
+SelectField.propTypes = {
+  label: PropTypes.string.isRequired,
+  lpiSrc: PropTypes.string.isRequired,
+  rpiSrc: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+};
+
+export const TextInputField = ({
+  label, lpiSrc, rpiSrc, className, name, placeholder, id, ...props
+}) => {
   const [field, meta] = useField(name);
 
-  return(
+  return (
     <InputWrapper className={className}>
       <InputLabel htmlFor={props.name || props.id}>
         {label}
       </InputLabel>
       <InputContainer>
-        <Input {...field} {...props} className={className ? className : ''} />
+        <Input {...field} {...props} className={className || ''} placeholder={placeholder} />
         {lpiSrc ? <LeftPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
         {lpiSrc ? <RightPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
       </InputContainer>
       {meta.touched && meta.error ? (
         <FieldErrorInfo>{meta.error}</FieldErrorInfo>
       ) : null}
     </InputWrapper>
-  )
-}
+  );
+};
+
+TextInputField.propTypes = {
+  label: PropTypes.string.isRequired,
+  lpiSrc: PropTypes.string.isRequired,
+  rpiSrc: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+};
 
 export const TextAreaInputField = ({
-    label,
-    lpiSrc,
-    rpiSrc,
-    className,
-    name,
-    id,
-    ...props
-  }) => {
-    const [field, meta] = useField(name);
-
-    return (
-      <InputWrapper className={className}>
-        <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
-        <InputContainer>
-          <TextArea
-            {...field}
-            {...props}
-            className={className ? className : ''}
-            rows={10}
-          />
-          {lpiSrc ? <LeftPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
-          {rpiSrc ? <RightPlaceHolderCardIcon alt="icon" src={rpiSrc} /> : null}
-        </InputContainer>
-        {meta.touched && meta.error ? (
-          <FieldErrorInfo>{meta.error}</FieldErrorInfo>
-        ) : null}
-      </InputWrapper>
-    );
-  };
+  label,
+  lpiSrc,
+  rpiSrc,
+  className,
+  name,
+  id,
+  ...props
+}) => {
+  const [field, meta] = useField(name);
+
+  return (
+    <InputWrapper className={className}>
+      <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
+      <InputContainer>
+        <TextArea
+          {...field}
+          {...props}
+          className={className || ''}
+          rows={10}
+        />
+        {lpiSrc ? <LeftPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
+        {rpiSrc ? <RightPlaceHolderCardIcon alt="icon" src={rpiSrc} /> : null}
+      </InputContainer>
+      {meta.touched && meta.error ? (
+        <FieldErrorInfo>{meta.error}</FieldErrorInfo>
+      ) : null}
+    </InputWrapper>
+  );
+};
+
+TextAreaInputField.propTypes = {
+  label: PropTypes.string.isRequired,
+  lpiSrc: PropTypes.string.isRequired,
+  rpiSrc: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+};
 
 export const InputWrapper = styled.div`
   width: 100%;

src/components/Form/HideableTextFormField.js

@@ -1,20 +1,20 @@
 import { useField } from 'formik';
 import { useState } from 'react';
+import PropTypes from 'prop-types';
 
 import styled from '@emotion/styled';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 import {
   FieldErrorInfo,
-  IInputField,
   Input,
   InputContainer,
   InputLabel,
   InputWrapper,
 } from './FormField';
 
-export const HideableTextFormField = ({
+const HideableTextFormField = ({
   label,
   lpiSrc,
   rpiSrc,
@@ -24,9 +24,8 @@ export const HideableTextFormField = ({
   // apiKey,
   ...props
 }) => {
-  const [field, meta] = useField(props);
+  const [field, meta] = useField(name);
   const [showKey, setShowKey] = useState(false);
-
   const handleToggle = () => {
     setShowKey(!showKey);
   };
@@ -59,9 +58,21 @@ export const HideableTextFormField = ({
   );
 };
 
+HideableTextFormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  lpiSrc: PropTypes.string.isRequired,
+  rpiSrc: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  // apiKey: PropTypes.string,
+};
+
 const VisibiltyToggleIconsArea = styled.div`
   display: flex;
   margin-right: 1rem;
   margin-left: auto;
   margin-top: 0.75rem;
-`;
+`;
+
+export default HideableTextFormField;

src/components/Img/IconImg.js

@@ -1,15 +1,12 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
 
-const IconImg = ({ src }) => {
-  return (
-    <ImageContainer>
-      <Img loading="lazy" src={src} alt="user" />
-    </ImageContainer>
-  );
-};
-
-export default IconImg;
+const IconImg = ({ src }) => (
+  <ImageContainer>
+    <Img loading="lazy" src={src} alt="user" />
+  </ImageContainer>
+);
 
 const ImageContainer = styled.div`
   /* border: 2px solid red; */
@@ -23,3 +20,9 @@ const Img = styled.img`
   object-fit: cover;
   object-position: center;
 `;
+
+IconImg.propTypes = {
+  src: PropTypes.string.isRequired,
+};
+
+export default IconImg;

src/components/Img/Img.js

@@ -1,12 +1,17 @@
+import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import React from 'react';
 
-const Img = ({ src, alt, className }) => {
-  return <Imgg className={className} loading="lazy" src={src} alt={alt} decoding="async" />;
-};
-
-export default Img;
+const Img = ({ src, alt, className }) => <Imgg className={className} loading="lazy" src={src} alt={alt} decoding="async" />;
 
 const Imgg = styled.img`
 width: 100%;
 `;
+
+Img.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+};
+
+export default Img;