@gitbook/react-openapi 1.1.8 → 1.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/InteractiveSection.jsx +7 -6
  3. package/dist/OpenAPICodeSample.d.ts +2 -2
  4. package/dist/OpenAPICodeSample.jsx +3 -8
  5. package/dist/OpenAPICodeSampleInteractive.jsx +31 -19
  6. package/dist/OpenAPICodeSampleSelector.d.ts +15 -0
  7. package/dist/OpenAPICodeSampleSelector.jsx +49 -0
  8. package/dist/OpenAPIExample.d.ts +34 -0
  9. package/dist/OpenAPIExample.jsx +103 -0
  10. package/dist/OpenAPIOperation.d.ts +2 -2
  11. package/dist/OpenAPIOperation.jsx +3 -7
  12. package/dist/OpenAPIPath.d.ts +10 -2
  13. package/dist/OpenAPIPath.jsx +9 -4
  14. package/dist/OpenAPIResponse.jsx +3 -3
  15. package/dist/OpenAPIResponseExample.d.ts +2 -2
  16. package/dist/OpenAPIResponseExample.jsx +4 -90
  17. package/dist/OpenAPIResponses.jsx +23 -10
  18. package/dist/OpenAPISchema.jsx +26 -15
  19. package/dist/OpenAPISchemaName.jsx +2 -7
  20. package/dist/OpenAPISecurities.jsx +6 -6
  21. package/dist/OpenAPISelect.d.ts +15 -0
  22. package/dist/OpenAPISelect.jsx +32 -0
  23. package/dist/OpenAPITabs.jsx +9 -9
  24. package/dist/context.d.ts +54 -0
  25. package/dist/context.js +11 -0
  26. package/dist/generateSchemaExample.d.ts +1 -1
  27. package/dist/generateSchemaExample.js +28 -26
  28. package/dist/getOrCreateStoreByKey.d.ts +10 -0
  29. package/dist/getOrCreateStoreByKey.js +20 -0
  30. package/dist/index.d.ts +1 -1
  31. package/dist/resolveOpenAPIOperation.js +10 -5
  32. package/dist/schemas/OpenAPISchemas.d.ts +5 -6
  33. package/dist/schemas/OpenAPISchemas.jsx +45 -38
  34. package/dist/schemas/resolveOpenAPISchemas.d.ts +4 -3
  35. package/dist/schemas/resolveOpenAPISchemas.js +0 -1
  36. package/dist/tsconfig.build.tsbuildinfo +1 -1
  37. package/dist/types.d.ts +32 -26
  38. package/package.json +1 -1
  39. package/src/InteractiveSection.tsx +10 -8
  40. package/src/OpenAPICodeSample.tsx +8 -15
  41. package/src/OpenAPICodeSampleInteractive.tsx +43 -26
  42. package/src/OpenAPICodeSampleSelector.tsx +87 -0
  43. package/src/OpenAPIExample.tsx +129 -0
  44. package/src/OpenAPIOperation.tsx +6 -10
  45. package/src/OpenAPIPath.tsx +23 -6
  46. package/src/OpenAPIResponse.tsx +9 -7
  47. package/src/OpenAPIResponseExample.tsx +13 -113
  48. package/src/OpenAPIResponses.tsx +37 -12
  49. package/src/OpenAPISchema.tsx +40 -25
  50. package/src/OpenAPISchemaName.tsx +2 -8
  51. package/src/OpenAPISecurities.tsx +22 -9
  52. package/src/OpenAPISelect.tsx +70 -0
  53. package/src/OpenAPITabs.tsx +9 -9
  54. package/src/context.ts +64 -0
  55. package/src/generateSchemaExample.test.ts +1020 -0
  56. package/src/generateSchemaExample.ts +103 -36
  57. package/src/getOrCreateStoreByKey.ts +35 -0
  58. package/src/index.ts +1 -1
  59. package/src/resolveOpenAPIOperation.ts +14 -3
  60. package/src/schemas/OpenAPISchemas.tsx +75 -70
  61. package/src/schemas/resolveOpenAPISchemas.ts +4 -5
  62. package/src/types.ts +36 -29
  63. package/dist/useSyncedTabsGlobalState.d.ts +0 -10
  64. package/dist/useSyncedTabsGlobalState.js +0 -20
  65. package/src/useSyncedTabsGlobalState.ts +0 -35
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @gitbook/react-openapi
2
2
 
