init branch froms

package.json

@@ -10,12 +10,14 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "yup": "^1.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/03-forms/components/MyCheckBox.tsx

@@ -0,0 +1,23 @@
+import { ErrorMessage, useField } from 'formik';
+
+interface Props {
+    label: string;
+    name: string;
+    [x: string]: any;
+}
+
+
+export const MyCheckbox = ({ label, ...props }: Props ) => {
+
+    const [ field ] = useField({ ...props, type: 'checkbox' });
+
+    return (
+        <>
+            <label>
+                <input type="checkbox" { ...field } { ...props } />
+                { label }            
+            </label>
+            <ErrorMessage name={ props.name } component="span" />
+        </>
+    )
+}

src/03-forms/components/MySelect.tsx

@@ -0,0 +1,22 @@
+import { ErrorMessage, useField } from 'formik';
+
+interface Props {
+    label: string;
+    name: string;
+    placeholder?: string;
+    [x: string]: any;
+}
+
+
+export const MySelect = ( { label, ...props }: Props ) => {
+
+    const [ field ] = useField(props)
+
+    return (
+        <>
+            <label htmlFor={ props.id || props.name }>{ label }</label>
+            <select { ...field } { ...props } />
+            <ErrorMessage name={ props.name } component="span" />
+        </>
+    )
+}

src/03-forms/components/MyTextInput.tsx

@@ -0,0 +1,28 @@
+import { ErrorMessage, useField } from 'formik';
+
+interface Props {
+    label: string;
+    name: string;
+    type?: 'text' | 'email' | 'password';
+    placeholder?: string;
+    [x: string]: any;
+}
+
+
+export const MyTextInput = ( { label, ...props }: Props ) => {
+
+    const [ field, meta] = useField(props)
+
+    return (
+        <>
+            <label htmlFor={ props.id || props.name }>{ label }</label>
+            <input className="text-input" { ...field } { ...props } />
+            <ErrorMessage name={ props.name } component="span" />
+            {/* {
+                meta.touched && meta?.error && (
+                    <span classNme='error'> {meta.error} </span>
+                )
+            } */}
+        </>
+    )
+}

src/03-forms/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./MyCheckBox";
+export * from "./MyTextInput";
+export * from "./MySelect";

src/03-forms/data/custom-form.json

@@ -0,0 +1,46 @@
+[
+  {
+    "type": "input",
+    "inputType": "text",
+    "name": "firstName",
+    "placeholder": "your name",
+    "label": "First Name",
+    "value": "",
+    "validations": [{ "type": "required" }, { "type": "minLength", "value": 3 }]
+  },
+  {
+    "type": "input",
+    "inputType": "text",
+    "name": "lastName",
+    "placeholder": "your last name",
+    "label": "Last Name",
+    "value": "",
+    "validations": [{ "type": "required" }, { "type": "minLength", "value": 3 }]
+  },
+  {
+    "type": "input",
+    "inputType": "email",
+    "name": "email",
+    "placeholder": "your email @",
+    "label": "Email",
+    "value": "",
+    "validations": [
+        { "type": "required" },
+        { "type": "email"  }
+    ]
+  },
+  {
+    "type": "select",
+    "inputType": "",
+    "name": "favouriteGame",
+    "placeholder": "",
+    "label": "Favourite Game",
+    "value": "",
+    "validations": [{ "type": "required" }],
+    "options": [
+      { "id": 1, "label": "Super Smash" },
+      { "id": 2, "label": "Metal Gear" },
+      { "id": 3, "label": "Resident Evil" }
+    ]
+  }
+]

src/03-forms/hooks/useForm.ts

@@ -0,0 +1,35 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+
+export const useForm = <T>(initialData: T) => {
+  const [formData, setFormData] = useState(initialData);
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.value,
+    });
+  };
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log({ formData });
+  };
+
+  const reset = () => {
+    setFormData({ ...initialData });
+  };
+
+  const isValidEmail = ( email: string ) => {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(email);
+  }
+
+  return {
+    ...formData,
+    formData,
+    onChange,
+    onSubmit,
+    reset,
+    isValidEmail
+  };
+};

src/03-forms/pages/FormikAbstractionPage.tsx

