feat(cz-git): add theme color for prompt inquirer

can set options `themeColorCode`. the rule: `38;5;${color_code}` link #28
Zhengqbbb · May 20, 2022 · d776149 · d776149
1 parent 539f40c
commit d776149
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/.commitlintrc.js b/.commitlintrc.js
@@ -20,6 +20,7 @@ module.exports = {
   },
   prompt: {
     // @see: https://github.com/Zhengqbbb/cz-git#options
+    themeColorCode: "38;5;043",
     issuePrefixs: [
       { value: "link",   name: "link:     Work in processing to ISSUES" },
       { value: "closed", name: "closed:   ISSUES has been processed" }

diff --git a/packages/cz-git/src/generator/option.ts b/packages/cz-git/src/generator/option.ts
@@ -15,11 +15,10 @@ import {
 } from "../shared";
 import type { CommitizenGitOptions, UserConfig } from "../shared";
 
-const { emoji, checkbox } = process.env;
-
 /* eslint-disable prettier/prettier */
 /* prettier-ignore */
 export const generateOptions = (config: UserConfig): CommitizenGitOptions => {
+  const { emoji, checkbox, ___X_CMD_THEME_COLOR_CODE } = process.env;
   let promptConfig = config.prompt ?? {};
   promptConfig = getValueByCallBack(
     promptConfig,
@@ -28,6 +27,7 @@ export const generateOptions = (config: UserConfig): CommitizenGitOptions => {
 
   return {
     messages: promptConfig.messages ?? defaultConfig.messages,
+    themeColorCode: ___X_CMD_THEME_COLOR_CODE || promptConfig.themeColorCode || defaultConfig.themeColorCode,
     types: promptConfig.types ?? defaultConfig.types,
     typesAppend: promptConfig.typesAppend ?? defaultConfig.typesAppend,
     useEmoji: Boolean(emoji) || promptConfig.useEmoji || defaultConfig.useEmoji,

diff --git a/packages/cz-git/src/generator/question.ts b/packages/cz-git/src/generator/question.ts
@@ -28,6 +28,7 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
       type: "search-list",
       name: "type",
       message: options.messages?.type,
+      themeColorCode: options?.themeColorCode,
       source: (_: unknown, input: string) => {
         const typeSource = options.types?.concat(options.typesAppend || []) || [];
         return fuzzyFilter(input, typeSource, "value");
@@ -37,6 +38,7 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
       type: options.enableMultipleScopes ? "search-checkbox" : "search-list",
       name: "scope",
       message: options.messages?.scope,
+      themeColorCode: options?.themeColorCode,
       separator: options.scopeEnumSeparator,
       source: (answer: Answers, input: string) => {
         let scopeSource: Option[] = [];
@@ -88,7 +90,9 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
       },
       when: (answers: Answers) => {
         return answers.scope === "___CUSTOM___";
-      }
+      },
+      transformer: (input: string) =>
+        options.themeColorCode ? style.rgb(options.themeColorCode)(input) : style.cyan(input)
     },
     {
       type: "input",
@@ -122,20 +126,22 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
         else if (subjectLength > maxSubjectLength)
           tooltip = `${subjectLength - maxSubjectLength} chars over the limit`;
         else tooltip = `${maxSubjectLength - subjectLength} more chars allowed`;
-        const tooltipColor =
+        tooltip =
           minSubjectLength !== undefined &&
           subjectLength >= minSubjectLength &&
           subjectLength <= maxSubjectLength
-            ? "\u001B[90m"
-            : "\u001B[31m";
-        const subjectColor =
+            ? style.gray("[" + tooltip + "]")
+            : style.red("[" + tooltip + "]");
+        subject =
           minSubjectLength !== undefined &&
           subjectLength >= minSubjectLength &&
           subjectLength <= maxSubjectLength
-            ? "\u001B[36m"
-            : "\u001B[31m";
+            ? options.themeColorCode
+              ? style.rgb(options.themeColorCode)(subject)
+              : style.cyan(subject)
+            : style.red(subject);
 
-        return `${tooltipColor}[${tooltip}]\u001B[0m\n  ${subjectColor}${subject}\u001B[0m`;
+        return tooltip + "\n" + " " + subject;
       },
       filter: (subject: string) => {
         const upperCaseSubject = options.upperCaseSubject || false;
@@ -151,7 +157,9 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
       type: "input",
       name: "body",
       message: options.messages?.body,
-      default: options.defaultBody || undefined
+      default: options.defaultBody || undefined,
+      transformer: (input: string) =>
+        options.themeColorCode ? style.rgb(options.themeColorCode)(input) : style.cyan(input)
     },
     {
       type: "input",
@@ -168,12 +176,15 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
         } else {
           return false;
         }
-      }
+      },
+      transformer: (input: string) =>
+        options.themeColorCode ? style.rgb(options.themeColorCode)(input) : style.cyan(input)
     },
     {
       type: "search-list",
       name: "footerPrefix",
       message: options.messages?.footerPrefixsSelect,
+      themeColorCode: options?.themeColorCode,
       source: (_: Answers, input: string) => {
         const issuePrefixSource = handleCustomTemplate(
           options.issuePrefixs as Option[],
@@ -200,7 +211,9 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
       default: options.defaultIssues || undefined,
       when: (answers: Answers) => {
         return answers.footerPrefix === "___CUSTOM___";
-      }
+      },
+      transformer: (input: string) =>
+        options.themeColorCode ? style.rgb(options.themeColorCode)(input) : style.cyan(input)
     },
     {
       type: "input",
@@ -209,7 +222,9 @@ export const generateQuestions = (options: CommitizenGitOptions, cz: any) => {
       when(answers: Answers) {
         return (answers.footerPrefix as string | boolean) !== false;
       },
-      message: options.messages?.footer
+      message: options.messages?.footer,
+      transformer: (input: string) =>
+        options.themeColorCode ? style.rgb(options.themeColorCode)(input) : style.cyan(input)
     },
     {
       type: "expand",

diff --git a/packages/cz-git/src/shared/types/options.ts b/packages/cz-git/src/shared/types/options.ts
@@ -104,6 +104,15 @@ export interface CommitizenGitOptions {
    */
   messages?: Answers;
 
+  /**
+   * @description: the prompt inquirer primary color
+   * @rule `38;5;${color_code}`
+   * @tip the color_code can get by https://github.com/sindresorhus/xterm-colors
+   * @example "38;5;043"
+   * @default: "" = cyan color
+   */
+  themeColorCode?: string;
+
   /**
    * @description: Customize prompt type
    */
@@ -329,6 +338,7 @@ export const defaultConfig = Object.freeze({
      { value: "revert", name: "revert:   Reverts a previous commit", emoji: ":rewind:" }
    ],
    typesAppend: [],
+   themeColorCode: "",
    useEmoji: false,
    scopes: [],
    enableMultipleScopes: false,