Include component generator into the App Generator (#217)

* move component generator

* update component generator index

* remove unused dependency

* updating Readme

* add createDirectory

* update component generator changes

* remove absolute path to node modules

* upstream changes, single quotes

* upstream changes

packages/generator-electrode/README.md

@@ -1,7 +1,7 @@
 # generator-electrode
 
 [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![devDependency Status][daviddm-dev-image]][daviddm-dev-url] [![npm downloads][npm-downloads-image]][npm-downloads-url]
-> Generate Electrode ~~Isomorphic~~ Universal React App with NodeJS backend.
+> Generate Electrode ~~Isomorphic~~ Universal React App with NodeJS backend or a React component with useful gulp tasks for development, building and publishing.
 
 ## Installation
 
@@ -42,6 +42,47 @@ Some common ones:
   - `gulp server-prod` - start server in production mode
   - `gulp check` - run unit tests with coverage
 
+## Generating a React Component
+  Install the generator if you haven't already:
+
+  ```bash
+  npm install -g generator-electrode
+  ```
+
+  Then run the generator:
+
+  ```bash
+  yo electrode:component
+  ```
+
+...and follow the prompts.
+
+## Developing Your Component
+
+### Source
+
+Your component source code is in `src`. You can use JSX and ES6 syntax freely in
+your component source; it will be transpiled to `lib` with Babel before being
+published to npm so that your users will simply be able to include it.
+
+It's a great idea to add a description, documentation and other information to
+your `README.md` file, to help people who are interested in using your
+component.
+
+### Example and Preview
+
+Preview your component with LiveReload:
+
+```bash
+gulp demo ; gulp open-demo
+```
+
+A webserver will be started on [localhost:4000](http://127.0.0.1:4000) running
+the examples in `demo/examples/*`
+
+You can use this code-playground to test your component, then publish it to let
+potential users try out your component and see what it can do.
+
 ## Getting To Know Yeoman
 
  * Yeoman has a heart of gold.

packages/generator-electrode/component/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _ = require("lodash");
+var chalk = require("chalk");
+var yeoman = require("yeoman-generator");
+var path = require('path');
+var extend = _.merge;
+var parseAuthor = require('parse-author');
+
+var ReactComponentGenerator = yeoman.Base.extend({
+  constructor: function () {
+    yeoman.Base.apply(this, arguments);
+  },
+  initializing: function () {
+    this.pkg = this.fs.readJSON(this.destinationPath('package.json'), {});
+
+    // Pre set the default props from the information we have at this point
+    this.props = {
+      packageName: this.pkg.name
+    };
+
+    if (_.isObject(this.pkg.author)) {
+      this.props.developerName = this.pkg.author.name;
+      this.props.createDirectory = true;
+    } else if (_.isString(this.pkg.author)) {
+      var info = parseAuthor(this.pkg.author);
+      this.props.developerName = info.name;
+    }
+  },
+  prompting: {
+    greeting: function () {
+      this.log(
+        "\n" + chalk.bold.underline("Welcome to the Electrode Component Generator") +
+        "\n" +
+        "\nWe're going to set up a new " + chalk.bold("Electrode") + " component, ready for development with" +
+        "\n" + chalk.bold("gulp, webpack, demo, electrode component archetype, and live-reload")
+      );
+    },
+    askFor: function () {
+      if (this.pkg.name || this.options.name) {
+        this.props.name = this.pkg.name || _.kebabCase(this.options.name);
+      }
+      var prompts = [{
+        type: "input",
+        name: "projectName",
+        message: "What is your Package/GitHub project name? (e.g., 'wysiwyg-component')",
+        default: "wysiwyg-component"
+      },
+      {
+        type: "input",
+        name: "packageName",
+        message: "What is the ClassName for your component?",
+        default: this.props.componentName
+      }, {
+        type: "input",
+        name: "packageName",
+        message: "What will be the npm package name?",
+        default: this.props.packageName
+      }, {
+        type: "input",
+        name: "packageGitHubOrg",
+        message: "What will be the GitHub organization username (e.g., 'walmartlabs')?",
+        default: this.props.packageGitHubOrg
+      }, {
+        type: "input",
+        name: "developerName",
+        message: "What is your name? (for copyright notice, etc.)",
+        default: this.props.developerName
+      },
+      {
+        type: "input",
+        name: "ghUser",
+        message: "What is your GitHub Username?",
+        default: this.props.developerName
+      }, {
+        type: "list",
+        name: "quoteType",
+        message: "Use double quotes or single quotes?",
+        choices: ["\"", "'"],
+        default: "\""
+      }, {
+        type: "input",
+        name: "ghRepo",
+        message: "What is the name of the GitHub repo where this will be published?",
+        default: this.packageName
+      }, {
+        type: "confirm",
+        name: "createDirectory",
+        message: "Would you like to create a new directory for your project?",
+        default: true
+      }];
+      return this.prompt(prompts).then((props) => {
+        this.props = extend(this.props, props);
+        this.projectName = this.props.projectName;
+        this.packageName = this.props.projectName;
+        this.developerName = this.props.developerName.split(" ").map(_.toLower).join("");
+        this.quoteType = this.props.quoteType;
+        this.ghUser = this.props.ghUser;
+        this.ghRepo = this.props.ghRepo;
+        this.packageGitHubOrg = this.props.packageGitHubOrg;
+        this.createDirectory = this.props.createDirectory;
+        this.componentName = _.kebabCase(_.deburr(this.props.projectName))
+          .replace(/^\s+|\s+$/g, "")
+          .replace(/(^|[-_ ])+(.)/g, function (match, first, second) {
+            return second.toUpperCase();
+          });
+        this.currentYear = new Date().getFullYear();
+        if (this.props.createDirectory) {
+          var newRoot = this.destinationPath() + '/' + this.packageName;
+          this.destinationRoot(newRoot);
+        }
+      });
+    }
+  },
+
+  writing: {
+    project: function () {
+      this.copy("babelrc", ".babelrc");
+      this.copy("gitignore", ".gitignore");
+      this.copy("npmignore", ".npmignore");
+      this.copy("editorconfig", ".editorconfig");
+      if (this.quoteType === "'") {
+        this.template("eslintrc", ".eslintrc");
+      }
+      this.template("_gulpfile.js", "gulpfile.js");
+      this.template("_package.json", "package.json");
+      this.template("_readme.md", "README.md");
+    },
+    component: function () {
+      this.template("src/components/_component.jsx", "src/components/" + this.projectName + ".jsx");
+      this.template("src/styles/_component.css", "src/styles/" + this.projectName + ".css");
+
+      // l10n language templates
+      this.template("src/lang/_DefaultMessages.js", "src/lang/default-messages.js");
+      this.template("src/lang/_en.json", "src/lang/en.json");
+      this.template("src/lang/tenants/electrodeio/_defaultMessages.js", "src/lang/tenants/electrodeio/default-messages.js");
+
+      this.template("src/_Component.js", "src/index.js");
+    },
+    test: function () {
+      this.template("test/client/eslintrc", "test/client/.eslintrc");
+      this.template("test/client/components/_component.spec.jsx", "test/client/components/" + this.projectName + ".spec.jsx");
+      this.copy("test/client/components/helpers/_intlEnzymeTestHelper.js", "test/client/components/helpers/intl-enzyme-test-helper.js");
+    },
+    demo: function () {
+      this.template("demo/_demo.jsx", "demo/demo.jsx");
+      this.template("demo/_demo.css", "demo/demo.css");
+      this.template("demo/examples/_component.example", "demo/examples/" + this.projectName + ".example");
+    }
+  },
+
+  install: function () {
+    this.npmInstall();
+  },
+
+  end: function () {
+    if (this.quoteType === "'") {
+      this.spawnCommandSync("node_modules/.bin/eslint", ["--fix", "src", "demo", "example", "test", "--ext", ".js,.jsx"]);
+    }
+    var chdir = this.createDirectory ? "'cd " + this.packageName + "' then " : "";
+    this.log(
+      "\n" + chalk.green.underline("Your new Electrode component is ready!") +
+      "\n" +
+      "\nYour component is in src/ and your demo files are in demo/" +
+      "\n" +
+      "\nType " + chdir + "'gulp demo' to run the development build and demo tasks." +
+      "\n"
+    );
+  }
+
+});
+
+module.exports = ReactComponentGenerator;

packages/generator-electrode/component/templates/_gulpfile.js

@@ -0,0 +1,32 @@
+"use strict";
+
+const exec = require("electrode-gulp-helper").exec;
+
+/**
+ * There is a full range of gulp tasks defined in the above archetype
+ * but below is a concise list of most often used gulp tasks at the
+ * component level
+ *
+ * Full list of gulp tasks:
+ * https://github.com/electrode-io/electrode-archetype-react-component/blob/master/archetype-gulpfile.js#L38-L134
+ *
+ */
+
+const tasks = {
+  "demo": ["generate", "server-dev"],
+  "demo-iso": ["dev-iso"],
+  "generate": ["generate-metadata", "generate-documentation"],
+  "generate-documentation": () => exec(`electrode-docgen --package ./package.json --src ./src --markdown components.md`),
+  "generate-metadata": () => exec(`electrode-docgen --package ./package.json --src ./src --metadata components.json`),
+  <% if (quoteType === "'") { %>
+  'archetype:lint-server': () => exec(`eslint --color -c ./.eslintrc config/karma config/webpack demo-server`),
+    "lint-react-demo": () => exec(`eslint --ext .js,.jsx -c ./.eslintrc demo/*.jsx --color`),
+      "lint-react-src": () => exec(`eslint --ext .js,.jsx -c ./.eslintrc src --color`),
+        "lint-scripts": () => exec(`eslint --ext .js -c ./.eslintrc scripts --color`),
+          "lint-react-test": () => exec(`eslint --ext .js,.jsx -c ./test/client/.eslintrc test/client --color`),
+ <% } %>
+  "prepublish": ["npm:prepublish"],
+    "preversion": ["check-cov"]
+};
+
+require("electrode-archetype-react-component")(tasks);

packages/generator-electrode/component/templates/_package.json

@@ -0,0 +1,39 @@
+{
+  "name": "<%= packageName %>",
+  "version": "1.0.0",
+  "description": "<%= projectName %>",
+  "main": "lib/index.js",
+  "author": {
+    "name": "<%= developerName %>",
+    "url": "https://github.com/<%= ghUser %>"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/<%= packageGitHubOrg %>/<%= ghRepo %>.git"
+  },
+  "bugs": {
+    "url": "https://github.com/<%= packageGitHubOrg %>/<%= ghRepo %>/issues"
+  },
+  "homepage": "https://github.com/<%= packageGitHubOrg %>/<%= ghRepo %>",
+  "dependencies": {},
+  "devDependencies": {
+    "electrode-archetype-react-component": "^1.0.0",
+    "electrode-archetype-react-component-dev": "^1.0.0",
+    "gulp": "^3.9.1"
+  },
+  "engines": {
+    "node": "^4.2.6",
+    "npm": "^3.5.3"
+  },
+  "scripts": {
+    "prepublish": "gulp prepublish",
+    "start": "gulp demo",
+    "test": "gulp check"
+  },
+  "keywords": [
+    "react",
+    "electrode",
+    "electrode-component",
+    "react-component"
+  ]
+}

packages/generator-electrode/component/templates/_readme.md

@@ -0,0 +1,60 @@
+# <%= projectName %>
+
+__COMPONENT DESCRIPTION GOES HERE__
+
+
+## Demo & Examples
+
+Live demo: [<%= ghUser %>.github.io/<%= packageName %>](http://<%= ghUser %>.github.io/<%= packageName %>/)
+
+To build the examples locally, run:
+
+```
+npm install
+npm start
+```
+
+Then open [`localhost:8000`](http://localhost:8000) in a browser.
+
+
+## Installation
+
+The easiest way to use <%= packageName %> is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
+
+You can also use the standalone build by including `dist/<%= packageName %>.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
+
+```
+npm install <%= packageName %> --save
+```
+
+
+## Usage
+
+__EXPLAIN USAGE HERE__
+
+```
+var <%= componentName %> = require('<%= packageName %>');
+
+<<%= componentName %>>Example</<%= componentName %>>
+```
+
+### Properties
+
+* __DOCUMENT PROPERTIES HERE__
+
+### Notes
+
+__ADDITIONAL USAGE NOTES__
+
+
+## Development (`src`, `lib` and the build process)
+
+**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
+
+To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
+
+## License
+
+__PUT LICENSE HERE__
+
+Copyright (c) <%= currentYear %> <%= developerName %>.

packages/generator-electrode/component/templates/babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/electrode-archetype-react-component/config/babel/.babelrc"
+}

packages/generator-electrode/component/templates/demo/_demo.css

@@ -0,0 +1,4 @@
+/* Component styles */
+.demoStyle {
+  composes: className from "../src/styles/<%= projectName %>.css";
+}