Strongly Typed Formik, v3

.changeset/fifty-shrimps-leave.md

@@ -0,0 +1,10 @@
+---
+"formik-native": major
+"formik": major
+"app": major
+---
+
+Use FormikApi + FormikState Subscriptions
+
+Switch underlying state implementation to use a subscription, and access that subscription via `useFormik().useState()` or its alias, `useFormikState()`.
+useFormikContext() only contains a stable API as well as some config props which should eventually be moved to a separate FormikConfigContext for further optimization.

.changeset/flat-peaches-hug.md

@@ -0,0 +1,6 @@
+---
+'formik': major
+'app': minor
+---
+
+Add strongly typed fields in an opt-in fashion using useTypedField() and useTypedFieldArray().

.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"

.gitignore

@@ -1,4 +1,5 @@
 dist
+dist-untyped
 compiled
 *.log
 coverage
@@ -16,9 +17,9 @@ yarn.lock
 
 website/translated_docs
 website/build
-website/yarn.lock
+!website/yarn.lock
 website/node_modules
 website/i18n
 !website2/yarn.lock
-
+.env
 .vercel

.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",
+                "start:app"
+            ],
+            "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,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "jest.jestCommandLine": "npm run test:vscode --",
 }

app/components/debugging/Collapse.tsx

@@ -0,0 +1,21 @@
+import * as 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/debugging/DebugProps.tsx

@@ -0,0 +1,19 @@
+import * as 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/components/fields/email-field-as-class.tsx

@@ -0,0 +1,24 @@
+import { FieldAsClass, FieldAsProps } from 'formik';
+import React from 'react';
+
+export class EmailFieldAsClass extends FieldAsClass<string> {
+  render() {
+    return (
+      <div className="email-field">
+        <label>
+          Email
+          <input
+            type={this.props.type}
+            name={this.props.name}
+            value={this.props.value}
+            onChange={this.props.onChange}
+            onBlur={this.props.onBlur}
+          />
+        </label>
+      </div>
+    );
+  }
+}
+
+export const TypedEmailField: React.ComponentClass<FieldAsProps<string>> =
+  EmailFieldAsClass;

app/components/fields/index.ts

@@ -0,0 +1,16 @@
+import { NumberField } from 'app/components/fields/number-field';
+import {
+    createCustomField,
+    createTypedField,
+    createTypedFieldArray
+} from 'formik';
+import { useMemo } from 'react';
+
+export const createTypedFields = <Values,>() => ({
+    Field: createTypedField<Values>(),
+    FieldArray: createTypedFieldArray<Values>(),
+    NumberField: createCustomField<Values>()(NumberField),
+});
+
+export const useTypedFields = <Values,>() =>
+    useMemo(() => createTypedFields<Values>(), []);

app/components/fields/number-as-field.tsx

@@ -0,0 +1,31 @@
+import { parseNumberOrEmpty, formatNumberOrEmpty } from "app/helpers/parse-format-helpers";
+import {
+    FieldAsProps,
+    FormatFn,
+    ParseFn,
+    useFormikContext
+} from "formik";
+import React from "react";
+
+export const NumberAsField = <
+    Values,
+>(props: FieldAsProps<number | "", Values>) => {
+    const formik = useFormikContext<Values>();
+    const parse: ParseFn<number | ""> = props.parse ?? parseNumberOrEmpty;
+    const format: FormatFn<number | ""> = props.format ?? formatNumberOrEmpty;
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const parsedValue = parse(event.target.value, props.name);
+        console.log(parsedValue);
+        formik.setFieldValue(props.name, parsedValue);
+    }
+
+    return <input
+        type="text"
+        name={props.name}
+        value={format(props.value, props.name)}
+        onChange={handleChange}
+        onBlur={formik.handleBlur}
+        inputMode="numeric"
+    />
+};

app/components/fields/number-component-field.tsx

