chore(deps): update nextra monorepo to v3 (major) (#945)

* chore(deps): update nextra monorepo to v3 * Upgrade all files for nextra v3 * Update built-in components * Fix lint --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Daniel Tschinder <[email protected]>
reactjs · Nov 16, 2024 · 9b5e0db · 9b5e0db
1 parent 0771fa6
commit 9b5e0db
Show file tree

Hide file tree

Showing 32 changed files with 1,643 additions and 1,029 deletions.
diff --git a/packages/website/next-env.d.ts b/packages/website/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/packages/website/next.config.js → packages/website/next.config.mjs b/packages/website/next.config.js → packages/website/next.config.mjs
@@ -1,9 +1,11 @@
-const withNextra = require('nextra')({
+import nextra from 'nextra';
+
+const withNextra = nextra({
   theme: 'nextra-theme-docs',
   themeConfig: './src/theme.config.tsx',
 });
 
-module.exports = withNextra({
+export default withNextra({
   webpack: (config) => {
     if (!config.resolve.fallback) config.resolve.fallback = {};
 

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -14,16 +14,15 @@
     "@codemirror/lang-javascript": "6.2.2",
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/view": "6.34.1",
-    "@headlessui/react": "1.7.19",
-    "@popperjs/core": "2.11.8",
+    "@headlessui/react": "2.2.0",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@uiw/react-codemirror": "4.23.5",
     "clsx": "2.1.1",
     "next": "14.2.16",
-    "next-themes": "0.3.0",
-    "nextra": "2.13.4",
-    "nextra-theme-docs": "2.13.4",
+    "next-themes": "0.4.3",
+    "nextra": "3.2.3",
+    "nextra-theme-docs": "3.2.3",
     "postcss": "8.4.47",
     "postcss-lightningcss": "1.0.1",
     "react": "18.3.1",

diff --git a/packages/website/src/components/Select.tsx b/packages/website/src/components/Select.tsx
@@ -1,10 +1,12 @@
-import type { ReactElement, ReactNode } from 'react';
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/react';
 import cn from 'clsx';
-import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon } from 'nextra/icons';
-import { usePopper } from '../utils/usePopper';
-import { createPortal } from 'react-dom';
-import { useMounted } from 'nextra/hooks';
+import type { ReactElement } from 'react';
 
 interface MenuOption {
   key: string;
@@ -26,82 +28,59 @@ export function Select({
   title,
   className,
 }: MenuProps): ReactElement {
-  const [trigger, container] = usePopper({
-    strategy: 'fixed',
-    placement: 'top-start',
-    modifiers: [
-      { name: 'offset', options: { offset: [0, 10] } },
-      {
-        name: 'sameWidth',
-        enabled: true,
-        fn({ state }) {
-          state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-        },
-        phase: 'beforeWrite',
-        requires: ['computeStyles'],
-      },
-    ],
-  });
-
   return (
     <Listbox value={selected} onChange={onChange}>
-      {({ open }) => (
-        <Listbox.Button
-          ref={trigger}
-          title={title}
-          className={cn(
-            'h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400',
+      <ListboxButton
+        title={title}
+        className={({ hover, open, focus }) =>
+          cn(
+            'h-7 rounded-md px-2 text-xs font-medium transition-colors',
             open
               ? 'dark:bg-primary-100/10 bg-gray-200 text-gray-900 dark:text-gray-50'
-              : 'dark:hover:bg-primary-100/5 hover:bg-gray-100 hover:text-gray-900 dark:hover:text-gray-50',
+              : hover
+                ? 'dark:bg-primary-100/5 bg-gray-100 text-gray-900 dark:text-gray-50'
+                : 'text-gray-600 dark:text-gray-400',
+            focus && 'nextra-focusable',
             className,
-          )}
-        >
-          {selected.name}
-          <Portal>
-            <Transition
-              ref={container}
-              show={open}
-              as={Listbox.Options}
-              className="z-20 max-h-64 overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 dark:bg-neutral-800 dark:ring-white/20"
-              leave="transition-opacity"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              {options.map((option) => (
-                <Listbox.Option
-                  key={option.key}
-                  value={option}
-                  className={({ active }) =>
-                    cn(
-                      active
-                        ? 'bg-primary-50 text-primary-600 dark:bg-primary-500/10'
-                        : 'text-gray-800 dark:text-gray-100',
-                      'relative cursor-pointer whitespace-nowrap py-1.5',
-                      'transition-colors ltr:pl-3 ltr:pr-9 rtl:pl-9 rtl:pr-3',
-                    )
-                  }
-                >
-                  {option.name}
-                  {option.key === selected.key && (
-                    <span className="absolute inset-y-0 flex items-center ltr:right-3 rtl:left-3">
-                      <CheckIcon />
-                    </span>
-                  )}
-                </Listbox.Option>
-              ))}
-            </Transition>
-          </Portal>
-        </Listbox.Button>
-      )}
+          )
+        }
+      >
+        {selected.name}
+      </ListboxButton>
+      <ListboxOptions
+        as="ul"
+        transition
+        anchor={{ to: 'top start', gap: 10 }}
+        className={({ open }) =>
+          cn(
+            'nextra-focus',
+            open ? 'opacity-100' : 'opacity-0',
+            'z-20 max-h-64 min-w-[--button-width] rounded-md border border-black/5 bg-[rgb(var(--nextra-bg),.8)] py-1 text-sm shadow-lg backdrop-blur-lg transition-opacity motion-reduce:transition-none dark:border-white/20',
+          )
+        }
+      >
+        {options.map((option) => (
+          <ListboxOption
+            key={option.key}
+            value={option}
+            as="li"
+            className={({ focus }) =>
+              cn(
+                focus
+                  ? 'bg-primary-50 text-primary-600 dark:bg-primary-500/10'
+                  : 'text-gray-800 dark:text-gray-100',
+                'cursor-pointer whitespace-nowrap px-3 py-1.5',
+                'transition-colors',
+                option.key === selected.key &&
+                  'flex items-center justify-between gap-3',
+              )
+            }
+          >
+            {option.name}
+            {option.key === selected.key && <CheckIcon height="16" />}
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
     </Listbox>
   );
 }
-
-function Portal(props: { children: ReactNode }): ReactElement | null {
-  const mounted = useMounted();
-
-  if (!mounted) return null;
-
-  return createPortal(props.children, document.body);
-}
diff --git a/packages/website/src/pages/_app.mdx b/packages/website/src/pages/_app.mdx
diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx
@@ -0,0 +1,6 @@
+import './globals.css';
+import type { AppProps } from 'next/app';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
diff --git a/packages/website/src/pages/_meta.js b/packages/website/src/pages/_meta.js
@@ -0,0 +1,31 @@
+export default {
+  index: {
+    title: 'Home',
+    type: 'page',
+  },
+  docs: {
+    title: 'Docs',
+    type: 'page',
+  },
+  playground: {
+    title: 'Playground',
+    type: 'page',
+    theme: {
+      layout: 'raw',
+    },
+  },
+  users: {
+    title: 'Users',
+    type: 'page',
+    theme: {
+      typesetting: 'article',
+    },
+  },
+  about: {
+    title: 'About',
+    type: 'page',
+    theme: {
+      typesetting: 'article',
+    },
+  },
+};
diff --git a/packages/website/src/pages/_meta.json b/packages/website/src/pages/_meta.json
diff --git a/packages/website/src/pages/about.mdx b/packages/website/src/pages/about.mdx
@@ -1,3 +1,6 @@
+---
+title: 'About'
+---
 # About react-docgen
 
 react-docgen was initially created by [Facebook](https://www.facebook.com) member

diff --git a/packages/website/src/pages/docs/_meta.js b/packages/website/src/pages/docs/_meta.js
@@ -0,0 +1,7 @@
+export default {
+  'getting-started': 'Getting started',
+  extending: 'Extending',
+  reference: 'Reference',
+  migrate: 'Migrate',
+  'release-notes': 'Release Notes',
+};
diff --git a/packages/website/src/pages/docs/_meta.json b/packages/website/src/pages/docs/_meta.json
diff --git a/packages/website/src/pages/docs/extending/_meta.js b/packages/website/src/pages/docs/extending/_meta.js
@@ -0,0 +1,6 @@
+export default {
+  architecture: 'Architecture',
+  resolver: 'Resolver',
+  handler: 'Handler',
+  importer: 'Importer',
+};
diff --git a/packages/website/src/pages/docs/extending/_meta.json b/packages/website/src/pages/docs/extending/_meta.json
diff --git a/packages/website/src/pages/docs/getting-started/_meta.js b/packages/website/src/pages/docs/getting-started/_meta.js
@@ -0,0 +1,4 @@
+export default {
+  nodejs: 'Node.js',
+  cli: 'CLI',
+};
diff --git a/packages/website/src/pages/docs/getting-started/_meta.json b/packages/website/src/pages/docs/getting-started/_meta.json
diff --git a/packages/website/src/pages/docs/getting-started/cli.mdx b/packages/website/src/pages/docs/getting-started/cli.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from 'nextra-theme-docs';
+import { Tabs } from 'nextra/components';
 
 # Getting started with the Command Line Interface (CLI)
 
@@ -12,55 +12,55 @@ a dependency.
 In order to use it directly any of these commands will work:
 
 <Tabs items={["npx", "pnpm", "yarn"]}>
-  <Tab>
+  <Tabs.Tab>
 
 ```shell filename="Terminal" copy
 npx @react-docgen/cli --help
 ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
 
 ```shell filename="Terminal" copy
 pnpm dlx @react-docgen/cli --help
 ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
 
 ```shell filename="Terminal" copy
 yarn dlx @react-docgen/cli --help
 ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 ### Install
 
 Installing the CLI can be done with any available package manager:
 
 <Tabs items={["npm", "pnpm", "yarn"]}>
-  <Tab>
+  <Tabs.Tab>
 
 ```shell filename="Terminal" copy
 npm install --save @react-docgen/cli
 ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
 
 ```shell filename="Terminal" copy
 pnpm add @react-docgen/cli
 ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
 
 ```shell filename="Terminal" copy
 yarn add @react-docgen/cli
 ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 ## Usage