Skip to content

Commit d4f29a5

Browse files
danezdanez
authored
docs(website): Add support for language selection (#423)
1 parent 889f0a9 commit d4f29a5

File tree

8 files changed

+2232
-1603
lines changed

8 files changed

+2232
-1603
lines changed

‎website/package.json

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,25 @@
1313
},
1414
"dependencies": {},
1515
"devDependencies": {
16-
"@babel/core": "^7.2.2",
17-
"@babel/plugin-proposal-class-properties": "^7.3.0",
18-
"@babel/preset-env": "^7.3.1",
19-
"@babel/preset-flow": "^7.0.0",
20-
"@babel/preset-react": "^7.0.0",
21-
"babel-loader": "^8.0.5",
22-
"codemirror": "^5.43.0",
23-
"css-loader": "^2.1.0",
16+
"@babel/core": "^7.8.3",
17+
"@babel/plugin-proposal-class-properties": "^7.8.3",
18+
"@babel/preset-env": "^7.8.3",
19+
"@babel/preset-flow": "^7.8.3",
20+
"@babel/preset-react": "^7.8.3",
21+
"babel-loader": "^8.0.6",
22+
"codemirror": "^5.50.2",
23+
"css-loader": "^3.4.2",
2424
"html-loader": "^0.5.5",
2525
"html-webpack-plugin": "^3.2.0",
26-
"less": "^3.9.0",
26+
"less": "^3.10.3",
2727
"less-loader": "^5.0.0",
28-
"mini-css-extract-plugin": "^0.6.0",
29-
"optimize-css-assets-webpack-plugin": "^5.0.1",
30-
"react": "^16.7.0",
31-
"react-dom": "^16.7.0",
32-
"terser-webpack-plugin": "^1.2.1",
33-
"webpack": "^4.29.0",
34-
"webpack-cli": "^3.2.1",
35-
"webpack-dev-server": "^3.1.14"
28+
"mini-css-extract-plugin": "^0.9.0",
29+
"optimize-css-assets-webpack-plugin": "^5.0.3",
30+
"react": "^16.12.0",
31+
"react-dom": "^16.12.0",
32+
"terser-webpack-plugin": "^2.3.2",
33+
"webpack": "^4.41.5",
34+
"webpack-cli": "^3.3.10",
35+
"webpack-dev-server": "^3.10.1"
3636
}
3737
}

