Deploy to production

package.json

@@ -25,6 +25,7 @@
     "@octokit/auth-app": "^6.0.1",
     "@octokit/core": "^5.0.1",
     "@octokit/webhooks": "^12.0.3",
+    "@stoplight/elements": "^7.15.3",
     "auth0": "^4.1.0",
     "core-js": "^3.33.3",
     "encoding": "^0.1.13",

src/features/docs/view/DocumentationViewer.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import Redocly from "./Redocly"
+import Stoplight from "./Stoplight"
 import Swagger from "./Swagger"
 import { DocumentationVisualizer } from "@/features/settings/domain"
 
@@ -14,6 +15,8 @@ const DocumentationViewer = ({
   switch (visualizer) {
   case DocumentationVisualizer.REDOCLY:
     return <Redocly url={url} />
+  case DocumentationVisualizer.STOPLIGHT:
+    return <Stoplight url={url} />
   case DocumentationVisualizer.SWAGGER:
     return <Swagger url={url} />
   }

src/features/docs/view/Stoplight.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react"
+import { API } from "@stoplight/elements"
+import "@stoplight/elements/styles.min.css"
+import LoadingWrapper from "./LoadingWrapper"
+
+const Swagger = ({ url }: { url: string }) => {
+  // The Stoplight component does not provide a callback to let us know
+  // when loading ends so in order to show our loading indicator, we load
+  // the specification before showing the Stoplight component.
+  const [document, setDocument] = useState<string | undefined>(undefined)
+  const [isLoading, setLoading] = useState(true)
+  useEffect(() => {
+    fetch(url)
+      .then(res => res.text())
+      .then(data => {
+        setDocument(data)
+        setLoading(false)
+      })
+  }, [url])
+  return (
+    <LoadingWrapper showLoadingIndicator={isLoading}>
+      {!isLoading && document &&
+        <API apiDescriptionDocument={document} router="hash" />
+      }
+    </LoadingWrapper>
+  )
+}
+
+export default Swagger

src/features/projects/view/Documentation.tsx

@@ -8,6 +8,7 @@ const Documentation = ({ url }: { url: string }) => {
   switch (visualizer) {
   case DocumentationVisualizer.REDOCLY:
     return <DocumentationIframe visualizer={visualizer} url={url} />
+  case DocumentationVisualizer.STOPLIGHT:
   case DocumentationVisualizer.SWAGGER:
     return <DocumentationViewer visualizer={visualizer} url={url} />
   }

src/features/settings/domain/DocumentationVisualizer.ts

@@ -1,6 +1,7 @@
 enum DocumentationVisualizer {
   SWAGGER,
-  REDOCLY
+  REDOCLY,
+  STOPLIGHT
 }
 
 export default DocumentationVisualizer

src/features/user/view/DocumentationVisualizationPicker.tsx

@@ -45,6 +45,14 @@ const DocumentationVisualizationPicker = ({
             Redocly
           </MenuItemHover>
         </MenuItem>
+        <MenuItem
+          key={DocumentationVisualizer.STOPLIGHT}
+          value={DocumentationVisualizer.STOPLIGHT.toString()}
+        >
+          <MenuItemHover>
+            Stoplight
+          </MenuItemHover>
+        </MenuItem>
         <MenuItem
           key={DocumentationVisualizer.SWAGGER}
           value={DocumentationVisualizer.SWAGGER.toString()}

types/@stoplight-elements.d.ts

@@ -0,0 +1,11 @@
+declare module "@stoplight/elements" {
+  interface APIProps {
+    apiDescriptionDocument?: string
+    apiDescriptionUrl?: string
+    basePath?: string
+    router?: "history" | "hash" | "memory" | "static"
+    layout?: "sidebar" | "stacked"
+  }
+
+  export const API: React.FC<APIProps>
+}