Separate Formik State and API Surface

.editorconfig

@@ -0,0 +1,5 @@
+[*]
+end_of_line = lf
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintrc.js

@@ -1,12 +1,27 @@
 module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+  ],
   extends: [
     'react-app',
-    'prettier/@typescript-eslint',
+    "plugin:react-hooks/recommended",
+    'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
+    'prettier/@typescript-eslint',
   ],
   settings: {
     react: {
       version: 'detect',
     },
   },
+  "rules": {
+    "react-hooks/exhaustive-deps": ["warn", {
+      "additionalHooks": "(useCheckableEventCallback)"
+    }],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-types": "warn",
+  }
 };

.gitattributes

@@ -0,0 +1,3 @@
+# JS/TS files should be LF on Windows.
+*.jsx? text eol=lf
+*.tsx? text eol=lf

.vscode/launch.json

@@ -0,0 +1,49 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Run NPM Dev",
+            "request": "launch",
+            "type": "node",
+            "runtimeArgs": [
+                "run",
+                "dev"
+            ],
+            "runtimeExecutable": "npm",
+            "cwd": "${workspaceFolder}",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
+        },
+        {
+            "type": "node",
+            "name": "vscode-jest-tests",
+            "request": "launch",
+            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/lerna",
+            "args": [
+                "run",
+                "test",
+                "--",
+                "--runInBand",
+                // when filtering, every package not matching will have no tests
+                "--passWithNoTests",
+                "--testTimeout=9999"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "protocol": "inspector",
+            "internalConsoleOptions": "neverOpen",
+            "disableOptimisticBPs": true
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/app"
+        }
+    ]
+}

.vscode/settings.json

@@ -1,3 +1,11 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+    "jest.pathToJest": "npm run test:vscode --",
+    "[typescript]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescriptreact]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}

app/components/debug/Collapse.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Collapse: React.FC = props => {
+  const [collapsed, setCollapsed] = React.useState(false);
+
+  return (
+    <div>
+      <button type="button" onClick={() => setCollapsed(!collapsed)}>
+        Collapse
+      </button>
+      <div
+        style={{
+          overflow: 'hidden',
+          height: collapsed ? 0 : 'auto',
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+};

app/components/debug/DebugFieldState.tsx

@@ -0,0 +1,9 @@
+import { UseFieldProps, useField } from '@formik/reducer-refs';
+import React from 'react';
+import { DebugProps } from './DebugProps';
+
+export const DebugFieldState = (props: UseFieldProps) => {
+  const [field, meta, helpers] = useField(props);
+
+  return <DebugProps {...{ ...field, ...meta, ...helpers }} />;
+};

app/components/debug/DebugFormikState.tsx

@@ -0,0 +1,10 @@
+import { useFormikApi, useFullFormikState } from '@formik/reducer-refs';
+import React from 'react';
+import { DebugProps } from './DebugProps';
+
+export const DebugFormikState = () => {
+  const formikApi = useFormikApi();
+  const formikState = useFullFormikState(formikApi);
+
+  return <DebugProps {...formikState} />;
+};

app/components/debug/DebugProps.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const DebugProps = (props?: any) => {
+  const renderCount = React.useRef(0);
+  return (
+    <div style={{ margin: '1rem 0' }}>
+      <pre
+        style={{
+          background: '#f6f8fa',
+          fontSize: '.65rem',
+          padding: '.5rem',
+        }}
+      >
+        <strong>props</strong> = {JSON.stringify(props, null, 2)}
+        <strong>renders</strong> = {renderCount.current++}
+      </pre>
+    </div>
+  );
+};

app/next.config.js

@@ -0,0 +1,44 @@
+//
+// Use Next Loaders on Linked Packages
+// https://github.com/vercel/next.js/pull/13542#issuecomment-679085557
+//
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
+module.exports = {
+  webpack: (config, { defaultLoaders, webpack }) => {
+    if (config.mode === 'development') {
+      config.module.rules = [
+        ...config.module.rules,
+        {
+          test: /\.(tsx|ts|js|mjs|jsx)$/,
+          include: [path.resolve(config.context, '../')],
+          use: defaultLoaders.babel,
+          exclude: excludePath => {
+            return /node_modules/.test(excludePath);
+          },
+        },
+      ];
+
+      // tsdx uses __DEV__
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          __DEV__: process.env.NODE_ENV === 'development',
+        })
+      );
+
+      // there can only be one
+      config.resolve.alias['react'] = path.resolve(
+        config.context,
+        '../node_modules/react'
+      );
+    }
+
+    return config;
+  },
+
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+};

app/package.json

