Chore: Refactor usePrefix to rely on a new Theme construct

Author: SBoudrias

packages/core/README.md

@@ -28,7 +28,7 @@ const confirm = createPrompt<boolean, { message: string; default?: boolean }>(
   (config, done) => {
     const [status, setStatus] = useState('pending');
     const [value, setValue] = useState('');
-    const prefix = usePrefix();
+    const prefix = usePrefix({});
 
     useKeypress((key, rl) => {
       if (isEnterKey(key)) {

packages/core/src/index.mts

@@ -5,6 +5,8 @@ export { useEffect } from './lib/use-effect.mjs';
 export { useMemo } from './lib/use-memo.mjs';
 export { useRef } from './lib/use-ref.mjs';
 export { useKeypress } from './lib/use-keypress.mjs';
+export { makeTheme } from './lib/make-theme.mjs';
+export type { Theme } from './lib/theme.mjs';
 export { usePagination } from './lib/pagination/use-pagination.mjs';
 export { createPrompt } from './lib/create-prompt.mjs';
 export { Separator } from './lib/Separator.mjs';

packages/core/src/lib/make-theme.mts

@@ -0,0 +1,10 @@
+import type { Prettify } from '@inquirer/type';
+import { defaultTheme, type Theme } from './theme.mjs';
+
+export function makeTheme<SpecificTheme extends {}>(
+  ...themes: ReadonlyArray<undefined | Partial<Theme<SpecificTheme>>>
+): Prettify<Theme<SpecificTheme>> {
+  return Object.assign({}, defaultTheme, ...themes, {
+    style: Object.assign({}, defaultTheme.style, ...themes.map((theme) => theme?.style)),
+  });
+}

packages/core/src/lib/theme.mts

@@ -0,0 +1,39 @@
+import chalk from 'chalk';
+import spinners from 'cli-spinners';
+import type { Prettify } from '@inquirer/type';
+
+type DefaultTheme = {
+  prefix: string;
+  spinner: {
+    interval: number;
+    frames: string[];
+  };
+  style: {
+    answer: (text: string) => string;
+    message: (text: string) => string;
+    error: (text: string) => string;
+    defaultAnswer: (text: string) => string;
+    help: (text: string) => string;
+    highlight: (text: string) => string;
+    key: (text: string) => string;
+  };
+};
+
+export type Theme<Extension extends {} = {}> = Prettify<Extension & DefaultTheme>;
+
+export const defaultTheme: DefaultTheme = {
+  prefix: chalk.green('?'),
+  spinner: {
+    interval: spinners.dots.interval,
+    frames: spinners.dots.frames.map(chalk.yellow),
+  },
+  style: {
+    answer: chalk.cyan,
+    message: chalk.bold,
+    error: (text) => chalk.red(`> ${text}`),
+    defaultAnswer: (text) => chalk.dim(`(${text})`),
+    help: chalk.dim,
+    highlight: chalk.cyan,
+    key: (text: string) => chalk.cyan.bold(`<${text}>`),
+  },
+};

packages/core/src/lib/use-prefix.mts

@@ -1,12 +1,17 @@
-import chalk from 'chalk';
-import spinners from 'cli-spinners';
 import { useState } from './use-state.mjs';
 import { useEffect } from './use-effect.mjs';
+import { makeTheme } from './make-theme.mjs';
+import { type Theme } from './theme.mjs';
 
-const spinner = spinners.dots;
-
-export function usePrefix(isLoading: boolean = false): string {
+export function usePrefix({
+  isLoading = false,
+  theme,
+}: {
+  isLoading?: boolean;
+  theme?: Partial<Theme>;
+}): string {
   const [tick, setTick] = useState(0);
+  const { prefix, spinner } = makeTheme(theme);
 
   useEffect((): void | (() => unknown) => {
     if (isLoading) {
@@ -20,8 +25,8 @@ export function usePrefix(isLoading: boolean = false): string {
 
   if (isLoading) {
     const frame = tick % spinner.frames.length;
-    return chalk.yellow(spinner.frames[frame]);
+    return spinner.frames[frame]!;
   }
 
-  return chalk.green('?');
+  return prefix;
 }