Photon Terminal CLI

Photon Terminal CLI (Command Line Interface) is the easiest way to add Photon Terminal to your project.

Introduction

Photon Terminal is a CLI formatting tool for web-developers that structures output in a similar way to React elements. Photon Terminal stands out because it lets you style CLI output with CSS-rules.

Getting started

Install

npm i -D photon-terminal

Add a new element

Elements are individual components that can be styled with rules similar to CSS.

import Photon from 'photon-terminal'

const greeting = new Photon.Element('p')
greeting.content = 'Hello World!'

greeting.print()
// Prints 'Hello World!' to the CLI

or

import Photon from 'photon-terminal'

const greeting = new Photon.Element({
  tag: 'p',
  content: 'Hello World!',
})

greeting.print()
// Prints 'Hello World!' to the CLI

Apply styling to element

import Photon from 'photon-terminal'

const classSuccess = new Photon.Style({
  backgroundColor: 'green',
  color: 'black',
  margin: 2,
  textDecoration: 'strong',
  textTransform: 'uppercase',
}).rules

const status = new Photon.Element({
  tag: 'p',
  content: 'Passing',
})
status.style = classSuccess

status.print()

Photon.Element.style

Background color

Sets the text background color.

backgroundColor: 'black' | 'blue' | 'cyan' | 'green' | 'magenta' | 'red' | 'white' | 'yellow'

Automatically sets paddingLeft and paddingRight to 1. This can be prevented by setting padding values to 0 or 'none'.

Color

Sets the text color.

color: 'black' | 'blue' | 'cyan' | 'green' | 'magenta' | 'red' | 'white' | 'yellow'

Margin

Sets the spacing around the Element content.

margin: <number> | 'none'

Sets all sides to the same value. Set individual sides with:

marginBottom: <number> | 'none'
marginLeft: <number> | 'none'
marginRight: <number> | 'none'
marginTop: <number> | 'none'

Padding

Sets the spacing around the output text. Used with backgroundColor to prevent text from touching the background walls.

paddingLeft: <number> | 'none'
paddingRight: <number> | 'none'

Text decoration

Sets the visual appearance of text.

textDecoration: 'italic' | 'strong' | 'underline'

Text transform

Transforms the text output.

textTransform: 'capitalize' | 'lowercase' | 'uppercase'

Width

Sets the total width of the output.

width: <number>

Upcoming features

These are the planned upcoming features.

Elements

• <div>
• <h> - represents a heading
• <ol>
  • <li>
• <strong>
• <table>
  • <tbody>
  • <td>
  • <th>
  • <thead>
  • <tr>
• <ul>
  • <li>

CSS properties

• align-items: 'center' | 'end' | 'start'
• border-collapse: 'collapse' | 'separate'
• border-color: <color>
• border-style: 'dotted' | 'solid'
• display: 'flex'
• flex-direction: 'column' | 'row'
• height: <number>
• justify-content: 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'start'
• list-style-type: 'disc' | 'circle' | 'none' | 'square'
• text-align: 'center' | 'justify' | 'left' | 'right'