@@ -3,21 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
+    "start": "next dev",
+    "serve": "next start"
   },
   "dependencies": {
+    "@formik/reducer-refs": "^3.0.0-core1",
     "format-string-by-pattern": "^1.2.1",
-    "formik": "^2.1.5",
+    "formik": "^3.0.0-next.7",
     "next": "9.5.3",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "yup": "^0.29.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.6",
-    "@types/react": "^16.9.56",
+    "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9"
   }
 }

app/pages/basic-refs.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Formik, Field, Form, ErrorMessage } from '@formik/reducer-refs';
+import * as Yup from 'yup';
+import { DebugFieldState } from '../components/debug/DebugFieldState';
+import { DebugFormikState } from '../components/debug/DebugFormikState';
+
+const Basic = () => (
+  <div>
+    <h1>Sign Up</h1>
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        email: '',
+        favorite: '',
+        checked: [],
+        picked: '',
+      }}
+      validationSchema={Yup.object().shape({
+        email: Yup.string().email('Invalid email address').required('Required'),
+        firstName: Yup.string().required('Required'),
+        lastName: Yup.string()
+          .min(2, 'Must be longer than 2 characters')
+          .max(20, 'Nice try, nobody has a last name that long')
+          .required('Required'),
+      })}
+      onSubmit={async values => {
+        await new Promise(r => setTimeout(r, 500));
+        alert(JSON.stringify(values, null, 2));
+      }}
+      validateOnChange={false}
+    >
+      <Form autoComplete="off">
+        <Field name="firstName" placeholder="Jane" />
+        <ErrorMessage name="firstName" component="p" />
+        <DebugFieldState name="firstName" />
+
+        <Field name="lastName" placeholder="Doe" />
+        <ErrorMessage name="lastName" component="p" />
+
+        <Field
+          id="email"
+          name="email"
+          placeholder="jane@acme.com"
+          type="email"
+        />
+        <ErrorMessage name="email" component="p" />
+
+        <label>
+          <Field type="checkbox" name="toggle" />
+          <span style={{ marginLeft: 3 }}>Toggle</span>
+        </label>
+
+        <div id="checkbox-group">Checkbox Group </div>
+        <div role="group" aria-labelledby="checkbox-group">
+          <label>
+            <Field type="checkbox" name="checked" value="One" />
+            One
+          </label>
+          <label>
+            <Field type="checkbox" name="checked" value="Two" />
+            Two
+          </label>
+          <label>
+            <Field type="checkbox" name="checked" value="Three" />
+            Three
+          </label>
+        </div>
+        <div id="my-radio-group">Picked</div>
+        <div role="group" aria-labelledby="my-radio-group">
+          <label>
+            <Field type="radio" name="picked" value="One" />
+            One
+          </label>
+          <label>
+            <Field type="radio" name="picked" value="Two" />
+            Two
+          </label>
+        </div>
+        <button type="submit">Submit via submit button</button>
+        <DebugFormikState />
+      </Form>
+    </Formik>
+  </div>
+);
+
+export default Basic;

app/pages/components.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Formik, Field, Form, FieldProps, FieldComponentProps } from 'formik';
+import { DebugProps } from '../components/debug/DebugProps';
+
+const initialValues = {
+  name: '',
+};
+
+const RenderComponent = (props: FieldProps<string, typeof initialValues>) => (
+  <>
+    <input data-testid="child" {...props.field} />
+    <DebugProps {...props} />
+  </>
+);
+const ComponentComponent = (
+  props: FieldComponentProps<string, typeof initialValues>
+) => (
+  <>
+    <input data-testid="child" {...props.field} />
+    <DebugProps {...props} />
+  </>
+);
+const AsComponent = (
+  props: FieldProps<string, typeof initialValues>['field']
+) => (
+  <>
+    <input data-testid="child" {...props} />
+    <DebugProps {...props} />
+  </>
+);
+
+const Basic = () => (
+  <div>
+    <h1>Test Components</h1>
+    <Formik
+      initialValues={initialValues}
+      validate={values => {
+        alert(`validated: ${JSON.stringify(values)}`);
+      }}
+      onSubmit={async values => {
+        await new Promise(r => setTimeout(r, 500));
+        alert(JSON.stringify(values, null, 2));
+      }}
+    >
+      <Form>
+        <Field name="name" children={RenderComponent} />
+        <Field name="name" render={RenderComponent} />
+        <Field name="name" component={ComponentComponent} />
+        <Field name="name" as={AsComponent} />
+        <button type="submit">Submit</button>
+      </Form>
+    </Formik>
+  </div>
+);
+
+export default Basic;

app/pages/format.tsx

@@ -31,7 +31,7 @@ export default function Example() {
                 <Field
                   name={mask.name}
                   type="text"
-                  parse={formatString(mask.parse)}
+                  parse={formatString(mask.parse) as any}
                   placeholder={mask.parse}
                 />
               </label>