Added isFirstIn utility function

.github/ISSUE_TEMPLATE/Question.md

@@ -1,9 +1,8 @@
----
-name: "❓Question"
-about: 'Have a question? Checkout the #formik channel on Reactiflux Discord channel
-  or on Spectrum.'
----
-
-## ❓Question
-
-Seriously, for immediate help, just ask your question on the #formik channel on [Reactiflux](https://discordapp.com/invite/MbKwYuq).
+---
+name: '❓Question'
+about: 'Have a question? Checkout GitHub Discussions or the #formik channel on Formium Discord server'
+---
+
+## ❓Question
+
+Seriously, for immediate help, just ask your question on the #formik channel on [Formium](https://discordapp.com/invite/MbKwYuq).

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - next
 jobs:
   release:
     runs-on: ubuntu-latest

.gitignore

@@ -11,6 +11,7 @@ legacy.d.ts
 node_modules
 package-lock.json
 yarn.lock
+!/docs/yarn.lock
 !/yarn.lock
 
 website/translated_docs

app/pages/sign-in.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+
+const SignIn = () => (
+  <div>
+    <h1>Sign In</h1>
+
+    <Formik
+      validateOnMount={true}
+      initialValues={{ username: '', password: '' }}
+      validationSchema={Yup.object().shape({
+        username: Yup.string().required('Required'),
+        password: Yup.string().required('Required'),
+      })}
+      onSubmit={async values => {
+        await new Promise(r => setTimeout(r, 500));
+        alert(JSON.stringify(values, null, 2));
+      }}
+    >
+      {formik => (
+        <Form>
+          <div>
+            <Field name="username" placeholder="Username" />
+            <ErrorMessage name="username" component="p" />
+          </div>
+
+          <div>
+            <Field name="password" placeholder="Password" type="password" />
+            <ErrorMessage name="password" component="p" />
+          </div>
+
+          <button type="submit" disabled={!formik.isValid}>
+            Submit
+          </button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+
+export default SignIn;

cypress/integration/basic.spec.ts

@@ -14,4 +14,30 @@ describe('basic validation', () => {
 
     cy.get('#renderCounter').contains('0');
   });
+
+  it('should validate autofill', () => {
+    // React overrides `input.value` setters, so we have to call
+    // native input setter
+    // See: https://stackoverflow.com/a/46012210/1709679
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value'
+    )?.set;
+
+    function setInputValue(input: HTMLElement, value: string) {
+      nativeInputValueSetter?.call(input, value);
+      const event = new Event('change', { bubbles: true });
+      input.dispatchEvent(event);
+    }
+
+    cy.visit('http://localhost:3000/sign-in');
+
+    cy.get('body').then($body => {
+      // We have set value through JS to simulate autofill behavior.
+      setInputValue($body.find('input[name="username"]')[0], '123');
+      setInputValue($body.find('input[name="password"]')[0], '123');
+    });
+
+    cy.get('button').should('not.be.disabled');
+  });
 });

docs/.eslintignore

@@ -0,0 +1,3 @@
+**/node_modules/*
+**/out/*
+**/.next/*

docs/.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+yarn.lock
+package-lock.json
+public

docs/next.config.js

@@ -2,9 +2,7 @@ const webpack = require('webpack');
 const fs = require('fs');
 const path = require('path');
 const visit = require('unist-util-visit');
-const dotenvLoad = require('dotenv-load');
 const optimizedImages = require('next-optimized-images');
-dotenvLoad();
 
 const {
   NOTION_TOKEN,
@@ -22,31 +20,6 @@ try {
   /* non fatal */
 }
 
