Fix prettier, eslint and upgrade tsdx

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

app/pages/_app.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {

app/pages/basic.js

@@ -24,8 +24,8 @@ const Basic = () => (
           .max(20, 'Nice try, nobody has a last name that long')
           .required('Required'),
       })}
-      onSubmit={async (values) => {
-        await new Promise((r) => setTimeout(r, 500));
+      onSubmit={async values => {
+        await new Promise(r => setTimeout(r, 500));
         alert(JSON.stringify(values, null, 2));
       }}
     >

docs/src/components/Footer.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 export interface FooterProps {}
 
-export const Footer: React.FC<FooterProps> = (props) => {
+export const Footer: React.FC<FooterProps> = props => {
   return (
     <div className="bg-gray-50 border-t border-gray-200">
       <div className="container mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">

docs/src/components/LayoutDocs.tsx

@@ -42,7 +42,7 @@ const addTagToSlug = (slug: string, tag?: string) => {
   return tag ? `/docs/${tag}/${slug.replace('/docs/', '')}` : slug;
 };
 
-export const LayoutDocs: React.FC<DocsProps> = (props) => {
+export const LayoutDocs: React.FC<DocsProps> = props => {
   const router = useRouter();
   const { slug, tag } = getSlugAndTag(router.asPath);
   const { routes } = getManifest(tag);
@@ -125,7 +125,7 @@ export const LayoutDocs: React.FC<DocsProps> = (props) => {
 };
 
 function getCategoryPath(routes: RouteItem[]) {
-  const route = routes.find((r) => r.path);
+  const route = routes.find(r => r.path);
   return route && removeFromLast(route.path!, '/');
 }
 

docs/src/components/clients/ClientsMarquee.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Client } from './Client';
 import { users } from 'users';
 
-const pinnedLogos = users.filter((p) => p.pinned);
+const pinnedLogos = users.filter(p => p.pinned);
 
-export const ClientsMarquee = React.memo((props) => {
+export const ClientsMarquee = React.memo(props => {
   return (
     <div className="overflow-x-hidden">
       <div className="relative translate-x-1/2" {...props}>

docs/src/components/useBoolean.tsx

@@ -13,7 +13,7 @@ export const useBoolean = (initial: boolean) => {
     value,
     {
       setValue,
-      toggle: useCallback(() => setValue((v) => !v), []),
+      toggle: useCallback(() => setValue(v => !v), []),
       setTrue: useCallback(() => setValue(true), []),
       setFalse: useCallback(() => setValue(false), []),
     },

docs/src/lib/docs/remark-paragraph-alerts.js

@@ -11,14 +11,14 @@ const sigils = {
 module.exports = function paragraphCustomAlertsPlugin() {
   return function transformer(tree) {
     visit(tree, 'paragraph', (pNode, _, parent) => {
-      visit(pNode, 'text', (textNode) => {
-        Object.keys(sigils).forEach((symbol) => {
+      visit(pNode, 'text', textNode => {
+        Object.keys(sigils).forEach(symbol => {
           if (textNode.value.startsWith(`${symbol} `)) {
             // Remove the literal sigil symbol from string contents
             textNode.value = textNode.value.replace(`${symbol} `, '');
 
             // Wrap matched nodes with <div> (containing proper attributes)
-            parent.children = parent.children.map((node) => {
+            parent.children = parent.children.map(node => {
               return is(pNode, node)
                 ? {
                     type: 'wrapper',

docs/src/lib/notion/createTable.js

@@ -347,7 +347,7 @@ async function getExistingexistingBlockId() {
   }
   const data = await res.json();
   const id = Object.keys(data ? data.recordMap.block : {}).find(
-    (id) => id !== pageId
+    id => id !== pageId
   );
   return id || uuid();
 }

docs/src/lib/notion/getTableData.ts

@@ -29,7 +29,7 @@ export default async function loadTable(collectionBlock: any, isPosts = false) {
       row.id = entry.value.id;
     }
 
-    schemaKeys.forEach((key) => {
+    schemaKeys.forEach(key => {
       // might be undefined
       let val = props[key] && props[key][0][0];
 

docs/src/lib/notion/server-constants.js

@@ -1,7 +1,7 @@
 // use commonjs so it can be required without transpiling
 const path = require('path');
 
-const normalizeId = (id) => {
+const normalizeId = id => {
   if (!id) return id;
   if (id.length === 36) return id;
   if (id.length !== 32) {

docs/src/pages/blog/[...slug].tsx

@@ -69,7 +69,7 @@ export const getStaticProps: GetStaticProps<any, { slug: string[] }> = async ({
   }
 
   const { users } = await getNotionUsers(post.Authors || []);
-  post.Authors = Object.keys(users).map((id) => users[id].full_name);
+  post.Authors = Object.keys(users).map(id => users[id].full_name);
 
   return {
     props: {
@@ -87,8 +87,8 @@ export async function getStaticPaths() {
   // for actually published ones
   return {
     paths: Object.keys(postsTable)
-      .filter((post) => postsTable[post].Published === 'Yes')
-      .map((slug) => getBlogLink(slug)),
+      .filter(post => postsTable[post].Published === 'Yes')
+      .map(slug => getBlogLink(slug)),
     fallback: true,
   };
 }
@@ -223,7 +223,7 @@ const RenderPost = ({ post, redirect, preview }: any) => {
                     React.createElement(
                       listTagName,
                       { key: listLastId! },
-                      Object.keys(listMap).map((itemId) => {
+                      Object.keys(listMap).map(itemId => {
                         if (listMap[itemId].isNested) return null;
 
                         const createEl = (item: any) =>

docs/src/pages/blog/index.tsx

@@ -19,7 +19,7 @@ export const getStaticProps: GetStaticProps<any> = async ({ preview }) => {
 
   const authorsToGet: Set<string> = new Set();
   const posts: any[] = Object.keys(postsTable)
-    .map((slug) => {
+    .map(slug => {
       const post = postsTable[slug];
       // remove draft posts in production
       if (!preview && !postIsPublished(post)) {
@@ -35,7 +35,7 @@ export const getStaticProps: GetStaticProps<any> = async ({ preview }) => {
 
   const { users } = await getNotionUsers([...(authorsToGet as any)]);
 
-  posts.map((post) => {
+  posts.map(post => {
     post.Authors = post.Authors.map((id: any) => users[id].full_name);
   });
 

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

@@ -20,7 +20,7 @@ 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) => {
+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);

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

@@ -74,7 +74,7 @@ A function that returns a valid React element. Will only be called when the fiel
 ```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>
+<ErrorMessage name="email">{msg => <div>{msg}</div>}</ErrorMessage>
 ```
 
 ### `component`
@@ -114,5 +114,5 @@ A function that returns a valid React element. Will only be called when the fiel
 ```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>} />
+<ErrorMessage name="email" render={msg => <div>{msg}</div>} />
 ```

docs/src/pages/docs/1.5.8/api/fastfield.md

@@ -52,12 +52,12 @@ const Basic = () => (
         lastName: Yup.string().required(),
         email: Yup.string().email().required(),
       })}
-      onSubmit={(values) => {
+      onSubmit={values => {
         setTimeout(() => {
           alert(JSON.stringify(values, null, 2));
         }, 500);
       }}
-      render={(formikProps) => (
+      render={formikProps => (
         <Form>
           {/** This <FastField> only updates for changes made to
            values.firstName, touched.firstName, errors.firstName */}

docs/src/pages/docs/1.5.8/api/field.md

@@ -223,7 +223,7 @@ import React from 'react';
 import { Formik, Form, Field } from 'formik';
 
 // Synchronous validation function
-const validate = (value) => {
+const validate = value => {
   let errorMessage;
   if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
     errorMessage = 'Invalid email address';
@@ -232,9 +232,9 @@ const validate = (value) => {
 };
 
 // Async validation function
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
-const validateAsync = (value) => {
+const validateAsync = value => {
   return sleep(2000).then(() => {
     if (['admin', 'null', 'god'].includes(value)) {
       throw 'Nice try';
@@ -246,7 +246,7 @@ const validateAsync = (value) => {
 const MyForm = () => (
   <Formik
     initialValues={{ email: '', username: '' }}
-    onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
+    onSubmit={values => alert(JSON.stringify(values, null, 2))}
   >
     {({ errors, touched }) => (
       <Form>

docs/src/pages/docs/1.5.8/api/fieldarray.md

@@ -18,7 +18,7 @@ export const FriendList = () => (
     <h1>Friend List</h1>
     <Formik
       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
-      onSubmit={(values) =>
+      onSubmit={values =>
         setTimeout(() => {
           alert(JSON.stringify(values, null, 2));
         }, 500)
@@ -27,7 +27,7 @@ export const FriendList = () => (
         <Form>
           <FieldArray
             name="friends"
-            render={(arrayHelpers) => (
+            render={arrayHelpers => (
               <div>
                 {values.friends && values.friends.length > 0 ? (
                   values.friends.map((friend, index) => (
@@ -82,7 +82,7 @@ You can also iterate through an array of objects, by following a convention of `
 <Form>
   <FieldArray
     name="friends"
-    render={(arrayHelpers) => (
+    render={arrayHelpers => (
       <div>
         {values.friends.map((friend, index) => (
           <div key={index}>
@@ -134,15 +134,15 @@ So...to display `'Must have friends'` and `'Minimum of 3 friends'` (our example'
 
 ```jsx
 // within a `FieldArray`'s render
-const FriendArrayErrors = (errors) =>
+const FriendArrayErrors = errors =>
   errors.friends ? <div>{errors.friends}</div> : null; // app will crash
 ```
 
 **_Good_**
 
 ```jsx
 // within a `FieldArray`'s render
-const FriendArrayErrors = (errors) =>
+const FriendArrayErrors = errors =>
   typeof errors.friends === 'string' ? <div>{errors.friends}</div> : null;
 ```
 

docs/src/pages/docs/1.5.8/api/formik.md

@@ -24,7 +24,7 @@ const BasicExample = () => (
           actions.setSubmitting(false);
         }, 1000);
       }}
-      render={(props) => (
+      render={props => (
         <form onSubmit={props.handleSubmit}>
           <input
             type="text"
@@ -326,7 +326,7 @@ Validate the form's `values` with function. This function can either be:
 
 ```js
 // Synchronous validation
-const validate = (values) => {
+const validate = values => {
   let errors = {};
 
   if (!values.email) {
@@ -345,9 +345,9 @@ const validate = (values) => {
 
 ```js
 // Async Validation
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
-const validate = (values) => {
+const validate = values => {
   return sleep(2000).then(() => {
     let errors = {};
     if (['admin', 'null', 'god'].includes(values.username)) {

docs/src/pages/docs/1.5.8/api/withFormik.md

@@ -13,7 +13,7 @@ Create a higher-order React component class that passes props and form handlers
 import React from 'react';
 import { withFormik } from 'formik';
 
-const MyForm = (props) => {
+const MyForm = props => {
   const {
     values,
     touched,
@@ -41,7 +41,7 @@ const MyEnhancedForm = withFormik({
   mapPropsToValues: () => ({ name: '' }),
 
   // Custom sync validation
-  validate: (values) => {
+  validate: values => {
     const errors = {};
 
     if (!values.name) {
@@ -165,7 +165,7 @@ const validate = (values, props) => {
 
 ```js
 // Async Validation
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 const validate = (values, props) => {
   return sleep(2000).then(() => {

docs/src/pages/docs/1.5.8/guides/arrays.md

@@ -24,7 +24,7 @@ export const NestedExample = () => (
           twitter: '',
         },
       }}
-      onSubmit={(values) => {
+      onSubmit={values => {
         // same shape as initial values
         console.log(values);
       }}
@@ -52,7 +52,7 @@ export const BasicArrayExample = () => (
       initialValues={{
         friends: ['jared', 'ian'],
       }}
-      onSubmit={(values) => {
+      onSubmit={values => {
         // same shape as initial values
         console.log(values);
       }}

docs/src/pages/docs/1.5.8/guides/react-native.md

@@ -20,12 +20,12 @@ import React from 'react';
 import { Button, TextInput, View } from 'react-native';
 import { Formik } from 'formik';
 
-export const MyReactNativeForm = (props) => (
+export const MyReactNativeForm = props => (
   <Formik
     initialValues={{ email: '' }}
-    onSubmit={(values) => console.log(values)}
+    onSubmit={values => console.log(values)}
   >
-    {(props) => (
+    {props => (
       <View>
         <TextInput
           onChangeText={props.handleChange('email')}

docs/src/pages/docs/1.5.8/guides/typescript.md

@@ -107,7 +107,7 @@ interface MyFormProps {
 // Wrap our form with the using withFormik HoC
 const MyForm = withFormik<MyFormProps, FormValues>({
   // Transform outer props into form values
-  mapPropsToValues: (props) => {
+  mapPropsToValues: props => {
     return {
       email: props.initialEmail || '',
       password: '',
@@ -125,7 +125,7 @@ const MyForm = withFormik<MyFormProps, FormValues>({
     return errors;
   },
 
-  handleSubmit: (values) => {
+  handleSubmit: values => {
     // do submitting things
   },
 })(InnerForm);