@nan0web/ui 1.0.4 → 1.3.0

package/src/Frame/Frame.js

@@ -1,11 +1,11 @@
-import stringWidth from "string-width"
-import { to, typeOf, empty } from "@nan0web/types"
-import FrameProps from "./Props.js"
+import stringWidth from 'string-width'
+import { to, typeOf, empty } from '@nan0web/types'
+import FrameProps from './Props.js'
 
 export class FrameRenderMethod {
-	static APPEND = "append"
-	static REPLACE = "replace"
-	static VISIBLE = "visible"
+	static APPEND = 'append'
+	static REPLACE = 'replace'
+	static VISIBLE = 'visible'
 }
 
 /**
@@ -16,27 +16,27 @@ export default class Frame {
 	static RenderMethod = FrameRenderMethod
 	static Props = FrameProps
 	/** @type {string} End of line */
-	static EOL = "\n"
+	static EOL = '\n'
 	/** @type {string} Beginning of line */
-	static BOL = "\r"
+	static BOL = '\r'
 	/** @type {string} Beginning of frame */
-	static BOF = "\x1b[0;0H"
+	static BOF = '\x1b[0;0H'
 	/** @type {string} Hide cursor */
-	static HIDE_CURSOR = "\x1b[?25l"
+	static HIDE_CURSOR = '\x1b[?25l'
 	/** @type {string} Show cursor */
-	static SHOW_CURSOR = "\x1b[?25h"
+	static SHOW_CURSOR = '\x1b[?25h'
 	/** @type {string} Tab */
-	static TAB = "\t"
+	static TAB = '\t'
 	/** @type {string} Bold */
-	static BOLD = "\x1b[1m"
+	static BOLD = '\x1b[1m'
 	/** @type {string} Italic */
-	static ITALIC = "\x1b[3m"
+	static ITALIC = '\x1b[3m'
 	/** @type {string} Underline */
-	static UNDERLINE = "\x1b[4m"
+	static UNDERLINE = '\x1b[4m'
 	/** @type {string} Strikethrough */
-	static STRIKETHROUGH = "\x1b[9m"
+	static STRIKETHROUGH = '\x1b[9m'
 	/** @type {string} Reset */
