feat: renderChoices option

[matthyk]

Closes #1349.

Adds the option renderChoices to the checkbox prompt. Currently, only the output of the selected choices can be modified by this option. Maybe we should consider to let this function also modify the prefix and message value?

      return `${prefix} ${message} ${chalk.cyan(renderChoices(selectedChoices, items))}`;

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (a3ab276) 94.48% compared to head (7ad4db7) 94.49%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1350   +/-   ##
=======================================
  Coverage   94.48%   94.49%           
=======================================
  Files          51       51           
  Lines        4423     4429    +6     
  Branches      771      772    +1     
=======================================
+ Hits         4179     4185    +6     
  Misses        239      239           
  Partials        5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[matthyk]

@SBoudrias I have exported the Config type to use it in the tests. If we use, we can avoid the usage of any

[SBoudrias]

@matthyk I was wondering if you saw that PR to add full theming capacity over at #1323

Thinking about the changes introduced here, I'm reflecting the better approach might be with a theme. The theming PR is functional and close to ready; I was just hoping to wrap up #1334 before merging it since it'd conflict pretty bad with that PR.

I'd love to hear your thoughts on this!

[matthyk]

@SBoudrias Themes are a great feature! This would make it easy to add a renderChoices functionality. If the types around DefaultTheme would be changed a bit, you could also implement the feature in a way that the renderChoices function has access to the current theme and you could even reuse the renderChoices function for multiple Themes.

type CheckboxTheme = {
  checkedIcon: string;
  uncheckedIcon: string;
  cursorIcon: string;
  disabled: (text: string) => string;
};

type Config<Value> = PromptConfig<{
  pageSize?: number;
  instructions?: string | boolean;
  choices: ReadonlyArray<Choice<Value> | Separator>;
  loop?: boolean;
  required?: boolean;
  theme?: Partial<
    Theme<CheckboxTheme> & {
      style: Partial<Theme<CheckboxTheme>['style']>;
    }
  >;
  renderChoices?: (this: Config<Value>['theme'], selected: Choice<Value>[], items: Item<Value>[]) => string
}>;

const config: Config<number> = {
  choices: [],
  message: "undefined",
  renderChoices: function renderChoices(selected: Choice<number>[], items: Item<number>[]): string {
    // `this` is typed as Partial<Theme<CheckboxTheme>
    return this?.disabled?("text") // The current typing of `theme` causes us to have to do this ugly double check
  }
}

[SBoudrias]

@matthyk I like this idea very much! Would you want to open PRs against the theme branch? (I'm guessing ~2 PRs for the type change, and one for adding renderChoice)

I'll work on wrapping up the password prompt change in ~a week.

[SBoudrias]

Slightly thinking back on theme + renderChoices. API wise I'd prefer we pass the theme as argument rather than implicitly with this.

[matthyk]

It possibly offers better usability for the developers.
I'm still happy to implement the changes in two separate PRs, but unfortunately, I don't have time for that for another 2 weeks or so

[matthyk]

superseded by #1360