Skip to content

Commit 31ba58d

Browse files
dsuketdsuket
committed
fix Examples
1 parent 3a1796a commit 31ba58d

File tree

7 files changed

+118
-173
lines changed

7 files changed

+118
-173
lines changed

‎packages/docusaurus-theme-openapi-docs/src/theme/Example/_Example.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.openapi-examples {
2+
> .openapi-tabs__schema-container {
3+
margin-left: 0.4rem;
4+
5+
> .openapi-tabs__schema-tabs-container {
6+
margin-top: 0.4rem;
7+
}
8+
9+
@layer docusaurus.infima {
10+
> .margin-top--md {
11+
margin-top: 0.2rem !important;
12+
margin-left: 0.2rem;
13+
}
14+
}
15+
}
16+
}

‎packages/docusaurus-theme-openapi-docs/src/theme/Example/index.tsx‎

Lines changed: 91 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,37 @@
77

88
import React from "react";
99

10+
import { translate } from "@docusaurus/Translate";
1011
import { ExampleObject } from "@theme/ParamsItem";
1112
import SchemaTabs from "@theme/SchemaTabs";
1213
import TabItem from "@theme/TabItem";
14+
import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds";
15+
16+
const EXAMPLE_CLASS_NAME = "openapi-example";
17+
const EXAMPLES_CLASS_NAME = "openapi-examples";
18+
19+
type ExampleType = string;
20+
type ExamplesType = Record<string, ExampleObject> | string[];
21+
22+
/**
23+
* Example Component Props
24+
*/
25+
type ExampleProps =
26+
| { example: ExampleType; examples?: ExamplesType }
27+
| { example?: ExampleType; examples: ExamplesType };
28+
29+
/**
30+
* Example Component
31+
*/
32+
export const Example = ({ example, examples }: ExampleProps) => {
33+
if (example) {
34+
return renderExample(example);
35+
}
36+
if (examples) {
37+
return renderExamples(examples);
38+
}
39+
return undefined;
40+
};
1341

1442
/**
1543
* Format example value
@@ -24,51 +52,55 @@ const formatExample = (example: any) => {
2452
return String(example);
2553
};
2654

55+
const renderExample = (example: ExampleType) => {
56+
return (
57+
<div className={EXAMPLE_CLASS_NAME}>
58+
<strong>
59+
{translate({
60+
id: OPENAPI_SCHEMA_ITEM.EXAMPLE,
61+
message: "Example:",
62+
})}
63+
</strong>
64+
<span>
65+
<code>{example}</code>
66+
</span>
67+
</div>
68+
);
69+
};
70+
71+
const renderExamples = (examples: ExamplesType) => {
72+
if (Array.isArray(examples)) {
73+
return renderStringArrayExamples(examples);
74+
}
75+
return renderExamplesRecord(examples);
76+
};
77+
2778
/**
2879
* Render string examples
2980
*
3081
* @param examples
3182
* @returns
3283
*/
33-
export function renderStringExamples(
34-
examples: string[] | undefined
35-
): React.JSX.Element | undefined {
36-
if (examples && examples.length > 0) {
37-
// If there's only one example, display it without tabs
38-
if (examples.length === 1) {
39-
return (
40-
<div>
41-
<strong>Example: </strong>
42-
<span>
43-
<code>{formatExample(examples[0])}</code>
44-
</span>
45-
</div>
46-
);
47-
}
48-
49-
// Multiple examples - use tabs
50-
return (
51-
<div>
52-
<strong>Examples:</strong>
53-
<SchemaTabs>
54-
{examples.map((example, index) => (
55-
// @ts-ignore
56-
<TabItem
57-
value={`Example ${index + 1}`}
58-
label={`Example ${index + 1}`}
59-
key={`Example ${index + 1}`}
60-
>
61-
<p>
62-
<strong>Example: </strong>
63-
<code>{formatExample(example)}</code>
64-
</p>
65-
</TabItem>
66-
))}
67-
</SchemaTabs>
68-
</div>
69-
);
84+
export function renderStringArrayExamples(examples: string[]) {
85+
if (examples.length === 0) {
86+
return undefined;
7087
}
71-
return undefined;
88+
// If there's only one example, display it without tabs
89+
if (examples.length === 1) {
90+
return renderExample(examples[0]);
91+
}
92+
93+
// Multiple examples - use tabs
94+
const exampleEntries = examples.reduce(
95+
(acc, example, index) => ({
96+
...acc,
97+
[`Example ${index + 1}`]: {
98+
value: example,
99+
},
100+
}),
101+
{} as Record<string, ExampleObject>
102+
);
103+
return renderExamplesRecord(exampleEntries);
72104
}
73105

74106
export const renderExamplesRecord = (
@@ -81,25 +113,23 @@ export const renderExamplesRecord = (
81113
if (!firstExample) {
82114
return undefined;
83115
}
84-
return (
85-
<div>
86-
<strong>Example: </strong>
87-
<span>
88-
<code>{formatExample(firstExample.value)}</code>
89-
</span>
90-
</div>
91-
);
116+
return renderExample(firstExample.value);
92117
}
93118

94119
return (
95-
<>
96-
<strong>Examples:</strong>
120+
<div className={EXAMPLES_CLASS_NAME}>
121+
<strong>
122+
{translate({
123+
id: OPENAPI_SCHEMA_ITEM.EXAMPLES,
124+
message: "Examples:",
125+
})}
126+
</strong>
97127
<SchemaTabs>
98128
{exampleEntries.map(([exampleName, exampleProperties]) =>
99129
renderExampleObject(exampleName, exampleProperties)
100130
)}
101131
</SchemaTabs>
102-
</>
132+
</div>
103133
);
104134
};
105135

@@ -120,12 +150,22 @@ const renderExampleObject = (
120150
{exampleProperties.summary && <p>{exampleProperties.summary}</p>}
121151
{exampleProperties.description && (
122152
<p>
123-
<strong>Description: </strong>
153+
<strong>
154+
{translate({
155+
id: OPENAPI_SCHEMA_ITEM.DESCRIPTION,
156+
message: "Description:",
157+
})}{" "}
158+
</strong>
124159
<span>{exampleProperties.description}</span>
125160
</p>
126161
)}
127162
<p>
128-
<strong>Example: </strong>
163+
<strong>
164+
{translate({
165+
id: OPENAPI_SCHEMA_ITEM.EXAMPLE,
166+
message: "Example:",
167+
})}{" "}
168+
</strong>
129169
<code>{formatExample(exampleProperties.value)}</code>
130170
</p>
131171
</TabItem>

‎packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/_ParamsItem.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,6 @@
2525
color: var(--ifm-color-primary);
2626
}
2727
}
28-
29-
.openapi-tabs__schema-container {
30-
> .openapi-tabs__schema-tabs-container {
31-
margin: 0.2rem 0;
32-
}
33-
34-
@layer docusaurus.infima {
35-
> .margin-top--md {
36-
margin-top: 0rem !important;
37-
}
38-
}
39-
}
4028
}
4129

