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

Commit ef2c4bc

Browse files
author
Mike Grip
committed
initial commit
0 parents  commit ef2c4bc

37 files changed

Lines changed: 6387 additions & 0 deletions

‎.eslintrc.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": [
4+
"eslint:recommended",
5+
"plugin:prettier/recommended",
6+
"plugin:jest/recommended",
7+
"plugin:flowtype/recommended",
8+
"plugin:react/recommended"
9+
],
10+
"plugins": ["prettier", "jest", "import", "flowtype", "react"],
11+
"root": true,
12+
"env": {
13+
"es6": true,
14+
"node": true,
15+
"jest": true
16+
}
17+
}

‎.flowconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
[ignore]
2+
3+
[include]
4+
5+
[libs]
6+
7+
[lints]
8+
9+
[options]
10+
11+
[strict]
12+
nonstrict-import
13+
unclear-type
14+
unsafe-getters-setters
15+
untyped-import
16+
untyped-type-import

‎.gitignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/flow-typed/npm
6+
7+
# misc
8+
.DS_Store
9+
.env
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*

‎.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"printWidth": 80
3+
}

‎README.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# ReactCLI 🚞
2+
3+
👋
4+
5+
ReactCLI is a react renderer for the command line. All of the benefits of React, right in your terminal.
6+
7+
## Getting started
8+
9+
### yarn
10+
11+
```bash
12+
yarn add react-cli-renderer
13+
```
14+
15+
### npm
16+
17+
```bash
18+
npm install --save react-cli-renderer
19+
```
20+
21+
### How it works
22+
23+
```javascript
24+
const React = require("react");
25+
const ReactCLI = require("react-cli-renderer");
26+
27+
ReactCLI.render(
28+
<div horizontal>
29+
First column
30+
<div>
31+
Second column
32+
<div>
33+
First row
34+
<br />
35+
Second row
36+
</div>
37+
</div>
38+
</div>
39+
);
40+
```
41+
42+
### Details
43+
44+
#### Premise
45+
46+
ReactCLI is analogous to ReactDOM or ReactNative. It takes the tree of nodes determined by React and the React reconciler, and renders that content to the command line. This means that you get all of the core features of React for free, like stateful components, context, refs, etc - in addition to being able to use third party libraries for things like state management.
47+
48+
#### Components
49+
50+
ReactCLI provides two components for building command line interfaces.
51+
52+
- div
53+
A new section is denoted by `div`. A section can either be vertical, or horizontal. The children of a section can be a mix of text, or more sections. A section can also align text left, right, or center.
54+
55+
```javascript
56+
<div horizontal>
57+
<div>Column 1</div>
58+
<div>Column 2</div>
59+
</div>
60+
```
61+
62+
- break
63+
Break components allow you to define columns and/or rows within a section.
64+
65+
```javascript
66+
<div>
67+
Row 1
68+
<br />
69+
Row 2
70+
</div>
71+
```
72+
73+
#
74+
75+
Contributions welcome!
76+
77+
### 👨‍🎤👩‍🔬👨‍🎨
78+
79+
#

‎jest.config.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
"use strict";
2+
3+
const ignorePatterns = ["node_modules", "flow-typed", "lib"];
4+
5+
module.exports = {
6+
projects: [
7+
{
8+
displayName: "test",
9+
testMatch: ["<rootDir>/**/__tests__/**/*.js"],
10+
testPathIgnorePatterns: [...ignorePatterns, "test-render"]
11+
},
12+
{
13+
runner: "jest-runner-flowtype",
14+
displayName: "flow",
15+
testMatch: ["<rootDir>/**/*.js"],
16+
testPathIgnorePatterns: ignorePatterns
17+
},
18+
{
19+
runner: "jest-runner-eslint",
20+
displayName: "lint",
21+
testMatch: ["<rootDir>/**/*.js"],
22+
testPathIgnorePatterns: ignorePatterns
23+
}
24+
]
25+
};

