How to use widest-line - 5 common examples

const colorizeBorder = (border: any, side: string): string => {
    // TODO: Bacon: use alpha for dim
    // return options.dimBorder ? chalk.dim(newBorder) : newBorder;
    // @ts-ignore
    if (borderColors[side]) {
      // @ts-ignore
      border = chalk.rgb(...borderColors[side])(border);
    }
    // if (backgroundColor) {
    //   // @ts-ignore
    //   border = chalk.bgRgb(...backgroundColor)(border);
    // }
    return border;
  };

  const contentWidth = widestLine(children) + padding.left + padding.right;
  const paddingLeft = PAD.repeat(padding.left);
  const { columns } = termSize();
  let marginLeft = PAD.repeat(margin.left);

  if (alignSelf === 'center') {
    const padWidth = Math.max((columns - contentWidth) / 2, 0);
    marginLeft = PAD.repeat(padWidth);
  } else if (alignSelf === 'flex-end') {
    const padWidth = Math.max(columns - contentWidth - margin.right - 2, 0);
    marginLeft = PAD.repeat(padWidth);
  }

  const horizontal = chars.horizontal.repeat(contentWidth);
  const top = hasBorders
    ? colorizeBorder(
        NL.repeat(margin.top) +

// Transformers are functions that transform final text output of each component
	// See Output class for logic that applies transformers
	let newTransformers = transformers;
	if (node.unstable__transformChildren) {
		newTransformers = [node.unstable__transformChildren, ...transformers];
	}

	// Nodes with only text inside
	if (node.textContent) {
		let text = node.textContent;

		// Since text nodes are always wrapped in an additional node, parent node
		// is where we should look for attributes
		if (node.parentNode.style.textWrap) {
			const currentWidth = widestLine(text);
			const maxWidth = getMaxWidth(node.parentNode.yogaNode);

			if (currentWidth > maxWidth) {
				text = wrapText(text, maxWidth, {
					textWrap: node.parentNode.style.textWrap
				});
			}
		}

		output.write(x, y, text, {transformers: newTransformers});
		return;
	}

	// Text nodes
	if (node.nodeName === '#text') {
		output.write(x, y, node.nodeValue, {transformers: newTransformers});

// Text nodes
  if (node.nodeName === '#text') {
    output.write(x, y, node.nodeValue, { transformers: newTransformers });
    return;
  }

  // Nodes that have other nodes as children
  if (Array.isArray(node.childNodes) && node.childNodes.length > 0) {
    const isFlexDirectionRow = node.style && node.style.flexDirection === 'row';

    if (isFlexDirectionRow && node.childNodes.every(isAllTextNodes)) {
      let text = squashTextNodes(node);

      if (node.style && node.style.textWrap) {
        const currentWidth = widestLine(text);
        const maxWidth = getMaxWidth(yogaNode);

        if (currentWidth > maxWidth) {
          text = wrapText(text, maxWidth, {
            textWrap: node.style.textWrap,
          });
        }
      }
      output.write(x, y, text, { transformers: newTransformers });
      return;
    }
    for (const childNode of node.childNodes) {
      renderNodeToOutput(childNode, output, {
        offsetX: x,
        offsetY: y,
        transformers: newTransformers,

if (node.unstable__transformChildren) {
    newTransformers = [node.unstable__transformChildren, ...transformers];
  }

  // Nodes with only text inside
  if (node.textContent) {
    let text = node.textContent;

    // Since text nodes are always wrapped in an additional node, parent node
    // is where we should look for attributes
    if (
      node.parentNode &&
      node.parentNode.style &&
      node.parentNode.style.textWrap
    ) {
      const currentWidth = widestLine(text);
      const maxWidth = getMaxWidth(node.parentNode.yogaNode);

      if (currentWidth > maxWidth) {
        text = wrapText(text, maxWidth, {
          textWrap: node.parentNode.style.textWrap,
        });
      }
    }
    output.write(x, y, text, { transformers: newTransformers });
    return;
  }

  // Text nodes
  if (node.nodeName === '#text') {
    output.write(x, y, node.nodeValue, { transformers: newTransformers });
    return;

// Text nodes
	if (node.nodeName === '#text') {
		output.write(x, y, node.nodeValue, {transformers: newTransformers});
		return;
	}

	// Nodes that have other nodes as children
	if (Array.isArray(node.childNodes) && node.childNodes.length > 0) {
		const isFlexDirectionRow = node.style.flexDirection === 'row';

		if (isFlexDirectionRow && node.childNodes.every(isAllTextNodes)) {
			let text = squashTextNodes(node);

			if (node.style.textWrap) {
				const currentWidth = widestLine(text);
				const maxWidth = getMaxWidth(yogaNode);

				if (currentWidth > maxWidth) {
					text = wrapText(text, maxWidth, {
						textWrap: node.style.textWrap
					});
				}
			}

			output.write(x, y, text, {transformers: newTransformers});
			return;
		}

		for (const childNode of node.childNodes) {
			renderNodeToOutput(childNode, output, {
				offsetX: x,