50 |
65 | );
66 | };
67 |
68 | export const Dropdown = React.memo
21 | Callbacks
22 | {callbacks.map(callback => {
23 | return callback.operations.map((operation, index) => {
24 | return (
25 |
30 | );
31 | }
32 | }
33 |
34 | const CallbacksHeader = styled.h3`
35 | font-size: 1.3em;
36 | padding: 0.2em 0;
37 | margin: 3em 0 1.1em;
38 | color: ${({ theme }) => theme.colors.text.primary};
39 | font-weight: normal;
40 | `;
41 |
--------------------------------------------------------------------------------
/src/components/Callbacks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './CallbackOperation';
2 | export * from './CallbackTitle';
3 | export * from './CallbacksList';
4 |
--------------------------------------------------------------------------------
/src/components/Callbacks/styled.elements.ts:
--------------------------------------------------------------------------------
1 | import styled from '../../styled-components';
2 | import { CallbackTitle } from './CallbackTitle';
3 | import { darken } from 'polished';
4 |
5 | export const StyledCallbackTitle = styled(CallbackTitle)`
6 | padding: 10px;
7 | border-radius: 2px;
8 | margin-bottom: 4px;
9 | line-height: 1.5em;
10 | background-color: ${({ theme }) => theme.colors.gray[100]};
11 | cursor: pointer;
12 | outline-color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.colors.gray[100])};
13 | `;
14 |
15 | export const CallbackDetailsWrap = styled.div`
16 | padding: 10px 25px;
17 | background-color: ${({ theme }) => theme.colors.gray[50]};
18 | margin-bottom: 5px;
19 | margin-top: 5px;
20 | `;
21 |
--------------------------------------------------------------------------------
/src/components/DropdownOrLabel/DropdownOrLabel.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { StyledComponent } from 'styled-components';
3 |
4 | import { DropdownProps, MimeLabel, SimpleDropdown } from '../../common-elements/Dropdown';
5 |
6 | export interface DropdownOrLabelProps extends DropdownProps {
7 | Label?: StyledComponentSomething went wrong...
28 | {this.state.error.message} 29 |
30 |
31 |
34 | Stack trace
32 | {this.state.error.stack}
33 |
36 | Commit: {__REDOC_REVISION__} 37 |
19 | {label} {stringifyValue}
20 |
21 | );
22 | }
23 |
24 | export const FieldDetail = React.memo
23 | Loading ...
24 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Markdown/AdvancedMarkdown.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { AppStore, MarkdownRenderer, RedocNormalizedOptions } from '../../services';
4 | import { BaseMarkdownProps } from './Markdown';
5 | import { SanitizedMarkdownHTML } from './SanitizedMdBlock';
6 |
7 | import { OptionsConsumer } from '../OptionsProvider';
8 | import { StoreConsumer } from '../StoreBuilder';
9 |
10 | export interface AdvancedMarkdownProps extends BaseMarkdownProps {
11 | htmlWrap?: (part: JSX.Element) => JSX.Element;
12 | parentId?: string;
13 | }
14 |
15 | export class AdvancedMarkdown extends React.Component
25 | {place} Parameters
26 |
27 |
28 | {mapWithLast(parameters, (field, isLast) => (
29 |
33 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/PayloadSamples/Example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { StyledPre } from '../../common-elements/samples';
4 | import { ExampleModel } from '../../services/models';
5 | import { ExampleValue } from './ExampleValue';
6 | import { useExternalExample } from './exernalExampleHook';
7 |
8 | export interface ExampleProps {
9 | example: ExampleModel;
10 | mimeType: string;
11 | }
12 |
13 | export function Example({ example, mimeType }: ExampleProps) {
14 | if (example.value === undefined && example.externalValueUrl) {
15 | return 32 | 38 | {example.externalValueUrl} 39 | 40 |
30 | {l('requestSamples')}
31 |
32 |
33 |
34 | {samples.map(sample => (
35 |
36 | {sample.label !== undefined ? sample.label : sample.lang}
37 |
38 | ))}
39 |
40 | {samples.map(sample => (
41 |
42 | {isPayloadSample(sample) ? (
43 |
50 | ))}
51 |
52 |
53 | )) ||
54 | null
55 | );
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/ResponseSamples/ResponseSamples.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react';
2 | import * as React from 'react';
3 |
4 | import { OperationModel } from '../../services/models';
5 |
6 | import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
7 | import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
8 | import { l } from '../../services/Labels';
9 |
10 | export interface ResponseSamplesProps {
11 | operation: OperationModel;
12 | }
13 |
14 | @observer
15 | export class ResponseSamples extends React.Component
44 |
46 | ) : (
47 |
27 | {l('responseSamples')}
28 |
29 |
30 |
31 | {responses.map(response => (
32 |
33 | {response.code}
34 |
35 | ))}
36 |
37 | {responses.map(response => (
38 |
39 |
43 | ))}
44 |
45 |
46 | )) ||
47 | null
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Responses/Response.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | import type { ResponseModel, MediaTypeModel } from '../../services/models';
5 | import { ResponseDetails } from './ResponseDetails';
6 | import { ResponseDetailsWrap, StyledResponseTitle } from './styled.elements';
7 |
8 | export interface ResponseViewProps {
9 | response: ResponseModel;
10 | }
11 |
12 | export const ResponseView = observer(({ response }: ResponseViewProps): React.ReactElement => {
13 | const { extensions, headers, type, summary, description, code, expanded, content } = response;
14 |
15 | const mimes = React.useMemo
40 |
42 |
32 | response.toggle()}
34 | type={type}
35 | empty={empty}
36 | title={summary || ''}
37 | code={code}
38 | opened={expanded}
39 | />
40 | {expanded && !empty && (
41 |
42 |
44 | )}
45 |
46 | );
47 | });
48 |
--------------------------------------------------------------------------------
/src/components/Responses/ResponseDetails.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { ResponseModel } from '../../services/models';
4 |
5 | import { UnderlinedHeader } from '../../common-elements';
6 | import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
7 | import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
8 | import { Schema } from '../Schema';
9 |
10 | import { Extensions } from '../Fields/Extensions';
11 | import { Markdown } from '../Markdown/Markdown';
12 | import { ResponseHeaders } from './ResponseHeaders';
13 | import { ConstraintsView } from '../Fields/FieldConstraints';
14 |
15 | export class ResponseDetails extends React.PureComponent<{ response: ResponseModel }> {
16 | render() {
17 | const { description, extensions, headers, content } = this.props.response;
18 | return (
19 | <>
20 | {description &&
30 | {isCallback ? l('callbackResponses') : l('responses')}
31 | {responses.map(response => {
32 | return
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/Responses/styled.elements.ts:
--------------------------------------------------------------------------------
1 | import { UnderlinedHeader } from '../../common-elements';
2 | import styled from '../../styled-components';
3 | import { ResponseTitle } from './ResponseTitle';
4 |
5 | export const StyledResponseTitle = styled(ResponseTitle)`
6 | display: block;
7 | border: 0;
8 | width: 100%;
9 | text-align: left;
10 | padding: 10px;
11 | border-radius: 2px;
12 | margin-bottom: 4px;
13 | line-height: 1.5em;
14 | cursor: pointer;
15 |
16 | color: ${props => props.theme.colors.responses[props.type].color};
17 | background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
18 | &:focus {
19 | outline: auto ${props => props.theme.colors.responses[props.type].color};
20 | }
21 | ${props =>
22 | (props.empty &&
23 | `
24 | cursor: default;
25 | &::before {
26 | content: "—";
27 | font-weight: bold;
28 | width: 1.5em;
29 | text-align: center;
30 | display: inline-block;
31 | vertical-align: top;
32 | }
33 | &:focus {
34 | outline: 0;
35 | }
36 | `) ||
37 | ''};
38 | `;
39 |
40 | export const ResponseDetailsWrap = styled.div`
41 | padding: 10px;
42 | `;
43 |
44 | export const HeadersCaption = styled(UnderlinedHeader).attrs({
45 | as: 'caption',
46 | })`
47 | text-align: left;
48 | margin-top: 1em;
49 | caption-side: top;
50 | `;
51 |
52 | export const Code = styled.strong`
53 | vertical-align: top;
54 | `;
55 |
--------------------------------------------------------------------------------
/src/components/Schema/ArraySchema.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { Schema, SchemaProps } from './Schema';
4 |
5 | import { ArrayClosingLabel, ArrayOpenningLabel } from '../../common-elements';
6 | import styled from '../../styled-components';
7 | import { humanizeConstraints } from '../../utils';
8 | import { TypeName } from '../../common-elements/fields';
9 | import { ObjectSchema } from './ObjectSchema';
10 |
11 | const PaddedSchema = styled.div`
12 | padding-left: ${({ theme }) => theme.spacing.unit * 2}px;
13 | `;
14 |
15 | export class ArraySchema extends React.PureComponent
41 | {schema.displayType}
42 |
43 | );
44 | }
45 |
46 | return (
47 |
48 | Array {minMaxItems}
49 |
50 |
52 |
54 | );
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/Schema/DiscriminatorDropdown.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react';
2 | import * as React from 'react';
3 |
4 | import { DropdownOption, Dropdown } from '../../common-elements/Dropdown';
5 | import { SchemaModel } from '../../services/models';
6 |
7 | @observer
8 | export class DiscriminatorDropdown extends React.Component<{
9 | parent: SchemaModel;
10 | enumValues: string[];
11 | }> {
12 | sortOptions(options: DropdownOption[], enumValues: string[]): void {
13 | if (enumValues.length === 0) {
14 | return;
15 | }
16 |
17 | const enumOrder = {};
18 |
19 | enumValues.forEach((enumItem, idx) => {
20 | enumOrder[enumItem] = idx;
21 | });
22 |
23 | options.sort((a, b) => {
24 | return enumOrder[a.value] > enumOrder[b.value] ? 1 : -1;
25 | });
26 | }
27 |
28 | render() {
29 | const { parent, enumValues } = this.props;
30 | if (parent.oneOf === undefined) {
31 | return null;
32 | }
33 |
34 | const options = parent.oneOf.map((subSchema, idx) => {
35 | return {
36 | value: subSchema.title,
37 | idx,
38 | };
39 | });
40 |
41 | const activeValue = options[parent.activeOneOf].value;
42 |
43 | this.sortOptions(options, enumValues);
44 |
45 | return (
46 |
55 | {schema.oneOfType}
56 |
57 | {oneOf.map((subSchema, idx) => (
58 |
61 |
67 | );
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/Schema/RecursiveSchema.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | import { RecursiveLabel, TypeName, TypeTitle } from '../../common-elements/fields';
5 | import { l } from '../../services/Labels';
6 | import type { SchemaProps } from '.';
7 |
8 | export const RecursiveSchema = observer(({ schema }: SchemaProps) => {
9 | return (
10 |
62 | {oneOf[schema.activeOneOf].deprecated && Deprecated }
63 |
64 |
11 | {schema.displayType}
12 | {schema.title && {schema.title} }
13 | {l('recursive')}
14 |
15 | );
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/Schema/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Schema';
2 | export * from './ObjectSchema';
3 | export * from './OneOfSchema';
4 | export * from './ArraySchema';
5 | export * from './DiscriminatorDropdown';
6 |
--------------------------------------------------------------------------------
/src/components/SecurityRequirement/RequiredScopesRow.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export const RequiredScopesRow = ({ scopes }: { scopes: string[] }): JSX.Element | null => {
4 | if (!scopes.length) return null;
5 |
6 | return (
7 |
8 | Required scopes:
9 | {scopes.map((scope, idx) => {
10 | return (
11 |
12 |
14 | );
15 | })}
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/components/SecurityRequirement/SecurityDetails.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { SecuritySchemeModel } from '../../services';
3 | import { titleize } from '../../utils';
4 | import { StyledMarkdownBlock } from '../Markdown/styled.elements';
5 | import { SecurityRow } from './styled.elements';
6 | import { OAuthFlow } from './OAuthFlow';
7 |
8 | interface SecuritySchemaProps {
9 | RequiredScopes?: JSX.Element;
10 | scheme: SecuritySchemeModel;
11 | }
12 | export function SecurityDetails(props: SecuritySchemaProps) {
13 | const { RequiredScopes, scheme } = props;
14 |
15 | return (
16 | {scope}{' '}
13 | {scheme.apiKey.name}
22 | {scheme.http.scheme}
30 | {scheme.http.bearerFormat}
36 |
37 | )}
38 |
46 |
47 | {scheme.openId.connectUrl}
48 |
49 |
50 |
27 |
30 | (this.child = el)}
16 | onClick={this.selectElement}
17 | onFocus={this.selectElement}
18 | tabIndex={0}
19 | role="button"
20 | >
21 | {children}
22 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/SideMenu/Logo.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import * as React from 'react';
3 |
4 | export default function RedoclyLogo(): JSX.Element | null {
5 | const [isDisplay, setDisplay] = useState(false);
6 |
7 | useEffect(() => {
8 | setDisplay(true);
9 | }, []);
10 |
11 | return isDisplay ? (
12 |
5 |
8 | One of
9 |
10 |
53 | `;
54 |
--------------------------------------------------------------------------------
/src/components/__tests__/fixtures/simple-callback.json:
--------------------------------------------------------------------------------
1 | {
2 | "openapi": "3.0.0",
3 | "info": {
4 | "version": "1.0",
5 | "title": "Foo"
6 | },
7 | "components": {
8 | "callbacks": {
9 | "Test": {
10 | "/test": {
11 | "post": {
12 | "operationId": "testCallback",
13 | "description": "Test callback.",
14 | "requestBody": {
15 | "content": {
16 | "application/json": {
17 | "schema": {
18 | "title": "TestTitle",
19 | "type": "object",
20 | "description": "Test description",
21 | "properties": {
22 | "type": {
23 | "type": "string",
24 | "description": "The type of response.",
25 | "enum": [
26 | "TestResponse.Complete"
27 | ]
28 | },
29 | "status": {
30 | "type": "string",
31 | "enum": [
32 | "FAILURE",
33 | "SUCCESS"
34 | ]
35 | }
36 | },
37 | "required": [
38 | "status"
39 | ]
40 | }
41 | }
42 | }
43 | },
44 | "parameters": [
45 | {
46 | "name": "X-Test-Header",
47 | "in": "header",
48 | "required": true,
49 | "example": "1",
50 | "description": "This is a test header parameter",
51 | "schema": {
52 | "type": "string"
53 | }
54 | }
55 | ],
56 | "responses": {
57 | "204": {
58 | "description": "Test response."
59 | }
60 | }
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
--------------------------------------------------------------------------------
/src/components/__tests__/fixtures/simple-discriminator.json:
--------------------------------------------------------------------------------
1 | {
2 | "openapi": "2.0.0",
3 | "components": {
4 | "schemas": {
5 | "Pet": {
6 | "type": "object",
7 | "required": [
8 | "type"
9 | ],
10 | "discriminator": {
11 | "propertyName": "type"
12 | },
13 | "properties": {
14 | "type": {
15 | "type": "string"
16 | }
17 | }
18 | },
19 | "Dog": {
20 | "type": "object",
21 | "allOf": [
22 | {
23 | "$ref": "#/components/schemas/Pet"
24 | }
25 | ],
26 | "properties": {
27 | "packSize": {
28 | "type": "number"
29 | }
30 | }
31 | },
32 | "Cat": {
33 | "type": "object",
34 | "allOf": [
35 | {
36 | "$ref": "#/components/schemas/Pet"
37 | },
38 | {
39 | "properties": {
40 | "packSize": {
41 | "type": "number"
42 | }
43 | }
44 | }
45 | ]
46 | }
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/__tests__/fixtures/simple-security-fixture.json:
--------------------------------------------------------------------------------
1 | {
2 | "openapi": "3.0",
3 | "info": {
4 | "title": "test",
5 | "version": "0"
6 | },
7 | "paths": {
8 | "/pet": {
9 | "put": {
10 | "summary": "Add a new pet to the store",
11 | "description": "Add new pet to the store inventory.",
12 | "operationId": "updatePet",
13 | "responses": {
14 | "405": {
15 | "description": "Invalid input"
16 | }
17 | },
18 | "security": [
19 | {
20 | "GitLab_PersonalAccessToken": [],
21 | "GitLab_OpenIdConnect": [],
22 | "basicAuth": []
23 | },
24 | {
25 | "petstore_auth": ["write:pets", "read:pets"]
26 | }
27 | ]
28 | }
29 | }
30 | },
31 | "components": {
32 | "securitySchemes": {
33 | "petstore_auth": {
34 | "description": "Get access to data while protecting your account credentials.\nOAuth2 is also a safer and more secure way to give you access.\n",
35 | "type": "oauth2",
36 | "bearerFormat": "",
37 | "flows": {
38 | "implicit": {
39 | "authorizationUrl": "http://petstore.swagger.io/api/oauth/dialog",
40 | "scopes": {
41 | "write:pets": "modify pets in your account",
42 | "read:pets": "read your pets"
43 | }
44 | }
45 | }
46 | },
47 | "GitLab_PersonalAccessToken": {
48 | "description": "GitLab Personal Access Token description",
49 | "type": "apiKey",
50 | "name": "PRIVATE-TOKEN",
51 | "in": "header",
52 | "bearerFormat": "",
53 | "flows": {}
54 | },
55 | "GitLab_OpenIdConnect": {
56 | "description": "GitLab OpenIdConnect description",
57 | "bearerFormat": "",
58 | "type": "openIdConnect",
59 | "openIdConnectUrl": "https://gitlab.com/.well-known/openid-configuration"
60 | },
61 | "basicAuth": {
62 | "type": "http",
63 | "scheme": "basic"
64 | }
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './RedocStandalone';
2 | export * from './Redoc/Redoc';
3 | export * from './ApiInfo/ApiInfo';
4 | export * from './ApiLogo/ApiLogo';
5 | export * from './ContentItems/ContentItems';
6 | export { ApiContentWrap, BackgroundStub, RedocWrap } from './Redoc/styled.elements';
7 | export * from './Schema/';
8 | export * from './SearchBox/SearchBox';
9 | export * from './Operation/Operation';
10 | export * from './Loading/Loading';
11 | export * from './JsonViewer';
12 | export * from './Markdown/Markdown';
13 | export { StyledMarkdownBlock } from './Markdown/styled.elements';
14 | export * from './SecuritySchemes/SecuritySchemes';
15 |
16 | export * from './Responses/Response';
17 | export * from './Responses/ResponseDetails';
18 | export * from './Responses/ResponseHeaders';
19 | export * from './Responses/ResponsesList';
20 | export * from './Responses/ResponseTitle';
21 | export * from './ResponseSamples/ResponseSamples';
22 | export * from './PayloadSamples/PayloadSamples';
23 | export * from './PayloadSamples/styled.elements';
24 | export * from './MediaTypeSwitch/MediaTypesSwitch';
25 | export * from './Parameters/Parameters';
26 | export * from './PayloadSamples/Example';
27 | export * from './DropdownOrLabel/DropdownOrLabel';
28 |
29 | export * from './ErrorBoundary';
30 | export * from './StoreBuilder';
31 | export * from './OptionsProvider';
32 | export * from './SideMenu/';
33 | export * from './StickySidebar/StickyResponsiveSidebar';
34 | export * from './SearchBox/SearchBox';
35 | export * from './SchemaDefinition/SchemaDefinition';
36 | export * from './SourceCode/SourceCode';
37 |
--------------------------------------------------------------------------------
/src/components/testProviders.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { ThemeProvider } from 'styled-components';
3 | import defaultTheme, { resolveTheme } from '../theme';
4 |
5 | import { PropsWithChildren } from 'react';
6 |
7 | export default class TestThemeProvider extends React.Component
13 |
18 |
23 |
24 |
25 |
29 | Deprecated
30 |
31 |
32 |
33 |
52 |
34 |
51 |
35 |
38 |
41 | string
42 |
43 |
44 |
45 |
46 |
49 |
50 | (
14 | first:
15 | | TemplateStringsArray
16 | | CSSObject
17 | | InterpolationFunction