Alokai CLI UI Kit

Welcome to Alokai CLI UI Kit!

Documentation

This is the documentation for the Alokai CLI UI Kit. This is a collection of components and utilities that can be used to build a CLI application.

Colors

The colors module provides a set of colors that can be used to style text in the terminal.

• colors.success - Green text.
• colors.error - Red text.
• colors.warning - Yellow text.
• colors.primary - Blue text.
• colors.muted - Gray text.
• colors.highlight - Highlighted bold and Alokai brand color text.
• colors.underline - Underlined text.

Emojis

The colors module provides a set of emojis that can be used to add some fun to your CLI application.

• emojis.rocket - 🚀
• emojis.fire - 🔥
• emojis.warning - ⚠️
• emojis.error - ❌
• emojis.success - ✅
• emojis.info - ℹ️
• emojis.link - 🔗
• emojis.check - ✔
• emojis.cross - ✖
• emojis.star - ⭐
• emojis.heart - ❤️
• emojis.clap - 👏

Examples

import { colors } from '@alokai/cli-ui';

console.log(colors.success('This is a success message'));
console.log(colors.error('This is an error message'));
console.log(colors.warning('This is a warning message'));
console.log(colors.primary('This is a primary message'));
console.log(colors.muted('This is a muted message'));
console.log(colors.highlight('This is a highlighted message'));
console.log(colors.underline('This is an underlined message'));

Printing

The print module provides a set of basic functions to print to the terminal.

• print - Print a message to the terminal. Using
• print.success - Print a success message to the terminal. Green text.
• print.error - Print an error message to the terminal. Red text.
• print.warning - Print a warning message to the terminal. Yellow text.
• print.primary - Print a primary message to the terminal. Blue text.
• print.muted - Print a muted message to the terminal. Gray text.

Examples

import { print } from '@alokai/cli-ui';

print('This is a message');
print.success('This is a success message');
print.error('This is an error message');
print.warning('This is a warning message');
print.primary('This is a primary message');
print.muted('This is a muted message');

Advanced Printing

As well as some more advanced functions:

• print.debug - Print a debug message to the terminal.

import { print } from '@alokai/cli-ui';

First argument is the message and the second argument is the data to be printed.

print.debug('Debugging', { message: 'This is a debug message' });

• print.highlight - Print a highlighted message to the terminal.

import { print } from '@alokai/cli-ui';

`**` is used to highlight a word.

print.highlight('This is a highlighted message'); // all highlighted message
print.highlight('This is a highlighted **word** message'); // signle highlighted word
print.highlight('This is a **highlighted** **word** message'); // multiple highlighted words

• print.link - Print a message with a link to the terminal.

%link% is a placeholder for the link.

import { print } from '@alokai/cli-ui';

print.link('This is a message with a link to %link%', 'https://alokai.io');

• print.stepper - Print a list of steps to the terminal.

import { print } from '@alokai/cli-ui';

print.stepper(['Step 1', 'Step 2', 'Step 3']); // default dots
print.stepper(['Step 1', 'Step 2', 'Step 3'], "numbers"); // numbers
print.stepper(['Step 1', 'Step 2', 'Step 3'], "dashes"); // dashes

Spinner

The spinner module provides a set of functions to display a spinner in the terminal. It returns a factory function that can be used to create a spinner.

• spin - Create a spinner.

const spinner = spin();

spinner.start("Starting Alokai CLI Spinner");

setTimeout(() => {
  spinner.succeed("Alokai CLI Spinner Succeeded");
}, 3000);

Spinner can be used to show a loading state while waiting for a long running process to complete. Spinner can be either stopped, succeeded or failed.

start: (text: string) => spinner.start(text),
stop: () => spinner.stop(),
fail: (text: string) => spinner.fail(text),
succeed: (text: string) => spinner.succeed(text),

Intro

The intro module provides a function to display an intro message in the terminal.

• intro - Display an intro message.

import { intro } from '@alokai/cli-ui';

intro(); // by default "Welcome to Alokai CLI" message is displayed
intro("Welcome to Alokai CLI UI Kit"); // custom message

If message is too long, it will be displayed in multiple lines under the logo.