Skip to content

Commit c697b66

Browse files
wingkwongwingkwong
committed
refactor(docs): drawer dx
1 parent 945a37e commit c697b66

16 files changed

+890
-822
lines changed

‎apps/docs/content/components/drawer/backdrop.raw.jsx

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import {
2+
Drawer,
3+
DrawerContent,
4+
DrawerHeader,
5+
DrawerBody,
6+
DrawerFooter,
7+
Button,
8+
useDisclosure,
9+
Input,
10+
Checkbox,
11+
Link,
12+
} from "@nextui-org/react";
13+
14+
export const MailIcon = (props) => {
15+
return (
16+
<svg
17+
aria-hidden="true"
18+
fill="none"
19+
focusable="false"
20+
height="1em"
21+
role="presentation"
22+
viewBox="0 0 24 24"
23+
width="1em"
24+
{...props}
25+
>
26+
<path
27+
d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
28+
fill="currentColor"
29+
/>
30+
</svg>
31+
);
32+
};
33+
34+
export const LockIcon = (props) => {
35+
return (
36+
<svg
37+
aria-hidden="true"
38+
fill="none"
39+
focusable="false"
40+
height="1em"
41+
role="presentation"
42+
viewBox="0 0 24 24"
43+
width="1em"
44+
{...props}
45+
>
46+
<path
47+
d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
48+
fill="currentColor"
49+
/>
50+
<path
51+
d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
52+
fill="currentColor"
53+
/>
54+
</svg>
55+
);
56+
};
57+
58+
export default function App() {
59+
const {isOpen, onOpen, onOpenChange} = useDisclosure();
60+
const [backdrop, setBackdrop] = React.useState("opaque");
61+
62+
const backdrops = ["opaque", "blur", "transparent"];
63+
64+
const handleBackdropChange = (backdrop) => {
65+
setBackdrop(backdrop);
66+
onOpen();
67+
};
68+
69+
return (
70+
<>
71+
<div className="flex gap-2">
72+
{backdrops.map((backdrop) => (
73+
<Button
74+
key={backdrop}
75+
className="capitalize"
76+
color="primary"
77+
variant="flat"
78+
onPress={() => handleBackdropChange(backdrop)}
79+
>
80+
{backdrop}
81+
</Button>
82+
))}
83+
</div>
84+
<Drawer backdrop={backdrop} isOpen={isOpen} onOpenChange={onOpenChange}>
85+
<DrawerContent>
86+
{(onClose) => (
87+
<>
88+
<DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
89+
<DrawerBody>
90+
<Input
91+
endContent={
92+
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
93+
}
94+
label="Email"
95+
placeholder="Enter your email"
96+
variant="bordered"
97+
/>
98+
<Input
99+
endContent={
100+
<LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
101+
}
102+
label="Password"
103+
placeholder="Enter your password"
104+
type="password"
105+
variant="bordered"
106+
/>
107+
<div className="flex py-2 px-1 justify-between">
108+
<Checkbox
109+
classNames={{
110+
label: "text-small",
111+
}}
112+
>
113+
Remember me
114+
</Checkbox>
115+
<Link color="primary" href="#" size="sm">
116+
Forgot password?
117+
</Link>
118+
</div>
119+
</DrawerBody>
120+
<DrawerFooter>
121+
<Button color="danger" variant="flat" onPress={onClose}>
122+
Close
123+
</Button>
124+
<Button color="primary" onPress={onClose}>
125+
Sign in
126+
</Button>
127+
</DrawerFooter>
128+
</>
129+
)}
130+
</DrawerContent>
131+
</Drawer>
132+
</>
133+
);
134+
}

‎apps/docs/content/components/drawer/backdrop.ts