3
+ ## 1.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - 70c4182: Improve OpenAPI schema style
8
+ - 2b6c593: Remove stable from x-stability
9
+ - cbd768a: Improve OpenAPI codesample (add OpenAPISelect component)
10
+ - e59076a: Improve OpenAPI schemas block ungrouped style. Classnames have changed, please refer to this PR to update GBX.
11
+ - eedefdd: Handle optional security headers
12
+ - 23cedd2: Hide deprecated properties in examples
13
+ - Updated dependencies [2b6c593]
14
+ - @gitbook/openapi-parser@2.1.3
15
+
16
+ ## 1.1.9
17
+
18
+ ### Patch Changes
19
+
20
+ - da7b369: Fix missing headers in OpenAPIResponses
21
+ - da485f5: Fix read-only in generateSchemaExample
22
+ - 139a805: Fix OpenAPI enum display
23
+
3
24
  ## 1.1.8
4
25
 
5
26
  ### Patch Changes
@@ -3,6 +3,7 @@ import clsx from 'clsx';
3
3
  import { useRef, useState } from 'react';
4
4
  import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
5
5
  import { useDisclosureState } from 'react-stately';
6
+ import { OpenAPISelect, OpenAPISelectItem } from './OpenAPISelect';
6
7
  import { Section, SectionBody, SectionHeader, SectionHeaderContent } from './StaticSection';
7
8
  /**
8
9
  * To optimize rendering, most of the components are server-components,
@@ -40,14 +41,14 @@ export function InteractiveSection(props) {
40
41
  <div className={clsx('openapi-section-header-controls', "".concat(className, "-header-controls"))} onClick={function (event) {
41
42
  event.stopPropagation();
42
43
  }}>
43
- {tabs.length > 1 ? (<select className={clsx('openapi-section-select', 'openapi-select', "".concat(className, "-tabs-select"))} value={(_c = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key) !== null && _c !== void 0 ? _c : ''} onChange={function (event) {
44
- setSelectedTab(event.target.value);
44
+ {tabs.length > 1 ? (<OpenAPISelect className={clsx('openapi-section-select', "".concat(className, "-tabs-select"))} items={tabs} selectedKey={(_c = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key) !== null && _c !== void 0 ? _c : ''} onSelectionChange={function (key) {
45
+ setSelectedTab(String(key));
45
46
  state.expand();
46
- }}>
47
- {tabs.map(function (tab) { return (<option key={tab.key} value={tab.key}>
47
+ }} placement="bottom end">
48
+ {tabs.map(function (tab) { return (<OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
48
49
  {tab.label}
49
- </option>); })}
50
- </select>) : null}
50
+ </OpenAPISelectItem>); })}
51
+ </OpenAPISelect>) : null}
51
52
  </div>
52
53
  </SectionHeader>) : null}
53
54
  {(!toggeable || state.isExpanded) && (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body) ? (<SectionBody ref={panelRef} {...panelProps} className={className}>
@@ -1,12 +1,12 @@
1
1
  import type { OpenAPIV3 } from '@gitbook/openapi-parser';
2
- import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
2
+ import type { OpenAPIContext, OpenAPIOperationData } from './types';
3
3
  /**
4
4
  * Display code samples to execute the operation.
5
5
  * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
6
6
  */
7
7
  export declare function OpenAPICodeSample(props: {
8
8
  data: OpenAPIOperationData;
9
- context: OpenAPIContextProps;
9
+ context: OpenAPIContext;
10
10
  }): import("react").JSX.Element | null;
