Add i18n wrappers across more theme components

sserrata · sserrata · commit 8b85f978d203 · 2025-07-17T12:07:14.000-05:00
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx
@@ -7,10 +7,12 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 import FormItem from "@theme/ApiExplorer/FormItem";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { OPENAPI_AUTH } from "@theme/translationIds";
 
 import { setAuthData, setSelectedAuth } from "./slice";
 
@@ -45,9 +47,18 @@ function Authorization() {
       {selectedAuth.map((a: any) => {
         if (a.type === "http" && a.scheme === "bearer") {
           return (
-            <FormItem label="Bearer Token" key={a.key + "-bearer"}>
+            <FormItem
+              label={translate({
+                id: OPENAPI_AUTH.BEARER_TOKEN,
+                message: "Bearer Token",
+              })}
+              key={a.key + "-bearer"}
+            >
               <FormTextInput
-                placeholder="Bearer Token"
+                placeholder={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 password
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,9 +78,18 @@ function Authorization() {
 
         if (a.type === "oauth2") {
           return (
-            <FormItem label="Bearer Token" key={a.key + "-oauth2"}>
+            <FormItem
+              label={translate({
+                id: OPENAPI_AUTH.BEARER_TOKEN,
+                message: "Bearer Token",
+              })}
+              key={a.key + "-oauth2"}
+            >
               <FormTextInput
-                placeholder="Bearer Token"
+                placeholder={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 password
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -90,9 +110,17 @@ function Authorization() {
         if (a.type === "http" && a.scheme === "basic") {
           return (
             <React.Fragment key={a.key + "-basic"}>
-              <FormItem label="Username">
+              <FormItem
+                label={translate({
+                  id: OPENAPI_AUTH.USERNAME,
+                  message: "Username",
+                })}
+              >
                 <FormTextInput
-                  placeholder="Username"
+                  placeholder={translate({
+                    id: OPENAPI_AUTH.USERNAME,
+                    message: "Username",
+                  })}
                   value={data[a.key].username ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     const value = e.target.value;
@@ -106,9 +134,17 @@ function Authorization() {
                   }}
                 />
               </FormItem>
-              <FormItem label="Password">
+              <FormItem
+                label={translate({
+                  id: OPENAPI_AUTH.PASSWORD,
+                  message: "Password",
+                })}
+              >
                 <FormTextInput
-                  placeholder="Password"
+                  placeholder={translate({
+                    id: OPENAPI_AUTH.PASSWORD,
+                    message: "Password",
+                  })}
                   password
                   value={data[a.key].password ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx
@@ -7,7 +7,9 @@
 
 import React, { useState } from "react";
 
+import { translate } from "@docusaurus/Translate";
 import FloatingButton from "@theme/ApiExplorer/FloatingButton";
+import { OPENAPI_FORM_FILE_UPLOAD } from "@theme/translationIds";
 import MagicDropzone from "react-magic-dropzone";
 
 type PreviewFile = { preview: string } & File;
@@ -102,7 +104,10 @@ function FormFileUpload({ placeholder, onChange }: Props) {
                 setAndNotifyFile(undefined);
               }}
             >
-              Clear
+              {translate({
+                id: OPENAPI_FORM_FILE_UPLOAD.CLEAR_BUTTON,
+                message: "Clear",
+              })}
             </button>
             <RenderPreview file={file} />
           </>
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx
@@ -8,7 +8,9 @@
 // @ts-nocheck
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
+import { OPENAPI_FORM } from "@theme/translationIds";
 import clsx from "clsx";
 import { useFormContext } from "react-hook-form";
 
@@ -41,7 +43,12 @@ function FormTextInput({
       {paramName ? (
         <input
           {...register(paramName, {
-            required: isRequired ? "This field is required" : false,
+            required: isRequired
+              ? translate({
+                  id: OPENAPI_FORM.FIELD_REQUIRED,
+                  message: "This field is required",
+                })
+              : false,
           })}
           className={clsx("openapi-explorer__form-item-input", {
             error: showErrorMessage,
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/LiveEditor/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/LiveEditor/index.tsx
@@ -8,9 +8,11 @@
 import React, { type JSX, useEffect, useState } from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
+import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { ErrorMessage } from "@hookform/error-message";
 import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
+import { OPENAPI_FORM } from "@theme/translationIds";
 import clsx from "clsx";
 import { Controller, useFormContext } from "react-hook-form";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
@@ -85,7 +87,13 @@ function App({
         <Controller
           control={control}
           rules={{
-            required: isRequired && !code ? "This field is required" : false,
+            required:
+              isRequired && !code
+                ? translate({
+                    id: OPENAPI_FORM.FIELD_REQUIRED,
+                    message: "This field is required",
+                  })
+                : false,
           }}
           name="requestBody"
           render={({ field: { onChange, name } }) => (
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx
@@ -7,12 +7,14 @@
 
 import React, { useEffect, useState } from "react";
 
+import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import { nanoid } from "@reduxjs/toolkit";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -121,7 +123,14 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
     <>
       <Controller
         control={control}
-        rules={{ required: param.required ? "This field is required" : false }}
+        rules={{
+          required: param.required
+            ? translate({
+                id: OPENAPI_FORM.FIELD_REQUIRED,
+                message: "This field is required",
+              })
+            : false,
+        }}
         name="paramArray"
         render={({ field: { onChange, name } }) => (
           <>
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx
@@ -7,10 +7,12 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -31,7 +33,14 @@ export default function ParamBooleanFormItem({ param }: ParamProps) {
     <>
       <Controller
         control={control}
-        rules={{ required: param.required ? "This field is required" : false }}
+        rules={{
+          required: param.required
+            ? translate({
+                id: OPENAPI_FORM.FIELD_REQUIRED,
+                message: "This field is required",
+              })
+            : false,
+        }}
         name="paramBoolean"
         render={({ field: { onChange, name } }) => (
           <FormSelect
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx
@@ -7,10 +7,12 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import FormMultiSelect from "@theme/ApiExplorer/FormMultiSelect";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -61,7 +63,14 @@ export default function ParamMultiSelectFormItem({ param }: ParamProps) {
     <>
       <Controller
         control={control}
-        rules={{ required: param.required ? "This field is required" : false }}
+        rules={{
+          required: param.required
+            ? translate({
+                id: OPENAPI_FORM.FIELD_REQUIRED,
+                message: "This field is required",
+              })
+            : false,
+        }}
         name="paramMultiSelect"
         render={({ field: { onChange, name } }) => (
           <FormMultiSelect
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx
@@ -7,10 +7,12 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -33,7 +35,14 @@ export default function ParamSelectFormItem({ param }: ParamProps) {
     <>
       <Controller
         control={control}
-        rules={{ required: param.required ? "This field is required" : false }}
+        rules={{
+          required: param.required
+            ? translate({
+                id: OPENAPI_FORM.FIELD_REQUIRED,
+                message: "This field is required",
+              })
+            : false,
+        }}
         name="paramSelect"
         render={({ field: { onChange, name } }) => (
           <FormSelect
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/index.tsx
@@ -7,13 +7,15 @@
 
 import React, { useState } from "react";
 
+import { translate } from "@docusaurus/Translate";
 import FormItem from "@theme/ApiExplorer/FormItem";
 import ParamArrayFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem";
 import ParamBooleanFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem";
 import ParamMultiSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem";
 import ParamSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem";
 import ParamTextFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
+import { OPENAPI_PARAM_OPTIONS } from "@theme/translationIds";
 
 import { Param } from "./slice";
 
@@ -119,8 +121,14 @@ function ParamOptions() {
               </span>
             </span>
             {showOptional
-              ? "Hide optional parameters"
-              : "Show optional parameters"}
+              ? translate({
+                  id: OPENAPI_PARAM_OPTIONS.HIDE_OPTIONAL,
+                  message: "Hide optional parameters",
+                })
+              : translate({
+                  id: OPENAPI_PARAM_OPTIONS.SHOW_OPTIONAL,
+                  message: "Show optional parameters",
+                })}
           </button>
 
           <div
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts b/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts
