docusaurus-theme-openapi-docs 0.0.0-1054 → 0.0.0-1055

package/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

package/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

package/src/theme/ApiExplorer/ParamOptions/index.tsx

@@ -7,6 +7,7 @@
 
 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";
@@ -14,6 +15,7 @@ import ParamMultiSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormI
 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

package/src/theme/ApiExplorer/Request/index.tsx

@@ -9,6 +9,7 @@
 import React, { useState } from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import { translate } from "@docusaurus/Translate";
 import Accept from "@theme/ApiExplorer/Accept";
 import Authorization from "@theme/ApiExplorer/Authorization";
 import Body from "@theme/ApiExplorer/Body";
@@ -24,6 +25,7 @@ import {
 } from "@theme/ApiExplorer/Response/slice";
 import Server from "@theme/ApiExplorer/Server";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { OPENAPI_REQUEST } from "@theme/translationIds";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 import * as sdk from "postman-collection";
@@ -117,7 +119,14 @@ function Request({ item }: { item: ApiItem }) {
   };
 
   const onSubmit = async (data) => {
-    dispatch(setResponse("Fetching..."));
+    dispatch(
+      setResponse(
+        translate({
+          id: OPENAPI_REQUEST.FETCHING_MESSAGE,
+          message: "Fetching...",
+        })
+      )
+    );
     try {
       await delay(1200);
       const res = await makeRequest(postmanRequest, proxy, body);
@@ -128,7 +137,14 @@ function Request({ item }: { item: ApiItem }) {
       }
     } catch (e) {
       console.log(e);
-      dispatch(setResponse("Connection failed"));
+      dispatch(
+        setResponse(
+          translate({
+            id: OPENAPI_REQUEST.CONNECTION_FAILED,
+            message: "Connection failed",
+          })
+        )
+      );
       dispatch(clearCode());
       dispatch(clearHeaders());
     }
@@ -178,20 +194,31 @@ function Request({ item }: { item: ApiItem }) {
         onSubmit={methods.handleSubmit(onSubmit)}
       >
         <div className="openapi-explorer__request-header-container">
-          <span className="openapi-explorer__request-title">Request </span>
+          <span className="openapi-explorer__request-title">
+            {translate({
+              id: OPENAPI_REQUEST.REQUEST_TITLE,
+              message: "Request",
+            })}
+          </span>
           {allDetailsExpanded ? (
             <span
               className="openapi-explorer__expand-details-btn"
               onClick={collapseAllDetails}
             >
-              Collapse all
+              {translate({
+                id: OPENAPI_REQUEST.COLLAPSE_ALL,
+                message: "Collapse all",
+              })}
             </span>
           ) : (
             <span
               className="openapi-explorer__expand-details-btn"
               onClick={expandAllDetails}
             >
-              Expand all
+              {translate({
+                id: OPENAPI_REQUEST.EXPAND_ALL,
+                message: "Expand all",
+              })}
             </span>
           )}
         </div>
@@ -208,7 +235,10 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandServer(!expandServer);
                 }}
               >
-                Base URL
+                {translate({
+                  id: OPENAPI_REQUEST.BASE_URL_TITLE,
+                  message: "Base URL",
+                })}
               </summary>
               <Server />
             </details>
@@ -225,7 +255,7 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandAuth(!expandAuth);
                 }}
               >
-                Auth
+                {translate({ id: OPENAPI_REQUEST.AUTH_TITLE, message: "Auth" })}
               </summary>
               <Authorization />
             </details>
@@ -244,7 +274,10 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandParams(!expandParams);
                 }}
               >
-                Parameters
+                {translate({
+                  id: OPENAPI_REQUEST.PARAMETERS_TITLE,
+                  message: "Parameters",
+                })}
               </summary>
               <ParamOptions />
             </details>
@@ -261,10 +294,14 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandBody(!expandBody);
                 }}
               >
-                Body
+                {translate({ id: OPENAPI_REQUEST.BODY_TITLE, message: "Body" })}
                 {requestBodyRequired && (
                   <span className="openapi-schema__required">
-                    &nbsp;required
+                    &nbsp;
+                    {translate({
+                      id: OPENAPI_REQUEST.REQUIRED_LABEL,
+                      message: "required",
+                    })}
                   </span>
                 )}
               </summary>
@@ -290,14 +327,20 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandAccept(!expandAccept);
                 }}
               >
