Merge in master

CHANGELOG.md

@@ -4,6 +4,15 @@ 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).
 
+#### [0.3.1](https://github.com/SatelCreative/formik-polaris/compare/0.2.0...0.3.1)
+
+> 27 August 2019
+
+- Bump deps and disable when submitting [`#15`](https://github.com/SatelCreative/formik-polaris/pull/15)
+- Bump @testing-library/react from 9.0.1 to 9.1.0 [`#5`](https://github.com/SatelCreative/formik-polaris/pull/5)
+- Add changelog [`9701df8`](https://github.com/SatelCreative/formik-polaris/commit/9701df8e946a2e35a7637957b88f62b6b66236e9)
+- Release 0.3.1 [`82db04e`](https://github.com/SatelCreative/formik-polaris/commit/82db04ebd852403b203458aade4a002208e08f24)
+
 #### 0.2.0
 
 > 9 August 2019

README.md

@@ -11,9 +11,11 @@ yarn add @satel/formik-polaris
 ```
 
 `formik-polaris` also requires the following to have been installed separately:
-- [`react`](https://www.npmjs.com/package/react)
-- [`formik`](https://www.npmjs.com/package/formik)
-- [`@shopify/polaris`](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
 
@@ -70,6 +72,76 @@ const rootElement = document.getElementById("root");
 ReactDOM.render(<AppProvider><MyForm /></AppProvider>, rootElement);
 ```
 
+## API
+
+### Checkbox
+
+```tsx
+import { Checkbox } from '@satel/formik-polaris';
+
+// ...
+
+<Checkbox
+  // Formik name (required)
+  name="published"
+
+  // Convert formik value to boolean (optional)
+  decode={value => `${value}`}
+
+  // Convert boolean to formik value (optional)
+  decode={value => `${value}`}
+
+  // Normal polaris Checkbox props
+  {...props}
+/>
+
+```
+
+### Textfield
+
+```tsx
+import { Textfield } from '@satel/formik-polaris';
+
+// ...
+
+<Textfield
+  // Formik name (required)
+  name="published"
+
+  // Convert formik value to string (optional)
+  decode={value => `${value}`}
+
+  // Convert string to formik value (optional)
+  decode={value => `${value}`}
+
+  // Normal polaris Textfield props
+  {...props}
+/>
+
+```
+
+### Select
+
+```tsx
+import { Select } from '@satel/formik-polaris';
+
+// ...
+
+<Select
+  // Formik name (required)
+  name="published"
+
+  // Convert formik value to string (optional)
+  decode={value => `${value}`}
+
+  // Convert string to formik value (optional)
+  decode={value => `${value}`}
+
+  // Normal polaris Textfield props
+  {...props}
+/>
+```
+
 ## Licence
 
-MIT - See [LICENSE](./LICENSE)
+MIT - See [LICENSE](./LICENSE)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@satel/formik-polaris",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "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",
@@ -37,12 +39,13 @@
     "release": "env-cmd env release-it"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
     "@shopify/polaris": ">=4",
     "formik": ">=2",
-    "react": ">=16"
+    "react": ">=16.8"
   },
   "devDependencies": {
     "@satel/eslint-config-ts-react": "3.2.0",

src/Select.tsx

@@ -34,9 +34,8 @@ function SelectField<V = any>(props: SelectProps<V>) {
   const { name, encode, decode, ...polarisProps } = props;
 
   return (
-    <Field
-      name={name}
-      render={({
+    <Field name={name}>
+      {({
         field,
         form: { setFieldValue, setFieldError, errors, touched, isSubmitting },
       }: FieldProps) => {
@@ -66,7 +65,7 @@ function SelectField<V = any>(props: SelectProps<V>) {
           />
         );
       }}
-    />
+    </Field>
   );
 }
 

test/Select.test.tsx

@@ -0,0 +1,29 @@
+/* eslint-env jest */
+import React from 'react';
+import { matchMedia } from '@shopify/jest-dom-mocks';
+import { render, cleanup } from './test-utils';
+import { Select } from '../src';
+import { BasicForm } from './util';
+
+afterEach(cleanup);
+
+
+describe('<Select />', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
+  it('renders without crashing', async () => {
+    const { getByLabelText } = render(
+      <BasicForm>
+        <Select label="test" name="test" options={['First', 'Second']} />
+      </BasicForm>,
+    );
+
+    getByLabelText('test');
+  });
+});