Skip to content

Commit

Permalink
Merge branch 'master' into add-focus-handling
Browse files Browse the repository at this point in the history 
* master:
  Rerender <FastField /> when  isSubmitting has changed (jaredpalmer#915)
  Update Snack example for React Native (jaredpalmer#919)
  Update examples with <ErrorMessage /> (jaredpalmer#908)

# Conflicts:
#	src/FastField.tsx
  • Loading branch information
@AntiFish03
AntiFish03 committed Sep 19, 2018
2 parents 7a8904e + 63a87eb commit d8f9274
Show file tree
Hide file tree
Showing 18 changed files with 503 additions and 271 deletions.
132 changes: 89 additions & 43 deletions .storybook/example.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import './story.css';
import { action, storiesOf, module } from '@storybook/react';
import * as React from 'react';
import React from 'react';
import { FormikConsumer } from 'formik';
import AsyncValidation from '../examples/AsyncValidation';
import Arrays from '../examples/Arrays';
import Basic from '../examples/Basic.js';
import CustomImputs from '../examples/CustomInputs';
import CustomInputs from '../examples/CustomInputs';
import ErrorMessage from '../examples/ErrorMessage';
import FastField from '../examples/FastField';
import MultistepWizard from '../examples/MultistepWizard';
import SchemaValidation from '../examples/SchemaValidation';
import SyncValidation from '../examples/SyncValidation';
Expand All @@ -15,121 +18,164 @@ 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');

function cleanExample(str) {
return str
.replace(`import { Debug } from './Debug';`, '')
.replace(`<Debug />`, '');
}

const Code = props => (
<pre
<div
style={{
position: 'absolute',
top: 12,
right: 12,
bottom: 12,
width: 500,
border: '1px solid #eee',
margin: '0 12px',
borderRadius: 4,
overflowX: 'scroll',
fontSize: 11,
lineHeight: 1.4,
boxSizing: 'border-box',
padding: 12,
margin: 0,
background: '#f6f8fa',
boxShadow: '0 0 1px #eee inset',
}}
{...props}
/>
>
<div
style={{
textTransform: 'uppercase',
fontSize: 11,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
fontWeight: 500,
padding: '.5rem',
background: '#555',
color: '#fff',
letterSpacing: '1px',
}}
>
Example Code
</div>
<pre
style={{
overflowX: 'scroll',
fontSize: 11,
padding: '.5rem',
boxSizing: 'border-box',
}}
{...props}
/>
</div>
);

storiesOf('Example', module)
.add('Basic', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<Basic />
</main>
<Code>{BasicCode}</Code>
<Code>{cleanExample(BasicCode)}</Code>
</div>
);
})
.add('Arrays', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<Arrays />
</main>
<Code>{ArraysCode}</Code>
<Code>{cleanExample(ArraysCode)}</Code>
</div>
);
})
.add('AsyncValidation', () => {
.add('Async Validation', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<AsyncValidation />
</main>
<Code>{AsyncValidationCode}</Code>
<Code>{cleanExample(AsyncValidationCode)}</Code>
</div>
);
})
.add('Custom Inputs', () => {
return (
<div className="formik-example">
<main>
<CustomInputs />
</main>
<Code>{cleanExample(CustomInputsCode)}</Code>
</div>
);
})
.add('Using <ErrorMessage />', () => {
return (
<div className="formik-example">
<main>
<ErrorMessage />
</main>
<Code>{cleanExample(ErrorMessageCode)}</Code>
</div>
);
})
.add('CustomImputs', () => {
.add('FastField', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<CustomImputs />
<FastField />
</main>
<Code>{CustomInputsCode}</Code>
<Code>{cleanExample(FastFieldCode)}</Code>
</div>
);
})
.add('MultistepWizard', () => {
.add('Multistep Wizard', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<MultistepWizard />
</main>
<Code>{MultistepWizardCode}</Code>
<Code>{cleanExample(MultistepWizardCode)}</Code>
</div>
);
})
.add('SchemaValidation', () => {
.add('Yup Schema Validation', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<SchemaValidation />
</main>
<Code>{SchemaValidationCode}</Code>
<Code>{cleanExample(SchemaValidationCode)}</Code>
</div>
);
})
.add('SyncValidation', () => {
.add('Sync Validation', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<SyncValidation />
</main>
<Code>{SyncValidationCode}</Code>
<Code>{cleanExample(SyncValidationCode)}</Code>
</div>
);
})
.add('FieldLevelValidation', () => {
.add('Field-level Validation', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<FieldLevelValidation />
</main>
<Code>{FieldLevelValidationCode}</Code>
<Code>{cleanExample(FieldLevelValidationCode)}</Code>
</div>
);
})
.add('CombinedValidations', () => {
.add('Combined Validations', () => {
return (
<div className="story">
<div className="formik-example">
<main>
<CombinedValidations />
</main>
<Code>{CombinedValidationsCode}</Code>
<Code>{cleanExample(CombinedValidationsCode)}</Code>
</div>
);
});
Loading

0 comments on commit d8f9274

Please sign in to comment.