use Formik, add validation

.nvmrc

@@ -0,0 +1 @@
+12.15.0

package.json

@@ -6,12 +6,15 @@
     "@react-pdf/renderer": "^1.6.8",
     "@rehooks/local-storage": "^2.3.0",
     "date-format": "^3.0.0",
+    "file-saver": "^2.0.2",
+    "formik": "^2.1.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-input-autosize": "^2.2.2",
     "react-scripts": "3.4.1",
     "react-signature-canvas": "^1.0.3",
-    "styled-components": "^5.0.1"
+    "styled-components": "^5.0.1",
+    "yup": "^0.28.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/FormControls.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { useField } from "formik";
+import styled from "styled-components";
+
+import { color, spacing } from "../helpers/constants";
+
+import TextField from "./TextField";
+
+export const FTF = props => {
+  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
+  // which we can spread on <input> and also replace ErrorMessage entirely.
+  const [field, meta] = useField(props);
+  return <TextField hasError={Boolean(meta.touched && meta.error)} {...field} {...props} />;
+};
+
+const Input = styled.input`
+  visibility: hidden;
+  position: absolute;
+`;
+
+const Label = styled.label`
+  display: block;
+  cursor: pointer;
+  margin-bottom: ${spacing.small};
+`;
+
+const Checkbox = styled(({ hasError, ...props }) => <span {...props} />)`
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  border: 1px solid;
+  border-color: ${({ hasError }) => (hasError ? color.red : color.black)};
+  margin-right: ${spacing.small};
+  background-color: ${({ checked }) => (checked ? color.black : color.white)};
+`;
+
+export const FCK = ({ children, hasError, ...props }) => {
+  const [field, meta] = useField({ ...props, type: "checkbox" });
+  return (
+    <>
+      <Label style={{ border: hasError ? "1px solid red" : "" }}>
+        <Checkbox hasError={Boolean(meta.touched && meta.error)} checked={field.checked} />
+        <Input type="checkbox" {...field} {...props} />
+        {children}
+      </Label>
+    </>
+  );
+};

src/components/TextField.js

@@ -1,18 +1,20 @@
+import React from 'react';
 import AutosizeInput from "react-input-autosize";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
 import { color, width, fontWeight, borderRadius } from "../helpers/constants";
 
-const TextField = styled(AutosizeInput)`
+const TextField = styled(({ hasError, ...props }) => <AutosizeInput {...props} />)`
   margin: 0 2px 0 5px;
   input {
     padding: 5px 10px;
     text-transform: uppercase;
     font-weight: ${fontWeight.bold};
-    border: 1px solid ${color.black};
+    border: 1px solid;
     border-radius: ${borderRadius.small};
     min-width: ${({ size }) => width[size]};
+    border-color: ${({ hasError }) => (hasError ? color.red : color.black)};
   }
 `;
 

src/helpers/constants.js

@@ -1,6 +1,7 @@
 export const color = {
   white: "#ffffff",
   black: "#000000",
+  red: "#FF0000"
 };
 
 export const spacing = {

src/helpers/validator.js

@@ -0,0 +1,28 @@
+import * as Yup from "yup";
+
+export const schema = Yup.object().shape({
+  nume: Yup.string().required("required"),
+  adresa_localitate: Yup.string().required("required"),
+  adresa_judet: Yup.string().required("required"),
+  cnp: Yup.string().required("required"),
+  ci_seria: Yup.string().required("required"),
+  interval_orar: Yup.string().required("required"),
+  traseu_start: Yup.string().required("required"),
+  traseu_sfarsit: Yup.string().required("required"),
+  situatie_urgenta: Yup.string().when(["deplasare_urgenta"], { is: true, then: Yup.string().required() }),
+  checkboxes_are_valid: Yup.bool().when(
+    [
+      "deplasare_servici",
+      "deplasare_consult",
+      "deplasare_cumparaturi",
+      "deplasare_ajutor",
+      "deplasare_scurta",
+      "deplasare_animale",
+      "deplasare_urgenta",
+    ],
+    {
+      is: false,
+      then: Yup.bool().oneOf([true], "Field must be checked"),
+    },
+  ),
+});