How to use the blessed.box function in blessed

// placeholder for renderering
const canvas = blessed.box({ // box image
	parent: screen,
	top: 0,
	left: 0,
	type: 'ansi',
	width: '100%',
	height: '100%',
	//   border: { type: 'line' },
	search: false,
	ascii: true,
	optimization: 'cpu', // cpu mem
	animate: false
});

const box = blessed.box({
	parent: screen,
	top: '0',
	left: '0',
	width: 'shrink',
	height: 'shrink',
	// label: '{bold}Logs{/bold}',
	content: '',
	tags: true,
	// border: {
	// 	type: 'line'
	// },
	style: {
		fg: 'white',
		// bg: 'magenta',
		border: {
			fg: '#f0f0f0'

const createChannelView = () => {
  const view = blessed.box({
    top: 1,
    height: '100%-3',
    content: '',
    input: false,
    tags: true,
    scrollable: true,
    alwaysScroll: true,
    style: {
      fg: textColor,
      bg: backgroundColor
    }
  })
  // 🎁
  view.on('click', function(data) {
    if(orbit && _currentChannel) {
      orbit.send(_currentChannel, "🐋")

export default (parent, stores) => {
  let SearchResultsStore = stores.SearchResultsStore;

  let list = blessed.box({
    parent,
    top: 0,
    left: 0,
    width: '100%',
    height: '100%-1',
    scrollable: true
  });

  let listHeight = list.height;
  let listWidth = list.width;
  let listItems;
  let listItemsHeights;
  let listItemsCurrentOffset;
  let listItemsCurrentIdx;
  let listCurrentHeight = 0; // Height without extraLastItem
  let extraLastItem;

function createLabel(label, row) {
  var lbl = blessed.box({
    parent: form,
    content: label,
    top: row,
    left: 2,
    padding: {
      left: 1,
      right: 1
    },
    height: 1,
    width: '30%',
  });
  lbl.setIndex(4);
  return lbl;
}

setupScreen(){
		this.box = blessed.box({
			parent: this.screen,
			top: 1,
			height: '100%-6',
			left: '10%',
			width: '80%',
			transparent: false,
			tags: true,
			content: ' ',
			label: ' ',
			mouse: true,
			keys: true,
			vi: true,
			scrollable: true,
			alwaysScroll: true,
			scrollbar: {
				ch: ' ',

function Terminal (orca) {
  this.orca = orca

  this._screen = blessed.screen()
  this._grid = blessed.box({ top: 1, left: 2, height: '100%-3', width: orca.w, keys: true, mouse: true, style: { fg: '#efefef' } })
  this._output = blessed.box({ bottom: 4, left: 2, height: 1, width: '100%-2', style: { fg: '#fff' } })
  this._inspector = blessed.box({ bottom: 2, left: 2, height: 1, width: '100%-4', style: { fg: '#efefef' } })
  this._log = blessed.box({ bottom: 3, left: 2, height: 1, width: '100%-4', style: { fg: '#efefef' } })

  this.isPaused = false

  this.cursor = {
    x: 0,
    y: 0,
    move: function (x, y) {
      this.x = clamp(this.x + x, 0, orca.w - 1)
      this.y = clamp(this.y - y, 0, orca.h - 1)
    },
    insert: function (g) {
      orca.add(this.x, this.y, g)
    },

content: '{bold}vtop{/bold} {white-fg} - http://parall.ax/vtop{/white-fg}',
	tags: true
});
var date = blessed.text({
	top: 'top',
	left: '50%',
	width: '50%',
	height: '1',
	align: 'right',
	content: '',
	tags: true
});
screen.append(header);
screen.append(date);

var graph = blessed.box({
	top: 1,
	left: 'left',
	width: '100%',
	height: '50%',
	content: 'test',
	label: ' CPU Usage ',
	border: {
		type: 'line',
		fg: '#00ebbe'
	}
});

screen.append(graph);

var graph2;
var graph2appended = false;

categoriesMap = new Object();
  var userId = results[0].id.substring(0, results[0].id.lastIndexOf('/'));
  results.unshift({ id: userId.replace('category','tag') + '/global.saved', label: 'Saved'});
  results.unshift({ id: userId + '/global.all', label: 'All'});
  results.forEach(function(obj) {
    categoriesMap[obj.label] = obj;
    });
  listCategories.setItems(Object.keys(categoriesMap));
  screen.render();
},
function (error) {
	updateStatus(error);
});


var content = blessed.box({
  parent: screen,
  label: ' {bold}{cyan-fg}Feed Source:',
  tags: true,
  draggable: true,
  bottom: 1,
  right: 0,
  width: '100%',
  height: '50%',
  keys: true,
  vi: true,
  mouse: true,
  scrollable: true,
  border: 'line',
  scrollbar: {
    ch: ' ',
    track: {

private versionElement() {
    log.verbose('Menu', 'versionElement()')

    const version = blessed.box({
      content: 'Manager version ' + VERSION,
      top:     29,
      left:    'center',
      height:  1,
      width:   50,
      align:   'right',
      style:   {
        fg: 'white',
        bg: 'blue',

      },
    })
    this.screen.append(version)
  }