28 | return (
29 |
30 |
31 | {utils.simplifyName(baseModel)}
32 |
33 | {model && model.description
34 | ?
38 | : null}
39 |
40 | );
41 | };
42 |
43 | export default ModelDescription;
44 |
--------------------------------------------------------------------------------
/src/application/components/JsonDoc/ModelDescription.test.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import renderer from 'react-test-renderer';
4 |
5 | import ModelDescription from 'application/components/JsonDoc/ModelDescription';
6 | import Example from 'exampleService.json';
7 |
8 | test('simple html', () => {
9 | const params = {
10 | baseModel: 'base',
11 | service: Example,
12 | importedServices: [],
13 | modelNameClick: () => {},
14 | };
15 |
16 | const component = renderer.create();
17 |
18 | const tree = component.toJSON();
19 | expect(tree).toMatchSnapshot();
20 | });
21 |
--------------------------------------------------------------------------------
/src/application/components/JsonDoc/__snapshots__/ModelDescription.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`simple html 1`] = `
4 |
7 |
11 | base
12 |
13 |
14 | `;
15 |
--------------------------------------------------------------------------------
/src/application/components/JsonDoc/defaults.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import * as utils from 'utils';
3 | import type { Field } from 'generated/version/ServiceType';
4 |
5 | const getFieldValue = (field: Field) => {
6 | const type = utils.getType(field.type);
7 | const wrap = value => {
8 | switch (type) {
9 | case 'string':
10 | case 'date-time-iso8601':
11 | case 'date-iso8601':
12 | case 'uuid':
13 | return `"${value}"`;
14 | default:
15 | return value;
16 | }
17 | };
18 |
19 | if (field.example) {
20 | return wrap(field.example);
21 | }
22 | if (field.default) {
23 | return wrap(field.default);
24 | }
25 | switch (type) {
26 | case 'boolean':
27 | return 'true';
28 | case 'string':
29 | return `"${field.name}"`;
30 | case 'integer':
31 | case 'long':
32 | return '12';
33 | case 'decimal':
34 | case 'double':
35 | return '10.12';
36 | case 'date-time-iso8601':
37 | return `"${new Date('2016-03-24T13:56:45.242Z').toISOString()}"`;
38 | case 'date-iso8601':
39 | return '"2016-03-24"';
40 | case 'uuid':
41 | return '"5ecf6502-e532-4738-aad5-7ac9701251dd"';
42 | default:
43 | return '';
44 | }
45 | };
46 |
47 | export { getFieldValue };
48 |
--------------------------------------------------------------------------------
/src/application/components/JsonDoc/json-doc.css:
--------------------------------------------------------------------------------
1 | @import "variables.css";
2 |
3 | .json-doc {
4 | font-style: normal;
5 | font-variant: normal;
6 | font-weight: 500;
7 | display: flex;
8 | align-items: flex-start;
9 | flex-direction: column;
10 | }
11 |
12 | .container {
13 | display: flex;
14 | width: 100%;
15 | flex-direction: row;
16 | align-items: flex-start;
17 | }
18 |
19 | .code {
20 | flex: 0 0 38%;
21 | width: 38%;
22 | padding: 1rem;
23 | background: var(--color-tuatara);
24 | color: white;
25 | margin: 0 2% 0 0;
26 | border-radius: var(--border-radius);
27 | overflow-x: scroll;
28 | }
29 |
30 | .field {
31 | width: 100%;
32 | text-decoration: none;
33 | color: var(--color-aluminium);
34 | font-family: var(--font-mono);
35 | cursor: pointer;
36 |
37 | @nest &:hover {
38 | background-color: color(var(--color-cool-blue) b(+35%));
39 | border-radius: var(--border-radius);
40 | }
41 | }
42 |
43 | .element {
44 | width: 100%;
45 | text-decoration: none;
46 | color: var(--color-aluminium);
47 | font-family: var(--font-mono);
48 | cursor: pointer;
49 |
50 | @nest &:hover {
51 | background-color: color(var(--color-cool-blue) b(+65%));
52 | border-radius: var(--border-radius);
53 | }
54 | }
55 |
56 | .name {
57 | color: var(--color-maya-blue);
58 | font-family: var(--font-mono);
59 | }
60 |
61 | .value {
62 | color: var(--color-secondary-light);
63 | font-family: var(--font-mono);
64 | }
65 |
66 | .default {
67 | color: black;
68 | }
69 |
70 | .documentation {
71 | flex: 0 0 60%;
72 | width: 60%;
73 | font-family: var(--font-primary);
74 | }
75 |
76 | .field-container {
77 | display: flex;
78 | }
79 |
80 | .field-left {
81 | flex: 0 1 30%;
82 | }
83 |
84 | .field-right {
85 | flex: 0 1 65%;
86 | margin-left: 5%;
87 | }
88 |
89 | .model {
90 | @nest &:hover {
91 | background-color: color(var(--color-cool-blue) b(+55%));
92 | border-radius: var(--border-radius);
93 | }
94 | }
95 |
96 | .model-name {
97 | font-weight: 400;
98 | margin: 0 0 0.5rem 0;
99 | font-size: 1.5rem;
100 | line-height: 1;
101 | }
102 |
103 | .model-description {
104 | margin: 2rem 0 1.5rem 0;
105 | }
106 |
107 | .model-description + .field-container {
108 | border-top: 1px solid var(--color-very-light-gray);
109 | }
110 |
111 | .default-view {
112 | color: var(--color-light-gray);
113 | }
114 |
--------------------------------------------------------------------------------
/src/application/components/JsonDoc/test-jsondoc-spec-expected.js:
--------------------------------------------------------------------------------
1 | // This is what the test-jsondoc-spec should look like in the ui
2 |
3 | /* eslint-disable comma-dangle */
4 |
5 | export const getGender200 = 'female';
6 |
7 | export const getGender201 = 'string';
8 |
9 | export const postPerson = {
10 | id: 12,
11 | default: 'default value',
12 | example: 'example value',
13 | boolean: true,
14 | dob: '2001-10-10',
15 | time: '2016-03-24T13:56:45.242Z',
16 | tags: ['tag'],
17 | details: {
18 | some_thing: 10,
19 | tags: ['string'],
20 | },
21 | addresses: [
22 | {
23 | street: 10,
24 | tags: ['string'],
25 | },
26 | ],
27 | gender: 'gender',
28 | };
29 |
30 | export const postPeople = [
31 | {
32 | id: 'xyz',
33 | name: 'name',
34 | dob: '2001-10-10',
35 | tags: ['tag'],
36 | details: {
37 | some_thing: 10,
38 | tags: ['string'],
39 | },
40 | addresses: [
41 | {
42 | street: 10,
43 | tags: ['string'],
44 | },
45 | ],
46 | gender: 'gender',
47 | },
48 | ];
49 |
50 | /* eslint-enable comma-dangle */
51 |
--------------------------------------------------------------------------------
/src/application/components/Model.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 |
4 | import H1 from 'components/H1';
5 | import Markdown from 'components/Markdown';
6 | import JsonDoc from 'application/components/JsonDoc/JsonDoc';
7 | import ParameterListGroup from 'application/components/ParameterListGroup';
8 |
9 | import { simplifyName } from 'utils';
10 |
11 | import type {
12 | Service,
13 | Model as ModelType,
14 | } from 'generated/version/ServiceType';
15 |
16 | import styles from 'application/components/model.css';
17 |
18 | const Model = ({
19 | model,
20 | service,
21 | importedServices,
22 | showJsonDoc,
23 | }: {
24 | model: ModelType,
25 | service: Service,
26 | importedServices: Service[],
27 | showJsonDoc: boolean,
28 | }) => (
29 |
30 |
31 |
{simplifyName(model.name)}
32 |
36 |
37 |
38 |
45 |
46 | {showJsonDoc
47 | ? {}}
53 | />
54 | : null}
55 |
56 |
57 |
39 |
40 |
41 |
45 | {resource.type}
46 |
47 |
48 | {resource.description &&
49 | }
53 |
54 |
55 |
56 |
57 | {operation.description &&
58 |
}
62 |
63 |
71 |
72 |
73 |
79 |
80 |
88 |
66 |
85 |
86 | {description
87 | ?
88 | :
No description
}
89 | {minimum
90 | ?
91 | Minimum{minimum}
92 |
93 | : null
94 | }
95 | {maximum
96 | ?
97 | Maximum{maximum}
98 |
99 | : null
100 | }
101 | {example
102 | ?
103 | Example{example}
104 |
105 | : null}
106 | {defaultValue
107 | ?
108 | Default{defaultValue}
109 |
110 | : null}
111 |
112 |
25 |
{title}
26 |
27 | {parameters.length > 0
28 | ? parameters.map((parameter, id) => (
29 |
36 | ))
37 | :
No parameters
}
38 |
39 |
42 |
Request Body
43 |
44 | {}}
51 | />
52 |
53 |
60 | {responseParameters()}
61 | {body()}
62 |
63 | );
64 | };
65 |
66 | export default Request;
67 |
68 | export { styles };
69 |
--------------------------------------------------------------------------------
/src/application/components/ResourceCard.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import classnames from 'classnames';
4 |
5 | import Markdown from 'components/Markdown';
6 |
7 | import styles from 'application/components/resource-card.css';
8 |
9 | const ResourceCard = (
10 | {
11 | method,
12 | path,
13 | click,
14 | description,
15 | }: {
16 | method: string,
17 | path: string,
18 | click?: Function,
19 | description?: string,
20 | } = {}
21 | ) => {
22 | const methodClasses = classnames(
23 | styles.method,
24 | styles[method.toLowerCase()],
25 | description ? styles.isExpandedMethod : null
26 | );
27 | const containerClasses = classnames(
28 | styles.container,
29 | click ? styles.isClick : null
30 | );
31 | const pathClasses = classnames(
32 | styles.path,
33 | description ? styles.isExpandedPath : null
34 | );
35 |
36 | return (
37 |
54 | );
55 | };
56 |
57 | export default ResourceCard;
58 |
59 | export { styles };
60 |
--------------------------------------------------------------------------------
/src/application/components/Response.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 |
4 | import { onClickHref, buildNavHref, getType } from 'utils';
5 |
6 | import H2 from 'components/H2';
7 | import Markdown from 'components/Markdown';
8 | import JsonDoc from 'application/components/JsonDoc/JsonDoc';
9 |
10 | import type { Operation, Service } from 'generated/version/ServiceType';
11 |
12 | import styles from 'application/components/response.css';
13 |
14 | const Response = ({
15 | operation,
16 | service,
17 | importedServices,
18 | orgKey,
19 | appKey,
20 | }: {
21 | operation: Operation,
22 | service: Service,
23 | importedServices: Service[],
24 | orgKey: string,
25 | appKey: string,
26 | }) => {
27 | const body = response => {
28 | if (response.type) {
29 | const baseModel = response.type;
30 | // TODO make this better, perhaps use isInImportOrService?
31 | const rawValue = response.type === 'string' ||
32 | response.type === 'integer' ||
33 | response.type === 'number'
34 | ? `${response.code.integer.value}`
35 | : '';
36 | const formattedRawValue = response.type === 'string'
37 | ? `"${rawValue}"`
38 | : rawValue;
39 | return (
40 |
41 |
55 |
56 | );
57 | } else return null;
58 | };
59 |
60 | return (
61 |
62 | {operation.responses.map(response => (
63 |
64 |
{`${response.code.integer.value} Response`}
67 |
71 | {body(response)}
72 |
73 | ))}
74 |
7 |
13 |
14 | );
15 |
16 | Button.propTypes = {
17 | children: PropTypes.node.isRequired,
18 | className: PropTypes.string,
19 | classNameInner: PropTypes.string,
20 | onClick: PropTypes.func.isRequired,
21 | target: PropTypes.string,
22 | };
23 |
24 | export default Button;
25 |
26 | export { styles };
27 |
--------------------------------------------------------------------------------
/src/components/Content/content.css:
--------------------------------------------------------------------------------
1 | @import "variables.css";
2 |
3 | .content {
4 | position: fixed 50px 0 0 400px;
5 | width: calc(100% - 400px);
6 | padding: 0;
7 | font-family: var(--font-primary);
8 | overflow-y: auto;
9 |
10 | @nest &::-webkit-scrollbar {
11 | width: 0;
12 | background: transparent;
13 | }
14 | }
15 |
16 | .content-inner {
17 | padding: 0 0 1.25rem 0;
18 | width: 100%;
19 | min-height: calc(100% - 50px);
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/Content/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | import styles from 'components/Content/content.css';
4 |
5 | const Content = props => (
6 |
7 |
8 | {props.children}
9 |
10 |
8 | {children}
9 |
10 | );
11 |
12 | H1.propTypes = {
13 | children: PropTypes.node,
14 | className: PropTypes.string,
15 | };
16 |
17 | export default H1;
18 |
19 | export { styles };
20 |
--------------------------------------------------------------------------------
/src/components/H2/h2.css:
--------------------------------------------------------------------------------
1 | @import 'variables.css';
2 |
3 | :root {
4 | --bg-color: var(--color-primary);
5 | }
6 |
7 | .pointer {
8 | cursor: pointer;
9 | }
10 |
11 | .h2 {
12 | font-size: 24px;
13 | font-weight: 400;
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/H2/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import classnames from 'classnames';
3 |
4 | import styles from 'components/H2/h2.css';
5 |
6 | const H2 = ({ className, children, click }) => (
7 |
11 | {children}
12 |
13 | );
14 |
15 | H2.propTypes = {
16 | children: PropTypes.node.isRequired,
17 | className: PropTypes.string,
18 | click: PropTypes.func,
19 | };
20 |
21 | export default H2;
22 |
23 | export { styles };
24 |
--------------------------------------------------------------------------------
/src/components/H3/h3.css:
--------------------------------------------------------------------------------
1 | @import 'variables.css';
2 |
3 | :root {
4 | --bg-color: var(--color-primary);
5 | }
6 |
7 | .pointer {
8 | cursor: pointer;
9 | }
10 |
11 | .h3 {
12 | font-size: 18px;
13 | font-weight: 400;
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/H3/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import classnames from 'classnames';
3 |
4 | import styles from 'components/H3/h3.css';
5 |
6 | const H3 = ({ className, children, click }) => (
7 |
11 | {children}
12 |
13 | );
14 |
15 | H3.propTypes = {
16 | children: PropTypes.node.isRequired,
17 | className: PropTypes.string,
18 | click: PropTypes.func,
19 | };
20 |
21 | export default H3;
22 |
23 | export { styles };
24 |
--------------------------------------------------------------------------------
/src/components/LoadingOverlay/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
3 | import classnames from 'classnames';
4 |
5 | import styles from 'components/LoadingOverlay/loading-overlay.css';
6 |
7 | const LoadingOverlay = (
8 | {
9 | isLoaded,
10 | children,
11 | }: {
12 | isLoaded: boolean,
13 | children?: React$Element<*>,
14 | } = {}
15 | ) => {
16 | const loader = (
17 |
24 | );
25 | return (
26 |
33 | {isLoaded ? {children}
: loader}
34 |
35 | );
36 | };
37 |
38 | export default LoadingOverlay;
39 |
--------------------------------------------------------------------------------
/src/components/Markdown/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 | import classnames from 'classnames';
4 |
5 | import styles from 'components/Markdown/markdown.css';
6 |
7 | const Markdown = ({ source, className }) => (
8 |
9 |
10 |
11 | );
12 |
13 | Markdown.propTypes = {
14 | source: PropTypes.string.isRequired,
15 | className: PropTypes.string,
16 | };
17 |
18 | export default Markdown;
19 |
20 | export { styles };
21 |
--------------------------------------------------------------------------------
/src/components/Markdown/markdown.css:
--------------------------------------------------------------------------------
1 | @import "variables.css";
2 |
3 | .markdown {
4 | @nest & p {
5 | font-size: 1rem;
6 | font-weight: 400;
7 | line-height: 1.6;
8 | margin: 0 0 1rem 0;
9 |
10 | @nest &:last-of-type {
11 | margin: 0;
12 | }
13 | }
14 |
15 | @nest & code {
16 | font-family: var(--font-code);
17 | display: inline-block;
18 | background: white;
19 | border-radius: 3px;
20 | color: var(--color-red);
21 | border: 1px solid var(--color-very-light-gray);
22 | line-height: 1.5;
23 | font-size: 0.85rem;
24 | padding: 0 0.25rem;
25 | }
26 |
27 | @nest & ul {
28 | list-style-type: none;
29 | padding: 0;
30 | margin: 0 0 0 0.2rem;
31 | font-size: 0;
32 |
33 | @nest & li {
34 | display: block;
35 | font-size: 1rem;
36 | font-weight: normal;
37 | padding: 0.25rem 0 0.25rem 1rem;
38 | margin: 0;
39 | line-height: 1.5;
40 | border-left: 2px solid var(--color-very-light-gray);
41 | }
42 | }
43 |
44 | @nest & a {
45 | text-decoration: none;
46 | color: var(--color-cool-blue);
47 | }
48 |
49 | @nest & h1, & h2 {
50 | font-size: 1rem;
51 | margin: 0 0 1rem 0;
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/NavBar/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | import Button from 'components/Button';
4 | import styles from 'components/NavBar/navbar.css';
5 |
6 | const githubLink = () => (
7 |
13 |
25 |
26 | );
27 |
28 | const NavBar = ({ title, items, homeOnClick, removeGithubLink }) => (
29 |
30 |
{title}
31 |
32 | {items.map((item, id) => (
33 |
36 | ))}
37 |
38 | {removeGithubLink ? null : githubLink()}
39 |
{markup}
;
18 | };
19 |
20 | SidebarIcon.propTypes = {
21 | item: PropTypes.object.isRequired,
22 | };
23 |
24 | const Item = ({ item }) => (
25 |
30 | {item.path ? `${item.method} ${item.path}` : simplifyName(item.name)}
31 |
32 | );
33 |
34 | Item.propTypes = {
35 | item: PropTypes.object.isRequired,
36 | };
37 |
38 | const Groups = ({ group }) => (
39 |
40 |
{group.name}
41 | {group.items.map((item, id) =>
51 |
52 | {section.items.map((group, id) => )}
53 |
54 | );
55 |
56 | Section.propTypes = {
57 | section: PropTypes.object.isRequired,
58 | };
59 |
60 | const SideBar = ({ sections }) => (
61 |
62 |
63 | {sections.map((section, id) => )}
64 |
65 |
66 |
67 |
68 | {document.name}
69 |
70 |
74 |
75 |
28 | {organizations.map(organization =>
29 |
30 |
31 |
32 | )}
33 |
52 |
53 |
Organizations
54 |
55 |
56 |
57 |
58 |
41 | {applications.map(application =>
42 |
45 | )}
46 |
68 |
69 |
70 | {this.props.organization && this.props.organization.name}
71 |
72 |
73 |
79 |