11
11
  export interface MediaTypeRenderer {
12
12
  mediaType: string;
@@ -10,14 +10,13 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { OpenAPIMediaTypeExamplesBody, OpenAPIMediaTypeExamplesSelector, } from './OpenAPICodeSampleInteractive';
13
- import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
13
+ import { OpenAPICodeSampleBody } from './OpenAPICodeSampleSelector';
14
14
  import { ScalarApiButton } from './ScalarApiButton';
15
- import { StaticSection } from './StaticSection';
16
15
  import { codeSampleGenerators } from './code-samples';
17
16
  import { generateMediaTypeExamples, generateSchemaExample } from './generateSchemaExample';
18
17
  import { stringifyOpenAPI } from './stringifyOpenAPI';
19
18
  import { getDefaultServerURL } from './util/server';
20
- import { checkIsReference, createStateKey } from './utils';
19
+ import { checkIsReference } from './utils';
21
20
  var CUSTOM_CODE_SAMPLES_KEYS = ['x-custom-examples', 'x-code-samples', 'x-codeSamples'];
22
21
  /**
23
22
  * Display code samples to execute the operation.
@@ -39,11 +38,7 @@ export function OpenAPICodeSample(props) {
39
38
  if (samples.length === 0) {
40
39
  return null;
41
40
  }
42
- return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
43
- <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
44
- <OpenAPITabsPanels />
45
- </StaticSection>
46
- </OpenAPITabs>);
41
+ return <OpenAPICodeSampleBody data={data} items={samples}/>;
47
42
  }
48
43
  /**
49
44
  * Generate code samples for the operation.
@@ -2,27 +2,28 @@
2
2
  import clsx from 'clsx';
3
3
  import { useCallback } from 'react';
4
4
  import { useStore } from 'zustand';
5
- import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
5
+ import { OpenAPISelect, OpenAPISelectItem } from './OpenAPISelect';
6
+ import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
6
7
  function useMediaTypeState(data, defaultKey) {
7
8
  var method = data.method, path = data.path;
8
- var store = useStore(getOrCreateTabStoreByKey("media-type-".concat(method, "-").concat(path), defaultKey));
9
- if (typeof store.tabKey !== 'string') {
9
+ var store = useStore(getOrCreateStoreByKey("media-type-".concat(method, "-").concat(path), defaultKey));
10
+ if (typeof store.key !== 'string') {
10
11
  throw new Error('Media type key is not a string');
11
12
  }
12
13
  return {
13
- mediaType: store.tabKey,
14
- setMediaType: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
14
+ mediaType: store.key,
15
+ setMediaType: useCallback(function (index) { return store.setKey(index); }, [store.setKey]),
15
16
  };
16
17
  }
17
18
  function useMediaTypeSampleIndexState(data, mediaType) {
18
19
  var method = data.method, path = data.path;
19
- var store = useStore(getOrCreateTabStoreByKey("media-type-sample-".concat(mediaType, "-").concat(method, "-").concat(path), 0));
20
- if (typeof store.tabKey !== 'number') {
20
+ var store = useStore(getOrCreateStoreByKey("media-type-sample-".concat(mediaType, "-").concat(method, "-").concat(path), 0));
21
+ if (typeof store.key !== 'number') {
21
22
  throw new Error('Example key is not a number');
22
23
  }
23
24
  return {
24
- index: store.tabKey,
25
- setIndex: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
25
+ index: store.key,
26
+ setIndex: useCallback(function (index) { return store.setKey(index); }, [store.setKey]),
26
27
  };
27
28
  }
28
29
  export function OpenAPIMediaTypeExamplesSelector(props) {
@@ -42,11 +43,18 @@ function MediaTypeSelector(props) {
42
43
  if (renderers.length < 2) {
43
44
  return null;
44
45
  }
45
- return (<select className={clsx('openapi-select')} value={state.mediaType} onChange={function (e) { return state.setMediaType(e.target.value); }}>
46
- {renderers.map(function (renderer) { return (<option key={renderer.mediaType} value={renderer.mediaType}>
47
- {renderer.mediaType}
48
- </option>); })}
49
- </select>);
46
+ var items = renderers.map(function (renderer) { return ({
47
+ key: renderer.mediaType,
48
+ label: renderer.mediaType,
49
+ }); });
50
+ return (<OpenAPISelect className={clsx('openapi-select')} selectedKey={state.mediaType} items={renderers.map(function (renderer) { return ({
51
+ key: renderer.mediaType,
52
+ label: renderer.mediaType,
53
+ }); })} onSelectionChange={function (e) { return state.setMediaType(String(e)); }} placement="bottom start">
54
+ {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
55
+ {item.label}
56
+ </OpenAPISelectItem>); })}
57
+ </OpenAPISelect>);
50
58
  }
51
59
  function ExamplesSelector(props) {
52
60
  var method = props.method, path = props.path, renderer = props.renderer;
@@ -54,11 +62,15 @@ function ExamplesSelector(props) {
54
62
  if (renderer.examples.length < 2) {
55
63
  return null;
56
64
  }
57
- return (<select className={clsx('openapi-select')} value={String(state.index)} onChange={function (e) { return state.setIndex(Number(e.target.value)); }}>
58
- {renderer.examples.map(function (example, index) { return (<option key={index} value={index}>
59
- {example.example.summary || "Example ".concat(index + 1)}
60
- </option>); })}
61
- </select>);
65
+ var items = renderer.examples.map(function (example, index) { return ({
66
+ key: index,
67
+ label: example.example.summary || "Example ".concat(index + 1),
68
+ }); });
69
+ return (<OpenAPISelect items={items} selectedKey={state.index} onSelectionChange={function (e) { return state.setIndex(Number(e)); }} placement="bottom start">
70
+ {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
71
+ {item.label}
72
+ </OpenAPISelectItem>); })}
73
+ </OpenAPISelect>);
62
74
  }
63
75
  export function OpenAPIMediaTypeExamplesBody(props) {
64
76
  var _a;
@@ -0,0 +1,15 @@
1
+ import { OpenAPISelectItem } from './OpenAPISelect';
2
+ import type { OpenAPIOperationData } from './types';
3
+ type CodeSampleItem = OpenAPISelectItem & {
4
+ body: React.ReactNode;
5
+ footer?: React.ReactNode;
6
+ };
7
+ export declare function OpenAPICodeSampleHeader(props: {
8
+ items: CodeSampleItem[];
9
+ data: OpenAPIOperationData;
10
+ }): import("react").JSX.Element;
11
+ export declare function OpenAPICodeSampleBody(props: {
12
+ items: CodeSampleItem[];
13
+ data: OpenAPIOperationData;
14
+ }): import("react").JSX.Element | null;
15
+ export {};
@@ -0,0 +1,49 @@
1
+ 'use client';
2
+ import { useCallback } from 'react';
3
+ import { useStore } from 'zustand';
4
+ import { OpenAPIPath } from './OpenAPIPath';
5
+ import { OpenAPISelect, OpenAPISelectItem } from './OpenAPISelect';
6
+ import { StaticSection } from './StaticSection';
7
+ import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
8
+ function useCodeSampleState(initialKey) {
9
+ if (initialKey === void 0) { initialKey = 'default'; }
10
+ var store = useStore(getOrCreateStoreByKey('codesample', initialKey));
11
+ return {
12
+ key: store.key,
13
+ setKey: useCallback(function (key) { return store.setKey(key); }, [store.setKey]),
14
+ };
15
+ }
16
+ export function OpenAPICodeSampleHeader(props) {
17
+ var _a, _b;
18
+ var data = props.data, items = props.items;
19
+ var state = useCodeSampleState((_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : '');
20
+ var selected = items.find(function (item) { return item.key === state.key; }) || items[0];
21
+ return (<>
22
+ <OpenAPIPath canCopy={false} withServer={false} data={data}/>
23
+ {items.length > 1 ? (<OpenAPISelect selectedKey={selected === null || selected === void 0 ? void 0 : selected.key} onSelectionChange={function (key) {
24
+ state.setKey(key);
25
+ }} items={items} placement="bottom end">
26
+ {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
27
+ {item.label}
28
+ </OpenAPISelectItem>); })}
29
+ </OpenAPISelect>) : items[0] ? (<span className="openapi-codesample-label">{items[0].label}</span>) : null}
30
+ </>);
31
+ }
32
+ export function OpenAPICodeSampleBody(props) {
33
+ var _a;
34
+ var items = props.items, data = props.data;
35
+ if (!items[0]) {
36
+ throw new Error('No items provided');
37
+ }
38
+ var state = useCodeSampleState((_a = items[0]) === null || _a === void 0 ? void 0 : _a.key);
39
+ var selected = items.find(function (item) { return item.key === state.key; }) || items[0];
40
+ if (!selected) {
41
+ return null;
42
+ }
43
+ return (<StaticSection header={<OpenAPICodeSampleHeader data={data} items={items}/>} className="openapi-codesample">
44
+ <div id={selected.key} className="openapi-codesample-panel">
45
+ {selected.body ? selected.body : null}
46
+ {selected.footer ? selected.footer : null}
47
+ </div>
48
+ </StaticSection>);
49
+ }
@@ -0,0 +1,34 @@
1
+ import type { OpenAPIV3 } from '@gitbook/openapi-parser';
2
+ import type { OpenAPIContext } from './types';
3
+ /**
4
+ * Display an example.
5
+ */
6
+ export declare function OpenAPIExample(props: {
7
+ example: OpenAPIV3.ExampleObject;
8
+ context: OpenAPIContext;
9
+ syntax: string;
10
+ }): string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
11
+ /**
12
+ * Empty response example.
13
+ */
14
+ export declare function OpenAPIEmptyExample(): import("react").JSX.Element;
15
+ /**
16
+ * Generate an example from a reference object.
17
+ */
18
+ export declare function getExampleFromReference(ref: OpenAPIV3.ReferenceObject): OpenAPIV3.ExampleObject;
19
+ /**
20
+ * Get examples from a media type object.
21
+ */
22
+ export declare function getExamplesFromMediaTypeObject(args: {
23
+ mediaType: string;
24
+ mediaTypeObject: OpenAPIV3.MediaTypeObject;
25
+ }): {
26
+ key: string;
27
+ example: OpenAPIV3.ExampleObject;
28
+ }[];
29
+ /**
30
+ * Get example from a schema object.
31
+ */
32
+ export declare function getExampleFromSchema(args: {
33
+ schema: OpenAPIV3.SchemaObject;
34
+ }): OpenAPIV3.ExampleObject;
@@ -0,0 +1,103 @@
1
+ import { generateSchemaExample } from './generateSchemaExample';
2
+ import { json2xml } from './json2xml';
3
+ import { stringifyOpenAPI } from './stringifyOpenAPI';
4
+ import { checkIsReference } from './utils';
5
+ /**
6
+ * Display an example.
7
+ */
8
+ export function OpenAPIExample(props) {
9
+ var example = props.example, context = props.context, syntax = props.syntax;
10
+ var code = stringifyExample({ example: example, xml: syntax === 'xml' });
11
+ if (code === null) {
12
+ return <OpenAPIEmptyExample />;
13
+ }
14
+ return context.renderCodeBlock({ code: code, syntax: syntax });
15
+ }
16
+ function stringifyExample(args) {
17
+ var example = args.example, xml = args.xml;
18
+ if (!example.value) {
19
+ return null;
20
+ }
21
+ if (typeof example.value === 'string') {
22
+ return example.value;
23
+ }
24
+ if (xml) {
25
+ return json2xml(example.value);
26
+ }
27
+ return stringifyOpenAPI(example.value, null, 2);
28
+ }
29
+ /**
30
+ * Empty response example.
31
+ */
32
+ export function OpenAPIEmptyExample() {
33
+ return (<pre className="openapi-example-empty">
34
+ <p>No Content</p>
35
+ </pre>);
36
+ }
37
+ /**
38
+ * Generate an example from a reference object.
39
+ */
40
+ export function getExampleFromReference(ref) {
41
+ return { summary: 'Unresolved reference', value: { $ref: ref.$ref } };
42
+ }
43
+ /**
44
+ * Get examples from a media type object.
45
+ */
46
+ export function getExamplesFromMediaTypeObject(args) {
47
+ var _a;
48
+ var _b, _c;
49
+ var mediaTypeObject = args.mediaTypeObject, mediaType = args.mediaType;
50
+ if (mediaTypeObject.examples) {
51
+ return Object.entries(mediaTypeObject.examples).map(function (_a) {
52
+ var key = _a[0], example = _a[1];
53
+ return {
54
+ key: key,
55
+ example: checkIsReference(example) ? getExampleFromReference(example) : example,
56
+ };
57
+ });
58
+ }
59
+ if (mediaTypeObject.example) {
60
+ return [{ key: 'default', example: { value: mediaTypeObject.example } }];
61
+ }
62
+ if (mediaTypeObject.schema) {
63
+ if (mediaType === 'application/xml') {
64
+ // @TODO normally we should use the name of the schema but we don't have it
65
+ // fix it when we got the reference name
66
+ var root = (_c = (_b = mediaTypeObject.schema.xml) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'object';
67
+ return [
68
+ {
69
+ key: 'default',
70
+ example: {
71
+ value: (_a = {},
72
+ _a[root] = generateSchemaExample(mediaTypeObject.schema, {
73
+ xml: mediaType === 'application/xml',
74
+ mode: 'read',
75
+ }),
76
+ _a),
77
+ },
78
+ },
79
+ ];
80
+ }
81
+ return [
82
+ {
83
+ key: 'default',
84
+ example: {
85
+ value: generateSchemaExample(mediaTypeObject.schema, {
86
+ mode: 'read',
87
+ }),
88
+ },
89
+ },
90
+ ];
91
+ }
92
+ return [];
93
+ }
94
+ /**
95
+ * Get example from a schema object.
96
+ */
97
+ export function getExampleFromSchema(args) {
98
+ var schema = args.schema;
99
+ if (schema.example) {
100
+ return { value: schema.example };
101
+ }
102
+ return { value: generateSchemaExample(schema, { mode: 'read' }) };
103
+ }
@@ -1,9 +1,9 @@
1
- import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
1
+ import type { OpenAPIContext, OpenAPIOperationData } from './types';
2
2
  /**
3
3
  * Display an interactive OpenAPI operation.
4
4
  */
5
5
  export declare function OpenAPIOperation(props: {
6
6
  className?: string;
7
7
  data: OpenAPIOperationData;
8
- context: OpenAPIContextProps;
8
+ context: OpenAPIContext;
9
9
  }): import("react").JSX.Element;
@@ -4,6 +4,7 @@ import { OpenAPICodeSample } from './OpenAPICodeSample';
4
4
  import { OpenAPIPath } from './OpenAPIPath';
5
5
  import { OpenAPIResponseExample } from './OpenAPIResponseExample';
6
6
  import { OpenAPISpec } from './OpenAPISpec';
7
+ import { getOpenAPIClientContext } from './context';
7
8
  import { resolveDescription } from './utils';
8
9
  /**
9
10
  * Display an interactive OpenAPI operation.
@@ -12,11 +13,7 @@ export function OpenAPIOperation(props) {
12
13
  var _a;
13
14
  var className = props.className, data = props.data, context = props.context;
14
15
  var operation = data.operation;
15
- var clientContext = {
16
- defaultInteractiveOpened: context.defaultInteractiveOpened,
17
- icons: context.icons,
18
- blockKey: context.blockKey,
19
- };
16
+ var clientContext = getOpenAPIClientContext(context);
20
17
  return (<div className={clsx('openapi-operation', className)}>
21
18
  <div className="openapi-summary" id={operation.summary ? undefined : context.id}>
22
19
  {(operation.deprecated || operation['x-stability']) && (<div className="openapi-summary-tags">
@@ -30,7 +27,7 @@ export function OpenAPIOperation(props) {
30
27
  title: operation.summary,
31
28
  })
32
29
  : null}
33
- <OpenAPIPath data={data} context={context}/>
30
+ <OpenAPIPath data={data}/>
34
31
  </div>
35
32
  <div className="openapi-columns">
36
33
  <div className="openapi-column-spec">
@@ -74,7 +71,6 @@ var stabilityEnum = {
74
71
  experimental: 'Experimental',
75
72
  alpha: 'Alpha',
76
73
  beta: 'Beta',
77
- stable: 'Stable',
78
74
  };
79
75
  function OpenAPIOperationStability(props) {
80
76
  var stability = props.stability;
@@ -1,8 +1,16 @@
1
- import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
1
+ import type { OpenAPIOperationData } from './types';
2
2
  /**
3
3
  * Display the path of an operation.
4
4
  */
5
5
  export declare function OpenAPIPath(props: {
6
6
  data: OpenAPIOperationData;
7
- context: OpenAPIContextProps;
7
+ /** Whether to show the server URL.
8
+ * @default true
9
+ */
10
+ withServer?: boolean;
11
+ /**
12
+ * Whether the path is copyable.
13
+ * @default true
14
+ */
15
+ canCopy?: boolean;
8
16
  }): import("react").JSX.Element;
@@ -4,16 +4,21 @@ import { getDefaultServerURL } from './util/server';
4
4
  * Display the path of an operation.
5
5
  */
6
6
  export function OpenAPIPath(props) {
7
- var data = props.data;
7
+ var data = props.data, _a = props.withServer, withServer = _a === void 0 ? true : _a, _b = props.canCopy, canCopy = _b === void 0 ? true : _b;
8
8
  var method = data.method, path = data.path, operation = data.operation;
9
9
  var server = getDefaultServerURL(data.servers);
10
10
  var formattedPath = formatPath(path);
11
+ var element = (function () {
12
+ return (<>
13
+ {withServer ? <span className="openapi-path-server">{server}</span> : null}
14
+ {formattedPath}
15
+ </>);
16
+ })();
11
17
  return (<div className="openapi-path">
12
18
  <div className={"openapi-method openapi-method-".concat(method)}>{method}</div>
13
19
 
14
- <OpenAPICopyButton value={server + path} className="openapi-path-title" data-deprecated={operation.deprecated}>
15
- <span className="openapi-path-server">{server}</span>
16
- {formattedPath}
20
+ <OpenAPICopyButton value={"".concat(withServer ? server : '').concat(path)} className="openapi-path-title" data-deprecated={operation.deprecated} isDisabled={!canCopy}>
21
+ {element}
17
22
  </OpenAPICopyButton>
18
23
  </div>);
19
24
  }
@@ -34,8 +34,8 @@ export function OpenAPIResponse(props) {
34
34
  return parameterToProperty(__assign({ name: name }, header));
35
35
  })} context={context}/>
