docs: fix infinite scroll, update next.js, other fixes (#9441)

* update nextjs

* badge + scroll fixes

www/apps/api-reference/app/globals.css

@@ -43,6 +43,14 @@
     @apply bg-medusa-bg-highlight;
   }
 
+  * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
+  }
+
+  aside * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
+  }
+
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }

www/apps/api-reference/package.json

@@ -17,7 +17,7 @@
     "@mdx-js/react": "^3.0.0",
     "@medusajs/icons": "preview",
     "@medusajs/ui": "^3.0.0",
-    "@next/mdx": "14.2.3",
+    "@next/mdx": "14.2.14",
     "@readme/openapi-parser": "^2.5.0",
     "@types/mapbox__rehype-prism": "^0.8.0",
     "@types/mdx": "^2.0.5",
@@ -33,7 +33,7 @@
     "jsdom": "^22.1.0",
     "json-schema": "^0.4.0",
     "json-stringify-pretty-compact": "^4.0.0",
-    "next": "^14.2.3",
+    "next": "^14.2.14",
     "next-mdx-remote": "^4.4.1",
     "openapi-sampler": "^1.3.1",
     "openapi-types": "^12.1.3",
@@ -53,7 +53,7 @@
     "yaml": "^2.3.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.3",
+    "@next/bundle-analyzer": "^14.2.14",
     "@types/jsdom": "^21.1.1",
     "@types/pluralize": "^0.0.33",
     "types": "*"

www/apps/book/app/globals.css

@@ -16,6 +16,14 @@
     @apply bg-medusa-bg-highlight;
   }
 
+  * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
+  }
+
+  aside * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
+  }
+
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }

www/apps/book/package.json

@@ -16,10 +16,10 @@
   "dependencies": {
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^14.2.3",
+    "@next/mdx": "^14.2.14",
     "clsx": "^2.1.0",
     "docs-ui": "*",
-    "next": "14.2.3",
+    "next": "14.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-mdx-code-props": "^2.0.0",

www/apps/resources/app/globals.css

@@ -16,6 +16,14 @@
     @apply bg-medusa-bg-highlight;
   }
 
+  * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
+  }
+
+  aside * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
+  }
+
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }

www/apps/resources/package.json

@@ -16,10 +16,10 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@medusajs/icons": "preview",
-    "@next/mdx": "^14.2.3",
+    "@next/mdx": "^14.2.14",
     "clsx": "^2.1.0",
     "docs-ui": "*",
-    "next": "14.2.3",
+    "next": "14.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-mdx-code-props": "^2.0.0",

www/apps/ui/package.json

@@ -30,7 +30,7 @@
     "docs-ui": "*",
     "eslint-config-docs": "*",
     "mdast-util-toc": "^7.0.0",
-    "next": "^14.2.3",
+    "next": "^14.2.14",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "postcss": "8.4.27",

www/apps/ui/src/styles/globals.css

@@ -18,6 +18,14 @@
     @apply !bg-medusa-contrast-bg-highlight;
   }
 
+  * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
+  }
+
+  aside * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
+  }
+
   body {
     @apply text-ui-fg-subtle;
   }

www/apps/user-guide/app/globals.css

@@ -2,32 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
+@layer base {
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+  html {
+    -webkit-font-smoothing: antialiased;
   }
-}
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  body {
+    @apply overflow-x-hidden;
   }
-}
+
+  *::selection {
+    @apply bg-medusa-bg-highlight;
+  }
+
+  * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
+  }
+
+  aside * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
+  }
+
+  body[data-modal="opened"] {
+    @apply !overflow-hidden;
+  }
+}

www/apps/user-guide/package.json

@@ -17,10 +17,10 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@medusajs/icons": "preview",
-    "@next/mdx": "^14.2.3",
+    "@next/mdx": "^14.2.14",
     "clsx": "^2.1.0",
     "docs-ui": "*",
-    "next": "14.2.3",
+    "next": "14.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-mdx-code-props": "^2.0.0",