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

package/lib-next/theme/DiscriminatorTabs/index.js

@@ -1,185 +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, useRef, useEffect, useState } from "react";
-
-import {
-  useScrollPositionBlocker,
-  useTabs,
-} from "@docusaurus/theme-common/internal";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
-import flatten from "lodash/flatten";
-
-function TabList({ 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);
-    }
-  };
-  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();
-  };
-
-  const tabItemListContainerRef = useRef(null);
-  const [showTabArrows, setShowTabArrows] = useState(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
-      }
-    });
-
-    resizeObserver.observe(tabItemListContainerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  const handleRightClick = () => {
-    tabItemListContainerRef.current.scrollLeft += 90;
-  };
-
-  const handleLeftClick = () => {
-    tabItemListContainerRef.current.scrollLeft -= 90;
-  };
-
-  return (
-    <div className="openapi-tabs__discriminator-top-section">
-      <div className="openapi-tabs__discriminator-container">
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow left"
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__discriminator-list-container",
-            "tabs",
-            {
-              "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__discriminator-item",
-                attributes?.className,
-                {
-                  active: selectedValue === value,
-                }
-              )}
-            >
-              <span className="openapi-tabs__discriminator-tab-label">
-                {label ?? value}
-              </span>
-            </li>
-          ))}
-        </ul>
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow right"
-            onClick={handleRightClick}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-function TabContent({ lazy, children, selectedValue }) {
-  // eslint-disable-next-line no-param-reassign
-  children = Array.isArray(children) ? children : [children];
-  const flattenedChildren = flatten(children);
-  if (lazy) {
-    const selectedTabItem = flattenedChildren.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="openapi-tabs__container">
-      <TabList {...props} {...tabs} />
-      <TabContent {...props} {...tabs} />
-    </div>
-  );
-}
-export default function DiscriminatorTabs(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/Markdown/Details/_Details.scss

@@ -1,36 +0,0 @@
-/* Markdown Details Styling */
-
-.openapi-markdown__details {
-  margin: unset !important;
-  max-width: 600px;
-  background-color: transparent;
-  color: var(--ifm-font-color-base);
-  padding: unset;
-  border: unset !important;
-  box-shadow: unset !important;
-  --docusaurus-details-decoration-color: var(--ifm-font-color-base) !important;
-}
-
-.openapi-markdown__details ul {
-  padding-left: 0;
-  font-size: 14px;
-}
-
-.openapi-markdown__details li {
-  list-style: none;
-  padding-top: 5px;
-}
-
-.theme-api-markdown .tabs__item {
-  padding-bottom: unset;
-  padding-top: unset;
-}
-
-.openapi-markdown__details > div > div {
-  padding-top: unset !important;
-  border-top: unset !important;
-}
-
-.openapi-markdown__details p {
-  margin-bottom: 0;
-}

package/lib-next/theme/MimeTabs/_MimeTabs.scss

@@ -1,64 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.openapi-tabs__mime-container {
-  display: flex;
-  align-items: center;
-  max-width: 390px;
-  overflow: hidden;
-}
-
-.openapi-tabs__mime-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2rem;
-  margin-top: 0 !important;
-  margin-right: 0.5rem;
-  font-weight: var(--ifm-font-weight-normal);
-  font-size: 12px;
-  white-space: nowrap;
-
-  &.active {
-    background-color: var(--ifm-color-emphasis-100);
-    border-bottom-color: var(--ifm-tabs-color-active-border);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    color: var(--ifm-tabs-color-active);
-  }
-
-  &:last-child {
-    margin-right: 0 !important;
-  }
-}
-
-.openapi-tabs__mime-list-container {
-  overflow-y: hidden;
-  overflow-x: scroll;
-  scroll-behavior: smooth;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.openapi-tabs__mime-schema-container {
-  max-width: 600px;
-}
-
-@media screen and (max-width: 500px) {
-  .mimeTabsTopSection {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .mimeTabsContainer {
-    width: 100%;
-    margin-top: var(--ifm-spacing-vertical);
-    padding: 0;
-  }
-}

package/lib-next/theme/MimeTabs/index.js

@@ -1,221 +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, useEffect, useState, useRef } from "react";
-
-import {
-  useScrollPositionBlocker,
-  useTabs,
-} from "@docusaurus/theme-common/internal";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import { setAccept } from "@theme/ApiDemoPanel/Accept/slice";
-import { setContentType } from "@theme/ApiDemoPanel/ContentType/slice";
-import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import clsx from "clsx";
-
-function TabList({
-  className,
-  block,
-  selectedValue: selectedValueProp,
-  selectValue,
-  tabValues,
-  schemaType,
-}) {
-  const tabRefs = [];
-  const { blockElementScrollPositionUntilNextRender } =
-    useScrollPositionBlocker();
-
-  // custom
-  const dispatch = useTypedDispatch();
-  const isRequestSchema = schemaType?.toLowerCase() === "request";
-
-  const [selectedValue, setSelectedValue] = useState(selectedValueProp);
-  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 handleTabChange = (event) => {
-    event.preventDefault();
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex].value;
-    // custom
-    if (newTabValue !== selectedValue) {
-      if (isRequestSchema) {
-        dispatch(setContentType(newTabValue));
-      } else {
-        dispatch(setAccept(newTabValue));
-      }
-      blockElementScrollPositionUntilNextRender(newTab);
-      selectValue(newTabValue);
-    }
-  };
-
-  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();
-  };
-
-  const tabItemListContainerRef = useRef(null);
-  const [showTabArrows, setShowTabArrows] = useState(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
-      }
-    });
-
-    resizeObserver.observe(tabItemListContainerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  const handleRightClick = () => {
-    tabItemListContainerRef.current.scrollLeft += 90;
-  };
-
-  const handleLeftClick = () => {
-    tabItemListContainerRef.current.scrollLeft -= 90;
-  };
-
-  return (
-    <div className="tabs__container">
-      <div className="openapi-tabs__mime-container">
-        {showTabArrows && (
-          <button
-            className={clsx("openapi-tabs__arrow", "left")}
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__mime-list-container",
-            "tabs",
-            {
-              "tabs--block": block,
-            },
-            className
-          )}
-        >
-          {tabValues.map(({ value, label, attributes }) => {
-            return (
-              <li
-                role="tab"
-                tabIndex={selectedValue === value ? 0 : -1}
-                aria-selected={selectedValue === value}
-                key={value}
-                ref={(tabControl) => tabRefs.push(tabControl)}
-                onKeyDown={handleKeydown}
-                onFocus={handleTabChange}
-                onClick={(e) => handleTabChange(e)}
-                {...attributes}
-                className={clsx(
-                  "tabs__item",
-                  "openapi-tabs__mime-item",
-                  attributes?.className,
-                  {
-                    active: selectedValue === value,
-                  }
-                )}
-              >
-                {label ?? value}
-              </li>
-            );
-          })}
-        </ul>
-        {showTabArrows && (
-          <button
-            className={clsx("openapi-tabs__arrow", "right")}
-            onClick={handleRightClick}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-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 MimeTabs(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/ParamsItem/_ParamsItem.scss

@@ -1,39 +0,0 @@
-.openapi-params__list-item {
-  margin: 0 0 0 1rem !important;
-  position: relative;
-  padding-left: 1rem;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
-  margin-top: unset !important;
-
-  // Horizonal line styling for param attributes
-  &::before {
-    position: absolute;
-    top: 10px;
-    left: 0;
-    width: 0.7rem;
-    /* width of horizontal line */
-    height: 0.5rem;
-    /* vertical position of line */
-    vertical-align: top;
-    border-bottom: thin solid var(--ifm-color-gray-500);
-    content: "";
-    display: inline-block;
-  }
-}
-
-.openapi-params__list-item:hover {
-  background-color: var(--ifm-menu-color-background-active);
-}
-
-.openapi-params__list-item:focus {
-  background-color: var(--ifm-menu-color-background-active);
-}
-
-.openapi-schema__type {
-  opacity: 0.6;
-}
-
-.openapi-schema__required {
-  font-size: var(--ifm-code-font-size);
-  color: var(--openapi-required);
-}

package/lib-next/theme/ParamsItem/index.js

@@ -1,133 +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 CodeBlock from "@theme/CodeBlock";
-import SchemaTabs from "@theme/SchemaTabs";
-import TabItem from "@theme/TabItem";
-/* eslint-disable import/no-extraneous-dependencies*/
-import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
-/* eslint-disable import/no-extraneous-dependencies*/
-import {
-  getQualifierMessage,
-  getSchemaName,
-} from "docusaurus-theme-openapi-docs/lib/markdown/schema";
-/* eslint-disable import/no-extraneous-dependencies*/
-import {
-  guard,
-  toString,
-} from "docusaurus-theme-openapi-docs/lib/markdown/utils";
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-
-function ParamsItem({
-  param: { description, example, examples, name, required, schema },
-}) {
-  if (!schema || !schema?.type) {
-    schema = { type: "any" };
-  }
-
-  const renderSchemaName = guard(schema, (schema) => (
-    <span className="openapi-schema__type"> {getSchemaName(schema)}</span>
-  ));
-
-  const renderSchemaRequired = guard(required, () => (
-    <strong className="openapi-schema__required"> required</strong>
-  ));
-
-  const renderSchema = guard(getQualifierMessage(schema), (message) => (
-    <div>
-      <ReactMarkdown
-        children={createDescription(message)}
-        rehypePlugins={[rehypeRaw]}
-      />
-    </div>
-  ));
-
-  const renderDescription = guard(description, (description) => (
-    <div>
-      <ReactMarkdown
-        children={createDescription(description)}
-        components={{
-          pre: "div",
-          code({ node, inline, className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || "");
-            if (inline) return <code>{children}</code>;
-            return !inline && match ? (
-              <CodeBlock className={className}>{children}</CodeBlock>
-            ) : (
-              <CodeBlock>{children}</CodeBlock>
-            );
-          },
-        }}
-        rehypePlugins={[rehypeRaw]}
-      />
-    </div>
-  ));
-
-  const renderDefaultValue = guard(
-    schema && schema.items
-      ? schema.items.default
-      : schema
-      ? schema.default
-      : undefined,
-    (value) => (
-      <div>
-        <ReactMarkdown children={`**Default value:** \`${value}\``} />
-      </div>
-    )
-  );
-
-  const renderExample = guard(toString(example), (example) => (
-    <div>
-      <strong>Example: </strong>
-      {example}
-    </div>
-  ));
-
-  const renderExamples = guard(examples, (examples) => {
-    const exampleEntries = Object.entries(examples);
-    return (
-      <>
-        <strong>Examples:</strong>
-        <SchemaTabs>
-          {exampleEntries.map(([exampleName, exampleProperties]) => (
-            <TabItem value={exampleName} label={exampleName}>
-              {exampleProperties.summary && <p>{exampleProperties.summary}</p>}
-              {exampleProperties.description && (
-                <p>
-                  <strong>Description: </strong>
-                  <span>{exampleProperties.description}</span>
-                </p>
-              )}
-              <p>
-                <strong>Example: </strong>
-                <code>{exampleProperties.value}</code>
-              </p>
-            </TabItem>
-          ))}
-        </SchemaTabs>
-      </>
-    );
-  });
-
-  return (
-    <li className="openapi-params__list-item">
-      <strong>{name}</strong>
-      {renderSchemaName}
-      {renderSchemaRequired}
-      {renderSchema}
-      {renderDefaultValue}
-      {renderDescription}
-      {renderExample}
-      {renderExamples}
-    </li>
-  );
-}
-
-export default ParamsItem;

package/lib-next/theme/ResponseSamples/_ResponseSamples.scss

@@ -1,3 +0,0 @@
-.openapi-code__response-samples-container {
-  margin-top: 2rem;
-}

package/lib-next/theme/ResponseSamples/index.js

@@ -1,22 +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 CodeBlock from "@theme/CodeBlock";
-
-function ResponseSamples({ responseExample, language }) {
-  return (
-    <div className="openapi-code__response-samples-container">
-      <CodeBlock language={language ? language : "json"}>
-        {responseExample}
-      </CodeBlock>
-    </div>
-  );
-}
-
-export default ResponseSamples;