‎website/src/components/App.js

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React from 'react';
2+
import Panel from './CodeMirrorPanel';
3+
import Header from './Header';
4+
import { parse } from 'react-docgen';
5+
6+
const codeSample = `import React, { Component } from 'react';
7+
import PropTypes from 'prop-types';
8+
9+
/**
10+
* General component description.
11+
*/
12+
class MyComponent extends Component {
13+
render() {
14+
// ...
15+
}
16+
}
17+
18+
MyComponent.propTypes = {
19+
/**
20+
* Description of prop "foo".
21+
*/
22+
foo: PropTypes.number,
23+
/**
24+
* Description of prop "bar" (a custom validation function).
25+
*/
26+
bar: function(props, propName, componentName) {
27+
// ...
28+
},
29+
baz: PropTypes.oneOfType([
30+
PropTypes.number,
31+
PropTypes.string
32+
]).isRequired,
33+
};
34+
35+
MyComponent.defaultProps = {
36+
foo: 42,
37+
bar: 21
38+
};
39+
40+
export default MyComponent;
41+
`;
42+
43+
const defaultPlugins = [
44+
'jsx',
45+
'asyncGenerators',
46+
'bigInt',
47+
'classProperties',
48+
'classPrivateProperties',
49+
'classPrivateMethods',
50+
['decorators', { decoratorsBeforeExport: false }],
51+
'doExpressions',
52+
'dynamicImport',
53+
'exportDefaultFrom',
54+
'exportNamespaceFrom',
55+
'functionBind',
56+
'functionSent',
57+
'importMeta',
58+
'logicalAssignment',
59+
'nullishCoalescingOperator',
60+
'numericSeparator',
61+
'objectRestSpread',
62+
'optionalCatchBinding',
63+
'optionalChaining',
64+
['pipelineOperator', { proposal: 'minimal' }],
65+
'throwExpressions',
66+
'topLevelAwait',
67+
];
68+
69+
export default class App extends React.Component {
70+
constructor() {
71+
super();
72+
this._jsonRef = React.createRef();
73+
74+
const options = this.buildOptions('js');
75+
this.state = {
76+
value: this.compile(codeSample, options),
77+
mode: 'application/json',
78+
content: codeSample,
79+
options,
80+
};
81+
}
82+
83+
compile(value, options) {
84+
return JSON.stringify(parse(value, null, null, options), null, 2);
85+
}
86+
87+
handleChange = value => {
88+
let result;
89+
let mode = 'text/plain';
90+
91+
try {
92+
result = this.compile(value, this.state.options);
93+
mode = 'application/json';
94+
} catch (err) {
95+
result = String(err);
96+
}
97+
this.setState({ value: result, mode, content: value });
98+
};
99+
100+
buildOptions(language) {
101+
const options = {
102+
babelrc: false,
103+
babelrcRoots: false,
104+
configFile: false,
105+
filename: 'playground.js',
106+
parserOptions: {
107+
plugins: [...defaultPlugins],
108+
},
109+
};
110+
switch (language) {
111+
case 'ts':
112+
options.parserOptions.plugins.push('typescript');
113+
options.filename = 'playground.tsx';
114+
break;
115+
case 'flow':
116+
options.parserOptions.plugins.push('flow');
117+
break;
118+
}
119+
120+
return options;
121+
}
122+
123+
handleLanguageChange = language => {
124+
this.setState({ options: this.buildOptions(language) }, () =>
125+
this.handleChange(this.state.content),
126+
);
127+
};
128+
129+
render() {
130+
return (
131+
<>
132+
<Header onLanguageChange={this.handleLanguageChange} />
133+
<div className="panels">
134+
<Panel
135+
value={this.state.content}
136+
mode="text/jsx"
137+
codeSample={codeSample}
138+
onChange={this.handleChange}
139+
/>
140+
<Panel
141+
readOnly={true}
142+
ref={this._jsonRef}
143+
value={this.state.value}
144+
mode={this.state.mode}
145+
/>
146+
</div>
147+
</>
148+
);
149+
}
150+
}

‎website/src/CodeMirrorPanel.js renamed to ‎website/src/components/CodeMirrorPanel.js

File renamed without changes.

‎website/src/components/Header.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
3+
export default class Header extends React.Component {
4+
render() {
5+
return (
6+
<header className="page-header">
7+
<h1 className="page-title">
8+
react-docgen: <span className="subtitle">PLAYGROUND</span>{' '}
9+
<select
10+
className="flavor-select"
11+
onChange={event => this.props.onLanguageChange(event.target.value)}
12+
>
13+
<option value="js">JavaScript</option>
14+
<option value="ts">TypeScript</option>
15+
<option value="flow">Flow</option>
16+
</select>
17+
</h1>
18+
<a className="nav-link" href="https://github.com/reactjs/react-docgen">
19+
<span>View on Github</span>
20+
<svg
21+
version="1.1"
22+
width="16"
23+
height="16"
24+
viewBox="0 0 16 16"
25+
className="octicon octicon-mark-github"
26+
aria-hidden="true"
27+
>
28+
<path
29+
fillRule="evenodd"
30+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
31+
></path>
32+
</svg>
33+
</a>
34+
</header>
35+
);
36+
}
37+
}

