feat: add <Line> component to render horizontal and vertical lines

src/components/Line.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+/* eslint-disable react/no-unused-prop-types */
+import React, {forwardRef} from 'react';
+import {type Styles} from '../styles.js';
+import {type DOMElement} from '../dom.js';
+
+export type Props = Pick<
+	Styles,
+	| 'position'
+	| 'marginTop'
+	| 'marginBottom'
+	| 'marginLeft'
+	| 'marginRight'
+	| 'borderStyle'
+	| 'borderColor'
+	| 'height'
+	| 'width'
+> & {
+	orientation?: 'horizontal' | 'vertical';
+
+	/**
+	 * Margin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginLeft` and `marginRight`.
+	 *
+	 * @default 0
+	 */
+	readonly margin?: number;
+
+	/**
+	 * Horizontal margin. Equivalent to setting `marginLeft` and `marginRight`.
+	 *
+	 * @default 0
+	 */
+	readonly marginX?: number;
+
+	/**
+	 * Vertical margin. Equivalent to setting `marginTop` and `marginBottom`.
+	 *
+	 * @default 0
+	 */
+	readonly marginY?: number;
+};
+
+/**
+ * Line renders a horizontal or vertical line with the given border style and color.
+ */
+const Line = forwardRef<DOMElement, Props>(({orientation, ...style}, ref) => {
+	const transformedStyle = {
+		...style,
+		marginLeft: style.marginLeft || style.marginX || style.margin || 0,
+		marginRight: style.marginRight || style.marginX || style.margin || 0,
+		marginTop: style.marginTop || style.marginY || style.margin || 0,
+		marginBottom: style.marginBottom || style.marginY || style.margin || 0,
+		width: orientation === 'horizontal' ? style.width : 1,
+		height: orientation === 'vertical' ? style.height : 1
+	};
+
+	return (
+		<ink-line ref={ref} orientation={orientation} style={transformedStyle} />
+	);
+});
+
+Line.displayName = 'Line';
+
+Line.defaultProps = {
+	orientation: 'horizontal'
+};
+
+export default Line;

src/dom.ts

@@ -16,6 +16,7 @@ export type TextName = '#text';
 export type ElementNames =
 	| 'ink-root'
 	| 'ink-box'
+	| 'ink-line'
 	| 'ink-text'
 	| 'ink-virtual-text';
 
@@ -159,7 +160,8 @@ export const setStyle = (node: DOMNode, style: Styles): void => {
 	node.style = style;
 
 	if (node.yogaNode) {
-		applyStyles(node.yogaNode, style);
+		// @ts-expect-error we did check that node.yogaNode exists
+		applyStyles(node, style);
 	}
 };
 

src/global.d.ts

@@ -9,6 +9,7 @@ declare global {
 		interface IntrinsicElements {
 			'ink-box': Ink.Box;
 			'ink-text': Ink.Text;
+			'ink-line': Ink.Line;
 		}
 	}
 }
@@ -22,6 +23,24 @@ declare namespace Ink {
 		style?: Except<Styles, 'textWrap'>;
 	};
 
+	type Line = {
+		key?: Key;
+		ref?: LegacyRef<DOMElement>;
+		orientation?: 'horizontal' | 'vertical';
+		style?: Pick<
+			Styles,
+			| 'position'
+			| 'marginTop'
+			| 'marginBottom'
+			| 'marginLeft'
+			| 'marginRight'
+			| 'borderStyle'
+			| 'borderColor'
+			| 'width'
+			| 'height'
+		>;
+	};
+
 	type Text = {
 		children?: ReactNode;
 		key?: Key;

src/index.ts

@@ -2,6 +2,8 @@ export type {RenderOptions, Instance} from './render.js';
 export {default as render} from './render.js';
 export type {Props as BoxProps} from './components/Box.js';
 export {default as Box} from './components/Box.js';
+export type {Props as LineProps} from './components/Line.js';
+export {default as Line} from './components/Line.js';
 export type {Props as TextProps} from './components/Text.js';
 export {default as Text} from './components/Text.js';
 export type {Props as AppProps} from './components/AppContext.js';

src/reconciler.ts

@@ -107,6 +107,10 @@ export default createReconciler<
 			throw new Error(`<Box> can’t be nested inside <Text> component`);
 		}
 
+		if (hostContext.isInsideText && originalType === 'ink-line') {
+			throw new Error(`<Line> can’t be nested inside <Text> component`);
+		}
+
 		const type =
 			originalType === 'ink-text' && hostContext.isInsideText
 				? 'ink-virtual-text'

src/render-line.ts

@@ -0,0 +1,29 @@
+import cliBoxes from 'cli-boxes';
+import colorize from './colorize.js';
+import {type DOMNode} from './dom.js';
+import type Output from './output.js';
+
+const renderLine = (
+	x: number,
+	y: number,
+	node: DOMNode,
+	output: Output
+): void => {
+	if (typeof node.style.borderStyle === 'string') {
+		const width = Math.max(1, node.yogaNode!.getComputedWidth());
+		const height = Math.max(1, node.yogaNode!.getComputedHeight());
+		const color = node.style.borderColor;
+		const box = cliBoxes[node.style.borderStyle];
+
+		const border =
+			(node as any).attributes.orientation === 'vertical'
+				? // Vertical line
+				  (colorize(box.left, color, 'foreground') + '\n').repeat(height)
+				: // Horizontal line
+				  colorize(box.top.repeat(width), color, 'foreground');
+
+		output.write(x, y, border, {transformers: []});
+	}
+};
+
+export default renderLine;

