Skip to content

Commit

Permalink
Formik v2 (#1626)
Browse files Browse the repository at this point in the history
  • Loading branch information
jaredpalmer committed Jun 22, 2019
2 parents 3f8d27d + 7c7fdba commit 67f8369
Show file tree
Hide file tree
Showing 46 changed files with 8,644 additions and 7,298 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
Expand Up @@ -3,7 +3,7 @@ version: 2
defaults: &defaults
working_directory: ~/repo
docker:
- image: circleci/node:8.9.1
- image: circleci/node

jobs:
test:
Expand Down
6 changes: 6 additions & 0 deletions .eslintrc.json
@@ -0,0 +1,6 @@
{
"extends": ["react-app"],
"globals": {
"__DEV__": "readonly"
}
}
3 changes: 3 additions & 0 deletions .gitignore
Expand Up @@ -20,3 +20,6 @@ website/build/
website/yarn.lock
website/node_modules
website/i18n/*
.rts2_cache_es
.rts2_cache_cjs
.rts2_cache_umd
38 changes: 19 additions & 19 deletions .size-snapshot.json
@@ -1,36 +1,36 @@
{
"./dist/formik.umd.production.js": {
"bundled": 149506,
"minified": 42291,
"gzipped": 12702
"bundled": 137573,
"minified": 37797,
"gzipped": 11769
},
"./dist/formik.umd.development.js": {
"bundled": 185931,
"minified": 53501,
"gzipped": 16017
"bundled": 146347,
"minified": 40818,
"gzipped": 12952
},
"./dist/formik.cjs.production.js": {
"bundled": 44141,
"minified": 22101,
"gzipped": 5521
"bundled": 43323,
"minified": 20634,
"gzipped": 5847
},
"./dist/formik.cjs.development.js": {
"bundled": 45029,
"minified": 23001,
"gzipped": 5862
"bundled": 45484,
"minified": 22585,
"gzipped": 6495
},
"dist/formik.esm.js": {
"bundled": 40594,
"minified": 22365,
"gzipped": 5736,
"bundled": 41130,
"minified": 21850,
"gzipped": 6385,
"treeshaked": {
"rollup": {
"code": 802,
"import_statements": 380
"code": 383,
"import_statements": 349
},
"webpack": {
"code": 3715
"code": 2705
}
}
}
}
}
2 changes: 1 addition & 1 deletion .storybook/config.js
Expand Up @@ -12,7 +12,7 @@ setOptions({
* URL for name in top left corner to link to
* @type {String}
*/
url: 'https://github.com/jaredpalerm/formik',
url: 'https://github.com/jaredpalmer/formik',
/**
* Show story component as full screen
* @type {Boolean}
Expand Down
43 changes: 32 additions & 11 deletions .storybook/example.stories.js
Expand Up @@ -13,18 +13,29 @@ import SchemaValidation from '../examples/SchemaValidation';
import SyncValidation from '../examples/SyncValidation';
import FieldLevelValidation from '../examples/FieldLevelValidation';
import CombinedValidations from '../examples/CombinedValidations';
import DebouncedAutoSave from '../examples/DebouncedAutoSave';

const AsyncValidationCode = require('!raw-loader!../examples/AsyncValidation');
const ArraysCode = require('!raw-loader!../examples/Arrays');
const BasicCode = require('!raw-loader!../examples/Basic.js');
const CustomInputsCode = require('!raw-loader!../examples/CustomInputs');
const ErrorMessageCode = require('!raw-loader!../examples/ErrorMessage');
const FastFieldCode = require('!raw-loader!../examples/FastField');
const MultistepWizardCode = require('!raw-loader!../examples/MultistepWizard');
const SchemaValidationCode = require('!raw-loader!../examples/SchemaValidation');
const SyncValidationCode = require('!raw-loader!../examples/SyncValidation');
const FieldLevelValidationCode = require('!raw-loader!../examples/FieldLevelValidation');
const CombinedValidationsCode = require('!raw-loader!../examples/CombinedValidations');
const AsyncValidationCode = require('!raw-loader!../examples/AsyncValidation')
.default;
const ArraysCode = require('!raw-loader!../examples/Arrays').default;
const BasicCode = require('!raw-loader!../examples/Basic.js').default;
const DebouncedAutoSaveCode = require('!raw-loader!../examples/DebouncedAutoSave.js')
.default;
const CustomInputsCode = require('!raw-loader!../examples/CustomInputs')
.default;
const ErrorMessageCode = require('!raw-loader!../examples/ErrorMessage')
.default;
const FastFieldCode = require('!raw-loader!../examples/FastField').default;
const MultistepWizardCode = require('!raw-loader!../examples/MultistepWizard')
.default;
const SchemaValidationCode = require('!raw-loader!../examples/SchemaValidation')
.default;
const SyncValidationCode = require('!raw-loader!../examples/SyncValidation')
.default;
const FieldLevelValidationCode = require('!raw-loader!../examples/FieldLevelValidation')
.default;
const CombinedValidationsCode = require('!raw-loader!../examples/CombinedValidations')
.default;

function cleanExample(str) {
return str
Expand Down Expand Up @@ -109,6 +120,16 @@ storiesOf('Example', module)
</div>
);
})
.add('Debounced AutoSave', () => {
return (
<div className="formik-example">
<main>
<DebouncedAutoSave />
</main>
<Code>{cleanExample(DebouncedAutoSaveCode)}</Code>
</div>
);
})
.add('Using <ErrorMessage />', () => {
return (
<div className="formik-example">
Expand Down
16 changes: 11 additions & 5 deletions .storybook/webpack.config.js
@@ -1,15 +1,21 @@
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
const webpack = require('webpack');

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
defaultConfig.module.rules.push({
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
configFileName: 'tsconfig.storybook.json',
},
});
defaultConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx'];
defaultConfig.resolve.plugins = [new TsConfigPathsPlugin({})];
config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx'];
config.resolve.plugins = [new TsConfigPathsPlugin({})];
config.plugins.push(
new webpack.DefinePlugin({
'__DEV__': process.env.NODE_ENV === 'development'
})
);

return defaultConfig;
return config;
};
43 changes: 26 additions & 17 deletions README.md
Expand Up @@ -8,6 +8,14 @@
[![Discord](https://img.shields.io/discord/102860784329052160.svg?style=flat-square)](https://discord.gg/cU6MCve)
[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/palmer)

**Visit [https://jaredpalmer.com/formik/](https://jaredpalmer.com/formik/) to get started with Formik.**

---

**The below readme is the documentation for the `next` (prerelease) branch. To view the documentation for the latest stable Formik version visit [jaredpalmer.com/formik/docs](https://jaredpalmer.com/formik/docs/overview)**

---

Let's face it, forms are really verbose in
[React](https://github.com/facebook/react). To make matters worse, most form
helpers do wayyyy too much magic and often have a significant performance cost
Expand All @@ -26,41 +34,41 @@ organized--making testing, refactoring, and reasoning about your forms a breeze.

## Docs

* [Get Started](https://jaredpalmer.com/formik/docs/overview)
* [API Reference](https://jaredpalmer.com/formik/docs/api/formik)
* [Articles / Tutorials](https://jaredpalmer.com/formik/docs/resources)
* [Get Help](https://jaredpalmer.com/formik/help)
* [Release Notes](https://github.com/jaredpalmer/formik/releases)
- [Get Started](https://jaredpalmer.com/formik/docs/overview)
- [API Reference](https://jaredpalmer.com/formik/docs/api/formik)
- [Articles / Tutorials](https://jaredpalmer.com/formik/docs/resources)
- [Get Help](https://jaredpalmer.com/formik/help)
- [Release Notes](https://github.com/jaredpalmer/formik/releases)

## In-browser Playgrounds

You can play with Formik in your web browser with these live online playgrounds.

* CodeSandbox (ReactDOM) https://codesandbox.io/s/zKrK5YLDZ
* Expo Snack (React Native) https://snack.expo.io/@jaredpalmer/basic-formik-x-react-native-example
- CodeSandbox (ReactDOM) https://codesandbox.io/s/zKrK5YLDZ
- Expo Snack (React Native) https://snack.expo.io/@jaredpalmer/basic-formik-x-react-native-example

## Examples

* [Basics](https://codesandbox.io/s/zKrK5YLDZ)
* [Sync Validation](https://codesandbox.io/s/q8yRqQMp)
* [Building your own input primitives](https://codesandbox.io/s/qJR4ykJk)
* Working with 3rd-party inputs:
- [Basics](https://codesandbox.io/s/zKrK5YLDZ)
- [Sync Validation](https://codesandbox.io/s/q8yRqQMp)
- [Building your own input primitives](https://codesandbox.io/s/qJR4ykJk)
- Working with 3rd-party inputs:
- [react-select-v1](https://codesandbox.io/s/jRzE53pqR)
- [react-select-v2](https://codesandbox.io/s/73jj9zom96)
- [Draft.js](https://codesandbox.io/s/QW1rqjBLl)
* [Accessing React lifecycle functions](https://codesandbox.io/s/pgD4DLypy)
* [React Native](https://snack.expo.io/@ferrannp/react-native-x-formik)
* [TypeScript](https://codesandbox.io/s/8y578o8152)
* [Handling API Errors](https://codesandbox.io/s/nw193yq32l)
- [Accessing React lifecycle functions](https://codesandbox.io/s/pgD4DLypy)
- [React Native](https://snack.expo.io/@ferrannp/react-native-x-formik)
- [TypeScript](https://codesandbox.io/s/8y578o8152)
- [Handling API Errors](https://codesandbox.io/s/nw193yq32l)

## Organizations and projects using Formik

[List of organizations and projects using Formik](https://github.com/jaredpalmer/formik/issues/87)

## Authors

* Jared Palmer [@jaredpalmer](https://twitter.com/jaredpalmer)
* Ian White [@eonwhite](https://twitter.com/eonwhite)
- Jared Palmer [@jaredpalmer](https://twitter.com/jaredpalmer)
- Ian White [@eonwhite](https://twitter.com/eonwhite)

## Contributors

Expand All @@ -72,6 +80,7 @@ Formik is made with <3 thanks to these wonderful people
| [<img src="https://avatars2.githubusercontent.com/u/4060187?v=4" width="100px;"/><br /><sub><b>Jared Palmer</b></sub>](http://jaredpalmer.com)<br />[💬](#question-jaredpalmer "Answering Questions") [💻](https://github.com/jaredpalmer/formik/commits?author=jaredpalmer "Code") [🎨](#design-jaredpalmer "Design") [📖](https://github.com/jaredpalmer/formik/commits?author=jaredpalmer "Documentation") [💡](#example-jaredpalmer "Examples") [🤔](#ideas-jaredpalmer "Ideas, Planning, & Feedback") [👀](#review-jaredpalmer "Reviewed Pull Requests") [⚠️](https://github.com/jaredpalmer/formik/commits?author=jaredpalmer "Tests") | [<img src="https://avatars0.githubusercontent.com/u/109324?v=4" width="100px;"/><br /><sub><b>Ian White</b></sub>](https://www.stardog.io)<br />[💬](#question-eonwhite "Answering Questions") [🐛](https://github.com/jaredpalmer/formik/issues?q=author%3Aeonwhite "Bug reports") [💻](https://github.com/jaredpalmer/formik/commits?author=eonwhite "Code") [📖](https://github.com/jaredpalmer/formik/commits?author=eonwhite "Documentation") [🤔](#ideas-eonwhite "Ideas, Planning, & Feedback") [👀](#review-eonwhite "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/829963?v=4" width="100px;"/><br /><sub><b>Andrej Badin</b></sub>](http://andrejbadin.com)<br />[💬](#question-Andreyco "Answering Questions") [🐛](https://github.com/jaredpalmer/formik/issues?q=author%3AAndreyco "Bug reports") [📖](https://github.com/jaredpalmer/formik/commits?author=Andreyco "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/91115?v=4" width="100px;"/><br /><sub><b>Adam Howard</b></sub>](http://adz.co.de)<br />[💬](#question-skattyadz "Answering Questions") [🐛](https://github.com/jaredpalmer/formik/issues?q=author%3Askattyadz "Bug reports") [🤔](#ideas-skattyadz "Ideas, Planning, & Feedback") [👀](#review-skattyadz "Reviewed Pull Requests") | [<img src="https://avatars1.githubusercontent.com/u/6711845?v=4" width="100px;"/><br /><sub><b>Vlad Shcherbin</b></sub>](https://github.com/VladShcherbin)<br />[💬](#question-VladShcherbin "Answering Questions") [🐛](https://github.com/jaredpalmer/formik/issues?q=author%3AVladShcherbin "Bug reports") [🤔](#ideas-VladShcherbin "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/383212?v=4" width="100px;"/><br /><sub><b>Brikou CARRE</b></sub>](https://github.com/brikou)<br />[🐛](https://github.com/jaredpalmer/formik/issues?q=author%3Abrikou "Bug reports") [📖](https://github.com/jaredpalmer/formik/commits?author=brikou "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/5314713?v=4" width="100px;"/><br /><sub><b>Sam Kvale</b></sub>](http://skvale.github.io)<br />[🐛](https://github.com/jaredpalmer/formik/issues?q=author%3Askvale "Bug reports") [💻](https://github.com/jaredpalmer/formik/commits?author=skvale "Code") [⚠️](https://github.com/jaredpalmer/formik/commits?author=skvale "Tests") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars0.githubusercontent.com/u/13765558?v=4" width="100px;"/><br /><sub><b>Jon Tansey</b></sub>](http://jon.tansey.info)<br />[🐛](https://github.com/jaredpalmer/formik/issues?q=author%3Ajontansey "Bug reports") [💻](https://github.com/jaredpalmer/formik/commits?author=jontansey "Code") | [<img src="https://avatars0.githubusercontent.com/u/6819171?v=4" width="100px;"/><br /><sub><b>Tyler Martinez</b></sub>](http://slightlytyler.com)<br />[🐛](https://github.com/jaredpalmer/formik/issues?q=author%3Aslightlytyler "Bug reports") [📖](https://github.com/jaredpalmer/formik/commits?author=slightlytyler "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1285032?v=4" width="100px;"/><br /><sub><b>Tobias Lohse</b></sub>](http://MrLoh.se)<br />[🐛](https://github.com/jaredpalmer/formik/issues?q=author%3AMrLoh "Bug reports") [💻](https://github.com/jaredpalmer/formik/commits?author=MrLoh "Code") |

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the
Expand Down
20 changes: 8 additions & 12 deletions docs/api/fastfield.md
Expand Up @@ -72,17 +72,15 @@ const Basic = () => (
form.errors.firstName && <div>{form.errors.firstName}</div>}

<label htmlFor="middleInitial">Middle Initial</label>
<FastField
name="middleInitial"
placeholder="F"
render={({ field, form }) => (
<FastField name="middleInitial" placeholder="F">
{({ field, form, meta }) => (
<div>
<input {...field} />
{/**
* This updates normally because it's from the same slice of Formik state,
* i.e. path to the object matches the name of this <FastField />
*/}
{form.touched.middleInitial ? form.errors.middleInitial : null}
{meta.touched ? meta.error : null}

{/** This won't ever update since it's coming from
from another <Field>/<FastField>'s (i.e. firstName's) slice */}
Expand All @@ -102,25 +100,23 @@ const Basic = () => (
</button>
</div>
)}
/>
</FastField>

{/** Updates for all changes to Formik state
and all changes by all <Field>s and <FastField>s */}
<label htmlFor="lastName">LastName</label>
<Field
name="lastName"
placeholder="Baby"
render={({ field, form }) => (
<Field name="lastName" placeholder="Baby">
{( }) => (
<div>
<input {...field} />
{/** Works because this is inside
{/** Works because this is inside
of a <Field/>, which gets all updates */}
{form.touched.firstName && form.errors.firstName
? form.errors.firstName
: null}
</div>
)}
/>
</Field>

{/** Updates for all changes to Formik state and
all changes by all <Field>s and <FastField>s */}
Expand Down

0 comments on commit 67f8369

Please sign in to comment.