chore(FlowType): Fixes all flow type issues through codebase, adds fl…

…ow check to test suite, correctly exports .flow definition files for 3rd party comsumption #210 #159 #40

.eslintrc.json

@@ -9,7 +9,9 @@
       {
         "ignoreComments": true,
         "ignoreTrailingComments": true,
-        "ignoreUrls": true
+        "ignoreUrls": true,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true
       }
     ],
     "react/prop-types": "off",

.flowconfig

@@ -7,6 +7,7 @@
 [lints]
 
 [options]
-module.name_mapper='^rmwc' ->'<PROJECT_ROOT>'
+module.name_mapper='^rmwc\/\(.*\)$' -> '<PROJECT_ROOT>/\1'
+module.name_mapper='^rmwc$' -> '<PROJECT_ROOT>'
 
 [strict]

.gitignore

@@ -40,6 +40,7 @@
 /TextField
 /Theme
 /Toolbar
+/TopAppBar
 /Typography
 react-versions
 

.vscode/cSpell.json

@@ -7,10 +7,24 @@
     // words - list of words to be always considered correct
     "words": [
         "alertdialog",
+        "checkboxes",
+        "deregister",
+        "eqeqeq",
+        "fabs",
+        "lastrow",
+        "listbox",
+        "refname",
+        "reinit",
         "rmwc",
+        "scroll",
+        "scroller",
         "Snackbar",
+        "snackbars",
+        "submenu",
         "Textfield",
-        "unelevated"
+        "truthy",
+        "unelevated",
+        "unmounting"
     ],
     // flagWords - list of words to be always considered incorrect
     // This is useful for offensive words and common spelling errors.

.vscode/settings.json

@@ -7,7 +7,21 @@
   "editor.tabSize": 2,
   "cSpell.words": [
     "alertdialog",
+    "checkboxes",
+    "deregister",
+    "eqeqeq",
+    "fabs",
+    "lastrow",
+    "listbox",
+    "refname",
+    "reinit",
     "rmwc",
-    "unelevated"
+    "scroll",
+    "scroller",
+    "snackbars",
+    "submenu",
+    "truthy",
+    "unelevated",
+    "unmounting"
   ]
 }

CONTRIBUTING.md

@@ -45,7 +45,7 @@ RMWC has a process which runs the components through Babel, and moves them into
 To "build" the library for distribution
 
 ```
-npm run babelfy
+npm run build
 ```
 
 To build the umd module
@@ -57,12 +57,12 @@ npm run build:lib
 To build the docs
 
 ```
-npm run build
+npm run build:docs
 ```
 
 #### Running Tests
 
