✏️ Add JS Template Files

Author: alexlee-dev

src/template/js/src/constants.js

@@ -0,0 +1,17 @@
+import { Options } from "boxen";
+
+/**
+ * Blank style applied to Boxen.
+ */
+export const blankBoxenStyle = {
+  borderStyle: {
+    topLeft: " ",
+    topRight: " ",
+    bottomLeft: " ",
+    bottomRight: " ",
+    horizontal: " ",
+    vertical: " ",
+  },
+  float: "center",
+  padding: { top: 0, bottom: 0, right: 1, left: 1 },
+};

src/template/js/src/index.js

@@ -0,0 +1,46 @@
+import clear from "clear";
+import Configstore from "configstore";
+import EventEmitter from "events";
+import { titleScreen } from "pickitt";
+
+import { displayMainMenu, interpretMenuAction } from "./menu";
+import setup from "./setup";
+
+const main = async () => {
+  const menuActionEmitter = new EventEmitter.EventEmitter();
+  menuActionEmitter.on("actionCompleted", async (state) => {
+    await titleScreen("APP NAME");
+    await displayMainMenu(state);
+    await interpretMenuAction(state);
+  });
+
+  const config = new Configstore("app-name");
+
+  const state = {
+    config,
+    menuAction: null,
+    menuActionEmitter,
+  };
+
+  try {
+    const isSetUp = config.get("isSetUp");
+
+    if (!isSetUp) {
+      await setup(state);
+      clear();
+    }
+
+    await titleScreen("APP NAME");
+    await displayMainMenu(state);
+
+    await interpretMenuAction(state);
+  } catch (e) {
+    console.error("ERROR");
+    console.log(state);
+    console.error(e);
+  }
+};
+
+if (process.argv[3] === "start") main();
+
+export default main;

src/template/js/src/menu.js

@@ -0,0 +1,117 @@
+import boxen from "boxen";
+import chalk from "chalk";
+import inquirer from "inquirer";
+import { titleScreen } from "pickitt";
+
+import { blankBoxenStyle } from "./constants";
+
+/**
+ * Displays Main Menu to user.
+ * @param {AppState} state State of application.
+ * @returns {Promise} Resolves with menuAction value.
+ */
+export const displayMainMenu = (state) =>
+  new Promise(async (resolve, reject) => {
+    try {
+      const { menuAction } = await inquirer.prompt([
+        {
+          type: "list",
+          message: "Main Menu",
+          name: "menuAction",
+          choices: [
+            { value: "option1", name: "Option 1" },
+            { value: "option2", name: "Option 2" },
+            { value: "option3", name: "Option 3" },
+            new inquirer.Separator(),
+            { value: "about", name: "About" },
+            { value: "exit", name: "Exit" },
+          ],
+        },
+      ]);
+      state.menuAction = menuAction;
+      resolve(menuAction);
+    } catch (e) {
+      reject(e);
+    }
+  });
+
+/**
+ * Pauses the process execution and waits for the user to hit a key.
+ * @returns {Promise} Resolves when user has entered a keystroke.
+ * @async
+ */
+const keypress = async () => {
+  try {
+    process.stdin.setRawMode(true);
+    return new Promise((resolve, reject) => {
+      try {
+        process.stdin.resume();
+        process.stdin.once("data", () => {
+          process.stdin.setRawMode(false);
+          resolve();
+        });
+      } catch (e) {
+        return reject(e);
+      }
+    });
+  } catch (e) {
+    throw new Error(e);
+  }
+};
+
+/**
+ * Interprets user selected menu action.
+ * @param {AppState} state State of application.
+ * @returns {Promise}
+ */
+export const interpretMenuAction = async (state) => {
+  try {
+    if (state.menuAction === null) {
+      throw new Error("menuAction can not be `null`");
+    }
+    const actions = {
+      about: async (state) => {
+        await titleScreen("APP NAME");
+        console.log(
+          boxen(chalk.yellow(`Author: `) + "YOUR NAME", blankBoxenStyle)
+        );
+
+        console.log("Press any key to return to Main Menu ...");
+        await keypress();
+        state.menuActionEmitter.emit("actionCompleted", state);
+      },
+      option1: async (state) => {
+        await titleScreen("APP NAME");
+        console.log("Option 1 Logic would take place here :)");
+        console.log("");
+
+        console.log("Press any key to return to Main Menu ...");
+        await keypress();
+        state.menuActionEmitter.emit("actionCompleted", state);
+      },
+      option2: async (state) => {
+        await titleScreen("APP NAME");
+        console.log("Option 2 Logic would take place here :)");
+        console.log("");
+
+        console.log("Press any key to return to Main Menu ...");
+        await keypress();
+        state.menuActionEmitter.emit("actionCompleted", state);
+      },
+      option3: async (state) => {
+        await titleScreen("APP NAME");
+        console.log("Option 3 Logic would take place here :)");
+        console.log("");
+
+        console.log("Press any key to return to Main Menu ...");
+        await keypress();
+        state.menuActionEmitter.emit("actionCompleted", state);
+      },
+      exit: (state) => process.exit(),
+    };
+
+    await actions[state.menuAction](state);
+  } catch (e) {
+    throw new Error(e);
+  }
+};

src/template/js/src/setup.js

@@ -0,0 +1,31 @@
+import chalk from "chalk";
+import clear from "clear";
+import inquirer from "inquirer";
+
+const setup = async (state) => {
+  try {
+    clear();
+
+    console.log(
+      `Welcome to ${chalk.yellowBright(
+        "APP NAME"
+      )}! Let's walk you through the initial set up.\n`
+    );
+
+    const answers = await inquirer.prompt([
+      {
+        type: "input",
+        name: "specialKey",
+        message: `Please enter your ${chalk.yellowBright("special key")}:`,
+      },
+    ]);
+    const specialKey = answers.specialKey;
+    state.config.set("specialKey", specialKey);
+
+    state.config.set("isSetUp", true);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export default setup;