Skip to content

Commit c08dfa5

Browse files
jquensejquense
authored
upgrade docusaurus (#127)
* upgrade docusaurus * address feedback
1 parent 8708cc0 commit c08dfa5

21 files changed

+5233
-10456
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@
115115
"@testing-library/dom": "^10.4.0",
116116
"@testing-library/react": "^16.2.0",
117117
"@testing-library/user-event": "^14.6.1",
118-
"@types/react": "^19.0.8",
119-
"@types/react-dom": "^19.0.3",
118+
"@types/react": "^19.1.8",
119+
"@types/react-dom": "^19.1.6",
120120
"@types/react-transition-group": "^4.4.12",
121121
"@typescript-eslint/eslint-plugin": "^8.23.0",
122122
"@typescript-eslint/parser": "^8.23.0",

‎src/Waypoint.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import useCallbackRef from '@restart/hooks/useCallbackRef';
22
import * as React from 'react';
33

44
import useWaypoint, {
5+
Position,
56
type WaypointOptions,
67
type WaypointEvent,
7-
type Position,
88
} from './useWaypoint.js';
99

1010
export { Position };

‎src/index.ts‎

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
1-
import Dropdown from './Dropdown.js';
2-
import { useDropdownMenu } from './DropdownMenu.js';
3-
import { useDropdownToggle } from './DropdownToggle.js';
4-
import { useDropdownItem } from './DropdownItem.js';
5-
import Modal from './Modal.js';
6-
import Overlay from './Overlay.js';
7-
import Portal from './Portal.js';
8-
import useRootClose from './useRootClose.js';
9-
import Nav from './Nav.js';
10-
import NavItem, { useNavItem } from './NavItem.js';
11-
import Button from './Button.js';
12-
import Tabs from './Tabs.js';
13-
import TabPanel from './TabPanel.js';
14-
151
export {
16-
Button,
17-
Dropdown,
18-
useDropdownMenu,
19-
useDropdownToggle,
20-
useDropdownItem,
21-
Nav,
22-
NavItem,
23-
useNavItem,
24-
Modal,
25-
Overlay,
26-
Portal,
27-
useRootClose,
28-
Tabs,
29-
TabPanel,
30-
};
31-
32-
export type { ButtonProps } from './Button.js';
33-
export type {
34-
DropdownProps,
35-
DropdownMenuProps,
36-
UseDropdownMenuMetadata,
37-
UseDropdownMenuOptions,
38-
DropdownToggleProps,
39-
UseDropdownToggleMetadata,
40-
DropdownItemProps,
2+
default as Dropdown,
3+
type DropdownProps,
4+
type DropdownMenuProps,
5+
type UseDropdownMenuMetadata,
6+
type UseDropdownMenuOptions,
7+
type DropdownToggleProps,
8+
type UseDropdownToggleMetadata,
9+
type DropdownItemProps,
4110
} from './Dropdown.js';
42-
export type { NavItemProps, UseNavItemOptions, NavProps } from './Nav.js';
43-
export type { ModalProps } from './Modal.js';
44-
export type { OverlayProps } from './Overlay.js';
45-
export type { PortalProps } from './Portal.js';
46-
export type { TabsProps, TabPanelProps } from './Tabs.js';
11+
export { useDropdownMenu } from './DropdownMenu.js';
12+
export { useDropdownToggle } from './DropdownToggle.js';
13+
export { useDropdownItem } from './DropdownItem.js';
14+
export { default as Modal, type ModalProps } from './Modal.js';
15+
export { default as Overlay, type OverlayProps } from './Overlay.js';
16+
export { default as Portal, type PortalProps } from './Portal.js';
17+
export {
18+
default as useRootClose,
19+
type RootCloseOptions,
20+
} from './useRootClose.js';
21+
export {
22+
default as Nav,
23+
type NavItemProps,
24+
type UseNavItemOptions,
25+
type NavProps,
26+
} from './Nav.js';
27+
export { default as NavItem, useNavItem } from './NavItem.js';
28+
export { default as Button, type ButtonProps } from './Button.js';
29+
export { default as Tabs, type TabsProps, type TabPanelProps } from './Tabs.js';
30+
export { default as TabPanel } from './TabPanel.js';
31+
32+
export {
33+
default as Waypoint,
34+
type WaypointProps,
35+
type WaypointEvent,
36+
} from './Waypoint.js';
37+
export {
38+
default as useWaypoint,
39+
Position,
40+
type WaypointOptions,
41+
} from './useWaypoint.js';
42+
export {
43+
default as useClickOutside,
44+
type ClickOutsideOptions,
45+
} from './useClickOutside.js';

‎www/babel.config.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎www/docs/Button.mdx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
An abstract button component for creating accessible buttons regardless of the HTML
22
element used to render it.
33

4-
```jsx live className=button-example
4+
```jsx live
55
import { Button } from "@restart/ui";
66

7-
<Button>I'm a Button</Button>;
7+
<div className="button-example">
8+
<Button>I'm a Button</Button>
9+
</div>;
810
```
911
1012
Not very impressive on its own, but `Button` does come with a few conveniences
@@ -14,10 +16,10 @@ over the plain HTML element.
1416
- Ensures that non `button` `as` options remain accessible
1517
- contextually renders an `<a>` if href or other anchor props are added.
1618
17-
```jsx live className=button-example
19+
```jsx live
1820
import { Button } from "@restart/ui";
1921
20-
<div className="space-x-4">
22+
<div className="space-x-4 button-example">
2123
<Button>I'm a Button</Button>
2224
<Button href="/home">I'm a link</Button>
2325
<Button as="span">I'm a span but also a button</Button>
@@ -73,7 +75,7 @@ function StyledButton(props) {
7375
!props.disabled &&
7476
"cursor-pointer hover:bg-primary hover:text-white",
7577
"active:bg-primary-600 active:text-white",
76-
props.disabled && "cursor-not-allowed opacity-60"
78+
props.disabled && "cursor-not-allowed opacity-60",
7779
)}
7880
/>
7981
);

‎www/docs/Dropdown.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const DropdownMenu = ({ role }) => {
2525
{
2626
flip: true,
2727
offset: [0, 8],
28-
}
28+
},
2929
);
3030

3131
useLayoutEffect(() => {
@@ -38,7 +38,7 @@ const DropdownMenu = ({ role }) => {
3838
role={role}
3939
className={clsx(
4040
show ? "flex" : "hidden",
41-
"w-48 py-2 flex-col shadow-lg border-gray-200 border bg-white z-10 rounded"
41+
"w-48 py-2 flex-col shadow-lg border-gray-200 border bg-white z-10 rounded",
4242
)}
4343
>
4444
<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.
307307
The example here positions the `Menu` to the `document` body via a `Portal`.
308308

309309
```jsx live
310+
import { createPortal } from "react-dom";
310311
import { Dropdown } from "@restart/ui";
311312
import Button from "../src/Button";
312313

@@ -320,7 +321,7 @@ import Button from "../src/Button";
320321
</Dropdown.Toggle>
321322
<Dropdown.Menu offset={[0, 12]}>
322323
{(props, { show }) =>
323-
ReactDOM.createPortal(
324+
createPortal(
324325
<div
325326
{...props}
326327
className={`${
@@ -329,7 +330,7 @@ import Button from "../src/Button";
329330
>
330331
<p>I am rendered into the document body</p>
331332
</div>,
332-
document.body
333+
document.body,
333334
)
334335
}
335336
</Dropdown.Menu>

‎www/docs/Waypoint.mdx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,8 @@ to the `root` prop.
3939

4040
```tsx
4141
function ScrollArea({ items, onPositionChange }) {
42-
const [element, setElement] = useState<HTMLDivElement>(
43-
null
44-
);
42+
const [element, setElement] =
43+
useState<HTMLDivElement>(null);
4544

4645
return (
4746
<div ref={setElement} style={{ overflow: "auto" }}>
@@ -91,9 +90,7 @@ when you want an individual component to respond
9190

9291
```tsx live
9392
import getScrollParent from "dom-helpers/scrollParent";
94-
import useWaypoint, {
95-
Position,
96-
} from "@restart/ui/useWaypoint";
93+
import { useWaypoint, Position } from "@restart/ui";
9794

9895
function LazyImage({ src }) {
9996
const [element, attachRef] = useState(null);
@@ -112,7 +109,7 @@ function LazyImage({ src }) {
112109
root: "scrollParent",
113110
scrollDirection: "horizontal",
114111
rootMargin: { right: -80 },
115-
}
112+
},
116113
);
117114

118115
return (

‎www/docs/useRootClose.mdx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,30 @@
22
import { useRootClose } from "@restart/ui";
33
import Button from "../src/Button";
44

5-
const ref = useRef();
6-
const [show, setShow] = useState(false);
7-
const handleRootClose = () => setShow(false);
5+
function RootCloseWrapper() {
6+
const ref = useRef();
7+
const [show, setShow] = useState(false);
8+
const handleRootClose = () => setShow(false);
89

9-
useRootClose(ref, handleRootClose, {
10-
disabled: !show,
11-
});
10+
useRootClose(ref, handleRootClose, {
11+
disabled: !show,
12+
});
1213

13-
return (
14-
<div className="flex flex-col items-center space-y-4">
15-
<Button type="button" onClick={() => setShow(true)}>
16-
Render RootCloseWrapper
17-
</Button>
14+
return (
15+
<div className="flex flex-col items-center space-y-4">
16+
<Button type="button" onClick={() => setShow(true)}>
17+
Render RootCloseWrapper
18+
</Button>
1819

19-
{show && (
20-
<div
21-
ref={ref}
22-
className="rounded shadow bg-white p-6"
23-
>
24-
<span>Click anywhere to dismiss me!</span>
25-
</div>
26-
)}
27-
</div>
28-
);
20+
{show && (
21+
<div
22+
ref={ref}
23+
className="rounded shadow bg-white p-6"
24+
>
25+
<span>Click anywhere to dismiss me!</span>
26+
</div>
27+
)}
28+
</div>
29+
);
30+
}
2931
```

‎www/docusaurus.config.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,15 @@ module.exports = {
3030
plugins: [require.resolve('./plugins/webpack')],
3131
presets: [
3232
[
33-
'@4c/docusaurus-preset',
33+
'@docusaurus/preset-classic',
3434
{
35-
theme: [
36-
'@docusaurus/theme-classic',
37-
{
38-
customCss: [require.resolve('./src/css/tailwind.css')],
39-
},
40-
],
35+
theme: {
36+
customCss: [require.resolve('./src/css/tailwind.css')],
37+
},
4138
docs: {
4239
routeBasePath: '/',
4340
sidebarPath: require.resolve('./sidebars.js'),
4441
},
45-
reactMetadata: {
46-
src: '../src/**/*.{js,tsx,ts}',
47-
},
4842
},
4943
],
5044
],

‎www/package.json‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,27 @@
1414
"write-heading-ids": "docusaurus write-heading-ids"
1515
},
1616
"dependencies": {
17-
"@4c/docusaurus-preset": "^1.0.0",
18-
"@docusaurus/core": "2.2.0",
19-
"@docusaurus/preset-classic": "2.2.0",
17+
"@docusaurus/core": "^3.8.1",
18+
"@docusaurus/preset-classic": "^3.8.1",
19+
"@docusaurus/theme-common": "^3.8.1",
2020
"@emotion/react": "^11.10.5",
2121
"@emotion/styled": "^11.10.5",
22-
"@mdx-js/react": "^1.6.21",
23-
"@restart/hooks": "^0.4.7",
22+
"@restart/hooks": "^0.6.2",
2423
"clsx": "^1.2.1",
25-
"docusaurus-theme-tailwind": "^1.0.1-rc.0",
2624
"emotion": "^11.0.0",
27-
"react": "^17.0.1",
28-
"react-dom": "^17.0.1",
25+
"jarle": "^3.2.1",
26+
"react": "^19.0.0",
27+
"react-dom": "^19.0.0",
2928
"tailwindcss": "^2.2.4"
3029
},
3130
"devDependencies": {
31+
"@docusaurus/module-type-aliases": "^3.8.1",
32+
"@docusaurus/tsconfig": "^3.8.1",
33+
"@docusaurus/types": "^3.8.1",
34+
"@types/react": "^19.1.8",
35+
"@types/react-dom": "^19.1.6",
3236
"autoprefixer": "^10.4.13",
33-
"postcss": "^8.4.21"
37+
"postcss": "^8.4.21",
38+
"typescript": "^5.8.3"
3439
}
3540
}

0 commit comments

Comments
 (0)