-Make sure you have the devDepenedencies installed and then just use `npm test`. This should launch the tests in watch mode and continuously look for changed files to run.
+Make sure you have the devDependencies installed and then just use `npm test`. This should launch the tests in watch mode and continuously look for changed files to run.
 
 ```
 npm test

index.js.flow

@@ -1,3 +1,32 @@
-// @flow
+export { version } from '../package.json';
 
-export * from './src/rmwc';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Chip';
+export * from './Drawer';
+export * from './Dialog';
+export * from './Elevation';
+export * from './Fab';
+export * from './FloatingLabel';
+export * from './FormField';
+export * from './GridList';
+export * from './Grid';
+export * from './Icon';
+export * from './IconToggle';
+export * from './LineRipple';
+export * from './LinearProgress';
+export * from './List';
+export * from './Menu';
+export * from './Radio';
+export * from './Ripple';
+export * from './Provider';
+export * from './Select';
+export * from './Slider';
+export * from './Snackbar';
+export * from './Switch';
+export * from './Tabs';
+export * from './TextField';
+export * from './Theme';
+export * from './Toolbar';
+export * from './Typography';

package.json

@@ -36,20 +36,22 @@
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "build": "npm run docgen && react-app-rewired build && rm -R docs && mv build docs && cp docs/index.html docs/404.html",
+    "build:docs": "npm run docgen && react-app-rewired build && rm -R docs && mv build docs && cp docs/index.html docs/404.html",
+    "build:code": "node scripts/build-code.js",
+    "build:lib": "node scripts/build-lib.js",
+    "build": "npm run build:code && npm run build:lib && npm run build:docs",
     "pretest": "node scripts/pretest.js",
-    "test": "node scripts/test.js",
+    "test": "flow && node scripts/test.js",
     "test:watch": "react-app-rewired test --env=jsdom",
-    "babelfy": "node scripts/babelfy.js",
     "clean": "node scripts/clean.js",
-    "prepublishOnly": "npm run babelfy",
+    "prepublishOnly": "npm run build",
     "postpublish": "npm run clean",
     "docgen": "export NODE_ENV=development && react-docgen ./src --exclude=/\\.\\(story\\|docs\\|spec\\)\\.js/ --pretty --resolver ./scripts/docgen-resolver.js -o ./src/docs/docgen.json",
-    "build:lib": "node scripts/build-lib.js",
-    "deploy:docs": "npm run build && git add docs -f && git commit -m 'Deploying docs' && git push --force && npm run clean",
+    "deploy:docs": "npm run build:docs && git add docs -f && git commit -m 'Deploying docs' && git push --force && npm run clean",
     "changelog": "changelog",
     "storybook": "start-storybook -p 6006",
     "preversion": "npm test -- --coverage",
+    "flow": "flow",
     "version": "npm run changelog && git add CHANGELOG.md && npm run build:lib && git add -A lib && npm run build && git add docs -f",
     "postversion": "git push && git push --tags"
   },
@@ -70,7 +72,7 @@
     "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.7.0",
-    "flow-bin": "^0.62.0",
+    "flow-bin": "^0.71.0",
     "generate-changelog": "^1.7.0",
     "normalize.css": "^7.0.0",
     "prettier-eslint": "^8.8.1",

scripts/babelfy.js → scripts/build-code.js

@@ -37,8 +37,10 @@ processBuiltFiles(files => {
     }
 
     const cmd = `NODE_ENV=production ./node_modules/.bin/babel ${f} -o ${out} --copy-files`;
+    const copyFlowCmd = `cp ${f} ${out}.flow`;
     console.log('Babel:', f, '-> ', out);
     exec(cmd);
+    exec(copyFlowCmd);
   });
 
   console.log('Writing version...');

scripts/docgen-resolver.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*
  * Copyright (c) 2015, Facebook, Inc.
  * All rights reserved.
@@ -6,7 +7,6 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
- * @flow
  */
 
 const isExportsOrModuleAssignment = require('react-docgen/dist/utils/isExportsOrModuleAssignment')

src/Base/MDCFoundation.js

@@ -27,21 +27,19 @@ const copyProperties = (target, source) => {
 
   allPropertyNames.forEach(propertyName => {
     if (
-      propertyName.match(
+      String(propertyName).match(
+        // eslint-disable-next-line max-len
         /^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/
       )
     ) {
       return;
     }
-    Object.defineProperty(
-      target,
-      propertyName,
-      Object.getOwnPropertyDescriptor(source, propertyName)
-    );
+    const value = Object.getOwnPropertyDescriptor(source, propertyName);
+    value !== undefined && Object.defineProperty(target, propertyName, value);
   });
 };
 
-/** Simplifies reduant checks for syncWithProps */
+/** Simplifies redundant checks for syncWithProps */
 export const syncFoundationProp = (
   prop: mixed,
   foundationValue: mixed,
@@ -76,24 +74,14 @@ export const removeClass = () =>
         // The animation frame corrects an issue where MDC would set a class
         // on a form element and cause re-render before the new value could actually be set from the onChange
         this._safeSetState(prevState => ({
-          classes: prevState.classes.delete(className) ?
-            prevState.classes :
-            prevState.classes
+          classes: prevState.classes.delete(className)
+            ? prevState.classes
+            : prevState.classes
         }));
       }
     });
   };
 
-export const registerInteractionHandler = (refName: string = 'root_') =>
-  function(type: string, handler: Function) {
-    this[refName] && this[refName].addEventListener(type, handler);
-  };
-
-export const deregisterInteractionHandler = (refName: string = 'root_') =>
-  function(type: string, handler: Function) {
-    this[refName] && this[refName].removeEventListener(type, handler);
-  };
-
 /************************************************************************
  * HOC
  ***********************************************************************/
@@ -114,21 +102,25 @@ export const withFoundation = ({
   adapter = {},
   refs = ['root_']
 }: FoundationT): $Shape<constructor> => {
-  class Foundation<P, S> extends React.Component<P, S & FoundationStateT> {
+  class Foundation<P: Object, S: any> extends React.Component<
+    P,
+    S & FoundationStateT
+  > {
     constructor(props: *) {
       super(props);
 
       this.foundationRefs = refs.reduce((acc, r) => {
         // Here we gracefully merge two refs together if one was passed down the chain
         const propName =
-          this.props.elementRef && this.props.elementRef.refName_ === r ?
-            'elementRef' :
-            r;
+          this.props.elementRef && this.props.elementRef.refName_ === r
+            ? 'elementRef'
+            : r;
 
         acc[r] = ref => {
           // React will return a null ref when unmounting which will
           // in turn make our adapters error out. Make sure we only set a ref if its truthy.
           if (ref) {
+            //$FlowFixMe
             this[r] = ref;
             this.props[propName] && this.props[propName](ref);
           }
@@ -140,6 +132,7 @@ export const withFoundation = ({
         return acc;
       }, {});
 
+      //$FlowFixMe
       this.syncWithProps = this.syncWithProps.bind(this);
     }
 
@@ -167,7 +160,7 @@ export const withFoundation = ({
       classes: new Set()
     };
 
-    foundation_: Object;
+    foundation_: ?Object;
 
     foundationRefs: { [string]: (ref: window.DomElement) => mixed };
 
@@ -179,10 +172,12 @@ export const withFoundation = ({
       this.foundation_ = this.getDefaultFoundation();
 
       Object.entries(adapter).forEach(([handlerName, handler]) => {
+        //$FlowFixMe
         this.foundation_.adapter_[handlerName] = handler.bind(this);
       });
+
       this.initialize();
-      this.foundation_.init();
+      this.foundation_ && this.foundation_.init();
       this.initialSyncWithDOM();
       this._safeSyncWithProps(this.props);
 
@@ -192,14 +187,15 @@ export const withFoundation = ({
 
     destroyComponent() {
       this.destroy();
-      this.foundation_.destroy();
+      this.foundation_ && this.foundation_.destroy();
       this.foundation_ = undefined;
 
       // We need to hold onto our refs until all child components are unmounted
       // Here we just wait a few frames and set them to null so garbage collection will take over.
       requestFrames(() => {
         refs.forEach(refName => {
-          this[refName] = undefined;
+          //$FlowFixMe
+          this[refName] && (this[refName] = undefined);
         });
       }, 3);
     }
@@ -208,6 +204,9 @@ export const withFoundation = ({
     initialize() {}
     initialSyncWithDOM() {}
     destroy() {}
+    getDefaultFoundation() {
+      return {};
+    }
 
     /**
      * Fires a cross-browser-compatible custom event from the component root of the given type,
@@ -234,7 +233,7 @@ export const withFoundation = ({
 
       this.props[propName] && this.props[propName](evt);
 
-      // MDC can change state internally, if we are triggering a handler, resync with our props
+      // MDC can change state internally, if we are triggering a handler, re-sync with our props
       this._safeSyncWithProps(this.props);
 
       return evt;