docusaurus-theme-openapi-docs 1.6.1 → 2.0.0-beta.0

package/lib-next/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -0,0 +1,216 @@
+.openapi-tabs__code-list-container {
+  display: table-row-group;
+}
+
+.openapi-tabs__code-item {
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+
+  &.active {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.openapi-tabs__code-item--python {
+  color: var(--ifm-color-success);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-success);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-python {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--go {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-info);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-go {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--javascript {
+  color: var(--ifm-color-warning);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-warning);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-javascript {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--bash {
+  color: var(--ifm-color-danger);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-danger);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-bash {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--ruby {
+  color: var(--ifm-color-danger);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-danger);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-ruby {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--csharp {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-gray-500);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-csharp {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--nodejs {
+  color: var(--ifm-color-success);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-success);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-nodejs {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--php {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-gray-500);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-php {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--java {
+  color: var(--ifm-color-warning);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-warning);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 996px) {
+  .openapi-tabs__code-list {
+    justify-content: space-around;
+  }
+}

package/lib-next/theme/ApiDemoPanel/CodeTabs/index.js

@@ -5,113 +5,53 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useState, cloneElement, isValidElement } from "react";
-import { duplicates } from "@docusaurus/theme-common";
+import React, { cloneElement } from "react";
+
+import {
+  useScrollPositionBlocker,
+  useTabs,
+} from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { languageSet } from "@theme/ApiDemoPanel/Curl";
 import clsx from "clsx";
-import styles from "./styles.module.css";
-const {
-  useScrollPositionBlocker,
-  useTabGroupChoice,
-} = require("@docusaurus/theme-common/internal");
 
-// A very rough duck type, but good enough to guard against mistakes while
-// allowing customization
-function isTabItem(comp) {
-  return "value" in comp.props;
-}
-function TabsComponent(props) {
-  const {
-    lazy,
-    block,
-    defaultValue: defaultValueProp,
-    values: valuesProp,
-    groupId,
-    className,
-    action,
-  } = props;
-  const children = React.Children.map(props.children, (child) => {
-    if (isValidElement(child) && isTabItem(child)) {
-      return child;
-    }
-    // child.type.name will give non-sensical values in prod because of
-    // minification, but we assume it won't throw in prod.
-    throw new Error(
-      `Docusaurus error: Bad <Tabs> child <${
-        // @ts-expect-error: guarding against unexpected cases
-        typeof child.type === "string" ? child.type : child.type.name
-      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`
-    );
-  });
-  const values =
-    valuesProp ??
-    // Only pick keys that we recognize. MDX would inject some keys by default
-    children.map(({ props: { value, label, attributes } }) => ({
-      value,
-      label,
-      attributes,
-    }));
-  const dup = duplicates(values, (a, b) => a.value === b.value);
-  if (dup.length > 0) {
-    throw new Error(
-      `Docusaurus error: Duplicate values "${dup
-        .map((a) => a.value)
-        .join(", ")}" found in <Tabs>. Every value needs to be unique.`
-    );
-  }
-  // When defaultValueProp is null, don't show a default tab
-  const defaultValue =
-    defaultValueProp === null
-      ? defaultValueProp
-      : defaultValueProp ??
-        children.find((child) => child.props.default)?.props.value ??
-        children[0].props.value;
-  if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
-    throw new Error(
-      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
-        .map((a) => a.value)
-        .join(
-          ", "
-        )}. If you intend to show no default tab, use defaultValue={null} instead.`
-    );
-  }
-  const { tabGroupChoices, setTabGroupChoices } = useTabGroupChoice();
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
+function TabList({
+  action,
+  className,
+  block,
+  selectedValue,
+  selectValue,
+  tabValues,
+}) {
   const tabRefs = [];
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
-  if (groupId != null) {
-    const relevantTabGroupChoice = tabGroupChoices[groupId];
-    if (
-      relevantTabGroupChoice != null &&
-      relevantTabGroupChoice !== selectedValue &&
-      values.some((value) => value.value === relevantTabGroupChoice)
-    ) {
-      setSelectedValue(relevantTabGroupChoice);
-    }
-  }
+
   const handleTabChange = (event) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = values[newTabIndex].value;
+    const newTabValue = tabValues[newTabIndex].value;
+
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
-      setSelectedValue(newTabValue);
-      if (action) {
-        const newLanguage = languageSet.filter(
-          (lang) => lang.language === newTabValue
-        );
-        action(newLanguage[0]);
-      }
-      if (groupId != null) {
-        setTabGroupChoices(groupId, String(newTabValue));
-      }
+      selectValue(newTabValue);
+    }
+
+    if (action) {
+      const newLanguage = languageSet.filter(
+        (lang) => lang.language === newTabValue
+      );
+      action(newLanguage[0]);
     }
   };
+
   const handleKeydown = (event) => {
     let focusElement = null;
     switch (event.key) {
+      case "Enter": {
+        handleTabChange(event);
+        break;
+      }
       case "ArrowRight": {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
         focusElement = tabRefs[nextTab] ?? tabRefs[0];
@@ -127,67 +67,82 @@ function TabsComponent(props) {
     }
     focusElement?.focus();
   };
-  return (
-    <div className={clsx("tabs-container", styles.tabList)}>
-      <ul
-        role="tablist"
-        aria-orientation="horizontal"
-        className={clsx(
-          "tabs",
-          {
-            "tabs--block": block,
-          },
-          styles.code__tabs,
-          className
-        )}
-      >
-        {values.map(({ value, label, attributes }) => (
-          <li
-            role="tab"
-            tabIndex={selectedValue === value ? 0 : -1}
-            aria-selected={selectedValue === value}
-            key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
-            onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
-            onClick={handleTabChange}
-            {...attributes}
-            className={clsx(
-              "tabs__item",
-              styles.tabItem,
-              attributes?.className,
-              {
-                "tabs__item--active": selectedValue === value,
-              }
-            )}
-          >
-            {label ?? value}
-          </li>
-        ))}
-      </ul>
 
-      {lazy ? (
-        cloneElement(
-          children.filter(
-            (tabItem) => tabItem.props.value === selectedValue
-          )[0],
-          {
-            className: "margin-top--md",
-          }
-        )
-      ) : (
-        <div className="margin-top--md">
-          {children.map((tabItem, i) =>
-            cloneElement(tabItem, {
-              key: i,
-              hidden: tabItem.props.value !== selectedValue,
-            })
+  return (
+    <ul
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        "tabs",
+        "openapi-tabs__code-list-container",
+        {
+          "tabs--block": block,
+        },
+        className
+      )}
+    >
+      {tabValues.map(({ value, label, attributes }) => (
+        <li
+          // TODO extract TabListItem
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={(tabControl) => tabRefs.push(tabControl)}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx(
+            "tabs__item",
+            "openapi-tabs__code-item",
+            attributes?.className,
+            {
+              active: selectedValue === value,
+            }
           )}
-        </div>
+        >
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function TabContent({ lazy, children, selectedValue }) {
+  // eslint-disable-next-line no-param-reassign
+  children = Array.isArray(children) ? children : [children];
+  if (lazy) {
+    const selectedTabItem = children.find(
+      (tabItem) => tabItem.props.value === selectedValue
+    );
+    if (!selectedTabItem) {
+      // fail-safe or fail-fast? not sure what's best here
+      return null;
+    }
+    return cloneElement(selectedTabItem, { className: "margin-top--md" });
+  }
+  return (
+    <div className="margin-top--md">
+      {children.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue,
+        })
       )}
     </div>
   );
 }
+
+function TabsComponent(props) {
+  const tabs = useTabs(props);
+  return (
+    <div className="tabs-container">
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
+    </div>
+  );
+}
+
 export default function CodeTabs(props) {
   const isBrowser = useIsBrowser();
   return (

package/lib-next/theme/ApiDemoPanel/Curl/index.js

@@ -12,9 +12,7 @@ import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
 import CodeTabs from "@theme/ApiDemoPanel/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
 import CodeBlock from "@theme/CodeBlock";
-import clsx from "clsx";
 import merge from "lodash/merge";
-import styles from "./styles.module.css";
 export const languageSet = [
   {
     highlight: "bash",
@@ -103,7 +101,7 @@ function CodeTab({ children, hidden, className, onClick }) {
   return (
     <div
       role="tabpanel"
-      className={clsx(styles.tabItem, className)}
+      className={className}
       {...{
         hidden,
       }}
@@ -253,10 +251,13 @@ function Curl({ postman, codeSamples }) {
                   : lang.language
               }
               attributes={{
-                className: `code__tab--${lang.logoClass}`,
+                className: `openapi-tabs__code-item--${lang.logoClass}`,
               }}
             >
-              <CodeBlock language={lang.highlight} className={styles.codeBlock}>
+              <CodeBlock
+                language={lang.highlight}
+                className="openapi-demo__code-block"
+              >
                 {codeText}
               </CodeBlock>
             </CodeTab>

package/lib-next/theme/ApiDemoPanel/Execute/index.js

@@ -7,7 +7,13 @@
 
 import React from "react";
 import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
-import { setResponse } from "@theme/ApiDemoPanel/Response/slice";
+import {
+  setResponse,
+  setCode,
+  clearCode,
+  setHeaders,
+  clearHeaders,
+} from "@theme/ApiDemoPanel/Response/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import Modal from "react-modal";
 import makeRequest from "./makeRequest";
@@ -97,10 +103,15 @@ function Execute({ postman, proxy }) {
           try {
             await delay(1200);
             const res = await makeRequest(postmanRequest, proxy, body);
-            dispatch(setResponse(res));
+            dispatch(setResponse(await res.text()));
+            dispatch(setCode(res.status));
+            res.headers &&
+              dispatch(setHeaders(Object.fromEntries(res.headers)));
           } catch (e) {
             console.log(e);
             dispatch(setResponse("Connection failed"));
+            dispatch(clearCode());
+            dispatch(clearHeaders());
           }
         }}
       >

package/lib-next/theme/ApiDemoPanel/Execute/makeRequest.js

@@ -166,7 +166,7 @@ async function makeRequest(request, proxy, _body) {
     finalUrl = normalizedProxy + request.url.toString();
   }
   return await fetchWithtimeout(finalUrl, requestOptions).then((response) => {
-    return response.text();
+    return response;
   });
 }
 export default makeRequest;

package/lib-next/theme/ApiDemoPanel/FloatingButton/_FloatingButton.scss

@@ -0,0 +1,25 @@
+.openapi-demo__floating-btn {
+  position: relative;
+
+  button {
+    position: relative;
+    background: var(--ifm-color-emphasis-900);
+    border: none;
+    border-radius: var(--ifm-global-radius);
+    color: var(--ifm-color-emphasis-100);
+    cursor: pointer;
+    padding: 0.4rem 0.5rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+      bottom 0.2s ease-in-out;
+    position: absolute;
+    right: calc(var(--ifm-pre-padding) / 2);
+  }
+}
+.openapi-demo__floating-btn:hover button,
+.openapi-demo__floating-btn:focus-visible button,
+.openapi-demo__floating-btn button:focus-visible {
+  visibility: visible;
+  opacity: 1;
+}

package/lib-next/theme/ApiDemoPanel/FloatingButton/index.js

@@ -6,10 +6,9 @@
  * ========================================================================== */
 
 import React from "react";
-import styles from "./styles.module.css";
 function FloatingButton({ label, onClick, children }) {
   return (
-    <div tabIndex={0} className={styles.floatingButton}>
+    <div tabIndex={0} className="openapi-demo__floating-btn">
       {label && (
         <button tabIndex={0} onClick={onClick}>
           {label}