36
36
  </OpenAPIDisclosure>) : null}
37
- <div className="openapi-responsebody">
38
- <OpenAPISchemaProperties id={"response-".concat(context.blockKey)} properties={mediaType.schema ? [{ schema: mediaType.schema }] : []} context={context}/>
39
- </div>
37
+ {mediaType.schema && (<div className="openapi-responsebody">
38
+ <OpenAPISchemaProperties id={"response-".concat(context.blockKey)} properties={[{ schema: mediaType.schema }]} context={context}/>
39
+ </div>)}
40
40
  </div>);
41
41
  }
@@ -1,8 +1,8 @@
1
- import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
1
+ import type { OpenAPIContext, OpenAPIOperationData } from './types';
2
2
  /**
3
3
  * Display an example of the response content.
4
4
  */
5
5
  export declare function OpenAPIResponseExample(props: {
6
6
  data: OpenAPIOperationData;
7
- context: OpenAPIContextProps;
7
+ context: OpenAPIContext;
8
8
  }): import("react").JSX.Element | null;
@@ -1,9 +1,7 @@
1
1
  import { Markdown } from './Markdown';
2
+ import { OpenAPIEmptyExample, OpenAPIExample, getExampleFromReference, getExamplesFromMediaTypeObject, } from './OpenAPIExample';
2
3
  import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