-                Accept
+                {translate({
+                  id: OPENAPI_REQUEST.ACCEPT_TITLE,
+                  message: "Accept",
+                })}
               </summary>
               <Accept />
             </details>
           )}
           {showRequestButton && item.method !== "event" && (
             <button className="openapi-explorer__request-btn" type="submit">
-              Send API Request
+              {translate({
+                id: OPENAPI_REQUEST.SEND_BUTTON,
+                message: "Send API Request",
+              })}
             </button>
           )}
         </div>

package/src/theme/ApiExplorer/Response/index.tsx

@@ -9,10 +9,12 @@ import React from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { usePrismTheme } from "@docusaurus/theme-common";
+import { translate } from "@docusaurus/Translate";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
+import { OPENAPI_RESPONSE } from "@theme/translationIds";
 import clsx from "clsx";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
@@ -74,7 +76,9 @@ function Response({ item }: { item: ApiItem }) {
   return (
     <div className="openapi-explorer__response-container">
       <div className="openapi-explorer__response-title-container">
-        <span className="openapi-explorer__response-title">Response</span>
+        <span className="openapi-explorer__response-title">
+          {translate({ id: OPENAPI_RESPONSE.TITLE, message: "Response" })}
+        </span>
         <span
           className="openapi-explorer__response-clear-btn"
           onClick={() => {
@@ -83,7 +87,7 @@ function Response({ item }: { item: ApiItem }) {
             dispatch(clearHeaders());
           }}
         >
-          Clear
+          {translate({ id: OPENAPI_RESPONSE.CLEAR, message: "Clear" })}
         </span>
       </div>
       <div
@@ -117,14 +121,23 @@ function Response({ item }: { item: ApiItem }) {
               >
                 {prettyResponse || (
                   <p className="openapi-explorer__response-placeholder-message">
-                    Click the <code>Send API Request</code> button above and see
-                    the response here!
+                    {translate({
+                      id: OPENAPI_RESPONSE.PLACEHOLDER,
+                      message:
+                        "Click the <code>Send API Request</code> button above and see the response here!",
+                    })}
                   </p>
                 )}
               </ApiCodeBlock>
             </TabItem>
             {/* @ts-ignore */}
-            <TabItem label="Headers" value="headers">
+            <TabItem
+              label={translate({
+                id: OPENAPI_RESPONSE.HEADERS_TAB,
+                message: "Headers",
+              })}
+              value="headers"
+            >
               {/* @ts-ignore */}
               <ApiCodeBlock
                 className="openapi-explorer__code-block openapi-response__status-headers"
@@ -145,8 +158,11 @@ function Response({ item }: { item: ApiItem }) {
           </div>
         ) : (
           <p className="openapi-explorer__response-placeholder-message">
-            Click the <code>Send API Request</code> button above and see the
-            response here!
+            {translate({
+              id: OPENAPI_RESPONSE.PLACEHOLDER,
+              message:
+                "Click the <code>Send API Request</code> button above and see the response here!",
+            })}
           </p>
         )}
       </div>

package/src/theme/ApiExplorer/SecuritySchemes/index.tsx

@@ -7,6 +7,9 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
+import { OPENAPI_SECURITY_SCHEMES } from "@theme/translationIds";
+
 import Link from "@docusaurus/Link";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
 
@@ -48,16 +51,31 @@ function SecuritySchemes(props: any) {
                   }}
                 >
                   <span>
-                    <strong>name:</strong>{" "}
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        message: "name:",
+                      })}
+                    </strong>{" "}
                     <Link to={infoAuthPath}>{name ?? key}</Link>
                   </span>
                   <span>
-                    <strong>type: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        message: "type:",
+                      })}
+                    </strong>{" "}
                     {type}
                   </span>
                   {scopes && scopes.length > 0 && (
                     <span>
-                      <strong>scopes: </strong>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          message: "scopes:",
+                        })}
+                      </strong>{" "}
                       <code>
                         {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                       </code>
@@ -89,16 +107,31 @@ function SecuritySchemes(props: any) {
                   }}
                 >
                   <span>
-                    <strong>name:</strong>{" "}
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        message: "name:",
+                      })}
+                    </strong>{" "}
                     <Link to={infoAuthPath}>{name ?? key}</Link>
                   </span>
                   <span>