‎website/src/index.html

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,5 @@
1212
<meta property="og:type" content="article">
1313
</head>
1414
<body>
15-
<header class="page-header">
16-
<h1 class="page-title">react-docgen: <span class="subtitle">PLAYGROUND</span></h1>
17-
<a class="nav-link" href="https://github.com/reactjs/react-docgen">
18-
<span class="view-github">View on Github</span>
19-
<svg
20-
version="1.1"
21-
width="16"
22-
height="16"
23-
viewBox="0 0 16 16"
24-
class="octicon octicon-mark-github"
25-
aria-hidden="true"
26-
>
27-
<path
28-
fill-rule="evenodd"
29-
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
30-
></path>
31-
</svg>
32-
</div>
33-
</header>
3415
<div id="root"></div>
3516
</body>

‎website/src/index.js

Lines changed: 1 addition & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,8 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import Panel from './CodeMirrorPanel';
4-
import { parse } from 'react-docgen';
3+
import App from './components/App';
54

65
import 'codemirror/lib/codemirror.css';
76
import './react-docgen.less';
87

9-
const codeSample = `import React, { Component } from 'react';
10-
import PropTypes from 'prop-types';
11-
12-
/**
13-
* General component description.
14-
*/
15-
class MyComponent extends Component {
16-
render() {
17-
// ...
18-
}
19-
}
20-
21-
MyComponent.propTypes = {
22-
/**
23-
* Description of prop "foo".
24-
*/
25-
foo: PropTypes.number,
26-
/**
27-
* Description of prop "bar" (a custom validation function).
28-
*/
29-
bar: function(props, propName, componentName) {
30-
// ...
31-
},
32-
baz: PropTypes.oneOfType([
33-
PropTypes.number,
34-
PropTypes.string
35-
]).isRequired,
36-
};
37-
38-
MyComponent.defaultProps = {
39-
foo: 42,
40-
bar: 21
41-
};
42-
43-
export default MyComponent;
44-
`;
45-
46-
class App extends React.Component {
47-
constructor() {
48-
super();
49-
this._jsonRef = React.createRef();
50-
this.state = {
51-
value: this.compile(codeSample),
52-
mode: 'application/json',
53-
content: codeSample,
54-
};
55-
}
56-
57-
compile(value) {
58-
return JSON.stringify(parse(value), null, 2);
59-
}
60-
61-
handleChange = value => {
62-
let result;
63-
let mode = 'text/plain';
64-
65-
try {
66-
result = this.compile(value);
67-
mode = 'application/json';
68-
} catch (err) {
69-
result = String(err);
70-
}
71-
this.setState({ value: result, mode, content: value });
72-
};
73-
74-
render() {
75-
return (
76-
<>
77-
<Panel
78-
value={this.state.content}
79-
mode="text/jsx"
80-
codeSample={codeSample}
81-
onChange={this.handleChange}
82-
/>
83-
<Panel
84-
readOnly={true}
85-
ref={this._jsonRef}
86-
value={this.state.value}
87-
mode={this.state.mode}
88-
/>
89-
</>
90-
);
91-
}
92-
}
93-
948
ReactDOM.render(<App />, document.getElementById('root'));

‎website/src/react-docgen.less

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,15 @@ a {
2525
}
2626
}
2727

28+
#root {
29+
padding: 0;
30+
margin: 0;
31+
height: 100vh;
32+
}
33+
2834
.page-header {
2935
height: 40px;
30-
padding: .5rem 1.5rem;
36+
padding: 0.5rem 1.5rem;
3137
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
3238
display: flex;
3339
justify-content: flex-end !important;
@@ -41,10 +47,15 @@ a {
4147
}
4248
}
4349

50+
.flavor-select {
51+
vertical-align: middle;
52+
}
53+
4454
.octicon {
4555
display: inline-block;
4656
vertical-align: text-top !important;
4757
fill: currentColor;
58+
margin-left: 0.3rem;
4859
}
4960

5061
.nav-link {
@@ -57,11 +68,8 @@ a {
5768
text-decoration: none;
5869
}
5970
}
60-
.view-gituhb {
61-
display: inline !important;
62-
}
6371

64-
#root {
72+
.panels {
6573
height: calc(100% - 41px - 1rem);
6674
overflow: hidden;
6775
display: flex;

0 commit comments

Comments
 (0)