Skip to content

Commit aac1a45

Browse files
codeasashucodeasashu
committed
Added documentation
1 parent 483de46 commit aac1a45

15 files changed

Lines changed: 1313 additions & 145 deletions

File tree

‎package-lock.json‎

Lines changed: 1171 additions & 101 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"mobx-react": "^7.2.0",
4141
"monaco-editor": "^0.27.0",
4242
"openapi3-ts": "^2.0.1",
43-
"prismjs": "^1.23.0",
43+
"prismjs": "^1.25.0",
4444
"prop-types": "^15.7.2",
4545
"react": "^17.0.2",
4646
"react-dnd": "^14.0.3",
@@ -55,6 +55,7 @@
5555
"react-simple-code-editor": "^0.11.0",
5656
"react-tabs": "^3.2.2",
5757
"react-window": "^1.8.6",
58+
"redoc": "^2.0.0-rc.58",
5859
"redux": "^4.0.1",
5960
"redux-thunk": "^2.3.0",
6061
"styled-components": "^5.3.1",
@@ -133,14 +134,18 @@
133134
"jest-transform-stub": "^2.0.0",
134135
"monaco-editor-webpack-plugin": "^4.1.2",
135136
"npm-run-all": "^4.1.5",
137+
"os-browserify": "^0.3.0",
138+
"path-browserify": "^1.0.1",
136139
"postcss": "^8.2.7",
137140
"postcss-import": "^14.0.0",
138141
"postcss-loader": "^5.1.0",
139142
"postcss-preset-env": "^6.7.0",
140143
"prettier": "^2.2.1",
144+
"process": "^0.11.10",
141145
"redux-mock-store": "^1.5.4",
142146
"sass": "^1.32.8",
143147
"sass-loader": "^11.0.1",
148+
"stream-browserify": "^3.0.0",
144149
"stream-http": "^3.1.1",
145150
"style-loader": "^2.0.0",
146151
"tailwindcss": "^2.0.3",

