-
Notifications
You must be signed in to change notification settings - Fork 81
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Validation): Add new Validation components #351
Merged
Merged
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
b1fe570
Default Validation story working
haworku 85f5b3a
Add tests
haworku f4e9b2d
Add forms page to example app
haworku a01a0c3
Make Alert render children directly for validation style
haworku 1736709
Add example usage with Formik and yup
haworku 900b0a7
Remove unnecessary prop
haworku a4e6ab9
Cleanup tests from removed prop
haworku e203e14
Use storybook subcomponents
haworku a879b5b
Merge branch 'main' into hw-validation-80
haworku File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useState } from 'react' | ||
| import { Field, Formik } from 'formik' | ||
| import * as Yup from 'yup' | ||
| import { | ||
| Alert, | ||
| Button, | ||
| Form, | ||
| Label, | ||
| TextInput, | ||
| ValidationChecklist, | ||
| ValidationItem, | ||
| } from '@trussworks/react-uswds' | ||
|
|
||
| type FormValues = { | ||
| email?: string | ||
| password?: string | ||
| } | ||
|
|
||
| const FormSchema = Yup.object().shape({ | ||
| email: Yup.string().email().required(), | ||
| password: Yup.string().min(8).max(20).required(), | ||
| }) | ||
|
|
||
| const FormsPage = (): React.ReactElement => { | ||
| return ( | ||
| <> | ||
| <h1>Forms Examples</h1> | ||
| <section> | ||
| <h2>Formik</h2> | ||
| <Formik | ||
| initialValues={{ email: '', password: '' }} | ||
| validationSchema={FormSchema} | ||
| onSubmit={(values, { setSubmitting }) => { | ||
| setTimeout(() => { | ||
| alert(JSON.stringify(values, null, 2)) | ||
|
|
||
| setSubmitting(false) | ||
| }, 400) | ||
| }}> | ||
| {({ values, errors, touched, handleSubmit, isSubmitting }) => ( | ||
| <Form onSubmit={handleSubmit}> | ||
| {touched.email && errors.email && ( | ||
| <Alert type="info" validation heading="Email Requirements"> | ||
| <ValidationChecklist id="validate-email"> | ||
| <ValidationItem | ||
| id="required" | ||
| isValid={values.email.length > 0}> | ||
| Include required field. | ||
| </ValidationItem> | ||
| <ValidationItem id="validFormat" isValid={!errors.email}> | ||
| Use only valid email formatting | ||
| </ValidationItem> | ||
| {errors.email} | ||
| </ValidationChecklist> | ||
| </Alert> | ||
| )} | ||
| <Label htmlFor="email">Email</Label> | ||
| <Field | ||
| as={TextInput} | ||
| type="email" | ||
| name="email" | ||
| id="email" | ||
| value={values.email} | ||
| /> | ||
|
|
||
| {touched.password && errors.password && ( | ||
| <Alert type="info" validation heading="Password Requirements"> | ||
| <ValidationChecklist id="validate-password"> | ||
| <ValidationItem | ||
| id="required" | ||
| isValid={values.password.length > 0}> | ||
| Include required field. | ||
| </ValidationItem> | ||
| <ValidationItem id="length" isValid={!errors.password}> | ||
| Length is between 8-20 characters | ||
| </ValidationItem> | ||
| </ValidationChecklist> | ||
| </Alert> | ||
| )} | ||
| <Label htmlFor="password">Password</Label> | ||
| <Field | ||
| as={TextInput} | ||
| type="password" | ||
| name="password" | ||
| id="password" | ||
| value={values.password} | ||
| /> | ||
|
|
||
| <Button type="submit" disabled={isSubmitting}> | ||
| Submit | ||
| </Button> | ||
| </Form> | ||
| )} | ||
| </Formik> | ||
| </section> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default FormsPage | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| const Routes = { | ||
| HOME_PAGE: '/', | ||
| EXAMPLES_PAGE: '/examples', | ||
| FORMS_PAGE: '/forms', | ||
| MODALS_PAGE: '/modals', | ||
| } | ||
|
|
||
| export { Routes } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally
isValidwould use different logic than this - just did something simple for the example. Open to other ways to do this. The alternative I found was writing a longvalidatefunction that digs insideyup's error object and manually updated bits of component state. It seemed like overkill for this example.react hook form seems to handle this better than formik... couldn't find a similar formik util.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ahh I see, yeah I wouldn't worry too much about this since it's really a Formik implementation detail..