-	static RESET = "\x1b[0m"
+	static RESET = '\x1b[0m'
 	/** @type {string} Clear line */
 	static CLEAR_LINE = '\x1b[2K'
 	/**
@@ -81,26 +81,29 @@ export default class Frame {
 			value = [],
 			width = -1,
 			height = -1,
-			imprint = "",
-			renderMethod = "append",
+			imprint = '',
+			renderMethod = 'append',
 			defaultProps = new FrameProps(),
 		} = input
 		if (value instanceof Frame) {
 			value = value.value
 		}
 		if (!typeOf(Array)(value)) {
-			throw new TypeError([
-				"Frame constructor allows only string[] for rows or string[][] for rows with columns",
-				"Provided value:", JSON.stringify(value, null, 2),
-			].join("\n"))
+			throw new TypeError(
+				[
+					'Frame constructor allows only string[] for rows or string[][] for rows with columns',
+					'Provided value:',
+					JSON.stringify(value, null, 2),
+				].join('\n'),
+			)
 		}
-		value = value.map(row => {
+		value = value.map((row) => {
 			if (typeOf(Array)(row)) {
 				return row.map(String)
 			}
 			return [row]
 		})
-		this.value = value.map(v => Array.isArray(v) ? v : [v])
+		this.value = value.map((v) => (Array.isArray(v) ? v : [v]))
 		this.imprint = String(imprint)
 		this.width = width
 		this.height = height
@@ -130,56 +133,51 @@ export default class Frame {
 	 * @returns {string} The rendered frame as a string.
 	 */
 	render(options = {}) {
-		const {
-			method = this.renderMethod,
-			props = this.defaultProps,
-		} = options
-		let rows = this.value.map(row => {
+		const { method = this.renderMethod, props = this.defaultProps } = options
+		let rows = this.value.map((row) => {
 			if (typeOf(Array)(row)) {
-				row = row.join("")
+				row = row.join('')
 			}
 			return row
 		})
-		let spacesOn = ""
+		let spacesOn = ''
 		if (Frame.BOF === rows[0]) {
 			rows = rows.slice(1)
-			spacesOn = "top"
-		}
-		else if (Frame.BOF === rows[rows.length - 1]) {
+			spacesOn = 'top'
+		} else if (Frame.BOF === rows[rows.length - 1]) {
 			rows = rows.slice(0, -1)
-			spacesOn = "bottom"
+			spacesOn = 'bottom'
 		}
 		if (this.height >= 0 && rows.length > this.height) {
 			rows = rows.slice(0, this.height)
 		}
 		if (this.width >= 0 && rows.length > 0) {
-			rows = rows.map(row => {
+			rows = rows.map((row) => {
 				if (row.length > this.width) {
 					row = row.slice(0, this.width)
 				}
 				return row
 			})
 		}
-		let carret = ""
+		let carret = ''
 		if (method === Frame.RenderMethod.REPLACE) {
 			const printedRows = rows.map(
-				row => row + " ".repeat(Math.max(0, this.width - this.lengthOf(row)))
+				(row) => row + ' '.repeat(Math.max(0, this.width - this.lengthOf(row))),
 			)
 			const left = this.height >= 0 ? this.height - rows.length : 0
 			const eraser = []
-			for (let i = 0; i < left; i++) eraser.push(" ".repeat(this.width))
+			for (let i = 0; i < left; i++) eraser.push(' '.repeat(this.width))
 			carret = Frame.BOF
-			if ("bottom" === spacesOn) {
+			if ('bottom' === spacesOn) {
 				rows = left > 0 ? [...printedRows, ...eraser] : []
 			} else {
 				rows = left > 0 ? [...eraser, ...printedRows] : []
 			}
-		}
-		else if (method === Frame.RenderMethod.APPEND) {
-			rows = rows.map(row => {
+		} else if (method === Frame.RenderMethod.APPEND) {
+			rows = rows.map((row) => {
 				const used = this.lengthOf(row)
 				const left = Math.max(0, this.width - used)
-				row = row + " ".repeat(left)
+				row = row + ' '.repeat(left)
 				if (row.length > this.width) row = row.slice(0, this.width)
 				return row
 			})
@@ -190,54 +188,48 @@ export default class Frame {
 				carret = Frame.BOF
 				const left = this.height >= 0 ? this.height - rows.length : 0
 				const eraser = []
-				for (let i = 0; i < left; i++) eraser.push("")
-				if (spacesOn === "top") {
+				for (let i = 0; i < left; i++) eraser.push('')
+				if (spacesOn === 'top') {
 					rows = left > 0 ? [...eraser, ...rows] : []
-				}
-				else if (spacesOn === "bottom") {
+				} else if (spacesOn === 'bottom') {
 					rows = left > 0 ? [...rows, ...eraser] : []
 				}
 			}
-		}
-		else if (method === Frame.RenderMethod.VISIBLE) {
+		} else if (method === Frame.RenderMethod.VISIBLE) {
 			// Move cursor up # lines (Math.max(0, Math.min(rows.length, height))) before rendering
 			if (spacesOn) {
-				let moveUpLines = Math.max(0, Math.min(rows.length, this.height >= 0 ? this.height : rows.length))
+				let moveUpLines = Math.max(
+					0,
+					Math.min(rows.length, this.height >= 0 ? this.height : rows.length),
+				)
 				if (moveUpLines > 0) {
 					--moveUpLines
 				}
 				carret = Frame.cursorUp(moveUpLines)
 			}
-			rows = rows.map(
-				row => Frame.clearLine("\r") + row
-			)
-		}
-		else {
+			rows = rows.map((row) => Frame.clearLine('\r') + row)
+		} else {
 			if (spacesOn) {
 				carret = Frame.BOF
 				const left = this.height >= 0 ? this.height - rows.length : 0
 				const eraser = []
-				for (let i = 0; i < left; i++) eraser.push("")
-				if (spacesOn === "top") {
+				for (let i = 0; i < left; i++) eraser.push('')
+				if (spacesOn === 'top') {
 					rows = left > 0 ? [...eraser, ...rows] : []
-				}
-				else if (spacesOn === "bottom") {
+				} else if (spacesOn === 'bottom') {
 					rows = left > 0 ? [...rows, ...eraser] : []
 				}
 			}
 		}
-		if ("bottom" === spacesOn) {
-			this.imprint = rows.join("\n") + carret
+		if ('bottom' === spacesOn) {
+			this.imprint = rows.join('\n') + carret
 		} else {
-			this.imprint = carret + rows.join("\n")
+			this.imprint = carret + rows.join('\n')
 		}
 		return this.imprint
 	}
 	#render1(options = {}) {
-		const {
-			method = this.renderMethod,
-			props = this.defaultProps,
-		} = options
+		const { method = this.renderMethod, props = this.defaultProps } = options
 
 		/**
 		 * Helper to apply CLI style codes.
@@ -247,7 +239,7 @@ export default class Frame {
 		 */
 		function applyStyle(str, style = {}) {
 			let out = str
-			let prefix = ""
+			let prefix = ''
 			let suffix = Frame.RESET
 
 			if (style.bold) prefix += Frame.BOLD
@@ -260,20 +252,34 @@ export default class Frame {
 				const color = style.color
 				if (/^#[0-9a-f]{3,6}$/i.test(color)) {
 					// 24-bit color
-					const hex = color.replace("#", "")
-					const rgb = hex.length === 3
-						? [0, 1, 2].map(i => parseInt(hex[i] + hex[i], 16))
-						: [0, 2, 4].map(i => parseInt(hex.slice(i, i + 2), 16))
+					const hex = color.replace('#', '')
+					const rgb =
+						hex.length === 3
+							? [0, 1, 2].map((i) => parseInt(hex[i] + hex[i], 16))
+							: [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16))
 					prefix += `\x1b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m`
 				} else if (/^\d+$/.test(color)) {
 					prefix += `\x1b[38;5;${color}m`
 				} else {
 					// Named color, map to 8-bit
 					const map = {
-						black: 30, red: 31, green: 32, yellow: 33, blue: 34,
-						magenta: 35, cyan: 36, white: 37, gray: 90, grey: 90,
-						brightRed: 91, brightGreen: 92, brightYellow: 93, brightBlue: 94,
-						brightMagenta: 95, brightCyan: 96, brightWhite: 97,
+						black: 30,
+						red: 31,
+						green: 32,
+						yellow: 33,
+						blue: 34,
+						magenta: 35,
+						cyan: 36,
+						white: 37,
+						gray: 90,
+						grey: 90,
+						brightRed: 91,
+						brightGreen: 92,
+						brightYellow: 93,
+						brightBlue: 94,
+						brightMagenta: 95,
+						brightCyan: 96,
+						brightWhite: 97,
 					}
 					if (map[color]) prefix += `\x1b[${map[color]}m`
 				}
@@ -282,19 +288,33 @@ export default class Frame {
 			if (style.bgColor) {
 				const color = style.bgColor
 				if (/^#[0-9a-f]{3,6}$/i.test(color)) {
-					const hex = color.replace("#", "")
-					const rgb = hex.length === 3
-						? [0, 1, 2].map(i => parseInt(hex[i] + hex[i], 16))
-						: [0, 2, 4].map(i => parseInt(hex.slice(i, i + 2), 16))
+					const hex = color.replace('#', '')
+					const rgb =
+						hex.length === 3
+							? [0, 1, 2].map((i) => parseInt(hex[i] + hex[i], 16))
+							: [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16))
 					prefix += `\x1b[48;2;${rgb[0]};${rgb[1]};${rgb[2]}m`
 				} else if (/^\d+$/.test(color)) {
 					prefix += `\x1b[48;5;${color}m`
 				} else {
 					const map = {
-						black: 40, red: 41, green: 42, yellow: 43, blue: 44,
-						magenta: 45, cyan: 46, white: 47, gray: 100, grey: 100,
-						brightRed: 101, brightGreen: 102, brightYellow: 103, brightBlue: 104,
-						brightMagenta: 105, brightCyan: 106, brightWhite: 107,
+						black: 40,
+						red: 41,
+						green: 42,
+						yellow: 43,
+						blue: 44,
+						magenta: 45,
+						cyan: 46,
+						white: 47,
+						gray: 100,
+						grey: 100,
+						brightRed: 101,
+						brightGreen: 102,
+						brightYellow: 103,
+						brightBlue: 104,
+						brightMagenta: 105,
+						brightCyan: 106,
+						brightWhite: 107,
 					}
 					if (map[color]) prefix += `\x1b[${map[color]}m`
 				}
@@ -322,18 +342,18 @@ export default class Frame {
 				if (cell.length === 2 && typeOf(Object)(cell[1])) {
 					return { text: String(cell[0]), style: mergeStyles(inherited, cell[1]) }
 				}
-				return { text: cell.map(c => parseCell(c, inherited).text).join(""), style: inherited }
+				return { text: cell.map((c) => parseCell(c, inherited).text).join(''), style: inherited }
 			}
 			if (typeOf(Object)(cell)) {
-				return { text: "", style: mergeStyles(inherited, cell) }
+				return { text: '', style: mergeStyles(inherited, cell) }
 			}
-			if (typeof cell === "string" && cell.startsWith("<") && cell.endsWith(">")) {
+			if (typeof cell === 'string' && cell.startsWith('<') && cell.endsWith('>')) {
 				// Simple XML-like tag parser for <b>, <i>, <u>, <s>, <fg=...>, <bg=...>
 				let text = cell
 				let style = { ...inherited }
 				const tagPattern = /<([bius]|fg|bg)(?:=([#\w\d]+))?>|<\/([bius]|fg|bg)>/gi
 				let stack = []
-				let result = ""
+				let result = ''
 				let lastIndex = 0
 				let m
 				while ((m = tagPattern.exec(cell))) {
@@ -343,14 +363,26 @@ export default class Frame {
 						// Opening tag
 						let tag = m[1]
 						let val = m[2]
-						let newStyle = { ...stack.length ? stack[stack.length - 1] : style }
+						let newStyle = { ...(stack.length ? stack[stack.length - 1] : style) }
 						switch (tag) {
-							case "b": newStyle.bold = true; break
-							case "i": newStyle.italic = true; break
-							case "u": newStyle.underline = true; break
-							case "s": newStyle.strikethrough = true; break
-							case "fg": newStyle.color = val; break
-							case "bg": newStyle.bgColor = val; break
+							case 'b':
+								newStyle.bold = true
+								break
+							case 'i':
+								newStyle.italic = true
+								break
+							case 'u':
+								newStyle.underline = true
+								break
+							case 's':
+								newStyle.strikethrough = true
+								break
+							case 'fg':
+								newStyle.color = val
+								break
+							case 'bg':
+								newStyle.bgColor = val
+								break
 						}
 						stack.push(newStyle)
 					} else if (m[3]) {
@@ -367,13 +399,17 @@ export default class Frame {
 
 		// Determine frame-level style
 		let frameStyle = {}
-		if (typeOf(Array)(this.value) && this.value.length && typeOf(Object)(this.value[this.value.length - 1])) {
+		if (
+			typeOf(Array)(this.value) &&
+			this.value.length &&
+			typeOf(Object)(this.value[this.value.length - 1])
+		) {
 			frameStyle = this.value[this.value.length - 1]
 		}
 
 		let rows = this.value
-			.filter(row => !(typeOf(Object)(row) && !typeOf(Array)(row)))
-			.map(row => {
+			.filter((row) => !(typeOf(Object)(row) && !typeOf(Array)(row)))
+			.map((row) => {
 				let rowStyle = frameStyle
 				let cells = row
 				if (typeOf(Array)(row) && row.length && typeOf(Object)(row[row.length - 1])) {
@@ -381,32 +417,27 @@ export default class Frame {
 					cells = row.slice(0, -1)
 				}
 				if (!typeOf(Array)(cells)) cells = [cells]
-				let styled = cells.map(cell => {
+				let styled = cells.map((cell) => {
 					const { text, style } = parseCell(cell, mergeStyles(props, rowStyle))
 					return applyStyle(text, style)
 				})
-				return styled.join("")
+				return styled.join('')
 			})
 
 		if (method === FrameRenderMethod.REPLACE) {
-			let emptyRows = rows.map(row => " ".repeat(this.lengthOf(row)))
+			let emptyRows = rows.map((row) => ' '.repeat(this.lengthOf(row)))
 			if (rows.length > this.height) {
 				emptyRows = emptyRows.slice(0, this.height)
 				rows = rows.slice(0, this.height)
 			}
-			rows = [
-				...emptyRows,
-				Frame.BOF,
-				...rows,
-			]
-		}
-		else if (method === FrameRenderMethod.APPEND) {
-			rows = rows.map(row => {
+			rows = [...emptyRows, Frame.BOF, ...rows]
+		} else if (method === FrameRenderMethod.APPEND) {
+			rows = rows.map((row) => {
 				const used = this.lengthOf(row)
 				const left = this.width - used
-				row = row + " ".repeat(Math.max(0, left))
+				row = row + ' '.repeat(Math.max(0, left))
 				if (stringWidth(row) > this.width) {
-					let acc = ""
+					let acc = ''
 					let w = 0
 					for (let ch of row) {
 						let chW = stringWidth(ch)
@@ -421,28 +452,23 @@ export default class Frame {
 			if (rows.length > this.height) {
 				rows = rows.slice(0, this.height)
 			}
-		}
-		else if (method === FrameRenderMethod.VISIBLE) {
-			const moveUpLines = Math.max(0, Math.min(rows.length, this.height >= 0 ? this.height : rows.length))
-			rows = [
-				`\x1b[${moveUpLines}A${Frame.BOF}`,
-				...rows,
-			]
+		} else if (method === FrameRenderMethod.VISIBLE) {
+			const moveUpLines = Math.max(
+				0,
+				Math.min(rows.length, this.height >= 0 ? this.height : rows.length),
+			)
+			rows = [`\x1b[${moveUpLines}A${Frame.BOF}`, ...rows]
 			if (rows.length > this.height && this.height >= 0) {
 				rows = rows.slice(0, this.height + 1) // +1 for the cursor move line
 			}
-		}
-		else {
+		} else {
 			if (rows.length > this.height) {
 				rows = rows.slice(0, this.height)
 			}
-			rows = [
-				Frame.BOF,
-				...rows,
-			]
+			rows = [Frame.BOF, ...rows]
 		}
 
-		this.imprint = rows.join("\n")
+		this.imprint = rows.join('\n')
 		return this.imprint
 	}
 	/**
@@ -458,9 +484,7 @@ export default class Frame {
 	 * @returns {Frame} A new Frame with transformed values.
 	 */
 	transform(fn) {
-		const value = this.value.map(
-			row => row.map(fn)
-		)
+		const value = this.value.map((row) => row.map(fn))
 		return new Frame({ ...this, value })
 	}
 	/**
@@ -494,7 +518,7 @@ export default class Frame {
 	static from(input) {
 		if (input instanceof Frame) return input
 		if (input?.value instanceof Frame) return new Frame(to(Object)(input.value))
-		if ("string" === typeof input) input = [input]
+		if ('string' === typeof input) input = [input]
 		if (Array.isArray(input)) return new Frame({ value: input })
 		return new Frame(input)
 	}
@@ -508,12 +532,11 @@ export default class Frame {
 	 */
 	static spaces(options = {}) {
 		const { cols = [], padding = 1, aligns = [] } = options
-		return (row) => (
+		return (row) =>
 			row.map((str, i) => {
-				const pad = " ".repeat(cols[i] - str.length + padding)
-				return aligns[i] === "r" ? pad + str : str + pad
+				const pad = ' '.repeat(cols[i] - str.length + padding)
+				return aligns[i] === 'r' ? pad + str : str + pad
 			})
-		)
 	}
 	/**
 	 *
@@ -521,9 +544,9 @@ export default class Frame {
 	 * @returns {(v) => number[]}
 	 */
 	static weight(arr) {
-		return (Fn = v => v) => {
+		return (Fn = (v) => v) => {
 			const cols = []
-			arr.forEach(m => {
+			arr.forEach((m) => {
 				Fn(m).forEach((str, i) => {
 					if (undefined === cols[i]) cols[i] = 0
 					cols[i] = Math.max(String(str).length, cols[i])
@@ -542,18 +565,13 @@ export default class Frame {
 	 * @returns {(arr: []) => string[][]}
 	 */
 	static table(options = {}) {
-		const {
-			fn = v => v,
-			cols: initialCols = [],
-			padding = 1,
-			aligns = []
-		} = options
+		const { fn = (v) => v, cols: initialCols = [], padding = 1, aligns = [] } = options
 		return (arr) => {
 			let cols = initialCols
 			if (empty(cols)) {
 				cols = Frame.weight(arr)(fn)
 			}
-			return arr.map(row => Frame.spaces({ cols, padding, aligns })(row))
+			return arr.map((row) => Frame.spaces({ cols, padding, aligns })(row))
 		}
 	}
 	/**
@@ -577,7 +595,7 @@ export default class Frame {
 	 * @param {string} [str="\r"] - String to append after clearing.
 	 * @returns {string} ANSI escape code for line clearing followed by the string.
 	 */
-	static clearLine(str = "\r") {
+	static clearLine(str = '\r') {
 		return Frame.CLEAR_LINE + str
 	}
 	/**
@@ -587,5 +605,4 @@ export default class Frame {
 	static clearScreen() {
 		return '\x1b[2J\x1b[0;0H'
 	}
-
-}
+}

package/src/Frame/Props.js

@@ -1,4 +1,4 @@
-import { typeOf, ObjectWithAlias } from "@nan0web/types"
+import { typeOf, ObjectWithAlias } from '@nan0web/types'
 
 /**
  * Represents default styling properties for Frame rendering.
@@ -7,7 +7,7 @@ import { typeOf, ObjectWithAlias } from "@nan0web/types"
  * If you want to apply different props to multiple values, you can use an object with the props.
  * If you want to apply props to a single value, you can use a string with the props in XML format.
  * Parser checks every atom for its beginning and end and if it's a tag, it applies the props to the value.
- * 
+ *
  * @example
  * const defaultProps = new FrameProps({
  * 	color: "red",
@@ -40,34 +40,34 @@ import { typeOf, ObjectWithAlias } from "@nan0web/types"
  * const defaultProps = new FrameProps(rows)
  */
 class FrameProps extends ObjectWithAlias {
-	/** 
+	/**
 	 * Property aliases for shorthand notation.
 	 * @type {Record<string, string>}
 	 */
 	static ALIAS = {
-		fg: "color",
-		bg: "bgColor",
-		b: "bold",
-		i: "italic",
-		u: "underline",
-		s: "strikethrough",
+		fg: 'color',
+		bg: 'bgColor',
+		b: 'bold',
+		i: 'italic',
+		u: 'underline',
+		s: 'strikethrough',
 	}
-	
+
 	/** @type {string} Text color */
-	color = ""
-	
+	color = ''
+
 	/** @type {string} Background color */
-	bgColor = ""
-	
+	bgColor = ''
+
 	/** @type {boolean} Bold text flag */
 	bold = false
-	
+
 	/** @type {boolean} Italic text flag */
 	italic = false
-	
+
 	/** @type {boolean} Underline text flag */
 	underline = false
-	
+
 	/** @type {boolean} Strikethrough text flag */
 	strikethrough = false
 
@@ -83,8 +83,8 @@ class FrameProps extends ObjectWithAlias {
 	constructor(props = {}) {
 		super()
 		const {
-			color = "",
-			bgColor = "",
+			color = '',
+			bgColor = '',
 			bold = false,
 			italic = false,
 			underline = false,
@@ -99,4 +99,4 @@ class FrameProps extends ObjectWithAlias {
 	}
 }
 
-export default FrameProps
+export default FrameProps