upgrade docusaurus (#127)

* upgrade docusaurus

* address feedback

Author: jquense

package.json

@@ -115,8 +115,8 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-transition-group": "^4.4.12",
     "@typescript-eslint/eslint-plugin": "^8.23.0",
     "@typescript-eslint/parser": "^8.23.0",

src/Waypoint.tsx

@@ -2,9 +2,9 @@ import useCallbackRef from '@restart/hooks/useCallbackRef';
 import * as React from 'react';
 
 import useWaypoint, {
+  Position,
   type WaypointOptions,
   type WaypointEvent,
-  type Position,
 } from './useWaypoint.js';
 
 export { Position };

src/index.ts

@@ -1,46 +1,45 @@
-import Dropdown from './Dropdown.js';
-import { useDropdownMenu } from './DropdownMenu.js';
-import { useDropdownToggle } from './DropdownToggle.js';
-import { useDropdownItem } from './DropdownItem.js';
-import Modal from './Modal.js';
-import Overlay from './Overlay.js';
-import Portal from './Portal.js';
-import useRootClose from './useRootClose.js';
-import Nav from './Nav.js';
-import NavItem, { useNavItem } from './NavItem.js';
-import Button from './Button.js';
-import Tabs from './Tabs.js';
-import TabPanel from './TabPanel.js';
-
 export {
-  Button,
-  Dropdown,
-  useDropdownMenu,
-  useDropdownToggle,
-  useDropdownItem,
-  Nav,
-  NavItem,
-  useNavItem,
-  Modal,
-  Overlay,
-  Portal,
-  useRootClose,
-  Tabs,
-  TabPanel,
-};
-
-export type { ButtonProps } from './Button.js';
-export type {
-  DropdownProps,
-  DropdownMenuProps,
-  UseDropdownMenuMetadata,
-  UseDropdownMenuOptions,
-  DropdownToggleProps,
-  UseDropdownToggleMetadata,
-  DropdownItemProps,
+  default as Dropdown,
+  type DropdownProps,
+  type DropdownMenuProps,
+  type UseDropdownMenuMetadata,
+  type UseDropdownMenuOptions,
+  type DropdownToggleProps,
+  type UseDropdownToggleMetadata,
+  type DropdownItemProps,
 } from './Dropdown.js';
-export type { NavItemProps, UseNavItemOptions, NavProps } from './Nav.js';
-export type { ModalProps } from './Modal.js';
-export type { OverlayProps } from './Overlay.js';
-export type { PortalProps } from './Portal.js';
-export type { TabsProps, TabPanelProps } from './Tabs.js';
+export { useDropdownMenu } from './DropdownMenu.js';
+export { useDropdownToggle } from './DropdownToggle.js';
+export { useDropdownItem } from './DropdownItem.js';
+export { default as Modal, type ModalProps } from './Modal.js';
+export { default as Overlay, type OverlayProps } from './Overlay.js';
+export { default as Portal, type PortalProps } from './Portal.js';
+export {
+  default as useRootClose,
+  type RootCloseOptions,
+} from './useRootClose.js';
+export {
+  default as Nav,
+  type NavItemProps,
+  type UseNavItemOptions,
+  type NavProps,
+} from './Nav.js';
+export { default as NavItem, useNavItem } from './NavItem.js';
+export { default as Button, type ButtonProps } from './Button.js';
+export { default as Tabs, type TabsProps, type TabPanelProps } from './Tabs.js';
+export { default as TabPanel } from './TabPanel.js';
+
+export {
+  default as Waypoint,
+  type WaypointProps,
+  type WaypointEvent,
+} from './Waypoint.js';
+export {
+  default as useWaypoint,
+  Position,
+  type WaypointOptions,
+} from './useWaypoint.js';
+export {
+  default as useClickOutside,
+  type ClickOutsideOptions,
+} from './useClickOutside.js';

www/babel.config.js

@@ -1,10 +1,12 @@
 An abstract button component for creating accessible buttons regardless of the HTML
 element used to render it.
 
-```jsx live className=button-example
+```jsx live
 import { Button } from "@restart/ui";
 
-<Button>I'm a Button</Button>;
+<div className="button-example">
+  <Button>I'm a Button</Button>
+</div>;
 ```
 
 Not very impressive on its own, but `Button` does come with a few conveniences
@@ -14,10 +16,10 @@ over the plain HTML element.
 - Ensures that non `button` `as` options remain accessible
 - contextually renders an `<a>` if href or other anchor props are added.
 
-```jsx live className=button-example
+```jsx live
 import { Button } from "@restart/ui";
 
-<div className="space-x-4">
+<div className="space-x-4 button-example">
   <Button>I'm a Button</Button>
   <Button href="/home">I'm a link</Button>
   <Button as="span">I'm a span but also a button</Button>
@@ -73,7 +75,7 @@ function StyledButton(props) {
         !props.disabled &&
           "cursor-pointer hover:bg-primary hover:text-white",
         "active:bg-primary-600 active:text-white",
-        props.disabled && "cursor-not-allowed opacity-60"
+        props.disabled && "cursor-not-allowed opacity-60",
       )}
     />
   );

www/docs/Button.mdx

@@ -25,7 +25,7 @@ const DropdownMenu = ({ role }) => {
     {
       flip: true,
       offset: [0, 8],
-    }
+    },
   );
 
   useLayoutEffect(() => {
@@ -38,7 +38,7 @@ const DropdownMenu = ({ role }) => {
       role={role}
       className={clsx(
         show ? "flex" : "hidden",
-        "w-48 py-2 flex-col shadow-lg border-gray-200 border bg-white z-10 rounded"
+        "w-48 py-2 flex-col shadow-lg border-gray-200 border bg-white z-10 rounded",
       )}
     >
       <Dropdown.Item className="text-left hover:bg-primary-100 px-6 py-2 focus:ring-2 focus:outline-none">
@@ -307,6 +307,7 @@ your app's needs.
 The example here positions the `Menu` to the `document` body via a `Portal`.
 
 ```jsx live
+import { createPortal } from "react-dom";
 import { Dropdown } from "@restart/ui";
 import Button from "../src/Button";
 
@@ -320,7 +321,7 @@ import Button from "../src/Button";
   </Dropdown.Toggle>
   <Dropdown.Menu offset={[0, 12]}>
     {(props, { show }) =>
-      ReactDOM.createPortal(
+      createPortal(
         <div
           {...props}
           className={`${
@@ -329,7 +330,7 @@ import Button from "../src/Button";
         >
           <p>I am rendered into the document body</p>
         </div>,
-        document.body
+        document.body,
       )
     }
   </Dropdown.Menu>

www/docs/Dropdown.mdx

@@ -39,9 +39,8 @@ to the `root` prop.
 
 ```tsx
 function ScrollArea({ items, onPositionChange }) {
-  const [element, setElement] = useState<HTMLDivElement>(
-    null
-  );
+  const [element, setElement] =
+    useState<HTMLDivElement>(null);
 
   return (
     <div ref={setElement} style={{ overflow: "auto" }}>
@@ -91,9 +90,7 @@ when you want an individual component to respond
 
 ```tsx live
 import getScrollParent from "dom-helpers/scrollParent";
-import useWaypoint, {
-  Position,
-} from "@restart/ui/useWaypoint";
+import { useWaypoint, Position } from "@restart/ui";
 
 function LazyImage({ src }) {
   const [element, attachRef] = useState(null);
@@ -112,7 +109,7 @@ function LazyImage({ src }) {
       root: "scrollParent",
       scrollDirection: "horizontal",
       rootMargin: { right: -80 },
-    }
+    },
   );
 
   return (

www/docs/Waypoint.mdx

@@ -2,28 +2,30 @@
 import { useRootClose } from "@restart/ui";
 import Button from "../src/Button";
 
-const ref = useRef();
-const [show, setShow] = useState(false);
-const handleRootClose = () => setShow(false);
+function RootCloseWrapper() {
+  const ref = useRef();
+  const [show, setShow] = useState(false);
+  const handleRootClose = () => setShow(false);
 
-useRootClose(ref, handleRootClose, {
-  disabled: !show,
-});
+  useRootClose(ref, handleRootClose, {
+    disabled: !show,
+  });
 
-return (
-  <div className="flex flex-col items-center space-y-4">
-    <Button type="button" onClick={() => setShow(true)}>
-      Render RootCloseWrapper
-    </Button>
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      <Button type="button" onClick={() => setShow(true)}>
+        Render RootCloseWrapper
+      </Button>
 
-    {show && (
-      <div
-        ref={ref}
-        className="rounded shadow bg-white p-6"
-      >
-        <span>Click anywhere to dismiss me!</span>
-      </div>
-    )}
-  </div>
-);
+      {show && (
+        <div
+          ref={ref}
+          className="rounded shadow bg-white p-6"
+        >
+          <span>Click anywhere to dismiss me!</span>
+        </div>
+      )}
+    </div>
+  );
+}
 ```

www/docs/useRootClose.mdx

@@ -30,21 +30,15 @@ module.exports = {
   plugins: [require.resolve('./plugins/webpack')],
   presets: [
     [
-      '@4c/docusaurus-preset',
+      '@docusaurus/preset-classic',
       {
-        theme: [
-          '@docusaurus/theme-classic',
-          {
-            customCss: [require.resolve('./src/css/tailwind.css')],
-          },
-        ],
+        theme: {
+          customCss: [require.resolve('./src/css/tailwind.css')],
+        },
         docs: {
           routeBasePath: '/',
           sidebarPath: require.resolve('./sidebars.js'),
         },
-        reactMetadata: {
-          src: '../src/**/*.{js,tsx,ts}',
-        },
       },
     ],
   ],

www/docusaurus.config.js

@@ -14,22 +14,27 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@4c/docusaurus-preset": "^1.0.0",
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
+    "@docusaurus/core": "^3.8.1",
+    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/theme-common": "^3.8.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mdx-js/react": "^1.6.21",
-    "@restart/hooks": "^0.4.7",
+    "@restart/hooks": "^0.6.2",
     "clsx": "^1.2.1",
-    "docusaurus-theme-tailwind": "^1.0.1-rc.0",
     "emotion": "^11.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "jarle": "^3.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^2.2.4"
   },
   "devDependencies": {
+    "@docusaurus/module-type-aliases": "^3.8.1",
+    "@docusaurus/tsconfig": "^3.8.1",
+    "@docusaurus/types": "^3.8.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21"
+    "postcss": "^8.4.21",
+    "typescript": "^5.8.3"
   }
 }