Copy over v3.0.0 branch code from original theme; copy over our original changes

Author: jgarrow

packages/docusaurus-theme-openapi-docs/.npmignore

@@ -1,6 +1,6 @@
 {
   "name": "@mxenabled/docusaurus-theme-openapi-docs",
-  "description": "MX's OpenAPI theme for Docusaurus.",
+  "description": "OpenAPI theme for Docusaurus.",
   "version": "1.10.6",
   "license": "MIT",
   "keywords": [
@@ -24,52 +24,47 @@
   "types": "src/theme-openapi.d.ts",
   "main": "lib/index.js",
   "scripts": {
-    "build": "tsc --noEmit && yarn babel:lib && yarn babel:lib-next && yarn format:lib-next",
-    "watch": "concurrently --names \"lib,lib-next,tsc\" --kill-others \"yarn babel:lib --watch\" \"yarn babel:lib-next --watch\" \"yarn tsc --watch\"",
-    "babel:lib": "cross-env BABEL_ENV=lib babel src -d lib --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
-    "babel:lib-next": "cross-env BABEL_ENV=lib-next babel src -d lib-next --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
-    "format:lib-next": "prettier --config ../../.prettierrc.json --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
+    "build": "tsc --build && node ../../scripts/copyUntypedFiles.mjs && prettier --config ../../.prettierrc.json --write \"lib/theme/**/*.js\"",
+    "watch": "concurrently --names \"lib,lib-next,tsc\" --kill-others \"yarn babel:lib --watch\" \"yarn babel:lib-next --watch\" \"yarn tsc --watch\""
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": ">=2.0.1 <2.3.0",
-    "@docusaurus/types": ">=2.0.1 <2.3.0",
-    "@types/concurrently": "^6.3.0",
+    "@docusaurus/types": "^3.0.1",
     "@types/crypto-js": "^4.1.0",
     "@types/file-saver": "^2.0.5",
-    "@types/fs-extra": "^9.0.13",
     "@types/lodash": "^4.14.176",
-    "@types/mdx-js__react": "^1.5.4",
-    "@types/rtlcss": "^3.1.1",
-    "concurrently": "^5.2.0"
+    "concurrently": "^5.2.0",
+    "eslint-plugin-prettier": "^5.0.1"
   },
   "dependencies": {
-    "@mdx-js/react": "^1.6.21",
-    "@mxenabled/docusaurus-plugin-openapi-docs": "^1.10.4",
-    "@mxenabled/docusaurus-theme-common": "^2.2.5",
+    "@docusaurus/theme-common": "^3.0.1",
+    "@hookform/error-message": "^2.0.1",
+    "@mxenabled/docusaurus-plugin-openapi-docs": "1.10.4",
     "@paloaltonetworks/postman-code-generators": "1.1.15-patch.2",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
-    "buffer": "^6.0.3",
     "clsx": "^1.1.1",
+    "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
+    "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
-    "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "node-polyfill-webpack-plugin": "^2.0.1",
-    "process": "^0.11.10",
-    "react-live": "^3.1.1",
+    "prism-react-renderer": "^2.3.0",
+    "react-hook-form": "^7.43.8",
+    "react-live": "^4.0.0",
     "react-magic-dropzone": "^1.0.1",
     "react-markdown": "^8.0.1",
     "react-modal": "^3.15.1",
     "react-redux": "^7.2.0",
-    "redux-devtools-extension": "^2.13.8",
     "rehype-raw": "^6.1.1",
+    "sass": "^1.58.1",
+    "sass-loader": "^13.3.2",
     "webpack": "^5.61.0",
     "xml-formatter": "^2.6.1"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=14"

packages/docusaurus-theme-openapi-docs/package.json

@@ -16,19 +16,49 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
     name: "docusaurus-theme-openapi",
 
     getClientModules() {
-      const modules = [require.resolve("./theme/styles.css")];
+      const modules = [
+        require.resolve(
+          path.join(__dirname, "..", "lib", "theme", "styles.scss")
+        ),
+      ];
       return modules;
     },
 
     getThemePath() {
-      return path.join(__dirname, "..", "lib-next", "theme");
+      return path.join(__dirname, "..", "lib", "theme");
     },
 
     getTypeScriptThemePath() {
       return path.resolve(__dirname, "..", "src", "theme");
     },
 
-    configureWebpack() {
+    configureWebpack(_, isServer, utils) {
+      const rules: any = _.module?.rules ?? [];
+      const sassLoaderRule = rules.filter((r: any) => {
+        return String(r.test) === String(/\.s[ca]ss$/);
+      });
+      const { getStyleLoaders } = utils;
+      // Avoid conflicts with docusaurus-plugin-sass
+      if (sassLoaderRule.length === 0) {
+        return {
+          plugins: [new NodePolyfillPlugin()],
+          module: {
+            rules: [
+              {
+                test: /\.s[ac]ss$/,
+                include: path.resolve(__dirname, "..", "lib", "theme"),
+                use: [
+                  ...getStyleLoaders(isServer, {}),
+                  {
+                    loader: require.resolve("sass-loader"),
+                    options: {},
+                  },
+                ],
+              },
+            ],
+          },
+        };
+      }
       return {
         plugins: [new NodePolyfillPlugin()],
       };

packages/docusaurus-theme-openapi-docs/src/index.ts

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-export type Children = string | undefined | (string | undefined)[];
+import { ReactNode } from "react";
+
+export type Children = ReactNode | string | undefined | (string | undefined)[];
 
 export type Props = Record<string, any> & { children?: Children };
 
@@ -35,7 +37,7 @@ export function render(children: Children): string {
   if (Array.isArray(children)) {
     return children.filter((c) => c !== undefined).join("");
   }
-  return children ?? "";
+  return (children as string) ?? "";
 }
 
 export function toString(value: any): string | undefined {

packages/docusaurus-theme-openapi-docs/src/markdown/utils.ts

@@ -8,6 +8,73 @@
 /// <reference types="@docusaurus/theme-classic" />
 
 declare module "@docusaurus/theme-common/internal" {
-  function useDoc(): any;
-  export const { useDoc };
+  import { CSSProperties, ReactNode, RefObject } from "react";
+
+  import type { PropDocContent } from "@docusaurus/plugin-content-docs";
+  import { MagicCommentConfig } from "@docusaurus/theme-common/lib/utils/codeBlockUtils";
+  import {
+    TabsProps as ITabsProps,
+    TabValue,
+  } from "@docusaurus/theme-common/lib/utils/tabsUtils";
+  import { Props as ICodeBlockProps } from "@theme/CodeBlock";
+  import { Props as ICopyButtonProps } from "@theme/CodeBlock/CopyButton";
+  import { Props as ILineProps } from "@theme/CodeBlock/Line";
+  import { PrismTheme } from "prism-react-renderer";
+
+  export interface TabProps extends ITabsProps {}
+
+  export interface CopyButtonProps extends ICopyButtonProps {}
+  export interface LineProps extends ILineProps {}
+  export interface CodeBlockProps extends ICodeBlockProps {}
+
+  export function useDoc();
+
+  export function usePrismTheme(): PrismTheme;
+
+  export function sanitizeTabsChildren(children: TabProps["children"]);
+
+  export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties;
+
+  export function parseCodeBlockTitle(metastring?: string): string;
+
+  export function parseLanguage(className: string): string | undefined;
+
+  export function containsLineNumbers(metastring?: string): boolean;
+
+  export function useScrollPositionBlocker(): {
+    blockElementScrollPositionUntilNextRender: (el: HTMLElement) => void;
+  };
+
+  export function DocProvider({
+    children,
+    content,
+  }: {
+    children: ReactNode;
+    content: PropDocContent;
+  });
+
+  export function useTabs(props: TabProps): {
+    selectedValue: string;
+    selectValue: (value: string) => void;
+    tabValues: readonly TabValue[];
+  };
+
+  export function parseLines(
+    content: string,
+    options: {
+      metastring: string | undefined;
+      language: string | undefined;
+      magicComments: MagicCommentConfig[];
+    }
+  ): {
+    lineClassNames: { [lineIndex: number]: string[] };
+    code: string;
+  };
+
+  export function useCodeWordWrap(): {
+    readonly codeBlockRef: RefObject<HTMLPreElement>;
+    readonly isEnabled: boolean;
+    readonly isCodeScrollable: boolean;
+    readonly toggle: () => void;
+  };
 }