3
4
  import { StaticSection } from './StaticSection';
4
- import { generateSchemaExample } from './generateSchemaExample';
5
- import { json2xml } from './json2xml';
6
- import { stringifyOpenAPI } from './stringifyOpenAPI';
7
5
  import { checkIsReference, createStateKey, resolveDescription } from './utils';
8
6
  /**
9
7
  * Display an example of the response content.
@@ -48,7 +46,7 @@ export function OpenAPIResponseExample(props) {
48
46
  return {
49
47
  key: key,
50
48
  label: key,
51
- body: <OpenAPIEmptyResponseExample />,
49
+ body: <OpenAPIEmptyExample />,
52
50
  footer: description ? <Markdown source={description}/> : undefined,
53
51
  };
54
52
  }
@@ -63,7 +61,7 @@ export function OpenAPIResponseExample(props) {
63
61
  return null;
64
62
  }
65
63
  return (<OpenAPITabs stateKey={createStateKey('response-example')} items={tabs}>
66
- <StaticSection header={<OpenAPITabsList />} className="openapi-response-example">
64
+ <StaticSection header={<OpenAPITabsList />} className="openapi-panel">
67
65
  <OpenAPITabsPanels />
68
66
  </StaticSection>
69
67
  </OpenAPITabs>);
@@ -99,7 +97,7 @@ function OpenAPIResponseMediaType(props) {
99
97
  var syntax = getSyntaxFromMediaType(mediaType);
100
98
  var firstExample = examples[0];
101
99
  if (!firstExample) {
102
- return <OpenAPIEmptyResponseExample />;
100
+ return <OpenAPIEmptyExample />;
103
101
  }
104
102
  if (examples.length === 1) {
105
103
  return (<OpenAPIExample example={firstExample.example} context={props.context} syntax={syntax}/>);
@@ -117,30 +115,6 @@ function OpenAPIResponseMediaType(props) {
117
115
  </StaticSection>
118
116
  </OpenAPITabs>);
119
117
  }
120
- /**
121
- * Display an example.
122
- */
123
- function OpenAPIExample(props) {
124
- var example = props.example, context = props.context, syntax = props.syntax;
125
- var code = stringifyExample({ example: example, xml: syntax === 'xml' });
126
- if (code === null) {
127
- return <OpenAPIEmptyResponseExample />;
128
- }
129
- return context.renderCodeBlock({ code: code, syntax: syntax });
130
- }
131
- function stringifyExample(args) {
132
- var example = args.example, xml = args.xml;
133
- if (!example.value) {
134
- return null;
135
- }
136
- if (typeof example.value === 'string') {
137
- return example.value;
138
- }
139
- if (xml) {
140
- return json2xml(example.value);
141
- }
142
- return stringifyOpenAPI(example.value, null, 2);
143
- }
144
118
  /**
145
119
  * Get the syntax from a media type.
146
120
  */
