Skip to content

Commit 628041e

Browse files
danezdanez
authored
Create react-docgen playground website (#322)
* Create react-docgen playground website * Fix name of browserlist file * Remove logfile
1 parent dde83eb commit 628041e

14 files changed

+6807
-12
lines changed

‎.eslintignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
src/__tests__/fixtures/
22
dist/
3-
flow-typed/
3+
flow-typed/
4+
website/node_modules
5+
website/dist/

‎.eslintrc.js

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
module.exports = {
22
parser: 'babel-eslint',
3-
extends: [
4-
'eslint:recommended',
5-
'prettier'
6-
],
7-
plugins:[
8-
'prettier'
9-
],
3+
extends: ['eslint:recommended', 'prettier'],
4+
plugins: ['prettier'],
105
rules: {
116
strict: ['error', 'never'],
127
'no-shadow': 'error',
@@ -16,11 +11,21 @@ module.exports = {
1611
},
1712
env: {
1813
node: true,
19-
es6: true
14+
es6: true,
2015
},
2116
globals: {
2217
ASTNode: true,
2318
NodePath: true,
24-
Recast: true
25-
}
26-
}
19+
Recast: true,
20+
},
21+
overrides: [
22+
{
23+
files: 'website/**/*.js',
24+
env: { browser: true },
25+
rules: {
26+
// conflicts with jsx
27+
'no-unused-vars': 'off',
28+
},
29+
},
30+
],
31+
};

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@
22
node_modules/
33
.idea/
44
coverage/
5+
/website/dist
6+
yarn-error.log

‎.travis.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,13 @@ cache:
1111
- ".eslintcache"
1212
- "node_modules"
1313
script: yarn test:ci
14+
15+
after_success: yarn build:website
16+
deploy:
17+
provider: pages
18+
skip_cleanup: true
19+
github_token: $GITHUB_DEPLOY_TOKEN
20+
local_dir: website/dist
21+
on:
22+
branch: master
23+
node: "10"

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,12 @@
2121
"main": "dist/main.js",
2222
"scripts": {
2323
"build": "rimraf dist/ && babel src/ --out-dir dist/ --ignore **/__tests__,**/__mocks__,**/src/types.js",
24+
"build:website":"cd website/ && yarn && yarn build",
2425
"lint": "eslint . --report-unused-disable-directives",
2526
"fix": "eslint . --fix --report-unused-disable-directives",
2627
"prepublish": "yarn build",
2728
"preversion": "yarn lint",
29+
"start": "cd website && yarn && yarn start",
2830
"test": "jest",
2931
"test:ci": "yarn lint && yarn flow && yarn test --runInBand",
3032
"watch": "yarn build --watch"

‎website/.browserslistrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Browsers that we support
2+
last 2 Chrome versions
3+
last 2 Firefox versions
4+
last 2 Edge versions
5+
last 2 Safari versions
6+
last 2 Opera versions
7+
Firefox ESR

‎website/babel.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
3+
plugins: ['@babel/plugin-proposal-class-properties'],
4+
};

‎website/package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "react-docgen-website",
3+
"private": true,
4+
"description": "Website of react-docgen",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/reactjs/react-docgen.git"
8+
},
9+
"bugs": "https://github.com/reactjs/react-docgen/issues",
10+
"scripts": {
11+
"build": "NODE_ENV=production webpack",
12+
"start": "webpack-dev-server --open"
13+
},
14+
"dependencies": {},
15+
"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",
24+
"html-loader": "^0.5.5",
25+
"html-webpack-plugin": "^3.2.0",
26+
"less": "^3.9.0",
27+
"less-loader": "^4.1.0",
28+
"mini-css-extract-plugin": "^0.5.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"
36+
}
37+
}

