feat: update ui (#202)

* fix: remove double blank lines when not use eslintrc style

* add ansi-colors

* add style for questions

* add style for logg util

* change error color back to magenta

* update console

* some changes

* some changes

* change jsdoc type

Author: hyperz111

bin/create-config.js

@@ -7,17 +7,17 @@
 
 import { ConfigGenerator } from "../lib/config-generator.js";
 import { findPackageJson } from "../lib/utils/npm-utils.js";
-import { info } from "../lib/utils/logging.js";
+import * as log from "../lib/utils/logging.js";
 import process from "node:process";
 import fs from "node:fs/promises";
 
 const pkg = JSON.parse(await fs.readFile(new URL("../package.json", import.meta.url), "utf8"));
 
-info(`${pkg.name}: v${pkg.version}\n`);
+log.log(`${pkg.name}: v${pkg.version}\n`);
 
 process.on("uncaughtException", error => {
     if (error instanceof Error && error.code === "ERR_USE_AFTER_CLOSE") {
-        info("Operation canceled");
+        log.error("Operation canceled");
         // eslint-disable-next-line n/no-process-exit -- exit gracefully on Ctrl+C
         process.exit(1);
     } else {

lib/config-generator.js

@@ -355,14 +355,14 @@ export default defineConfig([\n${exportContent || "  {}\n"}]);\n`; // defaults t
     async output() {
 
         log.info("The config that you've selected requires the following dependencies:\n");
-        log.info(this.result.devDependencies.join(", "));
+        log.log(this.result.devDependencies.join(", "));
 
 
         const { executeInstallation, packageManager } = (await enquirer.prompt(installationQuestions));
         const configPath = path.join(this.cwd, this.result.configFilename);
 
         if (executeInstallation === true) {
-            log.info("☕️Installing...");
+            log.log("☕️Installing...");
             installSyncSaveDev(this.result.devDependencies, packageManager, this.result.installFlags);
             await writeFile(configPath, this.result.configContent);
 
@@ -374,12 +374,12 @@ export default defineConfig([\n${exportContent || "  {}\n"}]);\n`; // defaults t
             if (result.error || result.status !== 0) {
                 log.error("A config file was generated, but the config file itself may not follow your linting rules.");
             } else {
-                log.info(`Successfully created ${configPath} file.`);
+                log.success(`Successfully created ${configPath} file.`);
             }
         } else {
             await writeFile(configPath, this.result.configContent);
 
-            log.info(`Successfully created ${configPath} file.`);
+            log.success(`Successfully created ${configPath} file.`);
             log.warn("You will need to install the dependencies yourself.");
         }
     }

lib/questions.js

@@ -3,7 +3,44 @@
  * @author 唯然<weiran.zsd@outlook.com>
  */
 
-export const langQuestions = [{
+/**
+ * @typedef {Record<string, any>} PlainObject
+ */
+
+// ------------------------------------------------------------------------------
+// Imports
+// ------------------------------------------------------------------------------
+
+import colors from "ansi-colors";
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Set questions prompt style options in here.
+ * @param {PlainObject[]} questionsPromptArray Array of questions prompt.
+ * @returns {PlainObject[]} Questions prompt with style options.
+ */
+function setQuestionsPromptStyle(questionsPromptArray) {
+    return questionsPromptArray.map(opts => ({
+        ...opts,
+        symbols: {
+
+            // For option symbol in select and multiselect
+            indicator: {
+                on: colors.cyan(colors.symbols.radioOn),
+                off: colors.gray(colors.symbols.radioOff)
+            }
+        }
+    }));
+}
+
+// ------------------------------------------------------------------------------
+// Exports
+// ------------------------------------------------------------------------------
+
+export const langQuestions = setQuestionsPromptStyle([{
     type: "multiselect",
     name: "languages",
     message: "What do you want to lint?",
@@ -25,9 +62,9 @@ export const langQuestions = [{
         { message: "To check syntax only", name: "syntax" },
         { message: "To check syntax and find problems", name: "problems" }
     ]
-}];
+}]);
 
-export const jsQuestions = [
+export const jsQuestions = setQuestionsPromptStyle([
     {
         type: "select",
         name: "moduleType",
@@ -82,9 +119,9 @@ export const jsQuestions = [
             return !this.state.answers.useTs;
         }
     }
-];
+]);
 
-export const mdQuestions = [{
+export const mdQuestions = setQuestionsPromptStyle([{
     type: "select",
     name: "mdType",
     message: "What flavor of Markdown do you want to lint?",
@@ -93,9 +130,9 @@ export const mdQuestions = [{
         { message: "CommonMark", name: "commonmark" },
         { message: "GitHub Flavored Markdown", name: "gfm" }
     ]
-}];
+}]);
 
-export const installationQuestions = [
+export const installationQuestions = setQuestionsPromptStyle([
     {
         type: "toggle",
         name: "executeInstallation",
@@ -113,13 +150,13 @@ export const installationQuestions = [
             return this.state.answers.executeInstallation === false;
         }
     }
-];
+]);
 
-export const addJitiQuestion = {
+export const addJitiQuestion = setQuestionsPromptStyle([{
     type: "toggle",
     name: "addJiti",
     message: "Would you like to add Jiti as a devDependency?",
     disabled: "No",
     enabled: "Yes",
     initial: 1
-};
+}]);

lib/utils/logging.js

@@ -3,6 +3,28 @@
  * @author Gyandeep Singh
  */
 
+// ------------------------------------------------------------------------------
+// Imports
+// ------------------------------------------------------------------------------
+
+import colors from "ansi-colors";
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Used for joining and add bold style to an array of arguments.
+ * @param {any[]} args Array of arguments.
+ * @returns {string} Joined and bolded string.
+ */
+function boldArgs(args) {
+    return colors.bold(args.join(" "));
+}
+
+// ------------------------------------------------------------------------------
+// Exports
+// ------------------------------------------------------------------------------
 
 /* eslint no-console: "off" -- Logging util */
 
@@ -11,24 +33,42 @@
  * @param {...any} args The elements to log.
  * @returns {void}
  */
+export function log(...args) {
+    console.log(boldArgs(args));
+}
+
+/**
+ * Cover for console.log with check symbol
+ * @param {...any} args The elements to log.
+ * @returns {void}
+ */
+export function success(...args) {
+    console.log(colors.green(colors.symbols.check), boldArgs(args));
+}
+
+/**
+ * Cover for console.info with info symbol
+ * @param {...any} args The elements to log.
+ * @returns {void}
+ */
 export function info(...args) {
-    console.log(...args);
+    console.info(colors.blue(colors.symbols.info), boldArgs(args));
 }
 
 /**
- * Cover for console.warn
+ * Cover for console.warn with warn symbol
  * @param {...any} args The elements to log.
  * @returns {void}
  */
 export function warn(...args) {
-    console.warn(...args);
+    console.warn(colors.yellow(colors.symbols.warning), boldArgs(args));
 }
 
 /**
- * Cover for console.error
+ * Cover for console.error with cross symbol
  * @param {...any} args The elements to log.
  * @returns {void}
  */
 export function error(...args) {
-    console.error(...args);
+    console.error(colors.magenta(colors.symbols.cross), boldArgs(args));
 }

package.json

@@ -36,6 +36,7 @@
         "test:snapshots:update": "vitest -u run snapshots"
     },
     "dependencies": {
+        "ansi-colors": "^4.1.3",
         "cross-spawn": "^7.0.2",
         "enquirer": "^2.3.5",
         "semver": "^7.7.1"