feat: Add Task for Choosing Store Management Dependencies

generator.js

@@ -3,10 +3,14 @@
 var path = require('path');
 var isValid = require('is-valid-app');
 
-module.exports = function(app) {
+module.exports = app => {
   // return if the generator is already registered
   if (!isValid(app, 'generate-react')) return;
 
+  app.use(require('generate-project'));
+  app.register('create-react-app', require('./lib/generators/create-react-app'));
+  app.register('global-store', require('./lib/generators/global-store'));
+
   /**
    * Generate a `index.js` file to the current working directory. Learn how to [customize
    * behavior(#customization) or override built-in templates.
@@ -18,8 +22,6 @@ module.exports = function(app) {
    * @api public
    */
 
-  task(app, 'react', 'index.js');
-
   /**
    * Alias for running the [react](#react) task with the following command:
    *
@@ -30,18 +32,19 @@ module.exports = function(app) {
    * @api public
    */
 
-  app.task('default', ['react']);
+  app.task('default', ['project']);
 };
 
 /**
  * Create a task with the given `name` and glob `pattern`
  */
 
-function task(app, name, pattern) {
-  app.task(name, function() {
-    return app.src(pattern, {cwd: __dirname})
+function task(app, name, pattern, dest = '') {
+  app.task(name, () => {
+    return app
+      .src(pattern, { cwd: __dirname })
       .pipe(app.renderFile('*'))
       .pipe(app.conflicts(app.cwd))
-      .pipe(app.dest(app.cwd));
+      .pipe(app.dest(path.join(app.cwd, dest)));
   });
 }

lib/constants.js

@@ -0,0 +1,17 @@
+module.exports = {
+  YARN: 'yarn',
+  NPM: 'npm',
+  NPX: 'npx',
+  ADD: 'add',
+  INSTALL: 'install',
+  CREATE_REACT_APP: 'create-react-app',
+  REDUX: 'redux',
+  REACT_REDUX: 'react-redux',
+  MOBX: 'mobx',
+  STYLED_COMPONENTS: 'styled-components',
+  SCSS: 'node-sass',
+  LESS: 'less',
+  ROUTER: 'react-router-dom',
+  ENZYME: 'enzyme',
+  JEST: 'jest'
+};

lib/generators/create-react-app.js

@@ -0,0 +1,45 @@
+const spawn = require('../spawn');
+const path = require('path');
+const { prompt } = require('enquirer');
+const { NPX, CREATE_REACT_APP } = require('../constants.js');
+
+module.exports = app => {
+  app.task('create-react-app', async () => {
+    let dest = app.options.name;
+    if (!dest) {
+      const answers = await prompt({
+        type: 'text',
+        name: 'appName',
+        message: 'What would you like the app name to be?'
+      });
+      dest = answers.appName;
+    }
+    await spawn(NPX, [CREATE_REACT_APP, dest]);
+  });
+
+  app.task('create-react-app-templates', async () => {
+    const dest = path.join(app.cwd, app.options.name);
+    const answers = await prompt([
+      {
+        type: 'text',
+        name: 'description',
+        message: 'What description would you like to use for your website?'
+      },
+      {
+        type: 'text',
+        name: 'title',
+        message: 'What title would you like to use for your website?'
+      }
+    ]);
+
+    return app
+      .src('create-react-app/public/*.*', {
+        cwd: path.join(__dirname, '../../templates')
+      })
+      .pipe(app.renderFile('*', answers).on('error', console.error))
+      .pipe(app.conflicts(dest))
+      .pipe(app.dest(dest));
+  });
+
+  app.task('default', ['create-react-app', 'create-react-app-templates']);
+};

lib/generators/global-store.js

@@ -0,0 +1,24 @@
+const spawn = require('../spawn');
+const path = require('path');
+const { prompt } = require('enquirer');
+const { YARN, REDUX, REACT_REDUX, MOBX, ADD } = require('../constants');
+
+module.exports = app => {
+  app.task('global-store', async () => {
+    const questions = prompt({
+      type: 'select',
+      name: 'globalstore',
+      message:
+        'Would you like to add any of the following dependencies for Store Management?',
+      choices: ['Redux', 'MobX', 'No']
+    });
+    const { globalstore } = await questions;
+    if (globalstore !== 'No' && globalstore === 'Redux') {
+      await spawn(YARN, [ADD, REDUX, REACT_REDUX]);
+    } else if (globalstore !== 'No' && globalstore === 'MobX') {
+      await spawn(YARN, [ADD, MOBX]);
+    }
+  });
+
+  app.task('default', ['global-store']);
+};

lib/spawn.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const spawn = require('child_process').spawn;
+
+const defaults = {
+  stdio: 'inherit',
+  cwd: process.cwd()
+};
+
+// simple wrapper around cli commands
+module.exports = async (cmd, args, options) => {
+  return new Promise((resolve, reject) => {
+    const cp = spawn(cmd, args, { ...defaults, ...options });
+    cp.on('error', reject);
+    cp.on('close', code => {
+      if (code > 0) {
+        return reject(code);
+      }
+      resolve(code);
+    });
+  });
+};

package.json

@@ -21,13 +21,16 @@
     "test": "mocha"
   },
   "dependencies": {
-    "is-valid-app": "^0.3.0"
+    "is-valid-app": "^0.3.0",
+    "enquirer": "^2.3.2",
+    "generate-project": "^1.0.0"
   },
   "keywords": [
     "generate",
     "react"
   ],
   "devDependencies": {
+    "generate": "^0.14.0",
     "gulp-format-md": "^2.0.0"
   },
   "verb": {
@@ -51,4 +54,4 @@
       "gulp"
     ]
   }
-}
+}

templates/create-react-app/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="<%= description %>"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title><%= title %></title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>