Refactor sections

src/__tests__/__snapshots__/section-test.js.snap

@@ -15,6 +15,23 @@ exports[`sections should be able to align text right 1`] = `
 "
 `;
 
+exports[`sections should be able to render a border 1`] = `
+"--------------------------------------------------
+|++++++++++++Test section with border++++++++++++|
+--------------------------------------------------
+"
+`;
+
+exports[`sections should be able to render a border 2`] = `
+"**************************************************
+*Some Text+++++++++++++++-------------------------*
+*++++++++++++++++++++++++|+++Test section with+++|*
+*++++++++++++++++++++++++|++++++++border+++++++++|*
+*++++++++++++++++++++++++-------------------------*
+**************************************************
+"
+`;
+
 exports[`sections should be able to render horizontally 1`] = `
 "Column 1+++++++++++++++++Column 2+++++++++++++++++
 "

src/__tests__/integration-tests/__snapshots__/kitchen-sink-test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Columns and rows should work together 1`] = `
 "Some text+++++++++++++++++++++++++++++++++++++++++
-Column A++++++++Column B++++++++Column C++++++++
+Column A++++++++Column B++++++++Column C++++++++++
 Other text++++++++++++++++++++++++++++++++++++++++
 "
 `;
@@ -18,3 +18,27 @@ exports[`Columns should work nested within other columns 1`] = `
 ++++++++++++++++++wrap++++++++++++++++++++++++++
 "
 `;
+
+exports[`Columns, rows, section styles should all work together 1`] = `
+"##################################################
+#++++++++++++++++++++Some App++++++++++++++++++++#
+#*************************-------------------------#
+#*+++++++✔︎ Step 1+++++++*|Some messages for this+|#
+#*+++++++◯ Step 2++++++++*|app++++++++++++++++++++|#
+#*+++++++◯ Step 3++++++++*-------------------------#
+#*************************+++++++++++++++++++++++++#
+#+++++++Some stuff for this app is done! 🤘++++++++#
+#+Heres some more informative stuff about your app+#
+#+++++++++++++++++++++browser++++++++++++++++++++++#
+#++++++++++++++++++++++↙↗ ↖↘+++++++++++++++++++++++#
+#--------------------------------------------------#
+#|++++++++server+++++++++||++++++dev-server+++++++|#
+#|++(initial response)+++||+++++(app bundle)++++++|#
+#|++++localhost:3000+++++||++++localhost:8080+++++|#
+#-------------------------|+websocket server (for+|#
+#+++++++++++++++++++++++++|+++++++++HMR)++++++++++|#
+#+++++++++++++++++++++++++|++++localhost:8081+++++|#
+#+++++++++++++++++++++++++-------------------------#
+##################################################
+"
+`;

src/__tests__/integration-tests/kitchen-sink-test.js

@@ -31,3 +31,45 @@ TestRender(
     <div>Column C</div>
   </div>
 );
+
+TestRender(
+  "Columns, rows, section styles should all work together",
+  <div align="center" border={{ horizontal: "#", vertical: "#" }}>
+    Some App
+    <br />
+    <div horizontal>
+      <div align="center" border={{ horizontal: "*", vertical: "*" }}>
+        ✔︎ Step 1
+        <br />
+        ◯ Step 2
+        <br />
+        ◯ Step 3
+      </div>
+      <div border={{ horizontal: "-", vertical: "|" }}>
+        Some messages for this app
+      </div>
+    </div>
+    <div align="center">
+      Some stuff for this app is done! 🤘
+      <br />
+      Heres some more informative stuff about your app
+      <br />
+      browser
+      <br />
+      ↙↗ ↖↘
+      <div horizontal>
+        <div align="center" border={{ horizontal: "-", vertical: "|" }}>
+          server
+          <br />
+          (initial response)
+          <br />
+          localhost:3000
+        </div>
+        <div align="center" border={{ horizontal: "-", vertical: "|" }}>
+          dev-server<br />(app bundle)<br />localhost:8080<br />websocket server
+          (for HMR)<br />localhost:8081
+        </div>
+      </div>
+    </div>
+  </div>
+);

src/__tests__/section-test.js

@@ -71,3 +71,56 @@ test("sections should be able to align text center", done => {
     "+"
   );
 });
