Skip to content

Commit f37e277

Browse files
captainsafiacaptainsafia
committed
Migrate contents from monorepo
1 parent bb915b9 commit f37e277

File tree

8 files changed

+5648
-4
lines changed

8 files changed

+5648
-4
lines changed

‎README.md

Lines changed: 82 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,86 @@
1-
# ANSI to React
1+
# ansi-to-react
22

3-
:warning:
3+
This package convert ANSI escape codes to formatted text output for React.
44

5-
This repository is now in the nteract/nteract monorepo, under [packages/ansi-to-react](https://github.com/nteract/nteract/tree/master/packages/ansi-to-react). Same npm package, new location that's easier for us to maintain (you're welcome too!).
5+
## Installation
66

7-
:warning:
7+
```
8+
$ yarn add ansi-to-react
9+
```
810

11+
```
12+
$ npm install --save ansi-to-react
13+
```
14+
15+
## Usage
16+
17+
### Basic
18+
19+
The example below shows how we can use this package to render a string with ANSI escape codes.
20+
21+
```javascript
22+
import Ansi from "ansi-to-react";
23+
24+
export function () => {
25+
return <Ansi>
26+
{'\u001b[34mhello world'}
27+
</Ansi>;
28+
};
29+
```
30+
31+
Will render
32+
33+
```javascript
34+
<code>
35+
<span style="color:rgb(0, 0, 187)">hello world</span>
36+
</code>
37+
```
38+
39+
### Classes
40+
41+
Style with classes instead of `style` attribute.
42+
43+
```javascript
44+
<Ansi useClasses>{"\u001b[34mhello world"}</Ansi>
45+
```
46+
47+
Will render
48+
49+
```javascript
50+
<code>
51+
<span class="ansi-blue-fg">hello world</span>
52+
</code>
53+
```
54+
55+
#### Class Names
56+
57+
| Font color | Background Color |
58+
| ---------------------- | ---------------- |
59+
| ansi-black-fg | ansi-black-bg |
60+
| ansi-red-fg | ansi-red-bg |
61+
| ansi-green-fg | ansi-green-bg |
62+
| ansi-yellow-fg | ansi-yellow-bg |
63+
| ansi-blue-fg | ansi-blue-bg |
64+
| ansi-magenta-fg | ansi-magenta-bg |
65+
| ansi-cyan-fg | ansi-cyan-bg |
66+
| ansi-white-fg | ansi-white-bg |
67+
| ansi-bright-black-fg |
68+
| ansi-bright-red-fg |
69+
| ansi-bright-green-fg |
70+
| ansi-bright-yellow-fg |
71+
| ansi-bright-blue-fg |
72+
| ansi-bright-magenta-fg |
73+
| ansi-bright-cyan-fg |
74+
| ansi-bright-white-fg |
75+
76+
## Documentation
77+
78+
We're working on adding more documentation for this component. Stay tuned by watching this repository!
79+
80+
## Support
81+
82+
If you experience an issue while using this package or have a feature request, please file an issue on the [issue board](https://github.com/nteract/ansi-to-react/issues),
83+
84+
## License
85+
86+
[BSD-3-Clause](https://choosealicense.com/licenses/bsd-3-clause/)

‎__tests__/index.spec.tsx

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import { shallow } from "enzyme";
2+
import React from "react";
3+
4+
import Ansi from "../src/index";
5+
6+
const GREEN_FG = "\u001b[32m";
7+
const YELLOW_BG = "\u001b[43m";
8+
const BOLD = "\u001b[1m";
9+
const RESET = "\u001b[0;m";
10+
11+
describe("Ansi", () => {
12+
test("hello world", () => {
13+
const el = shallow(React.createElement(Ansi, null, "hello world"));
14+
expect(el).not.toBeNull();
15+
expect(el.text()).toBe("hello world");
16+
});
17+
18+
test("can color", () => {
19+
const el = shallow(
20+
React.createElement(Ansi, null, `hello ${GREEN_FG}world`)
21+
);
22+
expect(el).not.toBeNull();
23+
expect(el.text()).toBe("hello world");
24+
expect(el.html()).toBe(
25+
'<code><span>hello </span><span style="color:rgb(0, 187, 0)">world</span></code>'
26+
);
27+
});
28+
29+
test("can have className", () => {
30+
const el = shallow(
31+
React.createElement(Ansi, { className: "my-class" }, "hello world")
32+
);
33+
expect(el).not.toBeNull();
34+
expect(el.text()).toBe("hello world");
35+
expect(el.html()).toBe(
36+
'<code class="my-class"><span>hello world</span></code>'
37+
);
38+
});
39+
40+
test("can nest", () => {
41+
const el = shallow(
42+
React.createElement(
43+
Ansi,
44+
null,
45+
`hello ${GREEN_FG}wo${YELLOW_BG}rl${RESET}d`
46+
)
47+
);
48+
expect(el).not.toBeNull();
49+
expect(el.text()).toBe("hello world");
50+
expect(el.html()).toBe(
51+
'<code><span>hello </span><span style="color:rgb(0, 187, 0)">wo</span><span style="background-color:rgb(187, 187, 0);color:rgb(0, 187, 0)">rl</span><span>d</span></code>'
52+
);
53+
});
54+
55+
test("can handle carriage symbol", () => {
56+
const el = shallow(
57+
React.createElement(
58+
Ansi,
59+
null,
60+
"this sentence\rthat\nwill make you pause"
61+
)
62+
);
63+
expect(el).not.toBeNull();
64+
expect(el.text()).toBe("that sentence\nwill make you pause");
65+
});
66+
67+
test("can linkify", () => {
68+
const el = shallow(
69+
React.createElement(
70+
Ansi,
71+
{ linkify: true },
72+
"this is a link: https://nteract.io/"
73+
)
74+
);
75+
expect(el).not.toBeNull();
76+
expect(el.text()).toBe("this is a link: https://nteract.io/");
77+
expect(el.html()).toBe(
78+
'<code><span>this is a link: <a href="https://nteract.io/" target="_blank">https://nteract.io/</a></span></code>'
79+
);
80+
});
81+
82+
test("can linkify links starting with www.", () => {
83+
const el = shallow(
84+
React.createElement(
85+
Ansi,
86+
{ linkify: true },
87+
"this is a link: www.google.com"
88+
)
89+
);
90+
expect(el).not.toBeNull();
91+
expect(el.text()).toBe("this is a link: www.google.com");
92+
expect(el.html()).toBe(
93+
'<code><span>this is a link: <a href="http://www.google.com" target="_blank">www.google.com</a></span></code>'
94+
);
95+
});
96+
97+
test("doesn't linkify partial matches", () => {
98+
const el = shallow(
99+
React.createElement(
100+
Ansi,
101+
{ linkify: true },
102+
"cant click this link: 'http://www.google.com'"
103+
)
104+
);
105+
expect(el).not.toBeNull();
106+
expect(el.text()).toBe("cant click this link: 'http://www.google.com'");
107+
expect(el.html()).toBe(
108+
"<code><span>cant click this link: &#x27;http://www.google.com&#x27;</span></code>"
109+
);
110+
});
111+
112+
test("can distinguish URL-ish text", () => {
113+
const el = shallow(
114+
React.createElement(
115+
Ansi,
116+
{ linkify: true },
117+
"<transport.model.TransportInfo"
118+
)
119+
);
120+
expect(el).not.toBeNull();
121+
expect(el.text()).toBe("<transport.model.TransportInfo");
122+
});
123+
124+
test("can distinguish URL-ish text", () => {
125+
const el = shallow(
126+
React.createElement(
127+
Ansi,
128+
{ linkify: true },
129+
"<module 'something' from '/usr/local/lib/python2.7/dist-packages/something/__init__.pyc'>"
130+
)
131+
);
132+
expect(el).not.toBeNull();
133+
expect(el.text()).toBe(
134+
"<module 'something' from '/usr/local/lib/python2.7/dist-packages/something/__init__.pyc'>"
135+
);
136+
});
137+
138+
describe("useClasses options", () => {
139+
test("can add the font color class", () => {
140+
const el = shallow(
141+
React.createElement(
142+
Ansi,
143+
{ useClasses: true },
144+
`hello ${GREEN_FG}world`
145+
)
146+
);
147+
expect(el).not.toBeNull();
148+
expect(el.text()).toBe("hello world");
149+
expect(el.html()).toBe(
150+
'<code><span>hello </span><span class="ansi-green-fg">world</span></code>'
151+
);
152+
});
153+
154+
test("can add the background color class", () => {
155+
const el = shallow(
156+
React.createElement(
157+
Ansi,
158+
{ useClasses: true },
159+
`hello ${YELLOW_BG}world`
160+
)
161+
);
162+
expect(el).not.toBeNull();
163+
expect(el.text()).toBe("hello world");
164+
expect(el.html()).toBe(
165+
'<code><span>hello </span><span class="ansi-yellow-bg">world</span></code>'
166+
);
167+
});
168+
169+
test("can add font and background color classes", () => {
170+
const el = shallow(
171+
React.createElement(
172+
Ansi,
173+
{ useClasses: true },
174+
`hello ${GREEN_FG}${YELLOW_BG}world`
175+
)
176+
);
177+
expect(el).not.toBeNull();
178+
expect(el.text()).toBe("hello world");
179+
expect(el.html()).toBe(
180+
'<code><span>hello </span><span class="ansi-yellow-bg ansi-green-fg">world</span></code>'
181+
);
182+
});
183+
184+
test("can add text decoration classes", () => {
185+
const el = shallow(
186+
React.createElement(
187+
Ansi,
188+
{ useClasses: true },
189+
`hello ${GREEN_FG}${BOLD}world${RESET}!`
190+
)
191+
);
192+
expect(el).not.toBeNull();
193+
expect(el.text()).toBe("hello world!");
194+
expect(el.html()).toBe(
195+
'<code><span>hello </span><span class="ansi-green-fg ansi-bold">world</span><span>!</span></code>'
196+
);
197+
});
198+
199+
test("can use useClasses with linkify", () => {
200+
const el = shallow(
201+
React.createElement(
202+
Ansi,
203+
{ linkify: true, useClasses: true },
204+
`${GREEN_FG}this is a link: https://nteract.io/`
205+
)
206+
);
207+
expect(el).not.toBeNull();
208+
expect(el.text()).toBe("this is a link: https://nteract.io/");
209+
expect(el.html()).toBe(
210+
'<code><span class="ansi-green-fg">this is a link: <a href="https://nteract.io/" target="_blank">https://nteract.io/</a></span></code>'
211+
);
212+
});
213+
});
214+
});

‎jest.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
transform: {
3+
"^.+\\.(ts|tsx)$": "ts-jest"
4+
},
5+
setupFilesAfterEnv: ["./test-setup.js"]
6+
};

0 commit comments

Comments
 (0)