Added HorizontalLine component

Author: viktor-podzigun

src/border/HorizontalLine.d.ts

@@ -0,0 +1,13 @@
+import { Widgets } from "@farjs/blessed";
+
+type BlessedStyle = Widgets.Types.TStyle;
+
+export interface HorizontalLineProps {
+  readonly left: number;
+  readonly top: number;
+  readonly length: number;
+  readonly lineCh: string;
+  readonly style: BlessedStyle;
+  readonly startCh?: string;
+  readonly endCh?: string;
+}

src/border/HorizontalLine.mjs

@@ -0,0 +1,31 @@
+/**
+ * @typedef {import("./HorizontalLine").HorizontalLineProps} HorizontalLineProps
+ */
+import React from "react";
+
+const h = React.createElement;
+
+/**
+ * @param {HorizontalLineProps} props
+ */
+const HorizontalLine = (props) => {
+  const startCh = props.startCh ?? "";
+  const endCh = props.endCh ?? "";
+  const line = props.lineCh.repeat(
+    props.length - startCh.length - endCh.length
+  );
+  const content = `${startCh}${line}${endCh}`;
+
+  return h("text", {
+    width: props.length,
+    height: 1,
+    left: props.left,
+    top: props.top,
+    style: props.style,
+    content,
+  });
+};
+
+HorizontalLine.displayName = "HorizontalLine";
+
+export default HorizontalLine;

test/all.mjs

@@ -3,6 +3,8 @@ await import("./ButtonsPanel.test.mjs");
 await import("./TextLine.test.mjs");
 await import("./UI.test.mjs");
 
+await import("./border/HorizontalLine.test.mjs");
+
 await import("./popup/Popup.test.mjs");
 await import("./popup/PopupOverlay.test.mjs");
 

test/border/HorizontalLine.test.mjs

@@ -0,0 +1,116 @@
+/**
+ * @typedef {import('../../src/border/HorizontalLine').HorizontalLineProps} HorizontalLineProps
+ */
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import assert from "node:assert/strict";
+import { assertComponents } from "react-assert";
+import HorizontalLine from "../../src/border/HorizontalLine.mjs";
+
+const h = React.createElement;
+
+const { describe, it } = await (async () => {
+  // @ts-ignore
+  return process.isBun // @ts-ignore
+    ? Promise.resolve({ describe: (_, fn) => fn(), it: test })
+    : import("node:test");
+})();
+
+describe("HorizontalLine.test.mjs", () => {
+  it("should render line without start and end chars", () => {
+    //given
+    const props = {
+      ...getHorizontalLineProps(),
+      startCh: undefined,
+      endCh: undefined,
+    };
+
+    //when
+    const result = TestRenderer.create(h(HorizontalLine, props)).root;
+
+    //then
+    assertHorizontalLine(result, props, "*****");
+  });
+
+  it("should render line with start char", () => {
+    //given
+    const props = {
+      ...getHorizontalLineProps(),
+      startCh: "+",
+      endCh: undefined,
+    };
+
+    //when
+    const result = TestRenderer.create(h(HorizontalLine, props)).root;
+
+    //then
+    assertHorizontalLine(result, props, "+****");
+  });
+
+  it("should render line with end char", () => {
+    //given
+    const props = {
+      ...getHorizontalLineProps(),
+      startCh: undefined,
+      endCh: "-",
+    };
+
+    //when
+    const result = TestRenderer.create(h(HorizontalLine, props)).root;
+
+    //then
+    assertHorizontalLine(result, props, "****-");
+  });
+
+  it("should render line with start and end chars", () => {
+    //given
+    const props = {
+      ...getHorizontalLineProps(),
+      startCh: "+",
+      endCh: "-",
+    };
+
+    //when
+    const result = TestRenderer.create(h(HorizontalLine, props)).root;
+
+    //then
+    assertHorizontalLine(result, props, "+***-");
+  });
+});
+
+/**
+ * @returns {HorizontalLineProps}
+ */
+function getHorizontalLineProps() {
+  return {
+    left: 1,
+    top: 2,
+    length: 5,
+    lineCh: "*",
+    style: {
+      fg: "white",
+      bg: "blue",
+    },
+  };
+}
+
+/**
+ * @param {TestRenderer.ReactTestInstance} result
+ * @param {HorizontalLineProps} props
+ * @param {string} content
+ */
+function assertHorizontalLine(result, props, content) {
+  assert.deepEqual(HorizontalLine.displayName, "HorizontalLine");
+
+  assertComponents(
+    result.children,
+    h("text", {
+      width: props.length,
+      height: 1,
+      left: props.left,
+      top: props.top,
+      style: props.style,
+      content,
+    })
+  );
+}