+
+test("sections should be able to render a border", done => {
+  ReactCLI.render(
+    <div>
+      <div
+        align="center"
+        border={{
+          horizontal: "-",
+          vertical: "|",
+          cornerTopLeft: "*",
+          cornerTopRight: "*",
+          cornerBottomLeft: "*",
+          cornerBottomRight: "*"
+        }}
+      >
+        Test section with border
+      </div>
+    </div>,
+    undefined,
+    50,
+    outputString => {
+      expect(outputString).toMatchSnapshot();
+      done();
+    },
+    "+"
+  );
+
+  ReactCLI.render(
+    <div horizontal border={{ horizontal: "*", vertical: "*" }}>
+      Some Text
+      <div
+        align="center"
+        border={{
+          horizontal: "-",
+          vertical: "|",
+          cornerTopLeft: "*",
+          cornerTopRight: "*",
+          cornerBottomLeft: "*",
+          cornerBottomRight: "*"
+        }}
+      >
+        Test section with border
+      </div>
+    </div>,
+    undefined,
+    50,
+    outputString => {
+      expect(outputString).toMatchSnapshot();
+      done();
+    },
+    "+"
+  );
+});

src/components.js

@@ -0,0 +1,106 @@
+// @flow strict
+
+import wrapAnsiNewLine from "wrap-ansi";
+// this module is helpful for dealing with ansi characters, but it returns a
+// string with embedded new lines. We need it as an array, so we'll split it here
+const wrapAnsi = (input: string, columns: number): Array<string> =>
+  wrapAnsiNewLine(input, columns).split("\n");
+
+class Border {
+  vertical: ?string;
+  horizontal: ?string;
+  cornerTopLeft: ?string;
+  cornerTopRight: ?string;
+  cornerBottomLeft: ?string;
+  cornerBottomRight: ?string;
+
+  constructor({
+    vertical,
+    horizontal,
+    cornerTopLeft,
+    cornerTopRight,
+    cornerBottomLeft,
+    cornerBottomRight
+  }) {
+    this.vertical = vertical;
+    this.horizontal = horizontal;
+    this.cornerTopLeft = cornerTopLeft;
+    this.cornerTopRight = cornerTopRight;
+    this.cornerBottomLeft = cornerBottomLeft;
+    this.cornerBottomRight = cornerBottomRight;
+  }
+
+  horizontalWidth(): number {
+    return (
+      Math.max(
+        this.vertical ? this.vertical.length : 0,
+        this.cornerTopLeft ? this.cornerTopLeft.length : 0,
+        this.cornerBottomLeft ? this.cornerBottomLeft.length : 0
+      ) +
+      Math.max(
+        this.vertical ? this.vertical.length : 0,
+        this.cornerTopRight ? this.cornerTopRight.length : 0,
+        this.cornerBottomRight ? this.cornerBottomRight.length : 0
+      )
+    );
+  }
+
+  verticalHeight(): number {
+    return (
+      Math.max(
+        this.horizontal ? this.horizontal.length : 0,
+        this.cornerTopLeft ? this.cornerTopLeft.length : 0,
+        this.cornerTopRight ? this.cornerTopRight.length : 0
+      ) +
+      Math.max(
+        this.horizontal ? this.horizontal.length : 0,
+        this.cornerBottomLeft ? this.cornerBottomLeft.length : 0,
+        this.cornerBottomRight ? this.cornerBottomRight.length : 0
+      )
+    );
+  }
+}
+export class Section {
+  orientation: "vertical" | "horizontal";
+  align: "left" | "center" | "right";
+  children: Array<Section | Text | Break> = [];
+  border: Border;
+  static type: "div" = "div";
+
+  constructor({
+    useHorizontalOrientation = false,
+    align = "left",
+    border = {}
+  }: {
+    useHorizontalOrientation: boolean,
+    align: "left" | "center" | "right",
+    border: {
+      vertical?: string,
+      horizontal?: string,
+      cornerTopLeft?: string,
+      cornerTopRight?: string,
+      cornerBottomLeft?: string,
+      cornerBottomRight?: string
+    }
+  }) {
+    this.orientation = useHorizontalOrientation ? "horizontal" : "vertical";
+    this.align = align;
+    this.border = new Border(border);
+  }
+
+  convertTextToArray(text: Text, totalWidth: number): Array<string> {
+    return wrapAnsi(text.text, totalWidth - this.border.horizontalWidth());
+  }
+}
+
+export class Text {
+  text: string;
+
+  constructor(text: string) {
+    this.text = text;
+  }
+}
+
+export class Break {
+  static type: "br" = "br";
+}