Merge pull request #66 from RyanCCollins/feat_rc_flow_configuration

Feat rc flow configuration

Author: RyanCCollins

.eslintrc.js

@@ -8,6 +8,13 @@ module.exports = {
     "node": true,
     "jest": true
   },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.config.babel.js"
+      }
+    }
+  },
   "rules": {
     "func-names": 0,
     "eol-last": 0,

.flowconfig

@@ -0,0 +1,15 @@
+[ignore]
+.*/node_modules/.*
+
+[include]
+
+[libs]
+config/flow-typed/npm
+
+[options]
+suppress_comment=.*\\$FlowFixMe
+suppress_comment=.*\\$FlowInvalidInputTest
+module.name_mapper='\(react-redux\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'
+module.name_mapper='\(react\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'
+module.name_mapper='\(redux\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'
+module.name_mapper='.*\(.scss\|.png\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'

README.md

@@ -52,6 +52,15 @@ The setup includes the ability to generate the boilerplate to create GraphQL / A
 
 Take a look at the [Example Apps](https://github.com/RyanCCollins/scalable-react-boilerplate#example-apps) section to see examples of GraphQL configuration in practice.
 
+### Flow
+Static types are all the rage in Front End JavaScript land right now.  
+
+We feel that the use of Static types is paramount in the evolution of JavaScript and as such have integrated the Flow static type-checking library. 
+
+The nice thing about Flow is that you can gradually introduce it into your app, much like we have done with the example code of this boilerplate.  You can see a couple of examples of Flow in use in the project in the components directory. If this is not a feature you desire, then do not add the `// @flow` comment in any files.
+
+We have provided library definitions within the [`config/flow-typed`](https://github.com/RyanCCollins/scalable-react-boilerplate/tree/master/config/flow-typed) folder and have also provided some useful configuration within the `.flowconfig` file.
+
 # Documentation
 
 ## Getting Started

app/src/components/LoadingIndicator/index.js

@@ -1,39 +1,34 @@
-import React, { PropTypes } from 'react';
+// @flow
+import React from 'react';
 import cssModules from 'react-css-modules';
 import Spinning from 'grommet-udacity/components/icons/Spinning';
 import Box from 'grommet-udacity/components/Box';
 import Heading from 'grommet-udacity/components/Heading';
 import styles from './index.module.scss';
 
-const LoadingIndicator = ({
-  isLoading,
-  message,
-}) => (
-  <Box
-    align="center"
-    justify="center"
-    className={styles.loadingIndicator}
-  >
-    {isLoading &&
-      <Box
-        align="center"
-        justify="center"
-      >
-        <Spinning />
-        <Heading tag="h3" align="center">{message}</Heading>
-      </Box>
-    }
-  </Box>
-);
-
-LoadingIndicator.propTypes = {
-  isLoading: PropTypes.bool.isRequired,
-  message: PropTypes.string.isRequired,
-};
-
-LoadingIndicator.defaultProps = {
-  isLoading: true,
-  message: 'Loading',
-};
+function LoadingIndicator(props: {
+  isLoading: boolean,
+  message: string
+}) {
+  const { message, isLoading } = props;
+  const title = message || 'Loading';
+  return (
+    <Box
+      align="center"
+      justify="center"
+      className={styles.loadingIndicator}
+    >
+      {isLoading &&
+        <Box
+          align="center"
+          justify="center"
+        >
+          <Spinning />
+          <Heading tag="h3" align="center">{title}</Heading>
+        </Box>
+      }
+    </Box>
+  );
+}
 
 export default cssModules(LoadingIndicator, styles);

app/src/components/Navbar/index.js

@@ -1,38 +1,36 @@
-import React, { PropTypes } from 'react';
+// @flow
+import React from 'react';
 import Header from 'grommet-udacity/components/Header';
 import Title from 'grommet-udacity/components/Title';
 import Anchor from 'grommet-udacity/components/Anchor';
 import Search from 'grommet-udacity/components/Search';
 import LogoImage from './logo.png';
 import { StyledMenu, StyledLogo, LogoPlaceholder } from './styles';
 
-const Navbar = ({
-  pathname,
-}) => (
-  <div>
-    <Header justify="between">
-      <Title>
-        {typeof window !== 'undefined' ?
-          <StyledLogo src={LogoImage} alt="logo" />
-        :
-          <LogoPlaceholder />
-        }
-      </Title>
-      <StyledMenu inline direction="row" align="center" responsive={false}>
-        <Anchor href="/" className={pathname === '/' ? 'active' : ''}>
-          Home
-        </Anchor>
-        <Anchor href="/about" className={pathname === '/about' ? 'active' : ''}>
-          About
-        </Anchor>
-        <Search dropAlign={{ right: 'right' }} />
-      </StyledMenu>
-    </Header>
-  </div>
-);
-
-Navbar.propTypes = {
-  pathname: PropTypes.string.isRequired,
-};
-
-export default Navbar;
+export default function Navbar(props: {
+  pathname: string
+}) {
+  const { pathname } = props;
+  return (
+    <div>
+      <Header justify="between">
+        <Title>
+          {typeof window !== 'undefined' ?
+            <StyledLogo src={LogoImage} alt="logo" />
+          :
+            <LogoPlaceholder />
+          }
+        </Title>
+        <StyledMenu inline direction="row" align="center" responsive={false}>
+          <Anchor href="/" className={pathname === '/' ? 'active' : ''}>
+            Home
+          </Anchor>
+          <Anchor href="/about" className={pathname === '/about' ? 'active' : ''}>
+            About
+          </Anchor>
+          <Search dropAlign={{ right: 'right' }} />
+        </StyledMenu>
+      </Header>
+    </div>
+  );
+}

app/src/containers/AboutContainer/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Box from 'grommet-udacity/components/Box';
 import Section from 'grommet-udacity/components/Section';
 import Headline from 'grommet-udacity/components/Headline';
-import { Divider, About } from 'components';
+import { Divider, About } from 'components'; // eslint-disable-line
 import links from './data';
 
 class AboutContainer extends Component { // eslint-disable-line react/prefer-stateless-function

app/src/containers/AppContainer/actions.js

@@ -1,4 +1,4 @@
-import * as types from './constants';
+import types from './constants';
 
 // appContainerdefaultAction :: None -> {Action}
 export const appContainerDefaultAction = () => ({  // eslint-disable-line

app/src/containers/AppContainer/constants.js

@@ -1 +1,2 @@
-export const APPCONTAINER_DEFAULT_ACTION = 'APPCONTAINER_DEFAULT_ACTION';
+const APPCONTAINER_DEFAULT_ACTION = 'APPCONTAINER_DEFAULT_ACTION';
+export default APPCONTAINER_DEFAULT_ACTION;

app/src/containers/AppContainer/reducer.js

@@ -1,4 +1,4 @@
-import * as types from './constants';
+import types from './constants';
 
 export const initialState = {
   isMobile: false,

app/src/utils/functors.js

@@ -0,0 +1,36 @@
+// @flow
+export default class Functors {
+  static Identity = x => ({
+    map: f => Functors.Identity(f(x)),
+    fold: f => f(x),
+    inspect: () => `Functors.Identity(${x})`,
+  });
+  static Right = x => ({
+    map: f => Functors.Right(f(x)),
+    fold: (_, g) => g(x),
+    inspect: () => `Functors.Right(${x})`,
+  });
+  static Left = x => ({
+    map: () => Functors.Left(x),
+    fold: f => f(x),
+    inspect: () => `Functors.Left(${x})`,
+  });
+  static Sum = x => ({
+    x,
+    concat: ({ x: y }) =>
+      Functors.Sum(x + y),
+    inspect: () => `Functors.Sum(${x})`,
+  });
+  static All = x => ({
+    x,
+    concat: ({ x: y }) =>
+      Functors.All(x && y),
+    inspect: () => `Functors.All(${x})`,
+  });
+  static First = x => ({
+    x,
+    concat: () =>
+      Functors.First(x),
+    inspect: () => `Functors.First(${x})`,
+  });
+}

app/src/utils/index.js

@@ -0,0 +1 @@
+export Functors from './functors';

config/flow-typed/GeneralStub.js

@@ -0,0 +1 @@
+export default {};