add flow to demo component (#822)

samples/demo-component/packages/demo-component/.flowconfig

@@ -0,0 +1,13 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+module.name_mapper='^raw-loader!\(.*\.example?\)' -> 'raw-loader'
+module.ignore_non_literal_requires=true
+
+[strict]

samples/demo-component/packages/demo-component/demo/demo.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React from "react";
 import { addLocaleData, IntlProvider } from "react-intl";
 import * as libraryScope from "../src/index";
@@ -25,4 +27,4 @@ const components = [
 const localScope = { IntlProvider, messages, locale };
 const demo = () => <Demo scope={localScope} libraryScope={libraryScope} components={components} />;
 
-export default demo;
+export default demo;

samples/demo-component/packages/demo-component/flow-typed/flow-lib-def.js

@@ -0,0 +1,3 @@
+declare module "raw-loader" {
+  declare module.exports: string;
+}

samples/demo-component/packages/demo-component/package.json

@@ -31,7 +31,7 @@
   "scripts": {
     "prepublish": "clap prepublish",
     "start": "clap demo",
-    "test": "clap check"
+    "test": "flow && clap check"
   },
   "keywords": [
     "react",

samples/demo-component/packages/demo-component/src/components/AppBarExampleIconMenu.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React from "react";
 import AppBar from "material-ui/AppBar";
 import IconButton from "material-ui/IconButton";
@@ -10,10 +12,18 @@ const AppBarExampleIconMenu = () => {
   return (
     <AppBar
       title="Electrode React Sample Component with material-ui"
-      iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+      iconElementLeft={
+        <IconButton>
+          <NavigationClose />
+        </IconButton>
+      }
       iconElementRight={
         <IconMenu
-          iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+          iconButtonElement={
+            <IconButton>
+              <MoreVertIcon />
+            </IconButton>
+          }
           targetOrigin={{ horizontal: "right", vertical: "top" }}
           anchorOrigin={{ horizontal: "right", vertical: "top" }}
         >

samples/demo-component/packages/demo-component/src/components/BottomNavigationExampleSimple.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React, { Component } from "react";
 import FontIcon from "material-ui/FontIcon";
 import { BottomNavigation, BottomNavigationItem } from "material-ui/BottomNavigation";
@@ -8,22 +10,28 @@ const recentsIcon = <FontIcon className="material-icons">restore</FontIcon>;
 const favoritesIcon = <FontIcon className="material-icons">favorite</FontIcon>;
 const nearbyIcon = <IconLocationOn />;
 
+type Props = {};
+
+type State = {
+  selectedIndex: number
+};
+
 /* eslint-disable no-magic-numbers */
 
 /**
  * A simple example of `BottomNavigation`, with three labels and icons
  * provided. The selected `BottomNavigationItem` is determined by application
  * state (for instance, by the URL).
  */
-class BottomNavigationExampleSimple extends Component {
+class BottomNavigationExampleSimple extends Component<Props, State> {
   constructor() {
     super();
     this.state = {
       selectedIndex: 0
     };
   }
 
-  select(index) {
+  select(index: number) {
     return this.setState({ selectedIndex: index });
   }
 

samples/demo-component/packages/demo-component/src/components/CardExampleWithAvatar.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React from "react";
 import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from "material-ui/Card";
 import FlatButton from "material-ui/FlatButton";
@@ -15,12 +17,10 @@ const CardExampleWithAvatar = () => {
       </CardMedia>
       <CardTitle title="Card title" subtitle="Card subtitle" />
       <CardText>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
-        Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
-        Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.<p />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam
+        erat volutpat. Nulla facilisi. Donec vulputate interdum sollicitudin. Nunc lacinia auctor
+        quam sed pellentesque. Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.<p />
         <FormattedMessage {...messages.editMe} />
-
       </CardText>
       <CardActions>
         <FlatButton label="Action1" />

samples/demo-component/packages/demo-component/src/components/demo-component.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React from "react";
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import AppBarExampleIconMenu from "./AppBarExampleIconMenu";
@@ -6,7 +8,11 @@ import CardExampleWithAvatar from "./CardExampleWithAvatar";
 
 import styles from "../../src/styles/demo-component.css"; // eslint-disable-line
 
-export default class DemoComponent extends React.Component {
+type Props = {};
+
+type State = {};
+
+export default class DemoComponent extends React.Component<Props, State> {
   render() {
     return (
       <MuiThemeProvider>
@@ -23,5 +29,3 @@ export default class DemoComponent extends React.Component {
 DemoComponent.displayName = "DemoComponent";
 
 DemoComponent.propTypes = {};
-
-DemoComponent.defaultProps = {};

samples/demo-component/packages/demo-component/src/index.js

@@ -1 +1,3 @@
+// @flow
+
 export { default as DemoComponent } from "./components/demo-component";

samples/demo-component/packages/demo-component/src/lang/default-messages.js

@@ -1,6 +1,8 @@
+// @flow
+
 import { defineMessages } from "react-intl";
 
-const $tenant = process.env.ELECTRODE_TENANT;
+const $tenant: any = process.env.ELECTRODE_TENANT;
 let tenantMessages;
 
 try {

samples/demo-component/packages/demo-component/src/lang/tenants/electrodeio/default-messages.js

@@ -1,4 +1,6 @@
-import {defineMessages} from "react-intl";
+// @flow
+
+import { defineMessages } from "react-intl";
 
 const messages = defineMessages({
   editMe: {

samples/demo-component/packages/demo-component/test/client/components/demo-component.spec.jsx

@@ -7,14 +7,10 @@ import { shallow } from "enzyme";
 import DemoComponent from "src/components/demo-component";
 
 describe("components/demo-component", () => {
-
   describe("Mounting", () => {
-
     it("should render into the document", () => {
       const component = shallow(<DemoComponent />);
       expect(component).to.not.be.null;
     });
-
   });
-
 });

samples/demo-component/packages/demo-component/test/client/components/helpers/intl-enzyme-test-helper.js

@@ -24,22 +24,16 @@ const nodeWithIntlProp = node => {
 };
 
 const shallowWithIntl = node => {
-  return shallow(
-    nodeWithIntlProp(node),
-    {
-      context: {intl}
-    }
-  );
+  return shallow(nodeWithIntlProp(node), {
+    context: { intl }
+  });
 };
 
 const mountWithIntl = node => {
-  return mount(
-    nodeWithIntlProp(node),
-    {
-      context: {intl},
-      childContextTypes: { intl: intlShape }
-    }
-  );
+  return mount(nodeWithIntlProp(node), {
+    context: { intl },
+    childContextTypes: { intl: intlShape }
+  });
 };
 
 export { nodeWithIntlProp, shallowWithIntl, mountWithIntl };