docusaurus-theme-openapi-docs 2.0.0-beta.2 → 2.0.0-beta.3

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

@@ -1,156 +0,0 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-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";
-
-function TabList({
-  action,
-  className,
-  block,
-  selectedValue,
-  selectValue,
-  tabValues,
-}) {
-  const tabRefs = [];
-  const { blockElementScrollPositionUntilNextRender } =
-    useScrollPositionBlocker();
-
-  const handleTabChange = (event) => {
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex].value;
-
-    if (newTabValue !== selectedValue) {
-      blockElementScrollPositionUntilNextRender(newTab);
-      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];
-        break;
-      }
-      case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
-        break;
-      }
-      default:
-        break;
-    }
-    focusElement?.focus();
-  };
-
-  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,
-            }
-          )}
-        >
-          {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 (
-    <TabsComponent
-      // Remount tabs after hydration
-      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}
-    />
-  );
-}

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

@@ -1,30 +0,0 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React from "react";
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import { setContentType } from "./slice";
-function ContentType() {
-  const value = useTypedSelector((state) => state.contentType.value);
-  const options = useTypedSelector((state) => state.contentType.options);
-  const dispatch = useTypedDispatch();
-  if (options.length <= 1) {
-    return null;
-  }
-  return (
-    <FormItem label="Content-Type">
-      <FormSelect
-        value={value}
-        options={options}
-        onChange={(e) => dispatch(setContentType(e.target.value))}
-      />
-    </FormItem>
-  );
-}
-export default ContentType;

package/lib-next/theme/ApiDemoPanel/ContentType/slice.js

@@ -1,20 +0,0 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import { createSlice } from "@reduxjs/toolkit";
-const initialState = {};
-export const slice = createSlice({
-  name: "contentType",
-  initialState,
-  reducers: {
-    setContentType: (state, action) => {
-      state.value = action.payload;
-    },
-  },
-});
-export const { setContentType } = slice.actions;
-export default slice.reducer;

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

@@ -1,281 +0,0 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React, { useState, useEffect } from "react";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import codegen from "@paloaltonetworks/postman-code-generators";
-import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
-import CodeTabs from "@theme/ApiDemoPanel/CodeTabs";
-import { useTypedSelector } from "@theme/ApiItem/hooks";
-import CodeBlock from "@theme/CodeBlock";
-import merge from "lodash/merge";
-export const languageSet = [
-  {
-    highlight: "bash",
-    language: "curl",
-    logoClass: "bash",
-    options: {
-      longFormat: false,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-  },
-  {
-    highlight: "python",
-    language: "python",
-    logoClass: "python",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "requests",
-  },
-  {
-    highlight: "go",
-    language: "go",
-    logoClass: "go",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "native",
-  },
-  {
-    highlight: "javascript",
-    language: "nodejs",
-    logoClass: "nodejs",
-    options: {
-      ES6_enabled: true,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "axios",
-  },
-  {
-    highlight: "ruby",
-    language: "ruby",
-    logoClass: "ruby",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "Net::HTTP",
-  },
-  {
-    highlight: "csharp",
-    language: "csharp",
-    logoClass: "csharp",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestSharp",
-  },
-  {
-    highlight: "php",
-    language: "php",
-    logoClass: "php",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-  },
-  {
-    highlight: "java",
-    language: "java",
-    logoClass: "java",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "OkHttp",
-  },
-  {
-    highlight: "powershell",
-    language: "powershell",
-    logoClass: "powershell",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestMethod",
-  },
-];
-function CodeTab({ children, hidden, className, onClick }) {
-  return (
-    <div
-      role="tabpanel"
-      className={className}
-      {...{
-        hidden,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-function Curl({ postman, codeSamples }) {
-  // TODO: match theme for vscode.
-
-  const { siteConfig } = useDocusaurusContext();
-  const contentType = useTypedSelector((state) => state.contentType.value);
-  const accept = useTypedSelector((state) => state.accept.value);
-  const server = useTypedSelector((state) => state.server.value);
-  const body = useTypedSelector((state) => state.body);
-  const pathParams = useTypedSelector((state) => state.params.path);
-  const queryParams = useTypedSelector((state) => state.params.query);
-  const cookieParams = useTypedSelector((state) => state.params.cookie);
-  const headerParams = useTypedSelector((state) => state.params.header);
-  const auth = useTypedSelector((state) => state.auth);
-
-  // User-defined languages array
-  // Can override languageSet, change order of langs, override options and variants
-  const langs = [
-    ...(siteConfig?.themeConfig?.languageTabs ?? languageSet),
-    ...codeSamples,
-  ];
-
-  // Filter languageSet by user-defined langs
-  const filteredLanguageSet = languageSet.filter((ls) => {
-    return langs.some((lang) => {
-      return lang.language === ls.language;
-    });
-  });
-
-  // Merge user-defined langs into languageSet
-  const mergedLangs = merge(filteredLanguageSet, langs);
-
-  // Read defaultLang from localStorage
-  const defaultLang = mergedLangs.filter(
-    (lang) =>
-      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
-  );
-  const [language, setLanguage] = useState(() => {
-    // Return first index if only 1 user-defined language exists
-    if (mergedLangs.length === 1) {
-      return mergedLangs[0];
-    }
-    // Fall back to language in localStorage or first user-defined language
-    return defaultLang[0] ?? mergedLangs[0];
-  });
-  const [codeText, setCodeText] = useState("");
-  useEffect(() => {
-    if (language && !!language.options) {
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
-      codegen.convert(
-        language.language,
-        language.variant,
-        postmanRequest,
-        language.options,
-        (error, snippet) => {
-          if (error) {
-            return;
-          }
-          setCodeText(snippet);
-        }
-      );
-    } else if (language && !!language.source) {
-      setCodeText(language.source);
-    } else if (language && !language.options) {
-      const langSource = mergedLangs.filter(
-        (lang) => lang.language === language.language
-      );
-
-      // Merges user-defined language with default languageSet
-      // This allows users to define only the minimal properties necessary in languageTabs
-      // User-defined properties should override languageSet properties
-      const mergedLanguage = {
-        ...langSource[0],
-        ...language,
-      };
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
-      codegen.convert(
-        mergedLanguage.language,
-        mergedLanguage.variant,
-        postmanRequest,
-        mergedLanguage.options,
-        (error, snippet) => {
-          if (error) {
-            return;
-          }
-          setCodeText(snippet);
-        }
-      );
-    } else {
-      setCodeText("");
-    }
-  }, [
-    accept,
-    body,
-    contentType,
-    cookieParams,
-    headerParams,
-    language,
-    pathParams,
-    postman,
-    queryParams,
-    server,
-    auth,
-    mergedLangs,
-  ]);
-  if (language === undefined) {
-    return null;
-  }
-  return (
-    <>
-      <CodeTabs groupId="code-samples" action={setLanguage}>
-        {mergedLangs.map((lang) => {
-          return (
-            <CodeTab
-              value={lang.language}
-              label={""}
-              key={
-                lang.variant
-                  ? `${lang.language}-${lang.variant}`
-                  : lang.language
-              }
-              attributes={{
-                className: `openapi-tabs__code-item--${lang.logoClass}`,
-              }}
-            >
-              <CodeBlock
-                language={lang.highlight}
-                className="openapi-demo__code-block"
-                title={`${lang.language} / ${lang.variant}`}
-              >
-                {codeText}
-              </CodeBlock>
-            </CodeTab>
-          );
-        })}
-      </CodeTabs>
-    </>
-  );
-}
-export default Curl;