feat: move InvalidHandler to own standalone pkg

packages/react-forms/package.json

@@ -16,6 +16,7 @@
     "@emotion/css": "^10.0.4",
     "@emotion/styled": "^10.0.2",
     "@quid/react-core": "^1.21.1",
+    "@quid/react-invalid-handler": "^1.0.0",
     "@quid/theme": "^1.21.1",
     "color": "^3.1.0",
     "emotion": "^10.0.5",

packages/react-forms/src/InputGroup/index.js

@@ -1,9 +1,9 @@
 // @flow
 import * as React from 'react';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import styled from '@emotion/styled/macro';
 import { withFallback as wf } from '@quid/theme';
-import InvalidHandler from '../InvalidHandler';
+import InvalidHandler from '@quid/react-invalid-handler';
 
 const toArray = (children): Array<React.Element<any> | Function> =>
   React.Children.toArray(children).length

packages/react-forms/src/InputText/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { css } from 'emotion';
 import styled from '@emotion/styled/macro';
 import { textStyles, withFallback as wf } from '@quid/theme';
-import InvalidHandler from '../InvalidHandler';
+import InvalidHandler from '@quid/react-invalid-handler';
 import { INPUT_ATTRIBUTES, omit, include } from '../utils/inputPropsFilters';
 import mergeRefs from '../utils/mergeRefs';
 

packages/react-forms/src/index.js

@@ -8,7 +8,7 @@ export { default as InputRadio } from './InputRadio';
 export { default as InputRange } from './InputRange';
 export { default as InputText } from './InputText';
 export { default as InputToggle } from './InputToggle';
-export { default as InvalidHandler } from './InvalidHandler';
+export { default as InvalidHandler } from '@quid/react-invalid-handler';
 export { default as Label } from './Label';
 export { default as TextArea } from './TextArea';
 export { default as Button } from './Button';

packages/react-invalid-handler/README.md

@@ -0,0 +1,2 @@
+This render-prop component makes it easy to handle HTML form input
+validation on your input components.

packages/react-invalid-handler/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@quid/react-invalid-handler",
+  "version": "1.0.0",
+  "description": "render-prop which provides an easy interface to interact with the HTML form validation API",
+  "main": "dist/index.js",
+  "main:umd": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/quid/ui-framework.git"
+  },
+  "scripts": {
+    "start": "microbundle watch",
+    "prepare": "microbundle build --jsx React.createElement && flow-copy-source --ignore '{__mocks__/*,*.test}.js' src dist",
+    "test": "cd ../.. && yarn test --testPathPattern packages/react-invalid-handler"
+  },
+  "devDependencies": {
+    "flow-copy-source": "^2.0.2",
+    "microbundle": "^0.8.3"
+  },
+  "dependencies": {
+    "react": "^16.7.0"
+  }
+}

packages/react-forms/src/InvalidHandler/index.js → packages/react-invalid-handler/src/index.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import callAll from '../utils/callAll';
 
 type GetInputProps = (
   ?{ onChange?: Function, onInvalid?: Function }
@@ -18,6 +17,9 @@ type State = {
   invalid: boolean,
 };
 
+const callAll = (...fns: Array<?Function>) => (...args: Array<any>) =>
+  fns.forEach(fn => fn && fn(...args));
+
 class InvalidHandler extends React.Component<Props, State> {
   state = {
     invalid: false,
@@ -37,14 +39,18 @@ class InvalidHandler extends React.Component<Props, State> {
     }
   };
 
+  getInputProps = (
+    props: ?{
+      onInvalid?: (SyntheticInputEvent<HTMLInputElement>) => void,
+      onChange?: (SyntheticInputEvent<HTMLInputElement>) => void,
+    }
+  ) => ({
+    onInvalid: callAll(this.handleOnInvalid, (props || {}).onInvalid),
+    onChange: callAll(this.handleOnChange, (props || {}).onChange),
+  });
+
   render() {
-    return this.props.children(
-      props => ({
-        onInvalid: callAll(this.handleOnInvalid, (props || {}).onInvalid),
-        onChange: callAll(this.handleOnChange, (props || {}).onChange),
-      }),
-      this.state.invalid
-    );
+    return this.props.children(this.getInputProps, this.state.invalid);
   }
 }
 

packages/react-forms/src/InvalidHandler/InvalidHandler.md → packages/react-invalid-handler/src/index.md

@@ -1,14 +1,11 @@
-This render-prop component makes it easy to handle HTML form input
-validation on your input components.
-
 ```js
 <form onSubmit={evt => evt.preventDefault()}>
-  <InvalidHandler>
+  <InvalidHandler errorMessage="Custom error message here">
     {(getInputProps, isInvalid) => (
       <input
         type="email"
         required
-        {...getInputProps()}
+        {...getInputProps({ onChange: () => console.log('changed') })}
         style={{
           backgroundColor: isInvalid ? 'red' : 'white',
         }}
@@ -19,7 +16,7 @@ validation on your input components.
 </form>
 ```
 
-#### `getInputProps<{ onChange: Event => void, onInvalid: Event => void }>`
+#### `GetInputProps<{ onChange: Event => void, onInvalid: Event => void }>`
 
 Call `getInputProps` to get two custom event handlers needed by the
 target input element to properly report its validity state.