Added Widgets variant to setup

Author: Mads Thines

config/setup/actions.js

@@ -5,7 +5,7 @@ const { Spinner } = require("cli-spinner");
 
 const { packages, features } = require("./packages");
 const { schema } = require("./schema");
-const { print, bold, dim, highlight, underline, actions, runActions, isYes } = require("./utilities");
+const { print, bold, dim, highlight, underline, actions, runActions, isYes, printFeatureConf } = require("./utilities");
 
 const spinner = new Spinner("%s Installing the new modules...").setSpinnerString(18);
 
@@ -17,12 +17,12 @@ const spinner = new Spinner("%s Installing the new modules...").setSpinnerString
 const startPrompt = project =>
   new Promise((res, rej) => {
     print(
-      `${dim(`${bold("Thanks for using React Boilerplate.")}
+      `${bold("Thanks for using React Boilerplate. ❤️")}
 If you run into trouble, don't hesitate to write an issue or contact one of the maintainers.
 
-Make sure that you don't have any uncommited changes before running the yarn setup.
+Make sure you don't have any uncommited changes before running, as it will stage any changes.
 
-${bold("Github Link")}
+${dim(`${bold("Github Link")}
 ${underline("https://github.com/adaptdk/react_boilerplate/issues")}
 
 ${bold("Maintainers")}
@@ -75,7 +75,7 @@ const getProjectName = project =>
 const getPackages = project =>
   new Promise((res, rej) => {
     print("------", "dim", [2, 0]);
-    print(`🌲   Now, this is the available packages:`, null, [2, 0]);
+    print(`Available packages:`, "bold", [2, 0]);
     print(
       `Read more about the different packages at ${underline(
         "https://github.com/adaptdk/react_boilerplate#-packages"
@@ -86,7 +86,14 @@ const getPackages = project =>
 
     // Output Each Package
     packages.forEach(variant => {
-      print(`${variant.id} ${variant.title}`);
+      switch (variant.type) {
+        case "break":
+          print(variant.title, "bold", [1, 0]);
+          break;
+        default:
+          print(`  ${variant.id} ${variant.title}`);
+          break;
+      }
     });
 
     print(`${bold("📦   Which package do you want to install?")}`, null, [2, 0]);
@@ -137,8 +144,9 @@ const getFeatures = project =>
       prompt.get(schema.features, (err, result) => {
         if (result) {
           if (isYes(result.features)) {
+            // If they want to customize and change the options
+            project.customizeFeature = true;
             const { features: selectedFeatures } = project;
-
             selectedFeatures.forEach(async (selectedFeature, featuresIndex) => {
               let activeFeatureIndex;
               const activeFeature = features.find((feature, featureIndex) => {
@@ -267,15 +275,19 @@ Thank you for using the boilerplate for your React project. 💪`);
       print(
         `
   ${bold("Project overview:")}
-  ${bold("✏️  Title:")}           ${project.title}
   ${bold("✏️  Machine name:")}    ${project.machine}
+  ${bold("✏️  Title:")}           ${project.title}
   ${bold("📦  Package:")}         ${project.package.branch}`,
         null,
         [1, 0]
       );
       if (setupConf.hasRepo) {
         print(`  ${bold("🌲  Repo Url:")}        ${project.ownRepo}`);
       }
+      if (setupConf.hasFeatures && project.customizeFeature) {
+        print("  💎  Features:", "bold", [0, 1]);
+        printFeatureConf(project.features);
+      }
 
       print(
         `${bold("Here's some quick commands to get you started.")}

config/setup/packages.js

@@ -3,30 +3,42 @@
 // Utilities
 const { dim } = require("./utilities");
 
-const urlRegExp = /htt(ps|p).*(:|.)/;
-
 // Read more about the different packages here: https://github.com/adaptdk/react_boilerplate
 const packages = [
+  {
+    type: "break",
+    title: "Typescript",
+  },
   {
     id: "1",
-    title: "Base (TypeScript)",
+    title: "Base",
     branch: "typescript/base",
     features: [{ name: "proxy" }],
   },
   {
     id: "2",
-    title: "Complex (TypeScript)",
+    title: "Complex",
     branch: "typescript/complex",
     features: [{ name: "proxy" }],
   },
   {
     id: "3",
+    title: "Widgets",
+    branch: "typescript/widgets",
+    features: [{ name: "proxy" }],
+  },
+  {
+    type: "break",
+    title: "Regular",
+  },
+  {
+    id: "4",
     title: "Base",
     branch: "regular/base",
     features: [{ name: "proxy" }],
   },
   {
-    id: "4",
+    id: "5",
     title: "Complex",
     branch: "regular/complex",
     features: [{ name: "proxy" }],
@@ -49,7 +61,7 @@ const features = [
             "You can always enable later in config/config-overrides.js"
           )}`,
           description: "Local Env. URL",
-          pattern: urlRegExp,
+          pattern: /(no|^htt(ps|p).*(:|.))/,
           default: "no",
           required: true,
         },

config/setup/setup.js

@@ -5,8 +5,9 @@ const prompt = require("prompt");
 const { startPrompt, finishSetup, getPackages, getFeatures, getProjectName, setupGit, exited } = require("./actions");
 
 const project = {
-  debug: false,
+  debug: true,
   branch: null,
+  customizeFeature: false,
   deleteRepo: false,
   features: [],
   finished: false,

config/setup/utilities/logger.js

@@ -41,8 +41,19 @@ const print = (string, variant, space = [0, 0]) => {
   spacer(space[1]);
 };
 
+const printFeatureConf = features => {
+  features.forEach(feature => {
+    print(`     {`);
+    Object.entries(feature).forEach(([key, value]) => {
+      print(`       ${color.bold(`${key}:`)} ${value}`);
+    });
+    print(`     }`, null, [0, 1]);
+  });
+};
+
 module.exports = {
   ...color,
   spacer,
   print,
+  printFeatureConf,
 };