@@ -0,0 +1,93 @@
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
+
+import { MyCheckbox, MyTextInput, MySelect } from '../components'
+
+import '../styles/styles.css'
+
+
+
+const FormikAbstractionPage = () => {
+
+    return (
+        <div>
+            <h1>Formik Abstractation</h1>
+
+            <Formik
+                initialValues={{
+                    firstName: '',
+                    lastName: '',
+                    email: '',
+                    terms: false,
+                    jobType: ''
+                }}
+                onSubmit={ ( values ) => {
+                    console.log( values )
+                }}
+                validationSchema={Yup.object({
+                        firstName: Yup.string()
+                                        .max(15, 'Debe de tener 15 caracteres o menos')
+                                        .required('Requerido'),
+                        lastName: Yup.string()
+                                    .max(15, 'Debe de tener 15 caracteres o menos')
+                                    .required('Requerido'),
+                        email: Yup.string()
+                                    .email('El correo no tiene un formato válido')
+                                    .required('Requerido'),
+                        terms: Yup.boolean()
+                                    .oneOf([true], 'Debe de aceptar las condiciones'),
+                        jobType: Yup.string()
+                                    .notOneOf([ 'it-jr' ], 'Esta opción no es permitida.')
+                                    .required('Requerido')
+                    })
+                }>
+
+                    {(formik) => (
+                            <Form>
+                                <MyTextInput
+                                  label="First Name"
+                                  name="firstName" 
+                                  placeholder="Fernando"
+                                />
+
+                                <MyTextInput
+                                  label="Last Name"
+                                  name="lastName" 
+                                  placeholder="Herrera"
+                                />          
+
+                                <MyTextInput
+                                  label="Email Address"
+                                  name="email" 
+                                  placeholder="jonh@google.com"
+                                  type="email"
+                                />                                
+
+                                <MySelect label="Job Type" name="jobType" >
+                                    <option value="">Pick something</option>
+                                    <option value="developer">Develper</option>
+                                    <option value="designer">Designer</option>
+                                    <option value="it-senior">IT Senior</option>
+                                    <option value="it-jr">IT Jr.</option>
+                                </MySelect>
+
+                                <MyCheckbox label="Termns & Conditions" name="terms" />
+
+                                <button type="submit">Submit</button>
+                                <button type="submit" onClick={() => formik.handleReset()}>Reset</button>
+
+                            </Form>
+                        )
+                    }
+
+
+            </Formik>
+
+
+
+
+        </div>
+    )
+}
+
+export default FormikAbstractionPage

src/03-forms/pages/FormikBasicPage.tsx

@@ -0,0 +1,95 @@
+import { FormikErrors, useFormik } from 'formik'
+import React from 'react'
+import '../styles/styles.css'
+
+interface FormValues {
+    firstName: string
+    lastName: string
+    email: string
+}
+
+const FormikBasicPage = () => {
+
+ const validate = ({ firstName, lastName, email }:FormValues) => {
+
+    const errors:FormikErrors<FormValues> = {}
+
+    if (!firstName) {
+        errors.firstName = 'El nombre is required'
+    }else if(firstName.length < 3 ){
+        errors.firstName = 'El nombre min length >=3'
+    }
+    if (!lastName) {
+        errors.lastName = 'El apellido is required'
+    }else if(lastName.length < 3 ){
+        errors.lastName = 'El apellido min length >=3'
+    }
+    if (!email) {
+        errors.email = 'El email is required';
+    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+        errors.email = 'Invalid email address';
+    }
+
+    return errors
+ }
+
+  const { handleChange, values, handleSubmit, errors, touched, handleBlur } = useFormik({
+    initialValues: {
+        firstName: '',
+        lastName: '',
+        email: ''
+    },
+    onSubmit: (values) => {
+        console.log({values})
+    },
+    validate: (values) => validate(values) 
+  })
+
+
+  return (
+    <div>
+        <h1>Formik Basic Tutorial</h1>
+        <form noValidate onSubmit={handleSubmit}>
+            <label htmlFor="firstName">Nombre</label>
+            <input 
+                onChange={ handleChange }
+                value = { values.firstName }
+                type="text" 
+                name="firstName" 
+                id="firtsName" 
+                title='Nombre' 
+                onBlur={handleBlur}
+            />
+            { touched.firstName && errors.firstName && <span>{errors.firstName}</span> }
+
+            <label htmlFor="lastName">Apellido</label>
+            <input 
+                onChange={ handleChange }
+                value = { values.lastName }
+                type="text" 
+                name="lastName" 
+                id="lastName" 
+                title='Apellido'
+                onBlur={handleBlur}
+            />
+            { touched.lastName && errors.lastName && <span>{errors.lastName}</span> }
+
+            <label htmlFor="email">Email</label>
+            <input 
+                onChange={ handleChange }
+                value = { values.email }
+                type="email" 
+                name="email" 
+                id="email" 
+                title='Email'
+                onBlur={handleBlur}
+            />
+            { touched.email && errors.email && <span>{errors.email}</span> }
+
+            <button type='submit'>Enviar</button>
+        </form>
+    </div>
+  )
+}
+
+export default FormikBasicPage