Add the ability to customize grey text

Author: duynguyenhoang

lib/render.js

@@ -6,7 +6,7 @@ const config = require('./config');
 signale.config({displayLabel: false});
 
 const {error, log, note, pending, success} = signale;
-const {blue, green, grey, magenta, red, underline, yellow} = chalk;
+const {blue, green, magenta, red, underline, yellow} = chalk;
 
 const priorities = {2: 'yellow', 3: 'red'};
 
@@ -16,7 +16,7 @@ class Render {
   }
 
   _colorBoards(boards) {
-    return boards.map(x => grey(x)).join(' ');
+    return boards.map(x => this.greyRender(x)).join(' ');
   }
 
   _isBoardComplete(items) {
@@ -27,12 +27,12 @@ class Render {
   _getAge(birthday) {
     const daytime = 24 * 60 * 60 * 1000;
     const age = Math.round(Math.abs((birthday - Date.now()) / daytime));
-    return (age === 0) ? '' : grey(`${age}d`);
+    return (age === 0) ? '' : this.greyRender(`${age}d`);
   }
 
   _getCorrelation(items) {
     const {tasks, complete} = this._getItemStats(items);
-    return grey(`[${complete}/${tasks}]`);
+    return this.greyRender(`[${complete}/${tasks}]`);
   }
 
   _getItemStats(items) {
@@ -56,7 +56,7 @@ class Render {
   }
 
   _buildTitle(key, items) {
-    const title = (key === new Date().toDateString()) ? `${underline(key)} ${grey('[Today]')}` : underline(key);
+    const title = (key === new Date().toDateString()) ? `${underline(key)} ${this.greyRender('[Today]')}` : underline(key);
     const correlation = this._getCorrelation(items);
     return {title, correlation};
   }
@@ -66,7 +66,7 @@ class Render {
 
     const {_id} = item;
     prefix.push(' '.repeat(4 - String(_id).length));
-    prefix.push(grey(`${_id}.`));
+    prefix.push(this.greyRender(`${_id}.`));
 
     return prefix.join(' ');
   }
@@ -80,7 +80,7 @@ class Render {
     if (!isComplete && priority > 1) {
       message.push(underline[priorities[priority]](description));
     } else {
-      message.push(isComplete ? grey(description) : description);
+      message.push(isComplete ? this.greyRender(description) : description);
     }
 
     if (!isComplete && priority > 1) {
@@ -133,6 +133,12 @@ class Render {
     return note(msgObj);
   }
 
+  greyRender(text) {
+    const func = chalk[this._configuration.greyRendererMethod] || chalk.grey;
+
+    return func(text);
+  }
+
   displayByBoard(data) {
     Object.entries(data).forEach(([board, items]) => {
       if (this._isBoardComplete(items) && !this._configuration.displayCompleteTasks) {
@@ -171,9 +177,9 @@ class Render {
     percent = percent >= 75 ? green(`${percent}%`) : percent >= 50 ? yellow(`${percent}%`) : `${percent}%`;
 
     const status = [
-      `${green(complete)} ${grey('done')}`,
-      `${magenta(pending)} ${grey('pending')}`,
-      `${blue(notes)} ${grey('notes')}`
+      `${green(complete)} ${this.greyRender('done')}`,
+      `${magenta(pending)} ${this.greyRender('pending')}`,
+      `${blue(notes)} ${this.greyRender('notes')}`
     ];
 
     if (complete !== 0 && pending === 0 && notes === 0) {
@@ -184,8 +190,8 @@ class Render {
       log({prefix: '\n ', message: 'Type `taskbook --help` to get started!', suffix: yellow('★')});
     }
 
-    log({prefix: '\n ', message: grey(`${percent} of all tasks complete.`)});
-    log({prefix: ' ', message: status.join(grey(' · ')), suffix: '\n'});
+    log({prefix: '\n ', message: this.greyRender(`${percent} of all tasks complete.`)});
+    log({prefix: ' ', message: status.join(this.greyRender(' · ')), suffix: '\n'});
   }
 
   invalidCustomAppDir(path) {
@@ -195,7 +201,7 @@ class Render {
   }
 
   invalidID(id) {
-    const [prefix, suffix] = ['\n', grey(id)];
+    const [prefix, suffix] = ['\n', this.greyRender(id)];
     const message = 'Unable to find item with id:';
     error({prefix, message, suffix});
   }
@@ -213,13 +219,13 @@ class Render {
   }
 
   markComplete(ids) {
-    const [prefix, suffix] = ['\n', grey(ids.join(', '))];
+    const [prefix, suffix] = ['\n', this.greyRender(ids.join(', '))];
     const message = `Checked ${ids.length > 1 ? 'tasks' : 'task'}:`;
     success({prefix, message, suffix});
   }
 
   markStarred(ids) {
-    const [prefix, suffix] = ['\n', grey(ids.join(', '))];
+    const [prefix, suffix] = ['\n', this.greyRender(ids.join(', '))];
     const message = `Starred ${ids.length > 1 ? 'items' : 'item'}:`;
     success({prefix, message, suffix});
   }
@@ -243,38 +249,38 @@ class Render {
   }
 
   successCreate({_id, _isTask}) {
-    const [prefix, suffix] = ['\n', grey(_id)];
+    const [prefix, suffix] = ['\n', this.greyRender(_id)];
     const message = `Created ${_isTask ? 'task:' : 'note:'}`;
     success({prefix, message, suffix});
   }
 
   successEdit(id) {
-    const [prefix, suffix] = ['\n', grey(id)];
+    const [prefix, suffix] = ['\n', this.greyRender(id)];
     const message = 'Updated description of item:';
     success({prefix, message, suffix});
   }
 
   successDelete(ids) {
-    const [prefix, suffix] = ['\n', grey(ids.join(', '))];
+    const [prefix, suffix] = ['\n', this.greyRender(ids.join(', '))];
     const message = `Deleted ${ids.length > 1 ? 'items' : 'item'}:`;
     success({prefix, message, suffix});
   }
 
   successMove(id, boards) {
-    const [prefix, suffix] = ['\n', grey(boards.join(', '))];
-    const message = `Move item: ${grey(id)} to`;
+    const [prefix, suffix] = ['\n', this.greyRender(boards.join(', '))];
+    const message = `Move item: ${this.greyRender(id)} to`;
     success({prefix, message, suffix});
   }
 
   successPriority(id, level) {
     const prefix = '\n';
-    const message = `Updated priority of task: ${grey(id)} to`;
+    const message = `Updated priority of task: ${this.greyRender(id)} to`;
     const suffix = level === '3' ? red('high') : (level === '2' ? yellow('medium') : green('normal'));
     success({prefix, message, suffix});
   }
 
   successRestore(ids) {
-    const [prefix, suffix] = ['\n', grey(ids.join(', '))];
+    const [prefix, suffix] = ['\n', this.greyRender(ids.join(', '))];
     const message = `Restored ${ids.length > 1 ? 'items' : 'item'}:`;
     success({prefix, message, suffix});
   }

package.json

@@ -37,7 +37,8 @@
     "default": {
       "taskbookDirectory": "",
       "displayCompleteTasks": true,
-      "displayProgressOverview": true
+      "displayProgressOverview": true,
+      "greyRendererMethod": "grey"
     }
   },
   "scripts": {

readme.md

@@ -135,7 +135,8 @@ The following illustrates all the available options with their respective defaul
 {
   "taskbookDirectory": "",
   "displayCompleteTasks": true,
-  "displayProgressOverview": true
+  "displayProgressOverview": true,
+  "greyRendererMethod": "grey"
 }
 ```
 
@@ -164,6 +165,14 @@ Display tasks that are marked as complete.
 
 Display progress overview below the timeline and board views.
 
+
+##### `greyRendererMethod`
+
+- Type: `String`
+- Default: `grey`
+
+[Chalk Colors](https://github.com/chalk/chalk#colors) to render grey text. Use it in case you want to customize grey text render or we can not see it in terminal. 
+
 ## Flight Manual
 
 The following is a minor walkthrough containing a set of examples on how to use taskbook.