‎lib/__tests__/integration-test.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
"use strict";
2+
3+
var _react = require("react");
4+
5+
var _react2 = _interopRequireDefault(_react);
6+
7+
var _index = require("../index");
8+
9+
var _index2 = _interopRequireDefault(_index);
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12+
13+
// strict
14+
15+
test("base console test", function (done) {
16+
_index2.default.render(_react2.default.createElement(
17+
"div",
18+
{ horizontal: true },
19+
"1st column",
20+
_react2.default.createElement("br", null),
21+
"2nd column",
22+
_react2.default.createElement("br", null),
23+
"3rd column"
24+
), function (output) {
25+
expect(output).toMatchSnapshot();
26+
done();
27+
}, undefined, "+");
28+
});
29+
30+
test("base console rows", function (done) {
31+
_index2.default.render(_react2.default.createElement(
32+
"div",
33+
null,
34+
"1st row",
35+
_react2.default.createElement("br", null),
36+
"2nd row",
37+
_react2.default.createElement("br", null),
38+
"3rd row"
39+
), function (output) {
40+
expect(output).toMatchSnapshot();
41+
done();
42+
}, undefined, "+");
43+
});
44+
45+
test("nested", function (done) {
46+
_index2.default.render(_react2.default.createElement(
47+
"div",
48+
null,
49+
"Some text",
50+
_react2.default.createElement(
51+
"div",
52+
{ horizontal: true },
53+
_react2.default.createElement(
54+
"div",
55+
null,
56+
"Column A"
57+
),
58+
_react2.default.createElement(
59+
"div",
60+
null,
61+
"Column B"
62+
),
63+
_react2.default.createElement(
64+
"div",
65+
null,
66+
"Column C"
67+
)
68+
),
69+
"Other text"
70+
), function (output) {
71+
expect(output).toMatchSnapshot();
72+
done();
73+
}, undefined, "+");
74+
});
75+
76+
test("nested 2", function (done) {
77+
_index2.default.render(_react2.default.createElement(
78+
"div",
79+
{ horizontal: true },
80+
_react2.default.createElement(
81+
"div",
82+
null,
83+
"Column A"
84+
),
85+
_react2.default.createElement(
86+
"div",
87+
null,
88+
"Column B",
89+
_react2.default.createElement(
90+
"div",
91+
{ horizontal: true },
92+
"Some other text that should probably wrap",
93+
_react2.default.createElement("br", null),
94+
"And heres the other column"
95+
)
96+
),
97+
_react2.default.createElement(
98+
"div",
99+
null,
100+
"Column C"
101+
)
102+
), function (output) {
103+
expect(output).toMatchSnapshot();
104+
done();
105+
}, undefined, "+");
106+
});

‎lib/__tests__/integration-tests/basic-test.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
"use strict";
2+
3+
var _react = require("react");
4+
5+
var _react2 = _interopRequireDefault(_react);
6+
7+
var _testRender = require("./test-render");
8+
9+
var _testRender2 = _interopRequireDefault(_testRender);
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12+
13+
// strict
14+
15+
(0, _testRender2.default)("Renderer should output text", _react2.default.createElement(
16+
"div",
17+
null,
18+
"Basic test"
19+
));

‎lib/__tests__/integration-tests/columns-test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use strict";
2+
3+
var _react = require("react");
4+
5+
var _react2 = _interopRequireDefault(_react);
6+
7+
var _testRender = require("./test-render");
8+
9+
var _testRender2 = _interopRequireDefault(_testRender);
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12+
13+
// strict
14+
15+
(0, _testRender2.default)("Horizontal sections should render as columns", _react2.default.createElement(
16+
"div",
17+
{ horizontal: true },
18+
"1st column",
19+
_react2.default.createElement("br", null),
20+
"2nd column",
21+
_react2.default.createElement("br", null),
22+
"3rd column"
23+
));

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
"use strict";
2+
3+
var _react = require("react");
4+
5+
var _react2 = _interopRequireDefault(_react);
6+
7+
var _testRender = require("./test-render");
8+
9+
var _testRender2 = _interopRequireDefault(_testRender);
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12+
13+
// strict
14+
15+
(0, _testRender2.default)("Columns and rows should work together", _react2.default.createElement(
16+
"div",
17+
null,
18+
"Some text",
19+
_react2.default.createElement(
20+
"div",
21+
{ horizontal: true },
22+
_react2.default.createElement(
23+
"div",
24+
null,
25+
"Column A"
26+
),
27+
_react2.default.createElement(
28+
"div",
29+
null,
30+
"Column B"
31+
),
32+
_react2.default.createElement(
33+
"div",
34+
null,
35+
"Column C"
36+
)
37+
),
38+
"Other text"
39+
));
40+
41+
(0, _testRender2.default)("Columns should work nested within other columns", _react2.default.createElement(
42+
"div",
43+
{ horizontal: true },
44+
_react2.default.createElement(
45+
"div",
46+
null,
47+
"Column A"
48+
),
49+
_react2.default.createElement(
50+
"div",
51+
null,
52+
"Column B",
53+
_react2.default.createElement(
54+
"div",
55+
{ horizontal: true, align: "center" },
56+
"Some other text that should probably wrap",
57+
_react2.default.createElement("br", null),
58+
"And heres the other column"
59+
)
60+
),
61+
_react2.default.createElement(
62+
"div",
63+
null,
64+
"Column C"
65+
)
66+
));

0 commit comments

Comments
 (0)