Add formik to the user suite (#21381)

* Add formik to user suite

* Accept current log

tests/baselines/reference/user/formik.log

@@ -0,0 +1,31 @@
+Exit Code: 1
+Standard output:
+index.tsx(26,7): error TS2322: Type '{ initialValues: { email: string; password: string; }; validate: (values: Values) => FormikErrors...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Formik<FormikConfig<object>, object>> & Readonly<{...'.
+  Type '{ initialValues: { email: string; password: string; }; validate: (values: Values) => FormikErrors...' is not assignable to type 'Readonly<FormikConfig<object>>'.
+    Types of property 'onSubmit' are incompatible.
+      Type '(values: Values, { setSubmitting, setErrors }: FormikActions<Values>) => void' is not assignable to type '(values: object, formikActions: FormikActions<object>) => void'.
+index.tsx(26,7): error TS2322: Type '{ initialValues: { email: string; password: string; }; validate: (values: Values) => FormikErrors...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Formik<FormikConfig<object>, object>> & Readonly<{...'.
+  Type '{ initialValues: { email: string; password: string; }; validate: (values: Values) => FormikErrors...' is not assignable to type 'Readonly<FormikConfig<object>>'.
+    Types of property 'onSubmit' are incompatible.
+      Type '(values: Values, { setSubmitting, setErrors }: FormikActions<Values>) => void' is not assignable to type '(values: object, formikActions: FormikActions<object>) => void'.
+        Types of parameters 'values' and 'values' are incompatible.
+          Type 'object' is not assignable to type 'Values'.
+index.tsx(32,13): error TS2322: Type '{}' is not assignable to type 'FormikErrors<MyData>'.
+  Property 'email' is missing in type '{}'.
+index.tsx(33,21): error TS2339: Property 'email' does not exist on type 'Values'.
+index.tsx(36,68): error TS2339: Property 'email' does not exist on type 'Values'.
+index.tsx(46,22): error TS2345: Argument of type 'Values' is not assignable to parameter of type 'MyData'.
+index.tsx(47,11): error TS7006: Parameter 'user' implicitly has an 'any' type.
+index.tsx(52,11): error TS7006: Parameter 'errors' implicitly has an 'any' type.
+index.tsx(74,27): error TS2339: Property 'email' does not exist on type 'Values'.
+index.tsx(76,20): error TS2339: Property 'email' does not exist on type 'FormikTouched<Values>'.
+index.tsx(76,36): error TS2339: Property 'email' does not exist on type 'FormikErrors<Values>'.
+index.tsx(76,58): error TS2339: Property 'email' does not exist on type 'FormikErrors<Values>'.
+index.tsx(82,27): error TS2339: Property 'password' does not exist on type 'Values'.
+index.tsx(84,20): error TS2339: Property 'password' does not exist on type 'FormikTouched<Values>'.
+index.tsx(84,39): error TS2339: Property 'password' does not exist on type 'FormikErrors<Values>'.
+index.tsx(84,64): error TS2339: Property 'password' does not exist on type 'FormikErrors<Values>'.
+
+
+
+Standard error:

tests/cases/user/formik/index.tsx

@@ -0,0 +1,94 @@
+// Render Prop
+import React from 'react';
+import { Formik, FormikErrors } from 'formik';
+
+type MyData = {email: string, password: string};
+declare function LoginToMyApp(data: MyData): Promise<{user: string}>;
+declare function transformMyApiErrors(o: any): FormikErrors<never>;
+
+const Basic = () => (
+  <div>
+    <h1>My Form</h1>
+    <p>This can be anywhere in your application</p>
+    {/*
+      The benefit of the render prop approach is that you have full access to React's
+      state, props, and composition model. Thus there is no need to map outer props
+      to values...you can just set the initial values, and if they depend on props / state
+      then--boom--you can directly access to props / state.
+
+      The render prop accepts your inner form component, which you can define separately or inline
+      totally up to you:
+      - `<Formik render={props => <form>...</form>}>`
+      - `<Formik component={InnerForm}>`
+      - `<Formik>{props => <form>...</form>}</Formik>` (identical to as render, just written differently)
+    */}
+    <Formik
+      initialValues={{
+        email: '',
+        password: '',
+      }}
+      validate={values => {
+        // same as above, but feel free to move this into a class method now.
+        let errors: FormikErrors<MyData> = {};
+        if (!values.email) {
+          errors.email = 'Required';
+        } else if (
+          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
+        ) {
+          errors.email = 'Invalid email address';
+        }
+        return errors;
+      }}
+      onSubmit={(
+        values,
+        { setSubmitting, setErrors /* setValues and other goodies */ }
+      ) => {
+        LoginToMyApp(values).then(
+          user => {
+            setSubmitting(false);
+            // do whatevs...
+            // props.updateUser(user)
+          },
+          errors => {
+            setSubmitting(false);
+            // Maybe transform your API's errors into the same shape as Formik's
+            setErrors(transformMyApiErrors(errors));
+          }
+        );
+      }}
+      render={({
+        values,
+        errors,
+        touched,
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        isSubmitting,
+      }) => (
+        <form onSubmit={handleSubmit}>
+          <input
+            type="email"
+            name="email"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.email}
+          />
+          {touched.email && errors.email && <div>{errors.email}</div>}
+          <input
+            type="password"
+            name="password"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.password}
+          />
+          {touched.password && errors.password && <div>{errors.password}</div>}
+          <button type="submit" disabled={isSubmitting}>
+            Submit
+          </button>
+        </form>
+      )}
+    />
+  </div>
+);
+
+export default Basic;

tests/cases/user/formik/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "formik",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "formik": "latest",
+    "@types/react": "latest",
+    "@types/prop-types": "latest"
+  }
+}

tests/cases/user/formik/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "jsx": "react",
+        "strict": true,
+        "esModuleInterop": true,
+        "noEmit": true,
+        "types": []
+    },
+    "files": [
+        "index.tsx"
+    ]
+}