‎src/Stores/uiStore.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ class UiStore {
1111
activeSourceNode;
1212
activeSymbolNode;
1313
fullscreen;
14+
activeView;
15+
views = {
16+
code: 'code',
17+
form: 'form',
18+
preview: 'preview',
19+
};
1420

1521
constructor(stores) {
1622
makeObservable(this, {
@@ -34,6 +40,8 @@ class UiStore {
3440

3541
activeNode: computed,
3642
activeNodeId: computed,
43+
activeView: observable,
44+
setActiveView: action,
3745
});
3846

3947
this.stores = stores;
@@ -43,6 +51,7 @@ class UiStore {
4351
this._smallLayout = false;
4452
this._chosenSourceNodeUri = undefined;
4553
this._chosenSymbolNodeUri = undefined;
54+
this.activeView = this.views.form;
4655
this._preferences = observable.object(
4756
{
4857
activeSidebarTree: 'design',
@@ -267,6 +276,12 @@ class UiStore {
267276
);
268277
}
269278

279+
setActiveView(view) {
280+
if (Object.keys(this.views).indexOf(view) >= 0) {
281+
this.activeView = view;
282+
}
283+
}
284+
270285
get _storageKey() {
271286
return 'oasdesigner-ui';
272287
}

‎src/app.js‎

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,27 @@
11
//@flow
22
import React from 'react';
33
import PropTypes from 'prop-types';
4+
import {Sidebar, Gutter, Header, Content, Context} from './components';
45
import pjson from '../package.json';
5-
import {Sidebar, Gutter, Content, Context} from './components';
66
import Stores from './Stores';
77
import {observer} from 'mobx-react-lite';
8-
import {AnchorButton, Icon, Tag} from '@blueprintjs/core';
98

109
const Designer = observer(() => {
1110
const stores = React.useContext(Context.StoresContext);
11+
const {activeView, views, fullscreen} = stores.uiStore;
12+
const shouldShowSidebar =
13+
fullscreen === false && activeView !== views.preview;
1214
return (
1315
<div className="dark bp3-dark">
1416
<div className={'OasContainer h-screen w-full'}>
1517
<div className={'Studio h-full flex flex-1 flex-col'}>
1618
{stores.uiStore.fullscreen === false && (
17-
<div
18-
className="grid py-4 px-5 w-100 bg-canvas border-b"
19-
style={{gridTemplateColumns: '1fr auto 1fr'}}>
20-
<div className="flex justify-start items-center">
21-
<Tag large minimal icon="git-commit">
22-
{pjson.version}
23-
</Tag>
24-
</div>
25-
<div className="flex items-center">
26-
<div className="text-base overflow-hidden mx-2">
27-
<a
28-
href={pjson.repository.url}
29-
target="_blank"
30-
rel="noreferrer">
31-
Openapi Designer
32-
</a>
33-
</div>
34-
</div>
35-
<div className="flex justify-end items-center">
36-
<AnchorButton
37-
icon={<Icon size={12} icon="git-repo" />}
38-
href={pjson.repository.url}
39-
target="_blank"
40-
text="View on Github"
41-
/>
42-
</div>
43-
</div>
19+
<Header repoUrl={pjson.repository.url} version={pjson.version}>
20+
Openapi Designer
21+
</Header>
4422
)}
4523
<div className={'flex flex-1'}>
46-
{stores.uiStore.fullscreen === false && (
24+
{shouldShowSidebar && (
4725
<Sidebar
4826
fullscreen={stores.uiStore.fullscreen}
4927
style={{

‎src/components/Common/Header/header.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import {AnchorButton, Icon, Tag} from '@blueprintjs/core';
3+
4+
const Header = ({repoUrl, version, ...props}) => {
5+
return (
6+
<div
7+
className="grid py-4 px-5 w-100 bg-canvas border-b"
8+
style={{gridTemplateColumns: '1fr auto 1fr'}}>
9+
<div className="flex justify-start items-center">
10+
<Tag large minimal icon="git-commit">
11+
{version}
12+
</Tag>
13+
</div>
14+
<div className="flex items-center">
15+
<div className="text-base overflow-hidden mx-2">
16+
<a href={repoUrl} target="_blank" rel="noreferrer">
17+
{props.children}
18+
</a>
19+
</div>
20+
</div>
21+
<div className="flex justify-end items-center">
22+
<AnchorButton
23+
icon={<Icon size={12} icon="git-repo" />}
24+
href={repoUrl}
25+
target="_blank"
26+
text="View on Github"
27+
/>
28+
</div>
29+
</div>
30+
);
31+
};
32+
33+
export default Header;

‎src/components/Common/Header/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Header from './header';
2+
3+
export {Header};
4+
export default Header;

‎src/components/Common/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import Gutter from './gutter';
2+
import Header from './Header';
23

3-
export {Gutter};
4+
export {Gutter, Header};

‎src/components/Content/index.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import React, {useState} from 'react';
1+
import React from 'react';
22
import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44
import {observer} from 'mobx-react-lite';
5+
import {cloneDeep} from 'lodash';
6+
import Redoc from '../Docs';
57
import Options from './options';
68
import Info from './info';
79
import PathContent from './path';
@@ -51,27 +53,28 @@ SubContent.propTypes = {
5153

5254
const Content = observer(() => {
5355
const stores = React.useContext(StoresContext);
54-
const {activeNode} = stores.uiStore;
56+
const {activeNode, activeView, views} = stores.uiStore;
5557
const sourceNode = stores.graphStore.rootNode;
56-
const [currentView, setCurrentView] = useState('form');
5758

58-
const toggleView = () =>
59-
setCurrentView(currentView === 'form' ? 'code' : 'form');
59+
const toggleView = (view) => stores.uiStore.setActiveView(view);
6060

6161
return (
6262
<StyledContent className={'flex flex-col flex-1'}>
6363
<div className="bp3-dark relative flex flex-1 flex-col bg-canvas">
6464
<Options
65-
view={currentView}
65+
view={activeView}
6666
onToggleView={toggleView}
6767
onDelete={() => {
6868
stores.graphStore.removeNode(activeNode.id);
6969
}}
7070
/>
71-
{currentView === 'form' && (
71+
{activeView === views.form && (
7272
<SubContent node={activeNode || sourceNode} />
7373
)}
74-
{currentView === 'code' && <MonacoEditor />}
74+
{activeView === views.code && <MonacoEditor />}
75+
{activeView === views.preview && (
76+
<Redoc spec={cloneDeep(sourceNode.data.parsed)} />
77+
)}
7578
</div>
7679
</StyledContent>
7780
);

‎src/components/Content/options.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,21 @@ const Options = observer((props) => {
4141
small
4242
icon={<Icon size={14} icon="form" />}
4343
text="Form"
44-
onClick={props.onToggleView}
44+
onClick={() => props.onToggleView('form')}
4545
/>
4646
<Button
4747
active={props.view === 'code'}
4848
small
4949
icon={<Icon size={14} icon="code" />}
5050
text="Code"
51-
onClick={props.onToggleView}
51+
onClick={() => props.onToggleView('code')}
52+
/>
53+
<Button
54+
active={props.view === 'docs'}
55+
small
56+
icon={<Icon size={14} icon="book" />}
57+
text="Preview"
58+
onClick={() => props.onToggleView('preview')}
5259
/>
5360
</ButtonGroup>
5461
</div>

‎src/components/Docs/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Redoc from './redoc';
2+
3+
export {Redoc};
4+
export default Redoc;

0 commit comments

Comments
 (0)