‎website/src/CodeMirrorPanel.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react';
2+
import CodeMirror from 'codemirror';
3+
import 'codemirror/mode/javascript/javascript';
4+
import 'codemirror/mode/jsx/jsx';
5+
6+
import 'codemirror/addon/fold/foldgutter';
7+
import 'codemirror/addon/fold/brace-fold';
8+
import 'codemirror/addon/fold/comment-fold';
9+
import 'codemirror/addon/fold/xml-fold';
10+
import 'codemirror/addon/fold/foldgutter.css';
11+
12+
export default class CodeMirrorPanel extends React.Component {
13+
static defaultProps = {
14+
lineNumbers: true,
15+
tabSize: 2,
16+
showCursorWhenSelecting: true,
17+
autoCloseBrackets: true,
18+
matchBrackets: true,
19+
//keyMap: 'sublime',
20+
};
21+
constructor() {
22+
super();
23+
this._textareaRef = React.createRef();
24+
this._codeMirror = null;
25+
this._cached = '';
26+
this.handleChange = this.handleChange.bind(this);
27+
this.handleFocus = this.handleFocus.bind(this);
28+
}
29+
30+
componentDidMount() {
31+
const options = Object.assign(
32+
{
33+
foldGutter: true,
34+
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
35+
},
36+
this.props,
37+
);
38+
delete options.value;
39+
delete options.onChange;
40+
delete options.codeSample;
41+
42+
this._codeMirror = CodeMirror.fromTextArea(
43+
this._textareaRef.current,
44+
options,
45+
);
46+
this._codeMirror.on('change', this.handleChange);
47+
this._codeMirror.on('focus', this.handleFocus);
48+
49+
this.updateValue(this.props.value || '');
50+
}
51+
52+
componentWillUnmount() {
53+
this._codeMirror && this._codeMirror.toTextArea();
54+
}
55+
56+
componentDidUpdate(prevProps) {
57+
if (this.props.value !== this._cached && this.props.value != null) {
58+
this.updateValue(this.props.value);
59+
}
60+
if (this.props.mode !== prevProps.mode && this.props.mode != null) {
61+
this._codeMirror.setOption('mode', this.props.mode);
62+
}
63+
}
64+
65+
updateValue(value) {
66+
this._cached = value;
67+
this._codeMirror.setValue(value);
68+
}
69+
70+
handleFocus(/* codeMirror, event */) {
71+
if (this._codeMirror.getValue() === this.props.codeSample) {
72+
this._codeMirror.execCommand('selectAll');
73+
}
74+
}
75+
76+
handleChange(doc, change) {
77+
if (change.origin !== 'setValue') {
78+
this._cached = doc.getValue();
79+
this.props.onChange(this._cached);
80+
}
81+
}
82+
83+
render() {
84+
return (
85+
<div className="editor">
86+
<textarea ref={this._textareaRef} />
87+
</div>
88+
);
89+
}
90+
}

‎website/src/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8" />
4+
<title>react-docgen Playground</title>
5+
<meta
6+
name="viewport"
7+
content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
8+
/>
9+
<meta name="keywords" content="react,reactjs,react-docgen,playground" />
10+
<meta
11+
name="description"
12+
content="A CLI and toolbox to extract information from React component files for documentation generation purposes."
13+
/>
14+
<meta property="og:locale" content="en-us" />
15+
<meta property="og:title" content="react-docgen" />
16+
<meta
17+
property="og:description"
18+
content="A CLI and toolbox to extract information from React component files for documentation generation purposes."
19+
/>
20+
<meta property="og:url" content="http://reactcommunity.org/react-docgen" />
21+
<meta property="og:site_name" content="react-docgen" />
22+
<meta property="og:type" content="article" />
23+
</head>
24+
<body>
25+
<header class="page-header">
26+
<h1 class="page-title">react-docgen: <span class="subtitle">PLAYGROUND</span></h1>
27+
<a class="nav-link" href="https://github.com/reactjs/react-docgen">
28+
<span class="view-github">View on Github</span>
29+
<svg
30+
version="1.1"
31+
width="16"
32+
height="16"
33+
viewBox="0 0 16 16"
34+
class="octicon octicon-mark-github"
35+
aria-hidden="true"
36+
>
37+
<path
38+
fill-rule="evenodd"
39+
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"
40+
></path>
41+
</svg>
42+
</div>
43+
</header>
44+
<div id="root"></div>
45+
</body>

0 commit comments

Comments
 (0)