Make docs backed by github + vercel ISG

website/src/manifests/manifest.json

@@ -0,0 +1,154 @@
+{
+  "routes": [
+    {
+      "title": "Documentation",
+      "heading": true,
+      "routes": [
+        {
+          "title": "Getting Started",
+          "path": "/docs/overview.md"
+        },
+        {
+          "title": "Tutorial",
+          "path": "/docs/tutorial.md"
+        },
+        {
+          "title": "Resources",
+          "path": "/docs/resources.md"
+        },
+        {
+          "title": "3rd-Party Bindings",
+          "path": "/docs/3rd-party-bindings.md"
+        },
+        {
+          "title": "Migrating from v1.x to v2.x",
+          "path": "/docs/migrating-v2.md"
+        },
+        {
+          "title": "Guides",
+          "open": true,
+          "routes": [
+            {
+              "title": "Validation",
+              "path": "/docs/guides/validation.md"
+            },
+            {
+              "title": "Arrays",
+              "path": "/docs/guides/arrays.md"
+            },
+            {
+              "title": "TypeScript",
+              "path": "/docs/guides/typescript.md"
+            },
+            {
+              "title": "React Native",
+              "path": "/docs/guides/react-native.md"
+            },
+            {
+              "title": "Form Submission",
+              "path": "/docs/guides/form-submission.md"
+            }
+          ]
+        },
+        {
+          "title": "Examples",
+          "open": true,
+          "routes": [
+            {
+              "title": "Basic",
+              "path": "/docs/examples/basic.md"
+            },
+            {
+              "title": "TypeScript",
+              "path": "/docs/examples/typescript.md"
+            },
+            {
+              "title": "Async Submission",
+              "path": "/docs/examples/async-submission.md"
+            },
+
+            {
+              "title": "Checkboxes",
+              "path": "/docs/examples/checkboxes.md"
+            },
+            {
+              "title": "Radio Group",
+              "path": "/docs/examples/radio-group.md"
+            },
+            {
+              "title": "Dependent Fields",
+              "path": "/docs/examples/dependent-fields.md"
+            },
+            {
+              "title": "Dependent Fields with Async API Request",
+              "path": "/docs/examples/dependent-fields-async-api-request.md"
+            },
+            {
+              "title": "Arrays and Lists",
+              "path": "/docs/examples/field-arrays.md"
+            },
+            {
+              "title": "Instant Feedback",
+              "path": "/docs/examples/instant-feedback.md"
+            },
+            {
+              "title": "More Examples",
+              "path": "/docs/examples/more-examples.md"
+            }
+          ]
+        }
+      ]
+    },
+
+    {
+      "title": "API Reference",
+      "heading": true,
+      "routes": [
+        {
+          "title": "connect()",
+          "path": "/docs/api/connect.md"
+        },
+        {
+          "title": "<ErrorMessage />",
+          "path": "/docs/api/errormessage.md"
+        },
+        {
+          "title": "<FastField />",
+          "path": "/docs/api/fastfield.md"
+        },
+        {
+          "title": "<Field />",
+          "path": "/docs/api/field.md"
+        },
+        {
+          "title": "<FieldArray />",
+          "path": "/docs/api/fieldarray.md"
+        },
+        {
+          "title": "<Form />",
+          "path": "/docs/api/form.md"
+        },
+        {
+          "title": "<Formik />",
+          "path": "/docs/api/formik.md"
+        },
+        {
+          "title": "useField()",
+          "path": "/docs/api/useField.md"
+        },
+        {
+          "title": "useFormik()",
+          "path": "/docs/api/useFormik.md"
+        },
+        {
+          "title": "useFormikContext()",
+          "path": "/docs/api/useFormikContext.md"
+        },
+        {
+          "title": "withFormik()",
+          "path": "/docs/api/withFormik.md"
+        }
+      ]
+    }
+  ]
+}

website/src/pages/docs/3rd-party-bindings.md

