Skip to content

Commit 02a29ef

Browse files
sserratasserrata
authored
feat(theme): add initial i18n support (#1210)
* feat(theme): add initial i18n support * Add i18n wrappers across more theme components * localize remaining theme components
1 parent afa156a commit 02a29ef

File tree

24 files changed

+602
-88
lines changed

24 files changed

+602
-88
lines changed

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

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77

88
import React from "react";
99

10+
import { translate } from "@docusaurus/Translate";
1011
import FormItem from "@theme/ApiExplorer/FormItem";
1112
import FormSelect from "@theme/ApiExplorer/FormSelect";
1213
import FormTextInput from "@theme/ApiExplorer/FormTextInput";
1314
import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
15+
import { OPENAPI_AUTH } from "@theme/translationIds";
1416

1517
import { setAuthData, setSelectedAuth } from "./slice";
1618

@@ -45,9 +47,18 @@ function Authorization() {
4547
{selectedAuth.map((a: any) => {
4648
if (a.type === "http" && a.scheme === "bearer") {
4749
return (
48-
<FormItem label="Bearer Token" key={a.key + "-bearer"}>
50+
<FormItem
51+
label={translate({
52+
id: OPENAPI_AUTH.BEARER_TOKEN,
53+
message: "Bearer Token",
54+
})}
55+
key={a.key + "-bearer"}
56+
>
4957
<FormTextInput
50-
placeholder="Bearer Token"
58+
placeholder={translate({
59+
id: OPENAPI_AUTH.BEARER_TOKEN,
60+
message: "Bearer Token",
61+
})}
5162
password
5263
value={data[a.key].token ?? ""}
5364
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,9 +78,18 @@ function Authorization() {
6778

6879
if (a.type === "oauth2") {
6980
return (
70-
<FormItem label="Bearer Token" key={a.key + "-oauth2"}>
81+
<FormItem
82+
label={translate({
83+
id: OPENAPI_AUTH.BEARER_TOKEN,
84+
message: "Bearer Token",
85+
})}
86+
key={a.key + "-oauth2"}
87+
>
7188
<FormTextInput
72-
placeholder="Bearer Token"
89+
placeholder={translate({
90+
id: OPENAPI_AUTH.BEARER_TOKEN,
91+
message: "Bearer Token",
92+
})}
7393
password
7494
value={data[a.key].token ?? ""}
7595
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -90,9 +110,17 @@ function Authorization() {
90110
if (a.type === "http" && a.scheme === "basic") {
91111
return (
92112
<React.Fragment key={a.key + "-basic"}>
93-
<FormItem label="Username">
113+
<FormItem
114+
label={translate({
115+
id: OPENAPI_AUTH.USERNAME,
116+
message: "Username",
117+
})}
118+
>
94119
<FormTextInput
95-
placeholder="Username"
120+
placeholder={translate({
121+
id: OPENAPI_AUTH.USERNAME,
122+
message: "Username",
123+
})}
96124
value={data[a.key].username ?? ""}
97125
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
98126
const value = e.target.value;
@@ -106,9 +134,17 @@ function Authorization() {
106134
}}
107135
/>
108136
</FormItem>
109-
<FormItem label="Password">
137+
<FormItem
138+
label={translate({
139+
id: OPENAPI_AUTH.PASSWORD,
140+
message: "Password",
141+
})}
142+
>
110143
<FormTextInput
111-
placeholder="Password"
144+
placeholder={translate({
145+
id: OPENAPI_AUTH.PASSWORD,
146+
message: "Password",
147+
})}
112148
password
113149
value={data[a.key].password ?? ""}
114150
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
import React from "react";
99

10+
import { translate } from "@docusaurus/Translate";
11+
1012
import json2xml from "@theme/ApiExplorer/Body/json2xml";
1113
import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
1214
import FormItem from "@theme/ApiExplorer/FormItem";
@@ -17,6 +19,7 @@ import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
1719
import Markdown from "@theme/Markdown";
1820
import SchemaTabs from "@theme/SchemaTabs";
1921
import TabItem from "@theme/TabItem";
22+
import { OPENAPI_BODY, OPENAPI_REQUEST } from "@theme/translationIds";
2023
import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
2124
import format from "xml-formatter";
2225

@@ -98,7 +101,10 @@ function Body({
98101
return (
99102
<FormItem>
100103
<FormFileUpload
101-
placeholder={schema.description || "Body"}
104+
placeholder={
105+
schema.description ||
106+
translate({ id: OPENAPI_REQUEST.BODY_TITLE, message: "Body" })
107+
}
102108
onChange={(file: any) => {
103109
if (file === undefined) {
104110
dispatch(clearRawBody());
@@ -302,7 +308,10 @@ function Body({
302308
<SchemaTabs className="openapi-tabs__schema" lazy>
303309
{/* @ts-ignore */}
304310
<TabItem
305-
label="Example (from schema)"
311+
label={translate({
312+
id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
313+
message: "Example (from schema)",
314+
})}
306315
value="Example (from schema)"
307316
default
308317
>
@@ -334,7 +343,10 @@ function Body({
334343
<SchemaTabs className="openapi-tabs__schema" lazy>
335344
{/* @ts-ignore */}
336345
<TabItem
337-
label="Example (from schema)"
346+
label={translate({
347+
id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
348+
message: "Example (from schema)",
349+
})}
338350
value="Example (from schema)"
339351
default
340352
>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77

88
import React, { useState } from "react";
99

10+
import { translate } from "@docusaurus/Translate";
1011
import FloatingButton from "@theme/ApiExplorer/FloatingButton";
12+
import { OPENAPI_FORM_FILE_UPLOAD } from "@theme/translationIds";
1113
import MagicDropzone from "react-magic-dropzone";
1214

1315
type PreviewFile = { preview: string } & File;
@@ -102,7 +104,10 @@ function FormFileUpload({ placeholder, onChange }: Props) {
102104
setAndNotifyFile(undefined);
103105
}}
104106
>
105-
Clear
107+
{translate({
108+
id: OPENAPI_FORM_FILE_UPLOAD.CLEAR_BUTTON,
109+
message: "Clear",
110+
})}
106111
</button>
107112
<RenderPreview file={file} />
108113
</>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77

88
import React from "react";
99

10+
import { translate } from "@docusaurus/Translate";
11+
import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds";
12+
1013
import clsx from "clsx";
1114

1215
export interface Props {
@@ -24,7 +27,11 @@ function FormItem({ label, type, required, children, className }: Props) {
2427
<label className="openapi-explorer__form-item-label">{label}</label>
2528
)}
2629
{type && <span style={{ opacity: 0.6 }}> — {type}</span>}
27-
{required && <span className="openapi-schema__required">required</span>}
30+
{required && (
31+
<span className="openapi-schema__required">
32+
{translate({ id: OPENAPI_SCHEMA_ITEM.REQUIRED, message: "required" })}
33+
</span>
34+
)}
2835
<div>{children}</div>
2936
</div>
3037
);

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
// @ts-nocheck
99
import React from "react";
1010

11+
import { translate } from "@docusaurus/Translate";
1112
import { ErrorMessage } from "@hookform/error-message";
13+
import { OPENAPI_FORM } from "@theme/translationIds";
1214
import clsx from "clsx";
1315
import { useFormContext } from "react-hook-form";
1416

@@ -41,7 +43,12 @@ function FormTextInput({
4143
{paramName ? (
4244
<input
4345
{...register(paramName, {
44-
required: isRequired ? "This field is required" : false,
46+
required: isRequired
47+
? translate({
48+
id: OPENAPI_FORM.FIELD_REQUIRED,
49+
message: "This field is required",
50+
})
51+
: false,
4552
})}
4653
className={clsx("openapi-explorer__form-item-input", {
4754
error: showErrorMessage,

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@
88
import React, { type JSX, useEffect, useState } from "react";
99

1010
import { usePrismTheme } from "@docusaurus/theme-common";
11+
import { translate } from "@docusaurus/Translate";
1112
import useIsBrowser from "@docusaurus/useIsBrowser";
1213
import { ErrorMessage } from "@hookform/error-message";
1314
import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
15+
import { OPENAPI_FORM } from "@theme/translationIds";
1416
import clsx from "clsx";
1517
import { Controller, useFormContext } from "react-hook-form";
1618
import { LiveProvider, LiveEditor, withLive } from "react-live";
@@ -85,7 +87,13 @@ function App({
8587
<Controller
8688
control={control}
8789
rules={{
88-
required: isRequired && !code ? "This field is required" : false,
90+
required:
91+
isRequired && !code
92+
? translate({
93+
id: OPENAPI_FORM.FIELD_REQUIRED,
94+
message: "This field is required",
95+
})
96+
: false,
8997
}}
9098
name="requestBody"
9199
render={({ field: { onChange, name } }) => (

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77

88
import React, { useEffect, useState } from "react";
99

10+
import { translate } from "@docusaurus/Translate";
1011
import { ErrorMessage } from "@hookform/error-message";
1112
import { nanoid } from "@reduxjs/toolkit";
1213
import FormSelect from "@theme/ApiExplorer/FormSelect";
1314
import FormTextInput from "@theme/ApiExplorer/FormTextInput";
1415
import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
1516
import { useTypedDispatch } from "@theme/ApiItem/hooks";
17+
import { OPENAPI_FORM } from "@theme/translationIds";
1618
import { Controller, useFormContext } from "react-hook-form";
1719

1820
export interface ParamProps {
@@ -121,7 +123,14 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
121123
<>
122124
<Controller
123125
control={control}
124-
rules={{ required: param.required ? "This field is required" : false }}
126+
rules={{
127+
required: param.required
128+
? translate({
129+
id: OPENAPI_FORM.FIELD_REQUIRED,
130+
message: "This field is required",
131+
})
132+
: false,
133+
}}
125134
name="paramArray"
126135
render={({ field: { onChange, name } }) => (
127136
<>

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77

88
import React from "react";
99

10+
import { translate } from "@docusaurus/Translate";
1011
import { ErrorMessage } from "@hookform/error-message";
1112
import FormSelect from "@theme/ApiExplorer/FormSelect";
1213
import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
1314
import { useTypedDispatch } from "@theme/ApiItem/hooks";
15+
import { OPENAPI_FORM } from "@theme/translationIds";
1416
import { Controller, useFormContext } from "react-hook-form";
1517

1618
export interface ParamProps {
@@ -31,7 +33,14 @@ export default function ParamBooleanFormItem({ param }: ParamProps) {
3133
<>
3234
<Controller
3335
control={control}
34-
rules={{ required: param.required ? "This field is required" : false }}
36+
rules={{
37+
required: param.required
38+
? translate({
39+
id: OPENAPI_FORM.FIELD_REQUIRED,
40+
message: "This field is required",
41+
})
42+
: false,
43+
}}
3544
name="paramBoolean"
3645
render={({ field: { onChange, name } }) => (
3746
<FormSelect

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77

88
import React from "react";
99

10+
import { translate } from "@docusaurus/Translate";
1011
import { ErrorMessage } from "@hookform/error-message";
1112
import FormMultiSelect from "@theme/ApiExplorer/FormMultiSelect";
1213
import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
1314
import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
15+
import { OPENAPI_FORM } from "@theme/translationIds";
1416
import { Controller, useFormContext } from "react-hook-form";
1517

1618
export interface ParamProps {
@@ -61,7 +63,14 @@ export default function ParamMultiSelectFormItem({ param }: ParamProps) {
6163
<>
6264
<Controller
6365
control={control}
64-
rules={{ required: param.required ? "This field is required" : false }}
66+
rules={{
67+
required: param.required
68+
? translate({
69+
id: OPENAPI_FORM.FIELD_REQUIRED,
70+
message: "This field is required",
71+
})
72+
: false,
73+
}}
6574
name="paramMultiSelect"
6675
render={({ field: { onChange, name } }) => (
6776
<FormMultiSelect

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77

88
import React from "react";
99

10+
import { translate } from "@docusaurus/Translate";
1011
import { ErrorMessage } from "@hookform/error-message";
1112
import FormSelect from "@theme/ApiExplorer/FormSelect";
1213
import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
1314
import { useTypedDispatch } from "@theme/ApiItem/hooks";
15+
import { OPENAPI_FORM } from "@theme/translationIds";
1416
import { Controller, useFormContext } from "react-hook-form";
1517

1618
export interface ParamProps {
@@ -33,7 +35,14 @@ export default function ParamSelectFormItem({ param }: ParamProps) {
3335
<>
3436
<Controller
3537
control={control}
36-
rules={{ required: param.required ? "This field is required" : false }}
38+
rules={{
39+
required: param.required
40+
? translate({
41+
id: OPENAPI_FORM.FIELD_REQUIRED,
42+
message: "This field is required",
43+
})
44+
: false,
45+
}}
3746
name="paramSelect"
3847
render={({ field: { onChange, name } }) => (
3948
<FormSelect

0 commit comments

Comments
 (0)