@@ -0,0 +1,20 @@
+import { parseNumberOrEmpty } from "app/helpers/parse-format-helpers";
+import {
+    ParseFn,
+    TypedComponentField,
+} from "formik";
+
+export const NumberComponentField: TypedComponentField<number | ""> = (props) => {
+    const parse: ParseFn<number | ""> = props.parse ?? parseNumberOrEmpty;
+
+    const handleChange = (value: unknown) => {
+        props.form.setFieldValue(props.name, parse(value, props.name));
+    }
+
+    return <input
+        {...props.field}
+        type="text"
+        onChange={handleChange}
+        inputMode="numeric"
+    />
+};

app/components/fields/number-field.tsx

@@ -0,0 +1,25 @@
+import { formatNumberOrEmpty, parseNumberOrEmpty } from "app/helpers/parse-format-helpers";
+import {
+    CustomField,
+    FieldConfig,
+} from "formik";
+import React from "react";
+import { useTypedFields } from ".";
+import { NumberAsField } from "./number-as-field";
+
+export const NumberField: CustomField<number | ""> = <Values,>(
+    props: FieldConfig<
+        number | "",
+        Values
+    >
+) => {
+    const fields = useTypedFields<Values>();
+
+    return <fields.Field
+        type="text"
+        name={props.name}
+        format={(formatNumberOrEmpty)}
+        parse={parseNumberOrEmpty}
+        as={NumberAsField}
+    />
+};

app/components/fields/number-repeater-field.tsx

@@ -0,0 +1,46 @@
+import {
+    Field,
+    FieldArrayProps,
+} from "formik";
+import React from "react";
+import { NumberAsField } from "./number-as-field";
+
+export const NumberRepeaterField = <
+    Values,
+>(props: FieldArrayProps<
+    number | "",
+    Values
+>) => {
+    return <div>
+        {props.field.value?.length > 0
+            ? props.field.value.map((_value, index) => (
+                <div key={index}>
+                    <Field
+                        name={`${props.name}.${index}`}
+                        as={NumberAsField}
+                        type="number"
+                    />
+                    <button
+                    type="button"
+                    // remove a friend from the list
+                    onClick={() => props.remove(index)}
+                    >
+                    -
+                    </button>
+                    <button
+                    type="button"
+                    // insert an empty string at a position
+                    onClick={() => props.insert(index, '')}
+                    >
+                    +
+                    </button>
+                </div>
+            ))
+            :
+                // show this when user has removed all friends from the list
+                <button type="button" onClick={() => props.push('')}>
+                Add a friend
+                </button>
+        }
+    </div>
+};

app/components/fields/phone-as-field.tsx

@@ -0,0 +1,30 @@
+import { parsePhoneOrEmpty } from "app/helpers/parse-format-helpers";
+import {
+    FieldAsProps,
+    ParseFn,
+    TypedAsField,
+    useFormikContext
+} from "formik";
+import React from "react";
+
+export const PhoneAsField: TypedAsField<string> = <
+    Values,
+>(props: FieldAsProps<string, Values>) => {
+    const formik = useFormikContext<Values>();
+    const parse: ParseFn<string> = props.parse ?? parsePhoneOrEmpty;
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const parsedValue = parse(event.target.value, props.name);
+        console.log(parsedValue);
+        formik.setFieldValue(props.name, parsedValue);
+    }
+
+    return <input
+        type="text"
+        name={props.name}
+        value={props.format ? props.format(props.value, props.name) : props.value}
+        onChange={handleChange}
+        onBlur={formik.handleBlur}
+        inputMode="numeric"
+    />
+};

app/helpers/array-helpers.ts

@@ -0,0 +1,9 @@
+import { selectRandomInt } from './random-helpers';
+
+export const selectRange = (count: number) => Array.from(Array(count).keys());
+
+export const selectRandomArrayItem = <T extends any>(array: T[]) => {
+  const index = selectRandomInt(array.length);
+
+  return array[index];
+};