-                    <strong>type: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        message: "type:",
+                      })}
+                    </strong>{" "}
                     {type}
                   </span>
                   {scopes && scopes.length > 0 && (
                     <span>
-                      <strong>scopes: </strong>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          message: "scopes:",
+                        })}
+                      </strong>{" "}
                       <code>
                         {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                       </code>
@@ -128,15 +161,30 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{auth.name ?? auth.key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {auth.type}
                 </span>
                 <span>
-                  <strong>in: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.IN,
+                      message: "in:",
+                    })}
+                  </strong>{" "}
                   {auth.in}
                 </span>
               </pre>
@@ -156,16 +204,31 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {type}
                 </span>
                 {scopes && scopes.length > 0 && (
                   <span>
-                    <strong>scopes: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
                     <code>
                       {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                     </code>
@@ -198,16 +261,31 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {type}
                 </span>
                 {scopes && scopes.length > 0 && (
                   <span>
-                    <strong>scopes: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
                     <code>
                       {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                     </code>
@@ -226,7 +304,12 @@ function SecuritySchemes(props: any) {
                 {flows && (
                   <span>
                     <code>
-                      <strong>flows: </strong>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.FLOWS,
+                          message: "flows:",
+                        })}
+                      </strong>{" "}
                       {JSON.stringify(flows, null, 2)}
                     </code>
                   </span>
@@ -248,16 +331,31 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {type}
                 </span>
                 {scopes && scopes.length > 0 && (
                   <span>
-                    <strong>scopes: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
                     <code>
                       {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                     </code>

package/src/theme/ApiExplorer/Server/index.tsx

@@ -7,11 +7,13 @@
 
 import React, { useState } from "react";
 
+import { translate } from "@docusaurus/Translate";
 import FloatingButton from "@theme/ApiExplorer/FloatingButton";
 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_SERVER } from "@theme/translationIds";
 
 import { setServer, setServerVariable } from "./slice";
 
@@ -57,7 +59,10 @@ function Server() {
       }
     }
     return (
-      <FloatingButton onClick={() => setIsEditing(true)} label="Edit">
+      <FloatingButton
+        onClick={() => setIsEditing(true)}
+        label={translate({ id: OPENAPI_SERVER.EDIT_BUTTON, message: "Edit" })}
+      >
         <FormItem>
           <span className="openapi-explorer__server-url" title={url}>
             {url}
@@ -68,7 +73,10 @@ function Server() {
   }
   return (
     <div className="openapi-explorer__server-container">
-      <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
+      <FloatingButton
+        onClick={() => setIsEditing(false)}
+        label={translate({ id: OPENAPI_SERVER.HIDE_BUTTON, message: "Hide" })}
+      >
         <FormItem>
           <FormSelect
             options={options.map((s: any) => s.url)}

package/src/theme/ApiTabs/index.tsx

@@ -20,8 +20,10 @@ import {
   useTabs,
 } from "@docusaurus/theme-common/internal";
 import { TabItemProps } from "@docusaurus/theme-common/lib/utils/tabsUtils";
+import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import Heading from "@theme/Heading";
+import { OPENAPI_TABS } from "@theme/translationIds";
 import clsx from "clsx";
 
 export interface TabListProps extends TabProps {
@@ -35,7 +37,10 @@ function TabList({
   selectedValue,
   selectValue,
   tabValues,
-  label = "Responses",
+  label = translate({
+    id: OPENAPI_TABS.RESPONSES_LABEL,
+    message: "Responses",
+  }),
   id = "responses",
 }: TabListProps & ReturnType<typeof useTabs>) {
   const tabRefs: (HTMLLIElement | null)[] = [];

package/src/theme/ParamsDetails/index.tsx

@@ -7,6 +7,9 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
+import { OPENAPI_PARAMS_DETAILS } from "@theme/translationIds";
+
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
 import ParamsItem from "@theme/ParamsItem";
@@ -31,7 +34,13 @@ const ParamsDetailsComponent: React.FC<Props> = ({ parameters }) => {
         const summaryElement = (
           <summary>
             <h3 className="openapi-markdown__details-summary-header-params">
-              {`${type.charAt(0).toUpperCase() + type.slice(1)} Parameters`}
+              {translate(
+                {
+                  id: OPENAPI_PARAMS_DETAILS.PARAMETERS_TITLE,
+                  message: "{type} Parameters",
+                },
+                { type: type.charAt(0).toUpperCase() + type.slice(1) }
+              )}
             </h3>
           </summary>
         );