1.0.0

* Adding disjoint union for flow types
* Updating some deps
* Exporting flow types
* Reflecting type changes in dependent modules
* Updating .npmignore to exclude more files
* Adding React as an external
* Moving 1.0.0

Author: atomicpages

.npmignore

@@ -5,3 +5,7 @@ coverage/
 flow-typed/
 *.gif
 .travis.yml
+.eslintrc.js
+.eslintignore
+.gitignore
+.prettierrc

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "pretty-checkbox-react",
-    "version": "0.0.10",
+    "version": "1.0.0",
     "description": "Quickly integrate pretty checkbox Components (checkbox, switch, radio) with React",
     "keywords": [
         "Pretty",
@@ -20,10 +20,10 @@
     "module": "dist/pretty-checkbox-react.es.js",
     "browser": "dist/pretty-checkbox-react.umd.min.js",
     "scripts": {
-        "flow": "flow focus-check src/**",
+        "build:flow": "flow focus-check src/components/** && flow-copy-source src dist",
         "lint": "eslint src/**",
         "pretest": "eslint src/**",
-        "build": "rimraf dist/** && rollup -c rollup.config.js",
+        "build": "rimraf dist/** && rollup -c rollup.config.js && npm run build:flow",
         "prepublish": "eslint src/** && jest && rollup -c rollup.config.js",
         "test": "jest"
     },
@@ -46,33 +46,35 @@
     },
     "devDependencies": {
         "@babel/core": "^7.2.2",
-        "@babel/plugin-proposal-class-properties": "^7.2.3",
-        "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
-        "@babel/preset-env": "^7.2.3",
+        "@babel/plugin-proposal-class-properties": "^7.3.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
+        "@babel/preset-env": "^7.3.1",
         "@babel/preset-flow": "^7.0.0",
         "@babel/preset-react": "^7.0.0",
         "babel-core": "^7.0.0-bridge.0",
         "babel-eslint": "^9.0.0",
         "babel-jest": "^23.6.0",
         "coveralls": "^3.0.2",
         "eslint": "5.6.0",
-        "eslint-config-prettier": "^3.4.0",
+        "eslint-config-prettier": "^3.6.0",
         "eslint-plugin-flowtype": "^3.2.1",
         "eslint-plugin-prettier": "^3.0.1",
-        "eslint-plugin-react": "^7.12.3",
+        "eslint-plugin-react": "^7.12.4",
         "flow": "^0.2.3",
-        "flow-bin": "^0.90.0",
+        "flow-bin": "^0.91.0",
+        "flow-copy-source": "^2.0.2",
+        "flow-coverage-report": "^0.6.1",
         "jest": "^23.6.0",
         "jest-dom": "^3.0.0",
-        "prettier": "^1.15.3",
+        "prettier": "^1.16.1",
         "pretty-checkbox": "^3.0.3",
         "react": "^16.7.0",
         "react-docgen": "^3.0.0-rc.2",
         "react-dom": "^16.7.0",
         "react-testing-library": "^5.4.4",
         "rimraf": "^2.6.3",
-        "rollup": "^1.1.0",
-        "rollup-plugin-babel": "^4.3.0",
+        "rollup": "^1.1.2",
+        "rollup-plugin-babel": "^4.3.2",
         "rollup-plugin-commonjs": "^9.2.0",
         "rollup-plugin-json": "^3.1.0",
         "rollup-plugin-node-resolve": "^4.0.0",

package.json

@@ -30,7 +30,8 @@ const baseConfig = {
     plugins: [
         babel(),
         ...commonPlugins
-    ]
+    ],
+    external: ['react']
 };
 
 const umd_export = {

rollup.config.js

@@ -17,13 +17,19 @@ type CheckboxProps = {
 };
 
 function Checkbox(props: CheckboxProps) {
-    const { animation, icon, image, svg } = props;
-
-    if (animation && animation !== 'smooth' && animation !== 'pulse' && !icon && !image && !svg) {
+    const { animation } = props;
+
+    if (animation
+        && animation !== 'smooth'
+        && animation !== 'pulse'
+        && !props.icon
+        && !props.image
+        && !props.svg) {
         throw new Error(`animation '${animation}' is incompatible with default checkbox styles. You must specify an icon, image, or a svg.`);
     }
 
     return <Input className={classNames(
+        // $ExpectError
         getBaseClassName(props, PREFIX),
         props.indeterminate ? 'p-has-indeterminate' : null
     )} type="checkbox" {...props} />;

src/components/Checkbox.js

@@ -8,7 +8,29 @@ import classNames from 'classnames';
  */
 export const PREFIX: string = 'p-';
 
-export type InputProps = {
+type SVG = {|
+    /**
+     * Render a custom `.svg` in the checkbox or radio.
+     */
+    svg: React.Element<'svg'>
+|};
+
+
+type Image = {|
+    /**
+     * Render a custom `img` in the checkbox or radio.
+     */
+    image: React.Element<'img'>
+|};
+
+type Icon = {|
+    /**
+     * Render a custom font icon in the checkbox or radio.
+     */
+    icon: React.Element<any>
+|};
+
+type BaseProps = {
     /**
      * Select the type if component: checkbox or radio.
      */
@@ -40,22 +62,7 @@ export type InputProps = {
     /**
      * The shape of the checkbox or radio component.
      */
-    shape?: "round" | "curve",
-
-    /**
-     * Render a custom font icon in the checkbox or radio.
-     */
-    icon?: React.Element<any>,
-
-    /**
-     * Render a custom `.svg` in the checkbox or radio.
-     */
-    svg?: React.Element<'svg'>,
-
-    /**
-     * Render a custom `img` in the checkbox or radio.
-     */
-    image?: React.Element<'img'>,
+    shape?: "round" | "curve" | "outline" | "fill" | "slim",
 
     /**
      * Additional class selectors to pass to the `pretty` element.
@@ -125,6 +132,17 @@ export type InputProps = {
     plain?: boolean
 };
 
+export type InputProps = {
+    ...BaseProps,
+    ...SVG
+} | {
+    ...BaseProps,
+    ...Image
+} | {
+    ...BaseProps,
+    ...Icon
+};
+
 /**
  * Automatically append the className for icon component. This will automatically add
  * `icon` to icon prop components, `svg` to prop svg components, and `image` to
@@ -146,7 +164,32 @@ const fillClassNameForIcons = (component: React.Element<any> | void, className:
 /**
  * Handles custom or default rendering of the pretty-checkbox `div.state` class.
  */
-const PrettyInputState = ({ children, render, id, color, icon, svg, image }: InputProps): React.Node => {
+const PrettyInputState = (props: InputProps): React.Node => {
+    let node: {|
+        className: string,
+        node: any
+    |} | null = null;
+
+    const { children, render, id, color } = props;
+
+    // yuck, needed for type refinement :(
+    if (props.svg) {
+        node = {
+            className: 'svg',
+            node: props.svg
+        };
+    } else if (props.icon) {
+        node = {
+            className: 'icon',
+            node: props.icon
+        };
+    } else if (props.image) {
+        node = {
+            className: 'image',
+            node: props.image
+        };
+    }
+
     if (typeof children === 'function') {
         return children();
     }
@@ -157,7 +200,7 @@ const PrettyInputState = ({ children, render, id, color, icon, svg, image }: Inp
 
     return (
         <div className={classNames('state', color ? PREFIX + color : null)} data-testid="pcr-state">
-            {fillClassNameForIcons(icon, 'icon') || fillClassNameForIcons(svg, 'svg') || fillClassNameForIcons(image, 'image') || null}
+            {node ? fillClassNameForIcons(node.node, node.className) : null}
             {children ? <label htmlFor={id}>{children}</label> : null}
         </div>
     );
@@ -178,13 +221,10 @@ function Input(props: InputProps) {
         bigger,
         shape,
         style,
-        image,
-        svg,
-        icon,
         plain
     } = props;
 
-    if ((icon && svg) || (icon && image) || (svg && image)) {
+    if ((props.icon && props.svg) || (props.icon && props.image) || (props.svg && props.image)) {
         throw new Error('icon, svg, and image are mutually exclusive props; choose one');
     }
 
@@ -212,7 +252,10 @@ function Input(props: InputProps) {
                 data-testid="pcr-input"
                 {...inputProps}
             />
-            <PrettyInputState {...props} />
+            {
+                // $ExpectError
+                <PrettyInputState {...props} />
+            }
         </div>
     );
 }

src/components/Input.js

@@ -22,7 +22,9 @@ function Radio(props: RadioProps) {
     return (
         <Input
             type="radio"
-            className={classNames(getBaseClassName(props, PREFIX), className)}
+            className={classNames(
+                // $ExpectError
+                getBaseClassName(props, PREFIX), className)}
             inputProps={{ ...inputProps, name: name }}
             {...rest}
         />

src/components/Radio.js

@@ -40,11 +40,6 @@ function Switch(props: SwitchProps) {
         throw new Error('Switch animations can be one of the following: smooth, jelly, or tada');
     }
 
-    // if (type === 'radio' && !name) {
-    //     console.warn('Using a radio control without a name specified can lead to unexpected behavior');
-    // }
-
-    // $ExpectError
     return (
         <Input className={classNames(`${PREFIX}switch`, className)}
             type={type}