v2.0.0-rc.4 (#86)

* `functions` option which includes function setup with babel
* Error Handling option - includes Stackdriver client side error handling
* Analytics option - includes Google analytics
* `blueprints` option
* `engines` added to `package.json`
* `function` sub-generator for generating Cloud Functions for HTTPS, Firestore, RTDB, Storage, and Auth
* Functions dependency install is now run for main generator
* `port` (local server port number) is now within `project.config.js` for easy switching

README.md

@@ -17,8 +17,7 @@
 Install [Yeoman](http://yeoman.io) and generator-react-firebase using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)):
 
 ```bash
-npm install -g yo
-npm install -g generator-react-firebase
+npm install -g yo generator-react-firebase
 ```
 
 ## Getting Started
@@ -70,7 +69,6 @@ Project outputted from generator has a README explaining the full structure and
 |`lint`             |[Lints](http://stackoverflow.com/questions/8503559/what-is-linting) the project for potential errors|
 |`lint:fix`         |Lints the project and [fixes all correctable errors](http://eslint.org/docs/user-guide/command-line-interface.html#fix)|
 
-
 View [the example application README](/examples/react-firebase-redux/README.md) for more details.
 
 ### Production
@@ -145,6 +143,53 @@ Sub generators are included to help speed up the application building process. Y
 
 Example: To call the `component` sub-generator with "SomeThing" as the first parameter write: `yo react-firebase:component SomeThing`
 
+#### Function
+
+Generates a Cloud Function allowing the user to specify trigger type (from HTTPS, Firestore, RTDB, Auth, or Storage)
+
+A component is best for things that will be reused in multiple places. Our example
+
+**command**
+
+`yo react-firebase:function uppercaser`
+
+**result**
+
+```
+/functions
+--/uppercaser
+----index.js
+```
+
+*/functions/uppercaser/index.js:*
+
+```js
+import * as functions from 'firebase-functions'
+import * as admin from 'firebase-admin'
+
+/**
+ * @name uppercaser
+ * Cloud Function triggered by Real Time Database Event
+ * @type {functions.CloudFunction}
+ */
+export default functions.database
+  .ref('/users/{userId}')
+  .onUpdate(uppercaserEvent)
+
+/**
+ * @param  {functions.Event} event - Function event
+ * @return {Promise}
+ */
+async function uppercaserEvent(event) {
+  const eventData = event.data.val()
+  const params = event.params
+  const ref = admin.database().ref('responses')
+  await ref.push(eventData)
+  return data
+}
+
+```
+
 #### Component
 
 Generates a React component along with a matching scss file and places it within `/components`

examples/react-firebase-redux/.firebaserc

@@ -1,13 +1,13 @@
 {
   "projects": {
+    "default": "redux-firebasev3",
     "master": "redux-firebasev3",
     "prod": "redux-firebasev3"
   },
   "ci": {
     "createConfig": {
       "master": {
-        "version": "${npm_package_version}",
-        "env": "development",
+        "env": "production",
         "firebase": {
           "apiKey": "",
           "authDomain": "redux-firebasev3.firebaseapp.com",
@@ -22,7 +22,6 @@
         }
       },
       "prod": {
-        "version": "${npm_package_version}",
         "env": "production",
         "firebase": {
           "apiKey": "",

examples/react-firebase-redux/.travis.yml

@@ -19,7 +19,7 @@ branches:
     - prod
 
 cache:
-   # TODO: Use npm once functions runtime is updated to a node verion with lock files
+  # TODO: Use npm once functions runtime is updated to a node verion with lock files
   yarn: true
   directories:
     - node_modules # NPM packages

examples/react-firebase-redux/README.md

@@ -1,6 +1,5 @@
 # react-firebase-redux
 
-[![NPM version][npm-image]][npm-url]
 [![Build Status][travis-image]][travis-url]
 [![Dependency Status][daviddm-image]][daviddm-url]
 [![Code Coverage][coverage-image]][coverage-url]
@@ -21,13 +20,28 @@
 1. [Deployment](#deployment)
 
 ## Requirements
-* node `^5.0.0` (`6.11.0` suggested)
+* node `^6.11.5`
 * yarn `^0.23.0` or npm `^3.0.0`
 
 ## Getting Started
 
-1. Install dependencies: `npm install`
-2. Start Development server: `npm start`
+1. Install dependencies: `yarn install` (or `npm install`)
+1. If pulling to a new environment (not where project was created) - create `src/config.js` file that looks like so:
+    ```js
+    export const env = 'development' // process.env.NODE_ENV can also be used
+
+    export const firebase = {
+      // Config from Firebase console
+    }
+
+    // Config for react-redux-firebase
+    export const reduxFirebase = {
+      userProfile: 'users', // root to which user profiles are written
+    }
+
+    export default { env, firebase, reduxFirebase }
+    ```
+1. Start Development server: `yarn start` (or `npm start`)
 
 While developing, you will probably rely mostly on `npm start`; however, there are additional scripts at your disposal:
 
@@ -67,6 +81,8 @@ The application structure presented in this boilerplate is **fractal**, where fu
 ├── server                   # Express application that provides webpack middleware
 │   └── main.js              # Server application entry point
 ├── src                      # Application source code
+│   ├── config.js            # Environment specific config file with settings from Firebase (created by CI)
+│   ├── constants.js         # Project constants such as firebase paths and form names
 │   ├── index.html           # Main HTML page container for app
 │   ├── main.js              # Application bootstrap and rendering
 │   ├── normalize.js         # Browser normalization and polyfills
@@ -135,7 +151,6 @@ For more options on CI settings checkout the [firebase-ci docs](https://github.c
 1. Deploy to firebase: `firebase deploy`
 **NOTE:** You can use `firebase serve` to test how your application will work when deployed to Firebase, but make sure you run `npm run build` first.
 
-
 ## FAQ
 
 1. Why node `6.11.5` instead of a newer version?
@@ -152,8 +167,6 @@ For more options on CI settings checkout the [firebase-ci docs](https://github.c
     * smaller files which are easier to parse
     * functional components can be helpful (along with other tools) when attempting to optimize things
 
-[npm-image]: https://img.shields.io/npm/v/react-firebase-redux.svg?style=flat-square
-[npm-url]: https://npmjs.org/package/react-firebase-redux
 [travis-image]: https://img.shields.io/travis/testuser/react-firebase-redux/master.svg?style=flat-square
 [travis-url]: https://travis-ci.org/testuser/react-firebase-redux
 [daviddm-image]: https://img.shields.io/david/testuser/react-firebase-redux.svg?style=flat-square

examples/react-firebase-redux/blueprints/component/files/src/components/__name__/__name__.enhancer.js

@@ -0,0 +1,10 @@
+import { compose } from 'redux'
+import { withHandlers } from 'recompose'
+import { withNotifications } from 'modules/notification'
+
+export default compose(
+  withNotifications,
+  withHandlers({
+
+  })
+)

examples/react-firebase-redux/blueprints/component/files/src/components/__name__/__name__.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classes from './<%= pascalEntityName %>.scss'
+
+export const <%= pascalEntityName %> = ({ <%= camelEntityName %> }) => (
+  <div className={classes.container}>
+    <h1><%= pascalEntityName %></h1>
+    <div>
+      <pre>{JSON.stringify(<%= camelEntityName %>, null, 2)}</pre>
+    </div>
+  </div>
+)
+
+<%= pascalEntityName %>.propTypes = {
+  <%= camelEntityName %>: PropTypes.object
+}
+
+export default <%= pascalEntityName %>

examples/react-firebase-redux/blueprints/component/files/src/components/__name__/__name__.scss

@@ -0,0 +1,5 @@
+@import 'base';
+
+.container {
+
+}

examples/react-firebase-redux/blueprints/component/files/src/components/__name__/index.js

@@ -0,0 +1,4 @@
+import <%= pascalEntityName %> from './<%= pascalEntityName %>'
+import enhancer from './<%= pascalEntityName %>.enhancer'
+
+export default enhancer(<%= pascalEntityName %>)

examples/react-firebase-redux/blueprints/component/files/tests/components/__name__/__name__.spec.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import <%= pascalEntityName %> from 'components/<%= pascalEntityName %>'
+import { shallow } from 'enzyme'
+
+describe('(Component) <%= pascalEntityName %>', () => {
+  let _component
+
+  beforeEach(() => {
+    _component = shallow(
+      <<%= pascalEntityName %>
+        <%= camelEntityName %>={{}}
+      />
+    )
+  })
+
+  it('Renders div', () => {
+    const firstDiv = _component.find('div')
+    expect(firstDiv).to.exist
+  })
+
+})

examples/react-firebase-redux/blueprints/component/index.js

@@ -0,0 +1,25 @@
+// module.exports = {
+  // locals: function(options) {
+    // // Return custom template variables here.
+    // return {};
+  // },
+
+  // fileMapTokens: function(options) (
+    // // Return custom tokens to be replaced in your files
+    // return {
+      // __token__: function(options){
+        // // logic to determine value goes here
+        // return 'value';
+      // }
+    // }
+  // },
+
+  // Should probably never need to be overriden
+  //
+  // filesPath: function() {
+    // return path.join(this.path, 'files');
+  // },
+
+  // beforeInstall: function(options) {},
+  // afterInstall: function(options) {},
+// };

examples/react-firebase-redux/blueprints/form/files/src/components/__name__Form/__name__Form.enhancer.js

@@ -0,0 +1,4 @@
+import { reduxForm } from 'redux-form'
+import { formNames } from 'constants'
+
+export default reduxForm({ form: formNames.<%= pascalEntityName %> })

examples/react-firebase-redux/blueprints/form/files/src/components/__name__Form/__name__Form.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Field } from 'redux-form'
+import { TextField } from 'redux-form-material-ui'
+import Button from 'material-ui/Button'
+import classes from './<%= pascalEntityName %>Form.scss'
+
+export const <%= pascalEntityName %>Form = ({
+  handleSubmit,
+  submitting,
+  pristine
+}) => (
+  <form className={classes.container} onSubmit={handleSubmit}>
+    <Field
+      name="displayName"
+      component={TextField}
+      label="Display Name"
+    />
+    <Button
+      disabled={submitting || pristine}
+      color="primary"
+      type="submit"
+      className={classes.submit}>
+      Save
+    </Button>
+  </form>
+)
+
+<%= pascalEntityName %>Form.propTypes = {
+  submitting: PropTypes.bool.isRequired, // from enhancer (reduxForm)
+  pristine: PropTypes.bool.isRequired, // from enhancer (reduxForm)
+  handleSubmit: PropTypes.func.isRequired // from enhancer (reduxForm)
+}
+
+export default <%= pascalEntityName %>Form

examples/react-firebase-redux/blueprints/form/files/src/components/__name__Form/__name__Form.scss

@@ -0,0 +1,5 @@
+@import 'base';
+
+.container {
+
+}

examples/react-firebase-redux/blueprints/form/files/src/components/__name__Form/index.js

@@ -0,0 +1,4 @@
+import <%= pascalEntityName %>Form from './<%= pascalEntityName %>Form'
+import enhancer from './<%= pascalEntityName %>Form.enhancer'
+
+export default enhancer(<%= pascalEntityName %>Form)

examples/react-firebase-redux/blueprints/form/files/tests/components/__name__Form/__name__.spec.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import <%= pascalEntityName %>Form from 'components/<%= pascalEntityName %>Form'
+import { shallow } from 'enzyme'
+
+describe('(Component) <%= pascalEntityName %>Form', () => {
+  let _component
+
+  beforeEach(() => {
+    _component = shallow(
+      <<%= pascalEntityName %>Form
+        onSubmit={() => { }}
+      />
+    )
+  })
+
+  it('Renders div', () => {
+    const firstDiv = _component.find('div')
+    expect(firstDiv).to.exist
+  })
+
+})

examples/react-firebase-redux/blueprints/form/index.js

@@ -0,0 +1,25 @@
+// module.exports = {
+  // locals: function(options) {
+    // // Return custom template variables here.
+    // return {};
+  // },
+
+  // fileMapTokens: function(options) (
+    // // Return custom tokens to be replaced in your files
+    // return {
+      // __token__: function(options){
+        // // logic to determine value goes here
+        // return 'value';
+      // }
+    // }
+  // },
+
+  // Should probably never need to be overriden
+  //
+  // filesPath: function() {
+    // return path.join(this.path, 'files');
+  // },
+
+  // beforeInstall: function(options) {},
+  // afterInstall: function(options) {},
+// };

examples/react-firebase-redux/blueprints/function/files/functions/src/__name__/__name__.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classes from './<%= pascalEntityName %>.scss'
+
+export const <%= pascalEntityName %> = ({ <%= camelEntityName %> }) => (
+  <div className={classes.container}>
+    <h1><%= pascalEntityName %></h1>
+    <div>
+      <pre>{JSON.stringify(<%= camelEntityName %>, null, 2)}</pre>
+    </div>
+  </div>
+)
+
+<%= pascalEntityName %>.propTypes = {
+  <%= camelEntityName %>: PropTypes.object
+}
+
+export default <%= pascalEntityName %>

examples/react-firebase-redux/blueprints/function/files/functions/src/__name__/index.js

@@ -0,0 +1,4 @@
+import <%= pascalEntityName %> from './<%= pascalEntityName %>'
+import enhancer from './<%= pascalEntityName %>.enhancer'
+
+export default enhancer(<%= pascalEntityName %>)