Skip to content

Commit 421c927

Browse files
weswighamweswigham
authored
Add formik to the user suite (microsoft#21381)
* Add formik to user suite * Accept current log
1 parent a33dae3 commit 421c927

4 files changed

Lines changed: 153 additions & 0 deletions

File tree

‎tests/baselines/reference/user/formik.log‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
Exit Code: 1
2+
Standard output:
3+
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<{...'.
4+
Type '{ initialValues: { email: string; password: string; }; validate: (values: Values) => FormikErrors...' is not assignable to type 'Readonly<FormikConfig<object>>'.
5+
Types of property 'onSubmit' are incompatible.
6+
Type '(values: Values, { setSubmitting, setErrors }: FormikActions<Values>) => void' is not assignable to type '(values: object, formikActions: FormikActions<object>) => void'.
7+
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<{...'.
8+
Type '{ initialValues: { email: string; password: string; }; validate: (values: Values) => FormikErrors...' is not assignable to type 'Readonly<FormikConfig<object>>'.
9+
Types of property 'onSubmit' are incompatible.
10+
Type '(values: Values, { setSubmitting, setErrors }: FormikActions<Values>) => void' is not assignable to type '(values: object, formikActions: FormikActions<object>) => void'.
11+
Types of parameters 'values' and 'values' are incompatible.
12+
Type 'object' is not assignable to type 'Values'.
13+
index.tsx(32,13): error TS2322: Type '{}' is not assignable to type 'FormikErrors<MyData>'.
14+
Property 'email' is missing in type '{}'.
15+
index.tsx(33,21): error TS2339: Property 'email' does not exist on type 'Values'.
16+
index.tsx(36,68): error TS2339: Property 'email' does not exist on type 'Values'.
17+
index.tsx(46,22): error TS2345: Argument of type 'Values' is not assignable to parameter of type 'MyData'.
18+
index.tsx(47,11): error TS7006: Parameter 'user' implicitly has an 'any' type.
19+
index.tsx(52,11): error TS7006: Parameter 'errors' implicitly has an 'any' type.
20+
index.tsx(74,27): error TS2339: Property 'email' does not exist on type 'Values'.
21+
index.tsx(76,20): error TS2339: Property 'email' does not exist on type 'FormikTouched<Values>'.
22+
index.tsx(76,36): error TS2339: Property 'email' does not exist on type 'FormikErrors<Values>'.
23+
index.tsx(76,58): error TS2339: Property 'email' does not exist on type 'FormikErrors<Values>'.
24+
index.tsx(82,27): error TS2339: Property 'password' does not exist on type 'Values'.
25+
index.tsx(84,20): error TS2339: Property 'password' does not exist on type 'FormikTouched<Values>'.
26+
index.tsx(84,39): error TS2339: Property 'password' does not exist on type 'FormikErrors<Values>'.
27+
index.tsx(84,64): error TS2339: Property 'password' does not exist on type 'FormikErrors<Values>'.
28+
29+
30+
31+
Standard error:

‎tests/cases/user/formik/index.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// Render Prop
2+
import React from 'react';
3+
import { Formik, FormikErrors } from 'formik';
4+
5+
type MyData = {email: string, password: string};
6+
declare function LoginToMyApp(data: MyData): Promise<{user: string}>;
7+
declare function transformMyApiErrors(o: any): FormikErrors<never>;
8+
9+
const Basic = () => (
10+
<div>
11+
<h1>My Form</h1>
12+
<p>This can be anywhere in your application</p>
13+
{/*
14+
The benefit of the render prop approach is that you have full access to React's
15+
state, props, and composition model. Thus there is no need to map outer props
16+
to values...you can just set the initial values, and if they depend on props / state
17+
then--boom--you can directly access to props / state.
18+
19+
The render prop accepts your inner form component, which you can define separately or inline
20+
totally up to you:
21+
- `<Formik render={props => <form>...</form>}>`
22+
- `<Formik component={InnerForm}>`
23+
- `<Formik>{props => <form>...</form>}</Formik>` (identical to as render, just written differently)
24+
*/}
25+
<Formik
26+
initialValues={{
27+
email: '',
28+
password: '',
29+
}}
30+
validate={values => {
31+
// same as above, but feel free to move this into a class method now.
32+
let errors: FormikErrors<MyData> = {};
33+
if (!values.email) {
34+
errors.email = 'Required';
35+
} else if (
36+
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
37+
) {
38+
errors.email = 'Invalid email address';
39+
}
40+
return errors;
41+
}}
42+
onSubmit={(
43+
values,
44+
{ setSubmitting, setErrors /* setValues and other goodies */ }
45+
) => {
46+
LoginToMyApp(values).then(
47+
user => {
48+
setSubmitting(false);
49+
// do whatevs...
50+
// props.updateUser(user)
51+
},
52+
errors => {
53+
setSubmitting(false);
54+
// Maybe transform your API's errors into the same shape as Formik's
55+
setErrors(transformMyApiErrors(errors));
56+
}
57+
);
58+
}}
59+
render={({
60+
values,
61+
errors,
62+
touched,
63+
handleChange,
64+
handleBlur,
65+
handleSubmit,
66+
isSubmitting,
67+
}) => (
68+
<form onSubmit={handleSubmit}>
69+
<input
70+
type="email"
71+
name="email"
72+
onChange={handleChange}
73+
onBlur={handleBlur}
74+
value={values.email}
75+
/>
76+
{touched.email && errors.email && <div>{errors.email}</div>}
77+
<input
78+
type="password"
79+
name="password"
80+
onChange={handleChange}
81+
onBlur={handleBlur}
82+
value={values.password}
83+
/>
84+
{touched.password && errors.password && <div>{errors.password}</div>}
85+
<button type="submit" disabled={isSubmitting}>
86+
Submit
87+
</button>
88+
</form>
89+
)}
90+
/>
91+
</div>
92+
);
93+
94+
export default Basic;

‎tests/cases/user/formik/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "formik",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "Apache-2.0",
11+
"dependencies": {
12+
"formik": "latest",
13+
"@types/react": "latest",
14+
"@types/prop-types": "latest"
15+
}
16+
}

‎tests/cases/user/formik/tsconfig.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"compilerOptions": {
3+
"jsx": "react",
4+
"strict": true,
5+
"esModuleInterop": true,
6+
"noEmit": true,
7+
"types": []
8+
},
9+
"files": [
10+
"index.tsx"
11+
]
12+
}

0 commit comments

Comments
 (0)