Merge pull request #493 from shapehq/develop

Merge develop into main

Author: simonbs

.github/workflows/build.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - name: Setup Environment
         run: cp .env.example .env.local
       - name: Install Dependencies

.github/workflows/run-unit-tests.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - name: Install Dependencies
         run: npm install
       - name: Run Unit Tests

package-lock.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": "20.8.1",
-    "npm": "10.1.0"
+    "node": "22.13.1",
+    "npm": "11.1.0"
   },
   "scripts": {
     "dev": "next dev",
@@ -18,28 +18,27 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@fontsource/poppins": "^5.1.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-brands-svg-icons": "^6.7.1",
-    "@fortawesome/free-regular-svg-icons": "^6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@mui/icons-material": "^6.1.8",
+    "@mui/icons-material": "^6.4.2",
     "@mui/material": "^6.0.1",
-    "@octokit/auth-app": "^7.1.3",
-    "@octokit/core": "^6.1.2",
-    "@octokit/webhooks": "^13.3.0",
-    "@stoplight/elements": "^8.4.5",
+    "@octokit/auth-app": "^7.1.4",
+    "@octokit/core": "^6.1.3",
+    "@octokit/webhooks": "~13.4.3",
     "core-js": "^3.39.0",
     "encoding": "^0.1.13",
     "figma-squircle": "^1.1.0",
     "install": "^0.13.0",
     "ioredis": "^5.4.1",
     "mobx": "^6.13.5",
-    "next": "^14.2.13",
+    "next": "^15.1.6",
     "next-auth": "^5.0.0-beta.25",
     "npm": "^10.9.0",
     "nprogress": "^0.2.0",
-    "octokit": "^4.0.2",
+    "octokit": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "redis-semaphore": "^5.6.0",
@@ -49,7 +48,7 @@
     "swagger-ui-react": "^5.17.14",
     "swr": "^2.2.5",
     "usehooks-ts": "^3.1.0",
-    "yaml": "^2.6.0",
+    "yaml": "^2.7.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -61,11 +60,11 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.0",
     "@types/swagger-ui-react": "^4.18.3",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.1",
-    "eslint-config-next": "^14.2.14",
+    "eslint": "^9.19.0",
+    "eslint-config-next": "^15.1.6",
     "pg": "^8.13.1",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.13",

package.json

@@ -8,15 +8,16 @@ interface GetBlobParams {
   path: [string]
 }
 
-export async function GET(req: NextRequest, { params }: { params: GetBlobParams }) {
+export async function GET(req: NextRequest, { params }: { params: Promise<GetBlobParams> }) {
   const isAuthenticated = await session.getIsAuthenticated()
   if (!isAuthenticated) {
     return makeUnauthenticatedAPIErrorResponse()
   }
-  const path = params.path.join("/")
+  const { path: paramsPath, owner, repository } = await params
+  const path = paramsPath.join("/")
   const item = await userGitHubClient.getRepositoryContent({
-    repositoryOwner: params.owner,
-    repositoryName: params.repository,
+    repositoryOwner: owner,
+    repositoryName: repository,
     path: path,
     ref: req.nextUrl.searchParams.get("ref") ?? undefined
   })

src/app/api/blob/[owner]/[repository]/[...path]/route.ts

@@ -7,13 +7,14 @@ interface RemoteSpecificationParams {
   encodedRemoteConfig: string
 }
 
-export async function GET(_req: NextRequest, { params }: { params: RemoteSpecificationParams }) {
+export async function GET(_req: NextRequest, { params }: { params: Promise<RemoteSpecificationParams> }) {
   const isAuthenticated = await session.getIsAuthenticated()
   if (!isAuthenticated) {
     return makeUnauthenticatedAPIErrorResponse()
   }
 
-  const remoteConfig = remoteConfigEncoder.decode(params.encodedRemoteConfig)
+  const { encodedRemoteConfig } = await params
+  const remoteConfig = remoteConfigEncoder.decode(encodedRemoteConfig)
 
   let url: URL
   try {

src/app/api/remotes/[encodedRemoteConfig]/route.ts

@@ -5,12 +5,13 @@ type SearchParams = { visualizer: string, url: string }
 export default async function Page({
   searchParams
 }: {
-  searchParams: SearchParams
+  searchParams: Promise<SearchParams>
 }) {
+  const { visualizer, url } = await searchParams
   return (
     <DocumentationViewer
-      visualizer={parseInt(searchParams.visualizer)}
-      url={searchParams.url}
+      visualizer={parseInt(visualizer)}
+      url={url}
     />
   )
 }

src/app/documentation-viewer/page.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState, createElement } from "react"
 import { Box } from "@mui/material"
-import { API } from "@stoplight/elements"
-import "@stoplight/elements/styles.min.css"
 import LoadingWrapper from "./LoadingWrapper"
 
 const Stoplight = ({ url }: { url: string }) => {
@@ -27,7 +25,21 @@ const Stoplight = ({ url }: { url: string }) => {
   )
 }
 
-const ResponsiveStoplight = ({ document }: { document: string }) => {
+const ResponsiveStoplight = ({ document: apiDescriptionDocument }: { document: string }) => {
+  useEffect(() => {
+    const script = document.createElement("script")
+    script.src = "https://unpkg.com/@stoplight/[email protected]/web-components.min.js"
+    script.async = true
+    document.body.appendChild(script)
+    const link = document.createElement("link")
+    link.rel = "stylesheet"
+    link.href = "https://unpkg.com/@stoplight/[email protected]/styles.min.css"
+    document.head.appendChild(link)
+    return () => {
+      document.body.removeChild(script)
+      document.head.removeChild(link)
+    }
+  }, [])
   return (
     <>
       <Box sx={{
@@ -36,25 +48,31 @@ const ResponsiveStoplight = ({ document }: { document: string }) => {
         height: "100%",
         padding: 2 
       }}>
-        <API
-          apiDescriptionDocument={document}
-          router="hash"
-          layout="stacked"
-        />
+        <ElementsAPI document={apiDescriptionDocument} layout="stacked" />
       </Box>
       <Box sx={{
         display: { xs: "none", sm: "block" },
         width: "100%",
         height: "100%",
       }}>
-        <API
-          apiDescriptionDocument={document}
-          router="hash"
-          layout="sidebar"
-        />
+        <ElementsAPI document={apiDescriptionDocument} layout="sidebar" />
       </Box>
     </>
   )
-} 
+}
+
+const ElementsAPI = ({
+  document: apiDescriptionDocument,
+  layout
+}: {
+  document: string,
+  layout: "sidebar" | "stacked"
+}) => {
+  return createElement("elements-api", {
+      apiDescriptionDocument,
+      router: "hash",
+      layout: layout
+    })
+}
 
 export default Stoplight