upgrade docusaurus

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 };

www/babel.config.js

@@ -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

@@ -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"
   }
 }

www/package.json

@@ -6,20 +6,6 @@ module.exports = () => ({
     return {
       devtool: 'inline-cheap-module-source-map',
 
-      module: {
-        rules: [
-          {
-            test: /\.(j|t)sx?$/,
-            include: [path.resolve(__dirname, '../../src')],
-            use: [
-              getJSLoader(
-                isServer,
-                path.resolve(__dirname, '../babel.config.js'),
-              ),
-            ],
-          },
-        ],
-      },
       resolve: {
         alias: {
           '@restart/ui': path.resolve(__dirname, '../../src'),

www/plugins/webpack.js

@@ -1,12 +1,10 @@
 import clsx from 'clsx';
-import {
-  Button,
-  useDropdownMenu,
-  useDropdownToggle,
-  useDropdownItem,
-  Dropdown as BaseDropdown,
-  DropdownProps,
-} from '@restart/ui';
+import Button from '@restart/ui/Button';
+import BaseDropdown, { DropdownProps } from '@restart/ui/Dropdown';
+import { useDropdownMenu } from '@restart/ui/DropdownMenu';
+import { useDropdownToggle } from '@restart/ui/DropdownToggle';
+import { useDropdownItem } from '@restart/ui/DropdownItem';
+
 import StyledButton from './Button';
 
 const DropdownMenu = ({ role, ...props }) => {
@@ -30,7 +28,7 @@ const DropdownMenu = ({ role, ...props }) => {
 };
 
 const DropdownItem = ({ eventKey, ...props }) => {
-  const [itemProps, { active }] = useDropdownItem({
+  const [itemProps, { isActive }] = useDropdownItem({
     key: eventKey,
     ...props,
   });
@@ -41,7 +39,7 @@ const DropdownItem = ({ eventKey, ...props }) => {
       {...itemProps}
       className={clsx(
         'text-left hover:bg-primary-100 px-6 py-2 focus:ring-2 focus:outline-none',
-        active && 'bg-primary',
+        isActive && 'bg-primary',
       )}
     />
   );

www/src/Dropdown.tsx

@@ -0,0 +1,112 @@
+.playgroundHeader {
+  letter-spacing: 0.08rem;
+  padding: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.playgroundEditorHeader {
+  background: var(--ifm-color-emphasis-600);
+  color: var(--ifm-color-content-inverse);
+}
+
+.playgroundEditor {
+  padding: 1rem;
+  outline: none;
+  padding-top: 2rem;
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace);
+  max-height: var(--docusaurus-jarle-editor-max-height, 400px);
+  overflow-y: auto;
+}
+
+.playgroundButton {
+  padding: 0.5rem 1rem;
+  border: none;
+  box-shadow: none;
+  background: none;
+  font-size: 90%;
+  float: right;
+  color: var(--ifm-color-primary);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.playgroundButton:hover {
+  color: var(--ifm-color-primary-dark);
+}
+
+.playgroundButton:before {
+  content: '<';
+}
+
+.playgroundButton:after {
+  content: '/>';
+}
+
+.playgroundEditor::after {
+  content: 'editable';
+
+  top: 0.2rem;
+  left: 0;
+  position: absolute;
+  pointer-events: none;
+  letter-spacing: 0.08rem;
+  font-size: 90%;
+  padding: 0 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.playground > *:first-child {
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
+}
+
+.playground > *:last-child {
+  border-bottom-left-radius: var(--ifm-global-radius);
+  border-bottom-right-radius: var(--ifm-global-radius);
+}
+
+.playgroundPreview {
+  position: relative;
+
+  border: 1px solid var(--ifm-color-emphasis-200);
+  position: relative;
+  padding: 1rem;
+  padding-top: 2rem;
+}
+
+.infoMessage {
+  font-size: 70%;
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.error {
+  all: unset;
+  font-size: 85% !important;
+  font-family: var(--ifm-font-family-monospace);
+  color: var(--ifm-color-danger-dark);
+}
+
+.inline {
+  display: grid;
+  grid-template-columns: 2fr 1.5fr;
+}
+
+.inline > * {
+  display: flex;
+  flex-direction: column;
+}
+
+.inline > *:first-child {
+  height: 100%;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--ifm-global-radius);
+}
+
+.inline > *:last-child {
+  height: 100%;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--ifm-global-radius);
+}