Dependencies upgraded ex.Tailwind (cuz v2 forms), yup array require fixed

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 react-formik-tailwind-labwork.code-workspace
 src/assets/styles/.index.css
+.eslintcache

features/support/config.js → features/config.js

@@ -1,8 +1,8 @@
 module.exports = {
     port: 8989,
 
-    //headless: false,
+    headless: false,
     slowMo: 0,
 
-    close: true,
+    //close: true,
 };

features/hooks.js

@@ -1,7 +1,7 @@
 /*eslint no-console: ["error", { allow: ["log"] }] */
 // Dependencies
 const { After, Before, AfterAll } = require('@cucumber/cucumber');
-const config = require('./support/config');
+const config = require('./config');
 const scope = require('./support/scope');
 
 // Here is where you might clean up database tables to have a clean slate before the tests run

features/support/actions.js

@@ -1,4 +1,4 @@
-const config = require('./config');
+const config = require('../config');
 const assert = require('assert');
 const scope = require('./scope');
 const pages = require('./pages');

features/world.js

@@ -1,4 +1,4 @@
-const config = require('./support/config');
+const config = require('./config');
 const { setWorldConstructor } = require('@cucumber/cucumber');
 const puppeteer = require('puppeteer');
 const scope = require('./support/scope');

package.json

@@ -7,16 +7,16 @@
     "@tailwindcss/custom-forms": "^0.2.1",
     "formik": "^2.1.7",
     "formik-persist": "^1.1.0",
-    "framer-motion": "^2.7.7",
+    "framer-motion": "^3.2.1",
     "http-shutdown": "^1.2.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-google-recaptcha": "^2.1.0",
-    "react-json-view": "^1.19.1",
+    "react-json-view": "^1.20.4",
     "react-remove-scroll": "^2.4.0",
-    "tailwindcss": "^1.8.10",
+    "tailwindcss": "^1.0",
     "tailwindcss-filters": "^3.0.0",
-    "yup": "^0.29.3"
+    "yup": "^0.32.8"
   },
   "scripts": {
     "start": "yarn build:css && react-scripts start",
@@ -44,13 +44,14 @@
   },
   "devDependencies": {
     "@cucumber/cucumber": "^7.0.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "autoprefixer": "9.8.6",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^12.6.2",
+    "autoprefixer": "10.2.3",
+    "postcss": "8.2.4",
     "postcss-cli": "^8.0.0",
     "prop-types": "^15.7.2",
     "puppeteer": "^5.5.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "4.0.1"
   }
 }

src/assets/styles/.index.css

@@ -468,10 +468,6 @@ input:-ms-input-placeholder, textarea:-ms-input-placeholder {
   color: #a0aec0;
 }
 
-input::-ms-input-placeholder, textarea::-ms-input-placeholder {
-  color: #a0aec0;
-}
-
 input::placeholder,
 textarea::placeholder {
   color: #a0aec0;
@@ -596,11 +592,6 @@ video {
   opacity: 1;
 }
 
-.form-input::-ms-input-placeholder {
-  color: #a0aec0;
-  opacity: 1;
-}
-
 .form-input::placeholder {
   color: #a0aec0;
   opacity: 1;
@@ -983,11 +974,13 @@ video {
 }
 
 .outline-none {
-  outline: 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 .focus\:outline-none:focus {
-  outline: 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 .overflow-y-auto {
@@ -1207,25 +1200,12 @@ video {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
 }
 
-@-webkit-keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
 
-@-webkit-keyframes ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
 @keyframes ping {
   75%, 100% {
     transform: scale(2);
@@ -1233,43 +1213,21 @@ video {
   }
 }
 
-@-webkit-keyframes pulse {
-  50% {
-    opacity: .5;
-  }
-}
-
 @keyframes pulse {
   50% {
     opacity: .5;
   }
 }
 
-@-webkit-keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 @keyframes bounce {
   0%, 100% {
     transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
   }
 
   50% {
     transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
 
@@ -1390,7 +1348,8 @@ p {
   --bg-opacity: 1;
   background-color: #6c6fc6;
   background-color: rgba(108, 111, 198, var(--bg-opacity));
-  outline: 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 .btn-primary:active {
@@ -1461,7 +1420,8 @@ p {
   --bg-opacity: 1;
   background-color: #6c6fc6;
   background-color: rgba(108, 111, 198, var(--bg-opacity));
-  outline: 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 .btn-secondary:active {

src/components/forms/FormFeedback.jsx

@@ -77,15 +77,17 @@ export const FormFeedback = (props) => {
         email: Yup.string()
             .required('Required')
             .email('Must be a valid email address'),
-        section: Yup.mixed()
+        section: Yup.string()
             .required('Required')
             .oneOf(['users', 'partners'], 'Invalid section'),
         support_type: Yup.array(Yup.string()).ensure().when('section', {
             is: 'users',
-            then: Yup.array().required('Required').test('is-valid-support-type', 'Invalid support type', val => {
-                const sb = val.filter(n => !support_types_values.includes(n))
-                return 0 === sb.length
-            }),
+            then: Yup.array(Yup.string()).min(1, 'Required')
+                .test('is-valid-support-type', 'Invalid support type', val => {
+                    const sb = val.filter(n => !support_types_values.includes(n))
+                    return 0 === sb.length
+                }
+                ),
         }),
         message: Yup.string()
             .required('Required')

src/utils/newId.js

@@ -1,6 +1,8 @@
 let lastId = 0;
 
-export default function(prefix='id') {
+const newId = function(prefix='id') {
     lastId++;
     return `${prefix}${lastId}`;
-}
+}
+
+export default newId