Add an example formik + yup form

- super duper nice

go/go_ahead/src/Components/Pages/DebugCRUD.jsx

 import React from "react";
+import { Formik, Field, Form, ErrorMessage } from "formik";
+import * as Yup from "yup";
+
+const SignupSchema = Yup.object().shape({
+  password: Yup.string()
+    .min(2, "Too Short!")
+    .max(50, "Too Long!"),
+  email: Yup.string()
+    .email("Invalid email")
+    .required("Required")
+});
 
 const DebugCRUD = () => (
   <div>
     <h1>Debug CRUD Page</h1>
+    <div>
+      <Formik
+        initialValues={{ email: "", password: "" }}
+        validationSchema={SignupSchema}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+            console.log(JSON.stringify(values, null, 2));
+            setSubmitting(false);
+          }, 400);
+        }}
+        render={({ isSubmitting }) => (
+          <Form>
+            <Field type="email" name="email" placeholder="Email" />
+            <ErrorMessage name="email" component="div" />
+            <Field type="password" name="password" />
+            <ErrorMessage name="password" />
+            <button type="submit" disabled={isSubmitting}>
+              Submit
+            </button>
+          </Form>
+        )}
+      />
+    </div>
   </div>
 );
 

package.json

@@ -34,6 +34,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "css-loader": "^1.0.0",
+    "formik": "^1.4.1",
     "masonstrap": "https://git.gmu.edu/srct/masonstrap.git",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
@@ -41,6 +42,7 @@
     "reactstrap": "^6.5.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.16.4",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.1.0",
+    "yup": "^0.26.6"
   }
 }