-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: support react-hook-form v7 breaking API changes (#9)
* feat: upgrade dependencies by major versions * support react-hook-form v7 * upgrade tests and storybook stories for each component * adds StorybookComponentWrapper to easily show form state in each storybook BREAKING CHANGE: support react-hook-form v7 breaking API changes * ci: bump node versions for testing
- Loading branch information
1 parent
d266cf9
commit 2e5535c
Showing
34 changed files
with
7,498 additions
and
7,339 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,10 @@ | ||
| module.exports = { | ||
| stories: ['../src/**/*.stories.tsx'], | ||
| addons: ['@storybook/addon-actions', '@storybook/addon-docs', '@storybook/addon-a11y'], | ||
| addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'], | ||
|
|
||
| // https://github.com/styleguidist/react-docgen-typescript/issues/356 | ||
|
|
||
| typescript: { | ||
| reactDocgen: 'react-docgen', | ||
| }, | ||
| }; |
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 |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ | |
|
|
||
| Super-charged [Paste](https://paste.twilio.design) components using [react-hook-form](https://github.com/react-hook-form/react-hook-form) to handle form state. | ||
|
|
||
| This library lightly wraps Paste components with required fields `name: string` and `registerRef: React.Ref` props that connect them to a react-hook-form `useForm` hook. This will link the Paste component to the form library, allowing you to reap the benefits of typed, performant forms with minimal effort. | ||
| This library lightly wraps Paste components to seamlessly integrate with `react-hook-form`, and handle abstraction wherever needed. | ||
|
|
||
| ## Getting started | ||
|
|
||
|
|
@@ -19,74 +19,60 @@ yarn install react-hook-form-paste | |
| ## Usage | ||
|
|
||
| ```tsx | ||
| import { Theme } from '@twilio-paste/core/theme'; | ||
| import { Alert } from '@twilio-paste/core/alert'; | ||
| import { Box } from '@twilio-paste/core/box'; | ||
| import { Button } from '@twilio-paste/core/button'; | ||
| import { Label } from '@twilio-paste/core/label'; | ||
| import * as React from 'react'; | ||
| import { Stack } from '@twilio-paste/core/stack'; | ||
| import { useForm } from 'react-hook-form'; | ||
| import { Input } from 'react-hook-form-paste'; | ||
|
|
||
| export default { | ||
| title: 'Input', | ||
| }; | ||
|
|
||
| interface ITestProps { | ||
| interface IFormProps { | ||
| emailAddress: string; | ||
| } | ||
|
|
||
| export const Basic: React.FC = () => { | ||
| const { register, handleSubmit } = useForm(); | ||
| const { register, handleSubmit } = useForm<IFormProps>(); | ||
|
|
||
| return ( | ||
| <Theme.Provider theme="default"> | ||
| <form | ||
| onSubmit={handleSubmit((payload) => { | ||
| window.alert(JSON.stringify(payload)); | ||
| })} | ||
| > | ||
| <Label htmlFor="emailAddress">Email Address</Label> | ||
| <Input<ITestProps> | ||
| id="emailAddress" | ||
| name="emailAddress" | ||
| type="email" | ||
| placeholder="[email protected]" | ||
| registerRef={register} | ||
| /> | ||
| <form | ||
| onSubmit={handleSubmit((payload) => { | ||
| window.alert(JSON.stringify(payload)); | ||
| })} | ||
| > | ||
| <Stack orientation="vertical" spacing="space80"> | ||
| <Box> | ||
| <Label htmlFor="emailAddress">Email Address</Label> | ||
| <Input {...register('emailAddress')} type="email" placeholder="[email protected]" /> | ||
| </Box> | ||
|
|
||
| <Button variant="primary" type="submit"> | ||
| Submit | ||
| </Button> | ||
| </form> | ||
| </Theme.Provider> | ||
| </Stack> | ||
| </form> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Differences between react-hook-form-paste and Paste | ||
|
|
||
| react-hook-form-paste also provides TypeScript developers the option of typing their form inputs. Passing in an interface into a form input e.g. `<Input<ITestProps>>` will constrain the `name` field to only keys of that interface. | ||
| With the advent of `react-hook-form` v7, `react-hook-form-paste` **is mostly unnecessary**; form type-safety is mostly ensured via the new `{...register('formField')}` pattern which natively work with Paste components. However, there are still some Paste components with more complex state such as `OptionGroup`. For these components, static form-typing can be enforced by passing in an interface into the generic component e.g. `<OptionGroup<IFieldProps>>`. This will constrain the `name` field to only keys of that interface. | ||
|
|
||
| ## Core Components | ||
|
|
||
| | | Props | | ||
| | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | | ||
| | Checkbox | { name, registerRef } & [CheckboxProps](https://paste.twilio.design/components/checkbox#checkbox-props) | | ||
| | CheckboxDisclaimer | { name, registerRef } & [CheckboxDisclaimerProps](https://paste.twilio.design/components/checkbox#checkboxdisclaimer-props) | | ||
| | CheckboxGroup | [CheckboxGroupProps](https://paste.twilio.design/components/checkbox#checkboxgroup-props) | | ||
| | Input | { name, registerRef } & [InputProps](https://paste.twilio.design/components/input#input-props) | | ||
| | Option | [OptionProps](https://paste.twilio.design/components/select#option-props) | | ||
| | OptionGroup | [OptionGroupProps](https://paste.twilio.design/components/select#optiongroup-props) | | ||
| | Radio | { name, registerRef } & [RadioProps](https://paste.twilio.design/components/radio-group#radio-props) | | ||
| | RadioGroup | { name, control } & [RadioGroupProps](https://paste.twilio.design/components/radio-group#radiogroup-props) | | ||
| | Select | { name, registerRef } & [SelectProps](https://paste.twilio.design/components/select#select-props) | | ||
| | TextArea | { name, control } & [TextAreaProps](https://paste.twilio.design/components/textarea#textarea-props) | | ||
|
|
||
| ## Using `registerRef` over `ref` | ||
|
|
||
| Currently, while using TypeScript there is incompatibility with `React.forwardRef` in that it does not allow the components to be generic with a forwarded ref. Because of this, we have to pass a ref into a HoC under a different name than `ref`. This lets us pass refs and still be able to type the `name` fields. | ||
|
|
||
| https://github.com/typescript-cheatsheets/react/issues/106#issuecomment-483342960 | ||
| https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components | ||
| | Component | Props | | ||
| | ------------------ | ------------------------------------------------------------------------------------------------------------------ | | ||
| | Checkbox | [CheckboxProps](https://paste.twilio.design/components/checkbox#checkbox-props) | | ||
| | CheckboxDisclaimer | [CheckboxDisclaimerProps](https://paste.twilio.design/components/checkbox#checkboxdisclaimer-props) | | ||
| | CheckboxGroup | { name } & [CheckboxGroupProps](https://paste.twilio.design/components/checkbox#checkboxgroup-props) | | ||
| | Input | [InputProps](https://paste.twilio.design/components/input#input-props) | | ||
| | Option | [OptionProps](https://paste.twilio.design/components/select#option-props) | | ||
| | OptionGroup | [OptionGroupProps](https://paste.twilio.design/components/select#optiongroup-props) | | ||
| | Radio | [RadioProps](https://paste.twilio.design/components/radio-group#radio-props) | | ||
| | RadioGroup | { name, controllerProps } & [RadioGroupProps](https://paste.twilio.design/components/radio-group#radiogroup-props) | | ||
| | Select | [SelectProps](https://paste.twilio.design/components/select#select-props) | | ||
| | TextArea | { name, controllerProps } & [TextAreaProps](https://paste.twilio.design/components/textarea#textarea-props) | | ||
|
|
||
| ## Contributing | ||
|
|
||
|
|
||
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 |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| module.exports = { | ||
| testEnvironment: 'jsdom', | ||
| transform: { | ||
| '.(js|jsx)': 'babel-jest', | ||
| '.(ts|tsx)': 'babel-jest', | ||
|
|
||
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.