src/render-node-to-output.ts

@@ -7,6 +7,7 @@ import squashTextNodes from './squash-text-nodes.js';
 import renderBorder from './render-border.js';
 import {type DOMElement} from './dom.js';
 import type Output from './output.js';
+import renderLine from './render-line.js';
 
 // If parent container is `<Box>`, text nodes will be treated as separate nodes in
 // the tree and will have their own coordinates in the layout.
@@ -89,6 +90,11 @@ const renderNodeToOutput = (
 			return;
 		}
 
+		if (node.nodeName === 'ink-line') {
+			renderLine(x, y, node, output);
+			return;
+		}
+
 		let clipped = false;
 
 		if (node.nodeName === 'ink-box') {

src/styles.ts

@@ -3,6 +3,7 @@ import Yoga, {type YogaNode} from 'yoga-layout-prebuilt';
 import {type Boxes} from 'cli-boxes';
 import {type LiteralUnion} from 'type-fest';
 import {type ForegroundColorName} from 'chalk';
+import {DOMNode} from './dom.js';
 
 export type Styles = {
 	readonly textWrap?:
@@ -153,7 +154,12 @@ export type Styles = {
 	readonly overflowY?: 'visible' | 'hidden';
 };
 
-const applyPositionStyles = (node: Yoga.YogaNode, style: Styles): void => {
+const applyPositionStyles = (
+	domNode: DOMNode & {yogaNode: YogaNode},
+	style: Styles
+): void => {
+	const node = domNode.yogaNode;
+
 	if ('position' in style) {
 		node.setPositionType(
 			style.position === 'absolute'
@@ -163,7 +169,12 @@ const applyPositionStyles = (node: Yoga.YogaNode, style: Styles): void => {
 	}
 };
 
-const applyMarginStyles = (node: Yoga.YogaNode, style: Styles): void => {
+const applyMarginStyles = (
+	domNode: DOMNode & {yogaNode: YogaNode},
+	style: Styles
+): void => {
+	const node = domNode.yogaNode;
+
 	if ('marginLeft' in style) {
 		node.setMargin(Yoga.EDGE_START, style.marginLeft || 0);
 	}
@@ -181,7 +192,12 @@ const applyMarginStyles = (node: Yoga.YogaNode, style: Styles): void => {
 	}
 };
 
-const applyPaddingStyles = (node: Yoga.YogaNode, style: Styles): void => {
+const applyPaddingStyles = (
+	domNode: DOMNode & {yogaNode: YogaNode},
+	style: Styles
+): void => {
+	const node = domNode.yogaNode;
+
 	if ('paddingLeft' in style) {
 		node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0);
 	}
@@ -199,7 +215,12 @@ const applyPaddingStyles = (node: Yoga.YogaNode, style: Styles): void => {
 	}
 };
 
-const applyFlexStyles = (node: YogaNode, style: Styles): void => {
+const applyFlexStyles = (
+	domNode: DOMNode & {yogaNode: YogaNode},
+	style: Styles
+): void => {
+	const node = domNode.yogaNode;
+
 	if ('flexGrow' in style) {
 		node.setFlexGrow(style.flexGrow ?? 0);
 	}
@@ -298,7 +319,12 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => {
 	}
 };
 
-const applyDimensionStyles = (node: YogaNode, style: Styles): void => {
+const applyDimensionStyles = (
+	domNode: DOMNode & {yogaNode: YogaNode},
+	style: Styles
+): void => {
+	const node = domNode.yogaNode;
+
 	if ('width' in style) {
 		if (typeof style.width === 'number') {
 			node.setWidth(style.width);
@@ -336,17 +362,32 @@ const applyDimensionStyles = (node: YogaNode, style: Styles): void => {
 	}
 };
 
-const applyDisplayStyles = (node: YogaNode, style: Styles): void => {
+const applyDisplayStyles = (
+	domNode: DOMNode & {yogaNode: YogaNode},
+	style: Styles
+): void => {
+	const node = domNode.yogaNode;
+
 	if ('display' in style) {
 		node.setDisplay(
 			style.display === 'flex' ? Yoga.DISPLAY_FLEX : Yoga.DISPLAY_NONE
 		);
 	}
 };
 
-const applyBorderStyles = (node: YogaNode, style: Styles): void => {
+const applyBorderStyles = (
+	domNode: DOMNode & {yogaNode: YogaNode},
+	style: Styles
+): void => {
+	const node = domNode.yogaNode;
+
 	if ('borderStyle' in style) {
-		const borderWidth = typeof style.borderStyle === 'string' ? 1 : 0;
+		const borderWidth =
+			domNode.nodeName === 'ink-line'
+				? 0
+				: typeof style.borderStyle === 'string'
+				? 1
+				: 0;
 
 		node.setBorder(Yoga.EDGE_TOP, borderWidth);
 		node.setBorder(Yoga.EDGE_BOTTOM, borderWidth);
@@ -355,7 +396,10 @@ const applyBorderStyles = (node: YogaNode, style: Styles): void => {
 	}
 };
 
-const styles = (node: YogaNode, style: Styles = {}): void => {
+const styles = (
+	node: DOMNode & {yogaNode: YogaNode},
+	style: Styles = {}
+): void => {
 	applyPositionStyles(node, style);
 	applyMarginStyles(node, style);
 	applyPaddingStyles(node, style);