4230
.openapi-schema__type {

‎packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx‎

Lines changed: 4 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@
88
import React from "react";
99

1010
import { translate } from "@docusaurus/Translate";
11+
import { Example } from "@theme/Example";
1112
import Markdown from "@theme/Markdown";
12-
import SchemaTabs from "@theme/SchemaTabs";
13-
import TabItem from "@theme/TabItem";
1413
/* eslint-disable import/no-extraneous-dependencies*/
1514
import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds";
1615
import clsx from "clsx";
1716

1817
import { getQualifierMessage, getSchemaName } from "../../markdown/schema";
19-
import { guard, toString } from "../../markdown/utils";
18+
import { guard } from "../../markdown/utils";
2019

2120
export interface ExampleObject {
2221
summary?: string;
@@ -156,60 +155,6 @@ function ParamsItem({ param, ...rest }: Props) {
156155
return undefined;
157156
}
158157

159-
const renderExample = guard(toString(example), (example) => (
160-
<div>
161-
<strong>
162-
{translate({
163-
id: OPENAPI_SCHEMA_ITEM.EXAMPLE,
164-
message: "Example:",
165-
})}{" "}
166-
</strong>
167-
{example}
168-
</div>
169-
));
170-
171-
const renderExamples = guard(examples, (examples) => {
172-
const exampleEntries = Object.entries(examples);
173-
return (
174-
<>
175-
<strong>
176-
{translate({
177-
id: OPENAPI_SCHEMA_ITEM.EXAMPLES,
178-
message: "Examples:",
179-
})}
180-
</strong>
181-
<SchemaTabs>
182-
{exampleEntries.map(([exampleName, exampleProperties]) => (
183-
// @ts-ignore
184-
<TabItem value={exampleName} label={exampleName}>
185-
{exampleProperties.summary && <p>{exampleProperties.summary}</p>}
186-
{exampleProperties.description && (
187-
<p>
188-
<strong>
189-
{translate({
190-
id: OPENAPI_SCHEMA_ITEM.DESCRIPTION,
191-
message: "Description:",
192-
})}{" "}
193-
</strong>
194-
<span>{exampleProperties.description}</span>
195-
</p>
196-
)}
197-
<p>
198-
<strong>
199-
{translate({
200-
id: OPENAPI_SCHEMA_ITEM.EXAMPLE,
201-
message: "Example:",
202-
})}{" "}
203-
</strong>
204-
<code>{exampleProperties.value}</code>
205-
</p>
206-
</TabItem>
207-
))}
208-
</SchemaTabs>
209-
</>
210-
);
211-
});
212-
213158
return (
214159
<div className="openapi-params__list-item">
215160
<span className="openapi-schema__container">
@@ -231,8 +176,8 @@ function ParamsItem({ param, ...rest }: Props) {
231176
{renderDescription}
232177
{renderEnumDescriptions}
233178
{renderDefaultValue()}
234-
{renderExample}
235-
{renderExamples}
179+
{example && <Example example={example} />}
180+
{examples && <Example examples={examples} />}
236181
</div>
237182
);
238183
}

‎packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/_SchemaItem.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,6 @@
2727
content: "";
2828
display: inline-block;
2929
}
30-
31-
.openapi-tabs__schema-container {
32-
> .openapi-tabs__schema-tabs-container {
33-
margin: 0.2rem 0;
34-
}
35-
36-
@layer docusaurus.infima {
37-
> .margin-top--md {
38-
margin-top: 0rem !important;
39-
}
40-
}
41-
}
4230
}
4331

4432
.openapi-schema__name {

0 commit comments

Comments
 (0)