Render prop to children, update readme

README.md

@@ -11,9 +11,9 @@ 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`](https://www.npmjs.com/package/react)
+- [`formik@1`](https://www.npmjs.com/package/formik)
+- [`@shopify/polaris@3`](https://www.npmjs.com/package/@shopify/polaris)
 
 ## Demo
 
@@ -70,6 +70,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}
+/>
+
+```
+
+### Textfield
+
+```tsx
+import { Textfield } 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)

package.json

@@ -45,23 +45,23 @@
     "react": ">=16"
   },
   "devDependencies": {
-    "@satel/eslint-config-ts-react": "2.0.2",
+    "@satel/eslint-config-ts-react": "3.1.0",
     "@shopify/polaris": "3.21.1",
-    "@testing-library/dom": "6.1.0",
-    "@testing-library/react": "9.1.3",
-    "@testing-library/user-event": "6.0.0",
-    "@types/jest": "24.0.18",
-    "@types/react": "16.9.2",
-    "@types/react-dom": "16.9.0",
-    "auto-changelog": "1.15.0",
-    "env-cmd": "9.0.3",
-    "eslint": "6.2.2",
+    "@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",
+    "@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.9.0",
-    "react-dom": "16.9.0",
-    "release-it": "12.3.5",
-    "tsdx": "0.9.0",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "release-it": "12.4.3",
+    "tsdx": "0.11.0",
     "tslib": "1.10.0",
-    "typescript": "3.5.3"
+    "typescript": "3.7.2"
   }
 }

src/Checkbox.tsx

@@ -34,9 +34,8 @@ function CheckboxField<V = any>(props: CheckboxProps<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 CheckboxField<V = any>(props: CheckboxProps<V>) {
           />
         );
       }}
-    />
+    </Field>
   );
 }
 

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>
   );
 }
 

src/TextField.tsx

@@ -34,9 +34,8 @@ function TextField<V = any>(props: TextFieldProps<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 TextField<V = any>(props: TextFieldProps<V>) {
           />
         );
       }}
-    />
+    </Field>
   );
 }
 

test/Checkbox.test.tsx

@@ -1,5 +1,4 @@
 /* eslint-env jest */
-/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
 import React, { ReactNode } from 'react';
 import { Formik, FormikActions, Form } from 'formik';
 import { render, cleanup } from './test-utils';

test/Select.test.tsx

@@ -0,0 +1,43 @@
+/* eslint-env jest */
+import React, { ReactNode } from 'react';
+import { Formik, FormikActions, Form } from 'formik';
+import { render, cleanup } from './test-utils';
+import { Select } from '../src';
+
+afterEach(cleanup);
+
+interface BasicFormProps<V = any> {
+  children: ReactNode;
+  initialValues?: V;
+  onSubmit?: (values: V, formikActions: FormikActions<V>) => void;
+  formRef?: any;
+}
+
+function BasicForm<V = any>(props: BasicFormProps<V>) {
+  const {
+    initialValues = {} as V,
+    onSubmit = () => {
+      throw new Error('Submit not handled');
+    },
+    children,
+    formRef,
+  }: BasicFormProps<V> = props;
+
+  return (
+    <Formik<V> initialValues={initialValues} onSubmit={onSubmit} ref={formRef}>
+      {() => <Form>{children}</Form>}
+    </Formik>
+  );
+}
+
+describe('<Select />', () => {
+  it('renders without crashing', async () => {
+    const { getByLabelText } = render(
+      <BasicForm>
+        <Select label="test" name="test" options={['First', 'Second']} />
+      </BasicForm>,
+    );
+
+    getByLabelText('test');
+  });
+});