@@ -0,0 +1,14 @@
+---
+title: 3rd Party Bindings
+original_id: 3rd-party-bindings
+---
+
+If you would like to use Formik with a UI framework, you'll probably want to create a wrapper component that binds Formik's props and callbacks.
+
+A few popular frameworks have open source wrappers readily available:
+
+- [Ant Design](https://github.com/jannikbuschke/formik-antd)
+- [Fabric](https://github.com/kmees/formik-office-ui-fabric-react)
+- [Material UI](https://github.com/stackworx/formik-material-ui)
+- [Reactstrap](https://github.com/shoaibkhan94/reactstrap-formik)
+- [Semantic UI](https://github.com/turner-industries/formik-semantic-ui)

website/src/pages/docs/api/connect.md

@@ -0,0 +1,31 @@
+---
+id: connect
+title: connect()
+custom_edit_url: https://github.com/jaredpalmer/formik/edit/master/docs/api/connect.md
+---
+
+`connect()` is a higher-order component (HoC) that allows you to hook anything into Formik's context. It is used internally to construct `<Field>` and `<Form>`, but you can use it to build out new components as your needs change.
+
+## Type signature
+
+```tsx
+connect<OuterProps, Values = any>(Comp: React.ComponentType<OuterProps & { formik: FormikContext<Values> }>) => React.ComponentType<OuterProps>
+```
+
+## Example
+
+```jsx
+import React from 'react';
+import { connect, getIn } from 'formik';
+
+// This component renders an error message if a field has
+// an error and it's already been touched.
+const ErrorMessage = props => {
+  // All FormikProps available on props.formik!
+  const error = getIn(props.formik.errors, props.name);
+  const touch = getIn(props.formik.touched, props.name);
+  return touch && error ? error : null;
+};
+
+export default connect(ErrorMessage);
+```

website/src/pages/docs/api/errormessage.md

@@ -0,0 +1,118 @@
+---
+id: errormessage
+title: <ErrorMessage />
+custom_edit_url: https://github.com/jaredpalmer/formik/edit/master/docs/api/errormessage.md
+---
+
+`<ErrorMessage />` is a component that renders the error message of a given field if that field has been visited (i.e.`touched[name] === true`) (and there is an `error` message present). It expects that all error messages are stored for a given field as a string. Like `<Field />`, `<FastField />`, and `<FieldArray />`, lodash-like dot path and bracket syntax is supported.
+
+## Example
+
+```diff
+import React from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import * as Yup from "yup";
+
+const SignupSchema = Yup.object().shape({
+  name: Yup.string()
+    .min(2, 'Too Short!')
+    .max(70, 'Too Long!')
+    .required('Required'),
+  email: Yup.string()
+    .email('Invalid email')
+    .required('Required'),
+});
+
+export const ValidationSchemaExample = () => (
+  <div>
+    <h1>Signup</h1>
+    <Formik
+      initialValues={{
+        name: '',
+        email: '',
+      }}
+      validationSchema={SignupSchema}
+      onSubmit={values => {
+        // same shape as initial values
+        console.log(values);
+      }}
+    >
+      {({ errors, touched }) => (
+        <Form>
+          <Field name="name"  />
+-           {errors.name && touched.name ? (
+-            <div>{errors.name}</div>
+-          ) : null}
++         <ErrorMessage name="name" />
+          <Field name="email" type="email" />
+-           {errors.email && touched.email ? (
+-            <div>{errors.email}</div>
+-          ) : null}
++         <ErrorMessage name="email" />
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+```
+
+#### Props
+
+---
+
+# Reference
+
+## Props
+
+### `children`
+
+`children?: ((message: string) => React.ReactNode)`
+
+A function that returns a valid React element. Will only be called when the field has been touched and an error exists.
+
+```jsx
+// the render callback will only be called when the
+// field has been touched and an error exists and subsequent updates.
+<ErrorMessage name="email">{(msg) => <div>{msg}</div>}</ErrorMessage>
+```
+
+### `component`
+
+`component?: string | React.ComponentType<FieldProps>`
+
+Either a React component or the name of an HTML element to render. If not specified, `<ErrorMessage>` will just return a string.
+
+```jsx
+<ErrorMessage component="div" name="email" />
+// --> {touched.email && error.email ? <div>{error.email}</div> : null}
+
+<ErrorMessage component="span" name="email" />
+// --> {touched.email && error.email ? <span>{error.email}</span> : null}
+
+<ErrorMessage component={Custom} name="email" />
+// --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}
+
+<ErrorMessage name="email" />
+// This will return a string. React 16+.
+// --> {touched.email && error.email ? error.email : null}
+```
+
+### `name`
+
+`name: string`
+**Required**
+
+A field's name in Formik state. To access nested objects or arrays, name can also accept lodash-like dot path like `social.facebook` or `friends[0].firstName`
+
+### `render`
+
+`render?: (error: string) => React.ReactNode`
+
+A function that returns a valid React element. Will only be called when the field has been touched and an error exists.
+
+```jsx
+// the render callback will only be called when the
+// field has been touched and an error exists and subsequent updates.
+<ErrorMessage name="email" render={(msg) => <div>{msg}</div>} />
+```