[[Typescript CLI] Add UX Improvements] Use Chalk & CLI Progress to improve experience #writing #cli #oclif

add-chalk-and-cli-progress.ts

import {SingleBar, Presets} from 'cli-progress'
import {yellow, green, cyan} from 'chalk'
import {sleep} from '../lib/util'

interface PizzaData {
  crust: string;
  toppings: string[];
  extraSauce: boolean;
  count: number;
}

...


async makePizza(pizzaData: PizzaData) {
  const {crust, toppings, extraSauce, count} = pizzaData

  this.log(yellow('Order taken! Making your 🍕!'))

  const progressBar = new SingleBar({
    format: `Pizza Progress | ${cyan('{bar}')} | {percentage}% | ETA: {eta}s`,
  }, Presets.shades_classic)

  progressBar.start((count * toppings.length), 0)

  // Create pizza to count
  const pizzaToMake = new Array(count).fill({crust, toppings, extraSauce})
  for (const pizza of pizzaToMake) {
    await sleep(1000)

    for (const _ of pizza.toppings) {
      progressBar.increment()
      await sleep(1000)
    }

    if (pizza.extraSauce) {
      await sleep(1000)
    }
  }

  progressBar.stop()
}
  
  
async run() {

  ...
    
  await this.makePizza(pizzaData)

  this.log(green('Your 🍕 is ready!'))
}