Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(storybook/SpinFormik): Create a story for SpinFormik
- Loading branch information
1 parent
2273dee
commit 519dfc0
Showing
6 changed files
with
1,274 additions
and
106 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
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,5 @@ | ||
| <style> | ||
| body { | ||
| overflow: scroll; | ||
| } | ||
| </style> |
156 changes: 156 additions & 0 deletions
156
app/scripts/modules/core/src/presentation/forms/SpinFormik.stories.mdx
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,156 @@ | ||
| import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; | ||
|
|
||
| import { | ||
| ChecklistInput, | ||
| DayPickerInput, | ||
| FormikFormField, | ||
| NumberInput, | ||
| SpinFormik, | ||
| RadioButtonInput, | ||
| ReactSelectInput, | ||
| TextAreaInput, | ||
| TextInput, | ||
| } from '../../presentation'; | ||
|
|
||
| <Meta | ||
| title="Forms/Spinnaker Form" | ||
| decorators={[ | ||
| (Story) => ( | ||
| <div style={{ background: '#fff', border: '1px solid #eee', borderRadius: 10, padding: 20, width: 500 }}> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ]} | ||
| parameters={{ | ||
| layout: 'centered', | ||
| }} | ||
| /> | ||
|
|
||
| Spinnaker forms are built upon [Formik](https://formik.org) and provides two key abstractions for easily building forms: `SpinFormik` and `FormikFormField`. | ||
|
|
||
| ### `SpinFormik` | ||
|
|
||
| This component is thin wrapper around [`Formik`](https://formik.org/docs/api/formik) component with no additional props. A typical form is created the following way | ||
|
|
||
| ```jsx | ||
| interface FormValues { | ||
| field1: string; | ||
| field2: number; | ||
| } | ||
|
|
||
| <SpinFormik<FormValues> | ||
| initialValues={{ field1: 'foo', field2: 2 }} | ||
| render={(formikProps) => <YourFormView {...formikProps} />} | ||
| onSubmit={(values) => { | ||
| /* handle form submission */ | ||
| }} | ||
| /> | ||
| ``` | ||
|
|
||
| ### Props | ||
|
|
||
| Detailed information on the props can be found [here](https://formik.org/docs/api/formik#reference). | ||
|
|
||
| ### `FormikFormField` | ||
|
|
||
| This component handles the communication with formik and provides the necessary props to your input fields. Render your fields by passing them to the `input` prop. | ||
|
|
||
| ```jsx | ||
| <SpinFormik<FormValues> | ||
| initialValues={{ field1: 'foo', field2: 2 }} | ||
| render={(formikProps) => ( | ||
| <form onSubmit={formikProps.handleSubmit}> | ||
| <FormikFormField name="field" label="Field 1" input={(inputProps) => <TextInput {...inputProps} />} /> | ||
| </form> | ||
| )} | ||
| onSubmit={(values) => { | ||
| /* handle form submission */ | ||
| }} | ||
| /> | ||
| ``` | ||
|
|
||
| ### Props | ||
|
|
||
| <ArgsTable of={FormikFormField} /> | ||
|
|
||
| ## Examples | ||
|
|
||
| Here's a simple example of a form with all supported input fields | ||
|
|
||
| <Canvas> | ||
| <Story name="Simple Form"> | ||
| <SpinFormik | ||
| initialValues={{ | ||
| data: { | ||
| account: 'prod', | ||
| applicationName: 'spinnaker', | ||
| comment: '', | ||
| enableAutoScaling: 'enabled', | ||
| instanceCount: 1, | ||
| launchDate: new Date(Date.now()).toISOString().slice(0, 10), | ||
| regions: ['us-east'], | ||
| }, | ||
| }} | ||
| render={(formik) => ( | ||
| <form style={{}} onSubmit={formik.handleSubmit}> | ||
| <FormikFormField | ||
| name="data.applicationName" | ||
| label="Application Name" | ||
| input={(props) => <TextInput {...props} />} | ||
| /> | ||
| <FormikFormField | ||
| name="data.account" | ||
| label="Account" | ||
| input={(props) => <ReactSelectInput {...props} clearable={false} stringOptions={['prod', 'test']} />} | ||
| /> | ||
| <FormikFormField | ||
| name="data.regions" | ||
| label="Regions" | ||
| input={(props) => ( | ||
| <ChecklistInput | ||
| {...props} | ||
| inline={true} | ||
| options={[ | ||
| { label: 'us-east', value: 'us-east' }, | ||
| { label: 'us-west', value: 'us-west' }, | ||
| { label: 'eu-west', value: 'eu-west' }, | ||
| ]} | ||
| /> | ||
| )} | ||
| /> | ||
| <FormikFormField | ||
| name="data.enableAutoScaling" | ||
| label="Auto Scaling" | ||
| input={(props) => ( | ||
| <RadioButtonInput | ||
| {...props} | ||
| inline={true} | ||
| options={[ | ||
| { label: 'Enable', value: 'enabled' }, | ||
| { label: 'Disable', value: 'disabled' }, | ||
| ]} | ||
| /> | ||
| )} | ||
| /> | ||
| <FormikFormField | ||
| name="data.launchDate" | ||
| label="Launch Date" | ||
| input={(props) => <DayPickerInput {...props} />} | ||
| /> | ||
| <FormikFormField | ||
| name="data.instanceCount" | ||
| label="Instances" | ||
| input={(props) => <NumberInput {...props} min={1} max={10} />} | ||
| /> | ||
| <FormikFormField name="data.comment" label="Comment" input={(props) => <TextAreaInput {...props} />} /> | ||
| <div style={{ marginTop: 12, textAlign: 'right' }}> | ||
| <button className="btn btn-primary" type="submit"> | ||
| Submit | ||
| </button> | ||
| </div> | ||
| </form> | ||
| )} | ||
| onSubmit={({ data, ...others }) => console.log(data)} | ||
| /> | ||
| </Story> | ||
| </Canvas> |
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.