docusaurus-theme-openapi-docs 1.2.2 → 1.3.1

package/src/theme/ApiItem/index.tsx

@@ -9,58 +9,134 @@ import React from "react";
 
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import type { Props } from "@theme/DocItem";
 import clsx from "clsx";
+import { ServerObject } from "docusaurus-plugin-openapi-docs/lib/openapi/types";
 import type { ApiItem as ApiItemType } from "docusaurus-plugin-openapi-docs/lib/types";
+import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import { Provider } from "react-redux";
 
 import { DocFrontMatter } from "../../types";
+import { ThemeConfig } from "../../types";
+import { createAuth } from "../ApiDemoPanel/Authorization/slice";
+import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
 import DocItemLayout from "./Layout";
 import DocItemMetadata from "./Metadata";
+import { createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
 let ApiDemoPanel = (_: { item: any; infoPath: any }) => (
   <div style={{ marginTop: "3.5em" }} />
 );
-if (ExecutionEnvironment.canUseDOM) {
-  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
-}
+
+let DocItem = (props: Props) => {
+  return <div style={{ marginTop: "3.5em" }} />;
+};
 
 interface ApiFrontMatter extends DocFrontMatter {
   readonly api?: ApiItemType;
 }
 
-export default function DocItem(props: Props): JSX.Element {
-  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+if (ExecutionEnvironment.canUseDOM) {
+  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
 
-  const DocContent = () => {
+  DocItem = function DocItem(props: Props): JSX.Element {
+    const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
     const MDXComponent = props.content;
     const { frontMatter } = MDXComponent;
     const { info_path: infoPath } = frontMatter as DocFrontMatter;
     const { api } = frontMatter as ApiFrontMatter;
+    const { siteConfig } = useDocusaurusContext();
+    const themeConfig = siteConfig.themeConfig as ThemeConfig;
+    const options = themeConfig.api;
 
-    return (
-      <div className="row">
-        <div className={clsx("col", api ? "col--7" : "col--12")}>
-          <MDXComponent />
-        </div>
-        {api && (
-          <div className="col col--5">
-            <ApiDemoPanel item={api} infoPath={infoPath} />
+    const acceptArray = Array.from(
+      new Set(
+        Object.values(api?.responses ?? {})
+          .map((response: any) => Object.keys(response.content ?? {}))
+          .flat()
+      )
+    );
+
+    const content = api?.requestBody?.content ?? {};
+    const contentTypeArray = Object.keys(content);
+    const servers = api?.servers ?? [];
+
+    const params = {
+      path: [] as ParameterObject[],
+      query: [] as ParameterObject[],
+      header: [] as ParameterObject[],
+      cookie: [] as ParameterObject[],
+    };
+
+    api?.parameters?.forEach(
+      (param: { in: "path" | "query" | "header" | "cookie" }) => {
+        const paramType = param.in;
+        const paramsArray: ParameterObject[] = params[paramType];
+        paramsArray.push(param as ParameterObject);
+      }
+    );
+
+    const auth = createAuth({
+      security: api?.security,
+      securitySchemes: api?.securitySchemes,
+      options,
+    });
+
+    const persistanceMiddleware = createPersistanceMiddleware(options);
+    const acceptValue = window?.sessionStorage.getItem("accept");
+    const contentTypeValue = window?.sessionStorage.getItem("contentType");
+    const server = window?.sessionStorage.getItem("server");
+    const serverObject = (JSON.parse(server!) as ServerObject) ?? {};
+    const store2 = createStoreWithState(
+      {
+        accept: { value: acceptValue || acceptArray[0], options: acceptArray },
+        contentType: {
+          value: contentTypeValue || contentTypeArray[0],
+          options: contentTypeArray,
+        },
+        server: {
+          value: serverObject.url ? serverObject : undefined,
+          options: servers,
+        },
+        response: { value: undefined },
+        body: { type: "empty" },
+        params,
+        auth,
+      },
+      [persistanceMiddleware]
+    );
+
+    const DocContent = () => {
+      return (
+        <div className="row">
+          <div className={clsx("col", api ? "col--7" : "col--12")}>
+            <MDXComponent />
           </div>
-        )}
-      </div>
+          {api && (
+            <div className="col col--5">
+              <ApiDemoPanel item={api} infoPath={infoPath} />
+            </div>
+          )}
+        </div>
+      );
+    };
+
+    return (
+      <Provider store={store2}>
+        <DocProvider content={props.content}>
+          <HtmlClassNameProvider className={docHtmlClassName}>
+            <DocItemMetadata />
+            <DocItemLayout>
+              <DocContent />
+            </DocItemLayout>
+          </HtmlClassNameProvider>
+        </DocProvider>
+      </Provider>
     );
   };
-
-  return (
-    <DocProvider content={props.content}>
-      <HtmlClassNameProvider className={docHtmlClassName}>
-        <DocItemMetadata />
-        <DocItemLayout>
-          <DocContent />
-        </DocItemLayout>
-      </HtmlClassNameProvider>
-    </DocProvider>
-  );
 }
+
+export default DocItem;

package/src/theme/{ApiDemoPanel → ApiItem}/store.ts

@@ -7,13 +7,13 @@
 
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
 
-import accept from "./Accept/slice";
-import auth from "./Authorization/slice";
-import body from "./Body/slice";
-import contentType from "./ContentType/slice";
-import params from "./ParamOptions/slice";
-import response from "./Response/slice";
-import server from "./Server/slice";
+import accept from "../ApiDemoPanel/Accept/slice";
+import auth from "../ApiDemoPanel/Authorization/slice";
+import body from "../ApiDemoPanel/Body/slice";
+import contentType from "../ApiDemoPanel/ContentType/slice";
+import params from "../ApiDemoPanel/ParamOptions/slice";
+import response from "../ApiDemoPanel/Response/slice";
+import server from "../ApiDemoPanel/Server/slice";
 
 const rootReducer = combineReducers({
   accept,

package/src/theme/MimeTabs/index.js

@@ -18,6 +18,9 @@ import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import clsx from "clsx";
 
+import { setAccept } from "../ApiDemoPanel/Accept/slice";
+import { setContentType } from "../ApiDemoPanel/ContentType/slice";
+import { useTypedDispatch, useTypedSelector } from "../ApiItem/hooks";
 import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
 
 const {
@@ -39,6 +42,7 @@ function MimeTabsComponent(props) {
     values: valuesProp,
     groupId,
     className,
+    schemaType,
   } = props;
   const children = Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
@@ -105,12 +109,22 @@ function MimeTabsComponent(props) {
     }
   }
 
+  const dispatch = useTypedDispatch();
+  const isRequestSchema = schemaType?.toLowerCase() === "request";
+
   const handleTabChange = (event) => {
+    event.preventDefault();
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
     const newTabValue = values[newTabIndex].value;
 
     if (newTabValue !== selectedValue) {
+      if (isRequestSchema) {
+        dispatch(setContentType(newTabValue));
+      } else {
+        dispatch(setAccept(newTabValue));
+      }
+
       blockElementScrollPositionUntilNextRender(newTab);
       setSelectedValue(newTabValue);
 
@@ -120,6 +134,20 @@ function MimeTabsComponent(props) {
     }
   };
 
+  const contentTypeVal = useTypedSelector((state) => state.contentType.value);
+  const acceptTypeVal = useTypedSelector((state) => state.accept.value);
+
+  useEffect(() => {
+    if (tabRefs.length > 1) {
+      if (isRequestSchema) {
+        setSelectedValue(contentTypeVal);
+      } else {
+        setSelectedValue(acceptTypeVal);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentTypeVal, acceptTypeVal]);
+
   const handleKeydown = (event) => {
     let focusElement = null;
 
@@ -197,7 +225,7 @@ function MimeTabsComponent(props) {
                   ref={(tabControl) => tabRefs.push(tabControl)}
                   onKeyDown={handleKeydown}
                   onFocus={handleTabChange}
-                  onClick={handleTabChange}
+                  onClick={(e) => handleTabChange(e)}
                   {...attributes}
                   className={clsx(
                     "tabs__item",

package/src/theme/MimeTabs/styles.module.css

@@ -17,6 +17,7 @@
   font-weight: var(--ifm-font-weight-normal);
   /* color: var(--openapi-code-dim-dark); */
   font-size: 12px;
+  white-space: nowrap;
 }
 
 .tabItem:active {

package/src/theme/ParamsItem/index.js

@@ -9,6 +9,7 @@ import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 
 import { createDescription } from "../../markdown/createDescription";
 import { getQualifierMessage, getSchemaName } from "../../markdown/schema";
@@ -28,7 +29,10 @@ function ParamsItem({
 
   const renderSchema = guard(getQualifierMessage(schema), (message) => (
     <div>
-      <ReactMarkdown children={createDescription(message)} />
+      <ReactMarkdown
+        children={createDescription(message)}
+        rehypePlugins={[rehypeRaw]}
+      />
     </div>
   ));
 
@@ -48,6 +52,7 @@ function ParamsItem({
             );
           },
         }}
+        rehypePlugins={[rehypeRaw]}
       />
     </div>
   ));

package/src/theme/SchemaItem/index.js

@@ -9,6 +9,7 @@ import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 
 import { createDescription } from "../../markdown/createDescription";
 import { guard } from "../../markdown/utils";
@@ -45,13 +46,17 @@ function SchemaItem({
             );
           },
         }}
+        rehypePlugins={[rehypeRaw]}
       />
     </div>
   ));
 
   const renderQualifierMessage = guard(qualifierMessage, (message) => (
     <div className={styles.schemaQualifierMessage}>
-      <ReactMarkdown children={createDescription(message)} />
+      <ReactMarkdown
+        children={createDescription(message)}
+        rehypePlugins={[rehypeRaw]}
+      />
     </div>
   ));
 

package/src/theme/SchemaTabs/index.js

@@ -227,7 +227,10 @@ function SchemaTabsComponent(props) {
         cloneElement(
           children.filter(
             (tabItem) => tabItem.props.value === selectedValue
-          )[0],
+          )[0] ?? // TODO: see if there's a better way to handle this
+            children.filter(
+              (tabItem) => tabItem.props.value === defaultValue
+            )[0],
           {
             className: "margin-vert--md",
           }