Version 1.0.0 (#65)

* Support formik v2 and polaris v4 * Bump peer deps * Port textfield to hooks * Add hooks to checkbox * Release 1.0.0-rc.0 * Fix linting issue * Update select to use hooks, add validate passthrough * Update release it, handle tsdx interactive by default test runner * Release 1.0.0-rc.1
SatelCreative · Jan 6, 2020 · be20827 · be20827
1 parent f1f8cb0
commit be20827
Show file tree

Hide file tree

Showing 16 changed files with 2,254 additions and 2,291 deletions.
diff --git a/.release-it.js b/.release-it.js
@@ -6,8 +6,10 @@ module.exports = {
     release: true
   },
   scripts: {
-    beforeStart: 'yarn lint && yarn test && yarn build',
-    changelog: 'auto-changelog --stdout --commit-limit false -u --template ./changelog.hbs',
-    beforeStage: 'auto-changelog'
+    changelog: 'auto-changelog --stdout --commit-limit false -u --template ./changelog.hbs'
+  },
+  hooks: {
+    'before:init': 'yarn lint && CI=true yarn test && yarn build',
+    'after:bump': 'auto-changelog'
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.0-rc.0](https://github.com/SatelCreative/formik-polaris/compare/0.4.0...1.0.0-rc.0)
+
+> 9 December 2019
+
+- Release 1.0.0-rc.0 [`5c8a955`](https://github.com/SatelCreative/formik-polaris/commit/5c8a95562918ef5acc1ff875c25f74dbdf40275e)
+- Merge in master [`aa2f800`](https://github.com/SatelCreative/formik-polaris/commit/aa2f8006ae9626e232dba28a10d6b31a2fbcd42f)
+- Add hooks to checkbox [`b54604d`](https://github.com/SatelCreative/formik-polaris/commit/b54604d57d04c8b7d69b75307f75291a5595938f)
+
+#### [0.4.0](https://github.com/SatelCreative/formik-polaris/compare/0.3.1...0.4.0)
+
+> 12 November 2019
+
+- Support formik v2 and polaris v4 [`4c39604`](https://github.com/SatelCreative/formik-polaris/commit/4c39604356eadda91da593d1e689d765b78721f7)
+- Render prop to children, update readme [`653915d`](https://github.com/SatelCreative/formik-polaris/commit/653915dd4090b286830b5dc5368e36f2f299932e)
+- Port textfield to hooks [`0832a86`](https://github.com/SatelCreative/formik-polaris/commit/0832a86a18cdc72502f95f653fb336b22f2cd579)
+
 #### [0.3.1](https://github.com/SatelCreative/formik-polaris/compare/0.2.0...0.3.1)
 
 > 27 August 2019

diff --git a/README.md b/README.md
@@ -11,9 +11,11 @@ yarn add @satel/formik-polaris
 ```
 
 `formik-polaris` also requires the following to have been installed separately:
-- [`react@>=16`](https://www.npmjs.com/package/react)
-- [`formik@1`](https://www.npmjs.com/package/formik)
-- [`@shopify/polaris@3`](https://www.npmjs.com/package/@shopify/polaris)
+- [`react@>=16.8`](https://www.npmjs.com/package/react)
+- [`formik@2`](https://www.npmjs.com/package/formik)
+- [`@shopify/polaris@4`](https://www.npmjs.com/package/@shopify/polaris)
+
+_if you need support for an older version, try out a `0.X.X` release_
 
 ## Demo
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@satel/formik-polaris",
-  "version": "0.4.0",
+  "version": "1.0.0-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "umd:main": "dist/formik-polaris.umd.production.js",
@@ -22,7 +22,9 @@
     "formik",
     "polaris",
     "shopify",
-    "react"
+    "react",
+    "form",
+    "hooks"
   ],
   "author": {
     "name": "Quinn Blenkinsop",
@@ -41,28 +43,29 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@shopify/polaris": ">=3",
-    "formik": ">=1",
-    "react": ">=16"
+    "@shopify/polaris": ">=4",
+    "formik": ">=2.0",
+    "react": ">=16.8"
   },
   "devDependencies": {
-    "@satel/eslint-config-ts-react": "3.1.0",
-    "@shopify/polaris": "3.21.1",
-    "@testing-library/dom": "6.10.1",
-    "@testing-library/react": "9.3.2",
-    "@testing-library/user-event": "7.1.2",
-    "@types/jest": "24.0.22",
-    "@types/react": "16.9.11",
+    "@satel/eslint-config-ts-react": "3.2.0",
+    "@shopify/jest-dom-mocks": "2.8.7",
+    "@shopify/polaris": "4.10.2",
+    "@testing-library/dom": "6.11.0",
+    "@testing-library/react": "9.4.0",
+    "@testing-library/user-event": "8.0.3",
+    "@types/jest": "24.0.25",
+    "@types/react": "16.9.17",
     "@types/react-dom": "16.9.4",
     "auto-changelog": "1.16.2",
     "env-cmd": "10.0.1",
-    "eslint": "6.6.0",
-    "formik": "1.5.8",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "eslint": "6.8.0",
+    "formik": "2.1.1",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "release-it": "12.4.3",
-    "tsdx": "0.11.0",
+    "tsdx": "0.12.1",
     "tslib": "1.10.0",
-    "typescript": "3.7.2"
+    "typescript": "3.7.4"
   }
 }
diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx
@@ -1,71 +1,46 @@
 import React from 'react';
-import { Field, getIn, FieldProps } from 'formik';
 import { Checkbox as PolarisCheckbox } from '@shopify/polaris';
 import { BaseProps as PolarisCheckboxProps } from '@shopify/polaris/types/components/Checkbox/Checkbox';
+import { usePolarisField, UsePolarisFieldProps } from './usePolarisField';
 import { Omit } from './types';
 
-interface Props<V> extends PolarisCheckboxProps {
-  /**
-   * The field identifier that formik can use to
-   * connect this field to the data. Will also be
-   * used as the polaris id
-   */
-  name: string;
-
-  /**
-   * Optional helper to convert from
-   * non-boolean values to a checked state
-   */
-  decode?: (value: V) => boolean;
-
-  /**
-   * Optional helper to convert from
-   * current checked state to non-boolean value
-   */
-  encode?: (checked: boolean) => V;
-}
+type Props<V> = UsePolarisFieldProps<V, boolean> & PolarisCheckboxProps;
 
 export type CheckboxProps<V> = Omit<
   Props<V>,
   'id' | 'checked' | 'onChange' | 'onBlur' | 'onFocus' | 'error'
 >;
 
 function CheckboxField<V = any>(props: CheckboxProps<V>) {
-  const { name, encode, decode, ...polarisProps } = props;
+  const { name, encode, decode, validate, ...polarisProps } = props;
+
+  const {
+    value: rawValue,
+    isSubmitting,
+    handleFocus,
+    handleBlur,
+    handleChange,
+    error,
+  } = usePolarisField<V, boolean>({ name, encode, decode, validate });
+
+  const value = rawValue === undefined ? false : rawValue;
+  if (typeof value !== 'boolean') {
+    throw new Error(
+      `[Checkbox] Found value of type "${typeof value}" for field "${name}". Requires boolean (after decode)`,
+    );
+  }
 
   return (
-    <Field name={name}>
-      {({
-        field,
-        form: { setFieldValue, setFieldError, errors, touched, isSubmitting },
-      }: FieldProps) => {
-        let error;
-        try {
-          if (getIn(touched, name)) {
-            error = getIn(errors, name);
-          }
-        } catch (e) {
-          throw new Error(
-            `Formik errors object is in an abnormal state, Checkbox "${name}" could not check it's error state`,
-          );
-        }
-
-        return (
-          <PolarisCheckbox
-            disabled={isSubmitting}
-            {...polarisProps}
-            id={name}
-            checked={decode ? decode(field.value) : field.value}
-            onFocus={() => setFieldError(name, '')}
-            onBlur={() => field.onBlur({ target: { name } })}
-            onChange={value => {
-              setFieldValue(name, encode ? encode(value) : value);
-            }}
-            error={error}
-          />
-        );
-      }}
-    </Field>
+    <PolarisCheckbox
+      disabled={isSubmitting}
+      {...polarisProps}
+      id={name}
+      checked={value}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      error={error}
+    />
   );
 }
 

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -1,71 +1,51 @@
 import React from 'react';
-import { Field, getIn, FieldProps } from 'formik';
 import { Select as PolarisSelect } from '@shopify/polaris';
 import { BaseProps as PolarisSelectProps } from '@shopify/polaris/types/components/Select/Select';
 import { Omit } from './types';
+import { UsePolarisFieldProps, usePolarisField } from './usePolarisField';
 
-interface Props<V> extends PolarisSelectProps {
-  /**
-   * The field identifier that formik can use to
-   * connect this field to the data. Will also be
-   * used as the polaris id
-   */
-  name: string;
-
-  /**
-   * Optional helper to convert from
-   * non-string values to a string
-   */
-  decode?: (value: V) => string;
-
-  /**
-   * Optional helper to convert from
-   * current string value to non-string value
-   */
-  encode?: (checked: string) => V;
-}
+type Props<V> = UsePolarisFieldProps<V, string | undefined> &
+  PolarisSelectProps;
 
 export type SelectProps<V> = Omit<
   Props<V>,
   'value' | 'onChange' | 'onBlur' | 'error'
 >;
 
 function SelectField<V = any>(props: SelectProps<V>) {
-  const { name, encode, decode, ...polarisProps } = props;
+  const { name, encode, decode, validate, ...polarisProps } = props;
+
+  const {
+    value,
+    isSubmitting,
+    handleFocus,
+    handleBlur,
+    handleChange,
+    error,
+  } = usePolarisField<V, string | undefined>({
+    name,
+    encode,
+    decode,
+    validate,
+  });
+
+  if (typeof value !== 'string' && value !== undefined) {
+    throw new Error(
+      `[Select] Found value of type "${typeof value}" for field "${name}". Requires string (after decode)`,
+    );
+  }
 
   return (
-    <Field name={name}>
-      {({
-        field,
-        form: { setFieldValue, setFieldError, errors, touched, isSubmitting },
-      }: FieldProps) => {
-        let error;
-        try {
-          if (getIn(touched, name)) {
-            error = getIn(errors, name);
-          }
-        } catch (e) {
-          throw new Error(
-            `Formik errors object is in an abnormal state, Select "${name}" could not check it's error state`,
-          );
-        }
-
-        return (
-          <PolarisSelect
-            disabled={isSubmitting}
-            {...polarisProps}
-            id={name}
-            value={decode ? decode(field.value) : field.value}
-            onFocus={() => setFieldError(name, '')}
-            onBlur={() => field.onBlur({ target: { name } })}
-            onChange={value => {
-              setFieldValue(name, encode ? encode(value) : value);
-            }}
-            error={error}
-          />
-        );
-      }}
-    </Field>
+    <PolarisSelect
+      disabled={isSubmitting}
+      {...polarisProps}
+      id={name}
+      value={value as string | undefined}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      error={error}
+    />
   );
 }