-const warnOrError =
-  process.env.NODE_ENV !== 'production'
-    ? console.warn
-    : msg => {
-        throw new Error(msg);
-      };
-
-if (!NOTION_TOKEN) {
-  // We aren't able to build or serve images from Notion without the
-  // NOTION_TOKEN being populated
-  warnOrError(
-    `\nNOTION_TOKEN is missing from env, this will result in an error\n` +
-      `Make sure to provide one before starting Next.js`
-  );
-}
-
-if (!BLOG_INDEX_ID) {
-  // We aren't able to build or serve images from Notion without the
-  // NOTION_TOKEN being populated
-  warnOrError(
-    `\nBLOG_INDEX_ID is missing from env, this will result in an error\n` +
-      `Make sure to provide one before starting Next.js`
-  );
-}
-
 const remarkPlugins = [
   require('remark-slug'),
   require('./src/lib/docs/remark-paragraph-alerts'),
@@ -82,8 +55,6 @@ module.exports = optimizedImages({
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   env: {
     NEXT_PUBLIC_GA_TRACKING_ID: process.env.NEXT_PUBLIC_GA_TRACKING_ID || '',
-    SENTRY_DSN: process.env.SENTRY_DSN || '',
-    SENTRY_RELEASE: process.env.VERCEL_GITHUB_COMMIT_SHA || '',
   },
   experimental: {
     plugins: true,
@@ -124,13 +95,13 @@ module.exports = optimizedImages({
 
     const originalEntry = config.entry;
 
-    config.entry = async () => {
-      const entries = {
-        ...(await originalEntry()),
-      };
-      entries['./scripts/build-rss.js'] = './src/lib/build-rss.ts';
-      return entries;
-    };
+    // config.entry = async () => {
+    //   const entries = {
+    //     ...(await originalEntry()),
+    //   };
+    //   entries['./scripts/build-rss.js'] = './src/lib/build-rss.ts';
+    //   return entries;
+    // };
 
     return config;
   },

docs/package.json

@@ -6,9 +6,10 @@
   "license": "MIT",
   "scripts": {
     "dev": "next",
-    "build": "next build",
+    "build": "next build && npm run sitemap",
     "start": "next start",
-    "rss": "node ./.next/server/scripts/build-rss.js"
+    "rss": "node ./.next/server/scripts/build-rss.js",
+    "sitemap": "node ./scripts/build-sitemap.js"
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.10.1",
@@ -19,9 +20,7 @@
     "@mdx-js/react": "^1.5.1",
     "@mdx-js/tag": "^0.20.3",
     "@next/mdx": "^9.4.0",
-    "@next/plugin-google-analytics": "^9.4.4",
-    "@next/plugin-sentry": "^9.4.4",
-    "@reactions/component": "^2.0.2",
+    "@next/plugin-google-analytics": "^9.5.5",
     "@zeit/fetch": "^6.0.0",
     "@zeit/react-jsx-parser": "^2.0.0",
     "async-sema": "^3.1.0",
@@ -37,7 +36,7 @@
     "imagemin-optipng": "^8.0.0",
     "intersection-observer": "^0.10.0",
     "isomorphic-unfetch": "^3.0.0",
-    "next": "^9.5.3",
+    "next": "^10.0.0",
     "next-images": "^1.4.0",
     "next-optimized-images": "^2.6.1",
     "node-fetch": "^2.6.0",
@@ -72,13 +71,13 @@
     "@types/react-dom": "^16.9.7",
     "@types/react-highlight": "^0.12.2",
     "algoliasearch": "3.35.1",
-    "dotenv-load": "^2.0.0",
     "github-slugger": "^1.3.0",
     "md5": "^2.2.1",
     "mdast-util-to-string": "^1.1.0",
+    "nextjs-sitemap-generator": "^1.1.0",
     "postcss-preset-env": "^6.7.0",
     "remark-parse": "^8.0.2",
-    "tailwindcss": "^1.4.6",
+    "tailwindcss": "^1.9.1",
     "typescript": "^3.8.3",
     "unified": "^9.0.0",
     "webp-loader": "^0.6.0"

docs/scripts/build-sitemap.js

@@ -0,0 +1,14 @@
+const sitemap = require('nextjs-sitemap-generator');
+const fs = require('fs');
+
+// This is needed for the plugin to work
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const BUILD_ID = fs.readFileSync('.next/BUILD_ID').toString();
+
+sitemap({
+  baseUrl: 'https://formik.org',
+  pagesDirectory: process.cwd() + '/.next/server/pages',
+  targetDirectory: 'public/',
+  ignoredExtensions: ['js', 'map'],
+  ignoredPaths: ['/404', '/blog/[...slug]'],
+});

docs/src/components/Banner.tsx

@@ -1,13 +1,30 @@
+import { ExternalLink } from './ExternalLink';
+
 export function Banner() {
-  return null;
-  // return (
-  //   <div className="bg-gray-900">
-  //     <div className="container mx-auto py-2 flex items-center justify-between">
-  //       <img src="/logo.png" alt="formium" width="150px" className="-ml-3" />
-  //       <div className="text-white font-bold flex items-center">
-  //         Hassle-free form storage for static sites →
-  //       </div>
-  //     </div>
-  //   </div>
-  // );
+  return (
+    <div className="bg-gray-900  text-center  py-2 px-4">
+      <ExternalLink
+        href="https://formium.io?utm_source=formik&utm_medium=announcement"
+        className=" p-2 sm:bg-gray-800 items-center text-gray-100 leading-none sm:rounded-full flex sm:inline-flex betterhover:hover:bg-gray-700 transition duration-150 ease-in-out"
+        role="alert"
+      >
+        <span className="flex rounded-full bg-gradient-to-r from-teal-400 to-blue-500 uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">
+          New
+        </span>
+        <span className="font-bold mr-2 text-left flex-auto text-sm leading-4">
+          Announcing Formium!{' '}
+          <span className="font-normal">
+            A headless form builder from the makers of Formik.
+          </span>
+        </span>
+        <svg
+          className="fill-current opacity-75 h-4 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+        >
+          <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
+        </svg>
+      </ExternalLink>
+    </div>
+  );
 }