+1-124
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,7 @@
1-
const MailIcon = `export const MailIcon = (props) => (
2-
<svg
3-
aria-hidden="true"
4-
fill="none"
5-
focusable="false"
6-
height="1em"
7-
role="presentation"
8-
viewBox="0 0 24 24"
9-
width="1em"
10-
{...props}
11-
>
12-
<path
13-
d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
14-
fill="currentColor"
15-
/>
16-
</svg>
17-
);`;
18-
19-
const LockIcon = `export const LockIcon = (props) => (
20-
<svg
21-
aria-hidden="true"
22-
fill="none"
23-
focusable="false"
24-
height="1em"
25-
role="presentation"
26-
viewBox="0 0 24 24"
27-
width="1em"
28-
{...props}
29-
>
30-
<path
31-
d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
32-
fill="currentColor"
33-
/>
34-
<path
35-
d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
36-
fill="currentColor"
37-
/>
38-
</svg>
39-
);`;
40-
41-
const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react";
42-
import {MailIcon} from "./MailIcon";
43-
import {LockIcon} from "./LockIcon";
44-
45-
export default function App() {
46-
const {isOpen, onOpen, onOpenChange} = useDisclosure();
47-
const [backdrop, setBackdrop] = React.useState("opaque");
48-
49-
const backdrops = ["opaque", "blur", "transparent"];
50-
51-
const handleBackdropChange = (backdrop) => {
52-
setBackdrop(backdrop);
53-
onOpen();
54-
};
55-
56-
return (
57-
<>
58-
<div className="flex gap-2">
59-
{backdrops.map((backdrop) => (
60-
<Button
61-
key={backdrop}
62-
className="capitalize"
63-
variant="flat"
64-
color="primary"
65-
onPress={() => handleBackdropChange(backdrop)}
66-
>
67-
{backdrop}
68-
</Button>
69-
))}
70-
</div>
71-
<Drawer backdrop={backdrop} isOpen={isOpen} onOpenChange={onOpenChange}>
72-
<DrawerContent>
73-
{(onClose) => (
74-
<>
75-
<DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
76-
<DrawerBody>
77-
<Input
78-
autoFocus
79-
endContent={
80-
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
81-
}
82-
label="Email"
83-
placeholder="Enter your email"
84-
variant="bordered"
85-
/>
86-
<Input
87-
endContent={
88-
<LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
89-
}
90-
label="Password"
91-
placeholder="Enter your password"
92-
type="password"
93-
variant="bordered"
94-
/>
95-
<div className="flex py-2 px-1 justify-between">
96-
<Checkbox
97-
classNames={{
98-
label: "text-small",
99-
}}
100-
>
101-
Remember me
102-
</Checkbox>
103-
<Link color="primary" href="#" size="sm">
104-
Forgot password?
105-
</Link>
106-
</div>
107-
</DrawerBody>
108-
<DrawerFooter>
109-
<Button color="danger" variant="flat" onPress={onClose}>
110-
Close
111-
</Button>
112-
<Button color="primary" onPress={onClose}>
113-
Sign in
114-
</Button>
115-
</DrawerFooter>
116-
</>
117-
)}
118-
</DrawerContent>
119-
</Drawer>
120-
</>
121-
);
122-
}`;
1+
import App from "./backdrop.raw.jsx?raw";
1232

1243
const react = {
1254
"/App.jsx": App,
126-
"/MailIcon.jsx": MailIcon,
127-
"/LockIcon.jsx": LockIcon,
1285
};
1296

1307
export default {

‎apps/docs/content/components/drawer/custom-motion.raw.jsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {
2+
Drawer,
3+
DrawerContent,
4+
DrawerHeader,
5+
DrawerBody,
6+
DrawerFooter,
7+
Button,
8+
useDisclosure,
9+
} from "@nextui-org/react";
10+
11+
export default function App() {
12+
const {isOpen, onOpen, onOpenChange} = useDisclosure();
13+
14+
return (
15+
<>
16+
<Button onPress={onOpen}>Open Drawer</Button>
17+
<Drawer
18+
isOpen={isOpen}
19+
motionProps={{
20+
variants: {
21+
enter: {
22+
opacity: 1,
23+
x: 0,
24+
duration: 0.3,
25+
},
26+
exit: {
27+
x: 100,
28+
opacity: 0,
29+
duration: 0.3,
30+
},
31+
},
32+
}}
33+
onOpenChange={onOpenChange}
34+
>
35+
<DrawerContent>
36+
{(onClose) => (
37+
<>
38+
<DrawerHeader className="flex flex-col gap-1">Custom Motion Drawer</DrawerHeader>
39+
<DrawerBody>
40+
<p>This drawer has custom enter/exit animations.</p>
41+
<p>
42+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
43+
risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
44+
quam.
45+
</p>
46+
</DrawerBody>
47+
<DrawerFooter>
48+
<Button color="danger" variant="light" onPress={onClose}>
49+
Close
50+
</Button>
51+
<Button color="primary" onPress={onClose}>
52+
Action
53+
</Button>
54+
</DrawerFooter>
55+
</>
56+
)}
57+
</DrawerContent>
58+
</Drawer>
59+
</>
60+
);
61+
}

‎apps/docs/content/components/drawer/custom-motion.ts

+1-55
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,4 @@
1-
const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
2-
3-
export default function App() {
4-
const {isOpen, onOpen, onOpenChange} = useDisclosure();
5-
6-
return (
7-
<>
8-
<Button onPress={onOpen}>Open Drawer</Button>
9-
<Drawer
10-
isOpen={isOpen}
11-
onOpenChange={onOpenChange}
12-
motionProps={{
13-
variants: {
14-
enter: {
15-
opacity: 1,
16-
x: 0,
17-
duration: 0.3,
18-
},
19-
exit: {
20-
x: 100,
21-
opacity: 0,
22-
duration: 0.3,
23-
},
24-
},
25-
}}
26-
>
27-
<DrawerContent>
28-
{(onClose) => (
29-
<>
30-
<DrawerHeader className="flex flex-col gap-1">Custom Motion Drawer</DrawerHeader>
31-
<DrawerBody>
32-
<p>
33-
This drawer has custom enter/exit animations.
34-
</p>
35-
<p>
36-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
37-
Nullam pulvinar risus non risus hendrerit venenatis.
38-
Pellentesque sit amet hendrerit risus, sed porttitor quam.
39-
</p>
40-
</DrawerBody>
41-
<DrawerFooter>
42-
<Button color="danger" variant="light" onPress={onClose}>
43-
Close
44-
</Button>
45-
<Button color="primary" onPress={onClose}>
46-
Action
47-
</Button>
48-
</DrawerFooter>
49-
</>
50-
)}
51-
</DrawerContent>
52-
</Drawer>
53-
</>
54-
);
55-
}`;
1+
import App from "./custom-motion.raw.jsx?raw";
562

573
const react = {
584
"/App.jsx": App,

0 commit comments

Comments
 (0)