Skip to content
This repository was archived by the owner on Apr 8, 2019. It is now read-only.

Commit 9ec0aea

Browse files
mgripmgrip
authored
Merge pull request #1 from mgrip/section-refactor
Refactor sections
2 parents 9076fe4 + 9ab7d2a commit 9ec0aea

8 files changed

Lines changed: 621 additions & 192 deletions

File tree

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,23 @@ exports[`sections should be able to align text right 1`] = `
1515
"
1616
`;
1717

18+
exports[`sections should be able to render a border 1`] = `
19+
"--------------------------------------------------
20+
|++++++++++++Test section with border++++++++++++|
21+
--------------------------------------------------
22+
"
23+
`;
24+
25+
exports[`sections should be able to render a border 2`] = `
26+
"**************************************************
27+
*Some Text+++++++++++++++-------------------------*
28+
*++++++++++++++++++++++++|+++Test section with+++|*
29+
*++++++++++++++++++++++++|++++++++border+++++++++|*
30+
*++++++++++++++++++++++++-------------------------*
31+
**************************************************
32+
"
33+
`;
34+
1835
exports[`sections should be able to render horizontally 1`] = `
1936
"Column 1+++++++++++++++++Column 2+++++++++++++++++
2037
"

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`Columns and rows should work together 1`] = `
44
"Some text+++++++++++++++++++++++++++++++++++++++++
5-
Column A++++++++Column B++++++++Column C++++++++
5+
Column A++++++++Column B++++++++Column C++++++++++
66
Other text++++++++++++++++++++++++++++++++++++++++
77
"
88
`;
@@ -18,3 +18,27 @@ exports[`Columns should work nested within other columns 1`] = `
1818
++++++++++++++++++wrap++++++++++++++++++++++++++
1919
"
2020
`;
21+
22+
exports[`Columns, rows, section styles should all work together 1`] = `
23+
"##################################################
24+
#++++++++++++++++++++Some App++++++++++++++++++++#
25+
#*************************-------------------------#
26+
#*+++++++✔︎ Step 1+++++++*|Some messages for this+|#
27+
#*+++++++◯ Step 2++++++++*|app++++++++++++++++++++|#
28+
#*+++++++◯ Step 3++++++++*-------------------------#
29+
#*************************+++++++++++++++++++++++++#
30+
#+++++++Some stuff for this app is done! 🤘++++++++#
31+
#+Heres some more informative stuff about your app+#
32+
#+++++++++++++++++++++browser++++++++++++++++++++++#
33+
#++++++++++++++++++++++↙↗ ↖↘+++++++++++++++++++++++#
34+
#--------------------------------------------------#
35+
#|++++++++server+++++++++||++++++dev-server+++++++|#
36+
#|++(initial response)+++||+++++(app bundle)++++++|#
37+
#|++++localhost:3000+++++||++++localhost:8080+++++|#
38+
#-------------------------|+websocket server (for+|#
39+
#+++++++++++++++++++++++++|+++++++++HMR)++++++++++|#
40+
#+++++++++++++++++++++++++|++++localhost:8081+++++|#
41+
#+++++++++++++++++++++++++-------------------------#
42+
##################################################
43+
"
44+
`;

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,45 @@ TestRender(
3131
<div>Column C</div>
3232
</div>
3333
);
34+
35+
TestRender(
36+
"Columns, rows, section styles should all work together",
37+
<div align="center" border={{ horizontal: "#", vertical: "#" }}>
38+
Some App
39+
<br />
40+
<div horizontal>
41+
<div align="center" border={{ horizontal: "*", vertical: "*" }}>
42+
✔︎ Step 1
43+
<br />
44+
◯ Step 2
45+
<br />
46+
◯ Step 3
47+
</div>
48+
<div border={{ horizontal: "-", vertical: "|" }}>
49+
Some messages for this app
50+
</div>
51+
</div>
52+
<div align="center">
53+
Some stuff for this app is done! 🤘
54+
<br />
55+
Heres some more informative stuff about your app
56+
<br />
57+
browser
58+
<br />
59+
↙↗ ↖↘
60+
<div horizontal>
61+
<div align="center" border={{ horizontal: "-", vertical: "|" }}>
62+
server
63+
<br />
64+
(initial response)
65+
<br />
66+
localhost:3000
67+
</div>
68+
<div align="center" border={{ horizontal: "-", vertical: "|" }}>
69+
dev-server<br />(app bundle)<br />localhost:8080<br />websocket server
70+
(for HMR)<br />localhost:8081
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
);

‎src/__tests__/section-test.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,56 @@ test("sections should be able to align text center", done => {
7171
"+"
7272
);
7373
});
74+
75+
test("sections should be able to render a border", done => {
76+
ReactCLI.render(
77+
<div>
78+
<div
79+
align="center"
80+
border={{
81+
horizontal: "-",
82+
vertical: "|",
83+
cornerTopLeft: "*",
84+
cornerTopRight: "*",
85+
cornerBottomLeft: "*",
86+
cornerBottomRight: "*"
87+
}}
88+
>
89+
Test section with border
90+
</div>
91+
</div>,
92+
undefined,
93+
50,
94+
outputString => {
95+
expect(outputString).toMatchSnapshot();
96+
done();
97+
},
98+
"+"
99+
);
100+
101+
ReactCLI.render(
102+
<div horizontal border={{ horizontal: "*", vertical: "*" }}>
103+
Some Text
104+
<div
105+
align="center"
106+
border={{
107+
horizontal: "-",
108+
vertical: "|",
109+
cornerTopLeft: "*",
110+
cornerTopRight: "*",
111+
cornerBottomLeft: "*",
112+
cornerBottomRight: "*"
113+
}}
114+
>
115+
Test section with border
116+
</div>
117+
</div>,
118+
undefined,
119+
50,
120+
outputString => {
121+
expect(outputString).toMatchSnapshot();
122+
done();
123+
},
124+
"+"
125+
);
126+
});

‎src/components.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// @flow strict
2+
3+
import wrapAnsiNewLine from "wrap-ansi";
4+
// this module is helpful for dealing with ansi characters, but it returns a
5+
// string with embedded new lines. We need it as an array, so we'll split it here
6+
const wrapAnsi = (input: string, columns: number): Array<string> =>
7+
wrapAnsiNewLine(input, columns).split("\n");
8+
9+
class Border {
10+
vertical: ?string;
11+
horizontal: ?string;
12+
cornerTopLeft: ?string;
13+
cornerTopRight: ?string;
14+
cornerBottomLeft: ?string;
15+
cornerBottomRight: ?string;
16+
17+
constructor({
18+
vertical,
19+
horizontal,
20+
cornerTopLeft,
21+
cornerTopRight,
22+
cornerBottomLeft,
23+
cornerBottomRight
24+
}) {
25+
this.vertical = vertical;
26+
this.horizontal = horizontal;
27+
this.cornerTopLeft = cornerTopLeft;
28+
this.cornerTopRight = cornerTopRight;
29+
this.cornerBottomLeft = cornerBottomLeft;
30+
this.cornerBottomRight = cornerBottomRight;
31+
}
32+
33+
horizontalWidth(): number {
34+
return (
35+
Math.max(
36+
this.vertical ? this.vertical.length : 0,
37+
this.cornerTopLeft ? this.cornerTopLeft.length : 0,
38+
this.cornerBottomLeft ? this.cornerBottomLeft.length : 0
39+
) +
40+
Math.max(
41+
this.vertical ? this.vertical.length : 0,
42+
this.cornerTopRight ? this.cornerTopRight.length : 0,
43+
this.cornerBottomRight ? this.cornerBottomRight.length : 0
44+
)
45+
);
46+
}
47+
48+
verticalHeight(): number {
49+
return (
50+
Math.max(
51+
this.horizontal ? this.horizontal.length : 0,
52+
this.cornerTopLeft ? this.cornerTopLeft.length : 0,
53+
this.cornerTopRight ? this.cornerTopRight.length : 0
54+
) +
55+
Math.max(
56+
this.horizontal ? this.horizontal.length : 0,
57+
this.cornerBottomLeft ? this.cornerBottomLeft.length : 0,
58+
this.cornerBottomRight ? this.cornerBottomRight.length : 0
59+
)
60+
);
61+
}
62+
}
63+
export class Section {
64+
orientation: "vertical" | "horizontal";
65+
align: "left" | "center" | "right";
66+
children: Array<Section | Text | Break> = [];
67+
border: Border;
68+
static type: "div" = "div";
69+
70+
constructor({
71+
useHorizontalOrientation = false,
72+
align = "left",
73+
border = {}
74+
}: {
75+
useHorizontalOrientation: boolean,
76+
align: "left" | "center" | "right",
77+
border: {
78+
vertical?: string,
79+
horizontal?: string,
80+
cornerTopLeft?: string,
81+
cornerTopRight?: string,
82+
cornerBottomLeft?: string,
83+
cornerBottomRight?: string
84+
}
85+
}) {
86+
this.orientation = useHorizontalOrientation ? "horizontal" : "vertical";
87+
this.align = align;
88+
this.border = new Border(border);
89+
}
90+
91+
convertTextToArray(text: Text, totalWidth: number): Array<string> {
92+
return wrapAnsi(text.text, totalWidth - this.border.horizontalWidth());
93+
}
94+
}
95+
96+
export class Text {
97+
text: string;
98+
99+
constructor(text: string) {
100+
this.text = text;
101+
}
102+
}
103+
104+
export class Break {
105+
static type: "br" = "br";
106+
}

0 commit comments

Comments
 (0)