Merge branch 'master' into johnrom/3081-yarn-changeset

jaredpalmer · Jun 2, 2021 · 5eb46b9 · 5eb46b9
2 parents 5ad05f4 + 2bfa592
commit 5eb46b9
Show file tree

Hide file tree

Showing 19 changed files with 9,421 additions and 43 deletions.
diff --git a/.changeset/brown-jokes-act.md b/.changeset/brown-jokes-act.md
diff --git a/.changeset/thirty-socks-whisper.md b/.changeset/thirty-socks-whisper.md
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,5 @@
+# Created by Vercel CLI
+NEXT_PUBLIC_GA_TRACKING_ID="xxxx"
+GA_TRACKING_ID="XXXXX"
+SENTRY_DSN="XXXX"
+BLOG_INDEX_ID="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
diff --git a/.gitignore b/.gitignore
@@ -16,9 +16,9 @@ yarn.lock
 
 website/translated_docs
 website/build
-website/yarn.lock
+!website/yarn.lock
 website/node_modules
 website/i18n
 !website2/yarn.lock
-
+.env
 .vercel
diff --git a/docs/api/formik.md b/docs/api/formik.md
@@ -93,11 +93,11 @@ to `<button onClick={handleReset}>...</button>`
 
 #### `handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void`
 
-Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [Form Submission](../guides/form-submission).
+Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `isSubmitting: boolean`
 
-Submitting state of the form. Returns `true` if submission is in progress and `false` otherwise. IMPORTANT: Formik will set this to `true` as soon as submission is _attempted_. To learn more about the submission process, see [Form Submission](../guides/form-submission).
+Submitting state of the form. Returns `true` if submission is in progress and `false` otherwise. IMPORTANT: Formik will set this to `true` as soon as submission is _attempted_. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `isValid: boolean`
 
@@ -107,7 +107,7 @@ Returns `true` if there are no `errors` (i.e. the `errors` object is empty) and
 
 #### `isValidating: boolean`
 
-Returns `true` if Formik is running validation during submission, or by calling [`validateForm`] directly `false` otherwise. To learn more about what happens with `isValidating` during the submission process, see [Form Submission](../guides/form-submission).
+Returns `true` if Formik is running validation during submission, or by calling [`validateForm`] directly `false` otherwise. To learn more about what happens with `isValidating` during the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `resetForm: (nextState?: Partial<FormikState<Values>>) => void`
 
@@ -204,7 +204,7 @@ use it to pass API responses back into your component in `handleSubmit`.
 
 #### `setSubmitting: (isSubmitting: boolean) => void`
 
-Set `isSubmitting` imperatively. You would call it with `setSubmitting(false)` in your `onSubmit` handler to finish the cycle. To learn more about the submission process, see [Form Submission](../guides/form-submission).
+Set `isSubmitting` imperatively. You would call it with `setSubmitting(false)` in your `onSubmit` handler to finish the cycle. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `setTouched: (fields: { [field: string]: boolean }, shouldValidate?: boolean) => void`
 

diff --git a/docs/guides/validation.md b/docs/guides/validation.md
@@ -68,7 +68,6 @@ To add Yup to your project, install it from NPM.
 
 ```sh
 npm install yup --save
-# typescript users should add the @types/yup
 ```
 
 ```jsx
@@ -326,7 +325,7 @@ export const DisplayingErrorMessagesExample = () => (
 );
 ```
 
-> The [ErrorMessage](../api/errormessage) component can also be used to display error messages.
+> The [ErrorMessage](../api/errormessage.md) component can also be used to display error messages.
 
 ## Frequently Asked Questions
 