@@ -153,63 +127,3 @@ function getSyntaxFromMediaType(mediaType) {
153
127
  }
154
128
  return 'text';
155
129
  }
156
- /**
157
- * Get examples from a media type object.
158
- */
159
- function getExamplesFromMediaTypeObject(args) {
160
- var _a;
161
- var _b, _c;
162
- var mediaTypeObject = args.mediaTypeObject, mediaType = args.mediaType;
163
- if (mediaTypeObject.examples) {
164
- return Object.entries(mediaTypeObject.examples).map(function (_a) {
165
- var key = _a[0], example = _a[1];
166
- return {
167
- key: key,
168
- example: checkIsReference(example) ? getExampleFromReference(example) : example,
169
- };
170
- });
171
- }
172
- if (mediaTypeObject.example) {
173
- return [{ key: 'default', example: { value: mediaTypeObject.example } }];
174
- }
175
- if (mediaTypeObject.schema) {
176
- if (mediaType === 'application/xml') {
177
- // @TODO normally we should use the name of the schema but we don't have it
178
- // fix it when we got the reference name
179
- var root = (_c = (_b = mediaTypeObject.schema.xml) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'object';
180
- return [
181
- {
182
- key: 'default',
183
- example: {
184
- value: (_a = {},
185
- _a[root] = generateSchemaExample(mediaTypeObject.schema, {
186
- xml: mediaType === 'application/xml',
187
- }),
188
- _a),
189
- },
190
- },
191
- ];
192
- }
193
- return [
194
- {
195
- key: 'default',
196
- example: { value: generateSchemaExample(mediaTypeObject.schema) },
197
- },
198
- ];
199
- }
200
- return [];
201
- }
202
- /**
203
- * Empty response example.
204
- */
205
- function OpenAPIEmptyResponseExample() {
206
- return (<pre className="openapi-response-example-empty">
207
- <p>No body</p>
208
- </pre>);
209
- }
210
- /**
211
- * Generate an example from a reference object.
212
- */
213
- function getExampleFromReference(ref) {
214
- return { summary: 'Unresolved reference', value: { $ref: ref.$ref } };
215
- }