Feat: update generators to use flow types and new best practices

Author: RyanCCollins

app/src/pages/AboutPage/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import cssModules from 'react-css-modules';
-import { AboutContainer } from 'containers';  // eslint-disable-line
+import { AboutContainer } from 'containers';
 import styles from './index.module.scss';
 
 const AboutPage = () => (

app/src/pages/LandingPage/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import cssModules from 'react-css-modules';
-import { LandingContainer } from 'containers'; // eslint-disable-line
+import { LandingContainer } from 'containers';
 import styles from './index.module.scss';
 
 const LandingPage = () => (

app/src/reducers.js

@@ -4,12 +4,14 @@ import { reducer as formReducer } from 'redux-form';
 import client from './apolloClient';
 
 /* GENERATOR: Import all of your reducers */
+import test from './containers/Test/reducer';
 import landing from './containers/LandingContainer/reducer';
 import app from './containers/AppContainer/reducer';
 
 const rootReducer = combineReducers({
   app,
   /* GENERATOR: Compile all of your reducers */
+  test,
   landing,
   routing: routerReducer,
   form: formReducer,

app/src/store.js

@@ -6,11 +6,13 @@ import { UserAuthWrapper as userAuthWrapper } from 'redux-auth-wrapper';
 import rootReducer from './reducers';
 import client from './apolloClient';
 /* GENERATOR: Import all of your initial state */
+import { initialState as test } from './containers/Test/reducer';
 import { initialState as landing } from './containers/LandingContainer/reducer';
 import { initialState as app } from './containers/AppContainer/reducer';
 
 const initialState = {
   /* GENERATOR: Compile all of your initial state */
+  test,
   app,
   landing,
 };

config/generators/component/es6class.js.hbs

@@ -1,7 +1,14 @@
+{{#if wantFlowTypes}}
+/* @flow */
+{{/if}}
 {{#if wantPropTypes}}
-import React, { PropTypes, Component } from 'react';
+import React, { PropTypes } from 'react';
 {{else}}
-import React, { Component } from 'react';
+import React from 'react';
+{{/if}}
+import Box from 'grommet/components/Box';
+{{#if imports}}
+{{{ createImports imports }}}
 {{/if}}
 {{#if wantSCSSModules}}
 import cssModules from 'react-css-modules';
@@ -11,15 +18,21 @@ import styles from './index.module.scss';
 import { StyledWrapper } from './styles';
 {{/if}}
 
-class {{ properCase name }} extends Component { // eslint-disable-line react/prefer-stateless-function
+{{#if wantFlowTypes}}
+type {{ properCase name }}Props = {
+
+}
+{{/if}}
+
+class {{ properCase name }} extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  {{#if wantFlowTypes}}
+  props: {{ properCase name }}Props;
+  {{/if}}
   render() {
     return (
-      {{#if wantSCSSModules}}
-      <div className={{curly true}}styles.{{ camelCase name }}{{curly}}>
-      {{else}}
-      <div>
-      {{/if}}
-      </div>
+      <Box>
+
+      </Box>
     );
   }
 }

config/generators/component/index.js

@@ -26,7 +26,7 @@ module.exports = {
     {
       type: 'confirm',
       name: 'wantSCSSModules',
-      default: true,
+      default: false,
       message: 'Should the component use SCSS Modules?',
     },
     {
@@ -37,10 +37,32 @@ module.exports = {
     },
     {
       type: 'confirm',
-      name: 'wantPropTypes',
+      name: 'wantFlowTypes',
       default: true,
+      message: 'Should the component have FlowTypes?',
+    },
+    {
+      type: 'confirm',
+      name: 'wantPropTypes',
+      default: false,
       message: 'Should the component have PropTypes?',
     },
+    {
+      type: 'checkbox',
+      name: 'imports',
+      message: 'Would you like to import any commonly used grommet components?',
+      choices: () => [
+        { name: 'Anchor', value: 'Anchor', checked: false },
+        { name: 'Article', value: 'Article', checked: false },
+        { name: 'Button', value: 'Button', checked: false },
+        { name: 'Card', value: 'Card', checked: false },
+        { name: 'Heading', value: 'Heading', checked: false },
+        { name: 'Header', value: 'Header', checked: false },
+        { name: 'Footer', value: 'Footer', checked: false },
+        { name: 'Paragraph', value: 'Paragraph', checked: false },
+        { name: 'Section', value: 'Section', checked: false },
+      ],
+    },
   ],
   actions: (data) => {
     const actions = [{

config/generators/component/stateless.js.hbs

@@ -1,8 +1,15 @@
+{{#if wantFlowTypes}}
+/* @flow */
+{{/if}}
 {{#if wantPropTypes}}
 import React, { PropTypes } from 'react';
 {{else}}
 import React from 'react';
 {{/if}}
+import Box from 'grommet/components/Box';
+{{#if imports}}
+{{{ createImports imports }}}
+{{/if}}
 {{#if wantSCSSModules}}
 import cssModules from 'react-css-modules';
 import styles from './index.module.scss';
@@ -11,14 +18,33 @@ import styles from './index.module.scss';
 import { StyledWrapper } from './styles';
 {{/if}}
 
-const {{ properCase name }} = (props) => (
-  {{#if wantSCSSModules}}
-  <div className={{curly true}}styles.{{ camelCase name }}{{curly}}>
-  {{else}}
-  <div>
-  {{/if}}
-  </div>
-);
+{{#if wantFlowTypes}}
+function {{ properCase name }}(props: {}) {
+  return (
+    <Box>
+
+    </Box>
+  );
+}
+{{else if wantPropTypes}}
+{{#unless wantFlowTypes}}
+function {{ properCase name }}(props) {
+  return (
+    <Box>
+
+    </Box>
+  );
+}
+{{/unless}}
+{{else}}
+function {{ properCase name }}() {
+  return (
+    <Box>
+
+    </Box>
+  );
+}
+{{/if}}
 
 {{#if wantPropTypes}}
 {{ properCase name }}.propTypes = {

config/generators/component/test.js.hbs

@@ -1,13 +1,13 @@
 import { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 import React from 'react';
-import { spy } from 'sinon';
+// import { spy } from 'sinon';
 import {{ properCase name }} from '../index';
 
 describe('<{{ properCase name }} />', () => {
   it('should render with default props', () => {
     const wrapper = shallow(
-      <{{ properCase name }} />
+      <{{ properCase name }} />,
     );
     expect(shallowToJson(wrapper)).toMatchSnapshot();
   });

config/generators/container/README.md.hbs

@@ -1,6 +1,34 @@
-import * as types from './constants';
+{{#if wantFlowTypes}}
+/* @flow */
+{{/if}}
+import * as T from './constants';
+{{#if wantFlowTypes}}
+import type { {{ properCase name }}Action } from './flowTypes';
 
-// {{ camelCase name }}defaultAction :: None -> {Action}
-export const {{ camelCase name }}DefaultAction = () => ({
-  type: types.{{ uppercase name }}_DEFAULT_ACTION,
+export const loadDataInitiation = (): {{ properCase name }}Action => ({
+  type: T.LOAD_DATA_INITIATION,
 });
+
+export const loadDataSuccess = (): {{ properCase name }}Action => ({
+  type: T.LOAD_DATA_SUCCESS,
+});
+
+export const loadDataFailure = (error: { message: string }): {{ properCase name }}Action => ({
+  type: T.LOAD_DATA_FAILURE,
+  error,
+});
+{{else}}
+
+export const loadDataInitiation = () => ({
+  type: T.LOAD_DATA_INITIATION,
+});
+
+export const loadDataSuccess = () => ({
+  type: T.LOAD_DATA_SUCCESS,
+});
+
+export const loadDataFailure = (error) => ({
+  type: T.LOAD_DATA_FAILURE,
+  error,
+});
+{{/if}}