diff --git a/docs/resources.md b/docs/resources.md
@@ -15,7 +15,7 @@ description: Formik conference talks, courses, videos, blog posts, learning reso
 
 - [Build and Validate Forms in React Native with Formik & Yup](https://www.reactnativeschool.com/build-and-validate-forms-with-formik-and-yup) (Series) by [Spencer Carli](https://twitter.com/spencer_carli) - December 14, 2018
 - [Form handling in React-Native with Formik and Yup](https://www.youtube.com/watch?v=EO08ydCCsOQ) by [Emanuel Quimper](https://twitter.com/QuimperEmanuel) - May 23, 2018
-- Building an Airbnb Clone Series by [Ben Awad](https://twitter.com/benawad97)
+- Building an Airbnb Clone Series by [Ben Awad](https://twitter.com/benawad)
   - [Coding React Form with Formik and Ant Design - Part 3](https://www.youtube.com/watch?v=pbCrDBQFU_A&index=5&list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)
   - [Form Validation in Formik with Yup - Part 4](https://www.youtube.com/watch?v=2CBnRDJ--aM&index=6&list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)
   - [Simplifying a React form with the Formik Field Component - Part 6](https://www.youtube.com/watch?v=eMjju1nQ1F8)
@@ -24,8 +24,8 @@ description: Formik conference talks, courses, videos, blog posts, learning reso
   - [Custom Formik Fields and Fix Typescript Imports - Part 37](https://www.youtube.com/watch?v=Xwjg8meOglI)
   - [Update Listing Form - Part 67](https://www.youtube.com/watch?v=PWgGkWwwHiE&index=69&list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)
 - [Better React Forms with Formik](https://www.youtube.com/watch?v=yNiJkjEwmpw) by [Andrew Mead](https://twitter.com/andrew_j_mead) - Nov 28, 2017
-- [Simple React Form with Formik](https://youtu.be/MuwQdUoNKzg) by [Ben Awad](https://twitter.com/benawad97) - Nov 3, 2017
-- [Building an Add Channel Form with Formik](https://www.youtube.com/watch?v=anwo_i0wgNo) by [Ben Awad](https://twitter.com/benawad97) - Oct 27, 2017
+- [Simple React Form with Formik](https://youtu.be/MuwQdUoNKzg) by [Ben Awad](https://twitter.com/benawad) - Nov 3, 2017
+- [Building an Add Channel Form with Formik](https://www.youtube.com/watch?v=anwo_i0wgNo) by [Ben Awad](https://twitter.com/benawad) - Oct 27, 2017
 
 ## Community Articles / Tutorials
 

diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,19 @@
 # formik-native
 
+## 2.1.16
+
+### Patch Changes
+
+- Updated dependencies [[`3a9c707`](https://github.com/formium/formik/commit/3a9c707c8eec200d6eae2955536fb987daf38854)]:
+  - formik@2.2.8
+
+## 2.1.15
+
+### Patch Changes
+
+- Updated dependencies [[`e50040a`](https://github.com/formium/formik/commit/e50040abe49cf7bb46580ea46af6a2b487539830), [`31405ab`](https://github.com/formium/formik/commit/31405abfc9373b2236eecf0f34f630906579e193), [`c2d6926`](https://github.com/formium/formik/commit/c2d692659dc0c1ee43f7e9f60e18c36e0701eefe)]:
+  - formik@2.2.7
+
 ## 2.1.14
 
 ### Patch Changes

diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.14",
+  "version": "2.1.16",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "2.2.6"
+    "formik": "2.2.8"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",

diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
@@ -1,5 +1,21 @@
 # formik
 
+## 2.2.8
+
+### Patch Changes
+
+- [`3a9c707`](https://github.com/formium/formik/commit/3a9c707c8eec200d6eae2955536fb987daf38854) [#3203](https://github.com/formium/formik/pull/3203) Thanks [@hixus](https://github.com/hixus)! - Fixes type of setError value as it is same as setFieldError message
+
+## 2.2.7
+
+### Patch Changes
+
+- [`e50040a`](https://github.com/formium/formik/commit/e50040abe49cf7bb46580ea46af6a2b487539830) [#2881](https://github.com/formium/formik/pull/2881) Thanks [@jinmayamashita](https://github.com/jinmayamashita)! - Prevent calling getSelectedValues when the element has not options
+
+* [`31405ab`](https://github.com/formium/formik/commit/31405abfc9373b2236eecf0f34f630906579e193) [#3201](https://github.com/formium/formik/pull/3201) Thanks [@artola](https://github.com/artola)! - Fixes regression that resulted in error update race condition from when using `validateOnMount`
+
+- [`c2d6926`](https://github.com/formium/formik/commit/c2d692659dc0c1ee43f7e9f60e18c36e0701eefe) [#2995](https://github.com/formium/formik/pull/2995) Thanks [@johnrom](https://github.com/johnrom)! - Allow explicitly setting `<form action>` to empty string (#2981). Note: previous code which passed an empty string would result in a noop (simply appending # to the url), but this will now result in a form submission to the current page.
+
 ## 2.2.6
 
 ### Patch Changes

diff --git a/packages/formik/package.json b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Build forms in React, without the tears",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net> (https://jaredpalmer.com)",
   "repository": "formium/formik",

diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
@@ -325,9 +325,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
       return runAllValidations(values).then(combinedErrors => {
         if (!!isMounted.current) {
           dispatch({ type: 'SET_ISVALIDATING', payload: false });
-          if (!isEqual(state.errors, combinedErrors)) {
-            dispatch({ type: 'SET_ERRORS', payload: combinedErrors });
-          }
+          dispatch({ type: 'SET_ERRORS', payload: combinedErrors });
         }
         return combinedErrors;
       });

diff --git a/packages/formik/src/types.tsx b/packages/formik/src/types.tsx
@@ -299,7 +299,7 @@ export interface FieldHelperProps<Value> {
   /** Set the field's touched value */
   setTouched: (value: boolean, shouldValidate?: boolean) => void;
   /** Set the field's error value */
-  setError: (value: Value) => void;
+  setError: (value: string | undefined) => void;
 }
 
 /** Field input value, name, and event handlers */

diff --git a/website/.sample.env.build b/website/.sample.env.build
diff --git a/website/package.json b/website/package.json
@@ -39,7 +39,7 @@
     "isomorphic-unfetch": "^3.0.0",
     "next": "^10.0.5",
     "next-images": "^1.4.0",
-    "next-mdx-remote": "^2.1.3",
+    "next-mdx-remote": "^3.0.1",
     "node-fetch": "^2.6.0",
     "prismjs": "^1.20.0",
     "react": "^16.13.1",

diff --git a/website/src/lib/notion/getBlogIndex.ts b/website/src/lib/notion/getBlogIndex.ts
@@ -40,7 +40,7 @@ export default async function getBlogIndex(previews = true) {
         `Failed to load Notion posts, attempting to auto create table`
       );
       try {
-        await createTable();
+        // await createTable();
         console.log(`Successfully created table in Notion`);
       } catch (err) {
         console.error(

diff --git a/website/src/pages/docs/[...slug].tsx b/website/src/pages/docs/[...slug].tsx
@@ -34,8 +34,8 @@ import { Seo } from 'components/Seo';
 import { DocsPageFooter } from 'components/DocsPageFooter';
 import addRouterEvents from 'components/addRouterEvents';
 import MDXComponents from 'components/MDXComponents';
-import hydrate from 'next-mdx-remote/hydrate';
-import renderToString from 'next-mdx-remote/render-to-string';
+import { serialize } from 'next-mdx-remote/serialize';
+import { MDXRemote } from 'next-mdx-remote';
 import rehypeDocs from 'lib/docs/rehype-docs';
 
 interface DocsProps {
@@ -81,10 +81,6 @@ export default function Docs({ page, routes, route: _route }: DocsProps) {
     return <ErrorPage statusCode={404} />;
   }
 
-  const content = hydrate(page.mdxSource as any, {
-    components: MDXComponents,
-  });
-
   return (
     <>
       {tag && (
@@ -120,7 +116,13 @@ export default function Docs({ page, routes, route: _route }: DocsProps) {
 
                     <div className={s['markdown'] + ' w-full docs'}>
                       <h1>{page.title}</h1>
-                      <div className={s['markdown']}>{content}</div>
+                      <div className={s['markdown']}>
+                        {' '}
+                        <MDXRemote
+                          {...page.mdxSource}
+                          components={MDXComponents}
+                        />
+                      </div>
                       <DocsPageFooter
                         href={route?.path || ''}
                         route={route!}
@@ -137,7 +139,7 @@ export default function Docs({ page, routes, route: _route }: DocsProps) {
                           <h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
                             On this page
                           </h4>
-                          <Toc />
+                          <Toc key={asPath} />
                         </div>
                       </div>
                     ) : null}
@@ -270,8 +272,7 @@ export const getStaticProps: GetStaticProps<any, { slug: string[] }> = async ({
 
   const { content, data } = matter(md);
 
-  const mdxSource = await renderToString(content ?? '', {
-    components: MDXComponents,
+  const mdxSource = await serialize(content ?? '', {
     mdxOptions: {
       remarkPlugins,
       rehypePlugins: [[rehypeDocs as any, { filePath: route.path!, tag }]],

diff --git a/website/src/pages/users.tsx b/website/src/pages/users.tsx
@@ -11,7 +11,7 @@ import { users } from 'users';
 export interface UsersProps {}
 
 const Users: React.FC<UsersProps> = props => {
-  const editUrl = `${siteConfig.repoUrl}/edit/master/docs/src/users.ts`;
+  const editUrl = `${siteConfig.repoUrl}/edit/master/website/src/users.ts`;
   const showcase = users.map(user => (
     <a
       href={user.infoLink}