feat: support command-specific help and improve display quality

src/CliModels.ts

@@ -1,4 +1,4 @@
-export type Command = string;
+export type Command = string | undefined;
 export type HelpMessage = string;
 export type Arguments = string[];
 
@@ -12,11 +12,13 @@ export class CliInput {
   private readonly _command: Command
   private readonly _options: Options
   private readonly _arguments: Arguments
+  private readonly _help: boolean | undefined
 
-  private constructor(command: Command, options: Options, args: Arguments) {
+  private constructor(command: Command, options: Options, args: Arguments, help?:boolean) {
     this._command = command;
     this._options = options;
     this._arguments = args;
+    this._help = help;
   }
 
   get command(): Command {
@@ -31,15 +33,19 @@ export class CliInput {
     return this._arguments;
   }
 
+  get help(): boolean | undefined {
+    return this._help;
+  }
+
   static createFromMeow(meowOutput: any): CliInput {
     const [command, ...args] = meowOutput.input;
     const { context, watch, file } = meowOutput.flags;
-    return new CliInput(command || 'help', { context, watch, file }, args);
+    return new CliInput(command, { context, watch, file }, args, meowOutput.flags.help);
   }
 
   static createSubCommand(cliInput: CliInput): CliInput {
     const [command, ...args] = cliInput.arguments;
-    return new CliInput(command || 'help', cliInput.options, args);
+    return new CliInput(command, cliInput.options, args);
   }
 }
 

src/CommandsRouter.tsx

@@ -2,13 +2,21 @@ import React from 'react';
 import Validate from './components/Validate/Validate';
 import { contextRouter } from './components/Context';
 import { CliInput } from './CliModels';
+import { CommandName, HelpMessageBuilder } from './help-message';
 
 const commandsDictionary = (cliInput: CliInput): Record<string, any> => ({
   validate: <Validate options={cliInput.options} />,
   context: contextRouter(cliInput)
 });
 
 export const commandsRouter = (cli: any): any => {
+  const helpMessage = new HelpMessageBuilder();
   const cliInput = CliInput.createFromMeow(cli);
+  if (!cliInput.command) {
+    return <helpMessage.HelpComponent />;
+  }
+  if (cliInput.help) {
+    return <helpMessage.HelpComponent command={cliInput.command as CommandName} />;
+  }
   return commandsDictionary(cliInput)[cliInput.command];
 };

src/cli.ts

@@ -5,28 +5,8 @@ import { render } from 'ink';
 import meow from 'meow';
 import { commandsRouter } from './CommandsRouter';
 
-const cli = meow(`
-	Usage
-	  $ asyncapi command options
-
-	Commands
-		validate 
-			Options
-				-c --context  context-name saved in the store
-				-w --watch Enable watchMode (not implemented yet)
-				-f --file File path of the specification file
-		context
-			current  show the current set context
-			list     show the list of all stored context
-			remove  <context-name> remove a context from the store
-			use <context-name>  set any context as current
-			add <context-name> <filepath> add/update new context
-
-	Examples
-		$ asyncapi context add dummy ./asyncapi.yml
-		$ asyncapi validate --context=dummy
-		$ asyncapi validate --file=./asyncapi.yml
-`, {
+const cli = meow({
+  autoHelp: false,
   flags: {
     context: {
       alias: 'c',
@@ -43,6 +23,9 @@ const cli = meow(`
       alias: 'f',
       type: 'string',
       isRequired: false
+    },
+    help: {
+      alias: 'h'
     }
   }
 });

src/components/Context/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React from 'react';
 
 import { ListContexts,AddContext,RemoveContext,ShowCurrentContext,SetCurrent } from './Context';
@@ -13,5 +14,5 @@ const commandDictionary = (cliInput: CliInput): Record<string, any> => ({
 
 export const contextRouter = (cliInput: CliInput): any => {
   const subCommand = CliInput.createSubCommand(cliInput);
-  return commandDictionary(subCommand)[subCommand.command];
+  return commandDictionary(subCommand)[subCommand.command!];
 };

src/help-message.tsx

@@ -0,0 +1,129 @@
+import { injectable, container } from 'tsyringe';
+import React, { FunctionComponent } from 'react';
+import { Text, Newline } from 'ink';
+
+const CommandList = ['validate', 'context'] as const;
+
+export type CommandName = typeof CommandList[number]
+
+export type Command = {
+  [name in CommandName]: {
+    usage: string;
+    shortDescription: string;
+    longDescription?: string;
+    flags: string[];
+    subCommands?: string[];
+  };
+};
+
+@injectable()
+export class HelpMessage {
+  private helpFlag = '-h, --help  display help for command';
+
+  readonly usage: string = 'asyncapi [options] [command]';
+
+  readonly flags = [
+    this.helpFlag,
+    '-v, --version  output the version number',
+  ];
+
+  readonly commands: Command = {
+    validate: {
+      usage: 'asyncapi validate [options]',
+      shortDescription: 'Validate asyncapi file',
+      flags: [
+        this.helpFlag,
+        '-f, --file <spec-file-path>  Path of the AsyncAPI file',
+        '-c, --context <saved-context-name>  Context to use',
+        '-w, --watch  Enable watch mode (not implemented yet)'
+      ]
+    },
+    context: {
+      usage: 'asyncapi context [options] [command]',
+      shortDescription: 'Manage context',
+      longDescription: 'Context is what makes it easier for you to work with multiple AsyncAPI files.\nYou can add multiple different files to a context.\nThis way you do not have to pass --file flag with path to the file every time but just --context flag with reference name.\nYou can also set a default context, so neither --file nor --context flags are needed',
+      flags: [this.helpFlag],
+      subCommands: [
+        'list  list all saved contexts',
+        'current  see current context',
+        'use <context-name>  set given context as default/current',
+        'add <context-name> <spec-file-path>  add/update context',
+        'remove <context-name>  remove a context'
+      ]
+    }
+  }
+}
+
+export class HelpMessageBuilder {
+  private helpMessage: HelpMessage = container.resolve(HelpMessage);
+
+  HelpComponent: FunctionComponent<{ command?: CommandName }> = ({ command }) => {
+    if (command) {
+      if (!CommandList.includes(command)) {return <Text color="red">❌{' '} {command} is not a vaild command</Text>;}
+      const HelpComp = this.showCommandHelp;
+      return <HelpComp command={command} />;
+    }
+    const RootHelp = this.showHelp;
+    return <RootHelp />;
+  }
+
+  showHelp: FunctionComponent = () => {
+    return <>
+      <Text backgroundColor="greenBright" bold color="blackBright"> USAGE </Text>
+      <Newline />
+      <Text>
+        <Text color="greenBright">{this.helpMessage.usage.split(' ')[0]}</Text>{' '}
+        <Text color="yellowBright">{this.helpMessage.usage.split(' ')[1]}</Text>{' '}
+        <Text color="blueBright">{this.helpMessage.usage.split(' ')[2]}</Text>
+      </Text>
+      <Newline />
+
+      <Text backgroundColor="yellowBright" bold color="blackBright"> OPTIONS </Text>
+      <Newline />
+      {this.helpMessage.flags.map(flag => <Text key={flag}>
+        <Text color="yellowBright" bold>{flag.split(',')[0]}</Text>,{flag.split(',')[1]}
+      </Text>)}
+      <Newline />
+
+      <Text backgroundColor="blueBright" bold color="blackBright"> COMMANDS </Text>
+      <Newline />
+      {Object.keys(this.helpMessage.commands).map(command => <Text key={command}>
+        <Text color="blueBright" bold>{command}</Text>{' '} <Text>{this.helpMessage.commands[command as CommandName].shortDescription}</Text>
+      </Text>)}
+    </>;
+  }
+
+  showCommandHelp: FunctionComponent<{ command: CommandName }> = ({ command }) => {
+    const commandHelpObject = this.helpMessage.commands[command as CommandName];
+    return <>
+      <Text backgroundColor="greenBright" bold color="blackBright"> USAGE </Text>
+      <Newline />
+      <Text>
+        <Text color="greenBright">{commandHelpObject.usage.split(' ')[0]}</Text>{' '}
+        <Text>{commandHelpObject.usage.split(' ')[1]}</Text>{' '}
+        <Text color="yellowBright">{commandHelpObject.usage.split(' ')[2]}</Text>{' '}
+        <Text color="blueBright">{commandHelpObject.usage.split(' ')[3]}</Text>
+      </Text>
+      <Newline />
+
+      {commandHelpObject.longDescription ? <Text color="cyan">{commandHelpObject.longDescription}<Newline /></Text> : null}
+
+      <Text backgroundColor="yellowBright" bold color="blackBright"> OPTIONS </Text>
+      <Newline />
+      {commandHelpObject.flags.map(flag => <Text key={flag}><Text color="yellowBright">{flag.split(',')[0]}</Text>,{flag.split(',')[1]}</Text>)}
+      <Newline />
+
+      {commandHelpObject.subCommands ? <>
+        <Text backgroundColor="blueBright" bold color="blackBright"> COMMAND </Text>
+        <Newline />
+        {commandHelpObject.subCommands.map(cmd => {
+          const [cmdName, ...rest] = cmd.split(' ');
+          return <Text key={cmd}>
+            <Text color='blueBright'>{cmdName}</Text>{' '} {rest.map(el => <Text key={el}>{el} </Text>)}
+          </Text>;
+        })}
+      </> : null}
+
+    </>;
+  }
+}