Skip to content

Commit

Permalink
refactor(docs): drawer dx (#4109)
Browse files Browse the repository at this point in the history
* refactor(docs): drawer dx

* fix(docs): indentation
  • Loading branch information
wingkwong authored Nov 28, 2024
1 parent 79737db commit fe1a1ef
Show file tree
Hide file tree
Showing 17 changed files with 900 additions and 832 deletions.
134 changes: 134 additions & 0 deletions apps/docs/content/components/drawer/backdrop.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import {
Drawer,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
Button,
useDisclosure,
Input,
Checkbox,
Link,
} from "@nextui-org/react";

export const MailIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path
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"
fill="currentColor"
/>
</svg>
);
};

export const LockIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path
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"
fill="currentColor"
/>
<path
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"
fill="currentColor"
/>
</svg>
);
};

export default function App() {
const {isOpen, onOpen, onOpenChange} = useDisclosure();
const [backdrop, setBackdrop] = React.useState("opaque");

const backdrops = ["opaque", "blur", "transparent"];

const handleBackdropChange = (backdrop) => {
setBackdrop(backdrop);
onOpen();
};

return (
<>
<div className="flex gap-2">
{backdrops.map((backdrop) => (
<Button
key={backdrop}
className="capitalize"
color="primary"
variant="flat"
onPress={() => handleBackdropChange(backdrop)}
>
{backdrop}
</Button>
))}
</div>
<Drawer backdrop={backdrop} isOpen={isOpen} onOpenChange={onOpenChange}>
<DrawerContent>
{(onClose) => (
<>
<DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
<DrawerBody>
<Input
endContent={
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
}
label="Email"
placeholder="Enter your email"
variant="bordered"
/>
<Input
endContent={
<LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
}
label="Password"
placeholder="Enter your password"
type="password"
variant="bordered"
/>
<div className="flex py-2 px-1 justify-between">
<Checkbox
classNames={{
label: "text-small",
}}
>
Remember me
</Checkbox>
<Link color="primary" href="#" size="sm">
Forgot password?
</Link>
</div>
</DrawerBody>
<DrawerFooter>
<Button color="danger" variant="flat" onPress={onClose}>
Close
</Button>
<Button color="primary" onPress={onClose}>
Sign in
</Button>
</DrawerFooter>
</>
)}
</DrawerContent>
</Drawer>
</>
);
}
125 changes: 1 addition & 124 deletions apps/docs/content/components/drawer/backdrop.ts
Original file line number Diff line number Diff line change
@@ -1,130 +1,7 @@
const MailIcon = `export const MailIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path
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"
fill="currentColor"
/>
</svg>
);`;

const LockIcon = `export const LockIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path
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"
fill="currentColor"
/>
<path
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"
fill="currentColor"
/>
</svg>
);`;

const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react";
import {MailIcon} from "./MailIcon";
import {LockIcon} from "./LockIcon";
export default function App() {
const {isOpen, onOpen, onOpenChange} = useDisclosure();
const [backdrop, setBackdrop] = React.useState("opaque");
const backdrops = ["opaque", "blur", "transparent"];
const handleBackdropChange = (backdrop) => {
setBackdrop(backdrop);
onOpen();
};
return (
<>
<div className="flex gap-2">
{backdrops.map((backdrop) => (
<Button
key={backdrop}
className="capitalize"
variant="flat"
color="primary"
onPress={() => handleBackdropChange(backdrop)}
>
{backdrop}
</Button>
))}
</div>
<Drawer backdrop={backdrop} isOpen={isOpen} onOpenChange={onOpenChange}>
<DrawerContent>
{(onClose) => (
<>
<DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
<DrawerBody>
<Input
autoFocus
endContent={
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
}
label="Email"
placeholder="Enter your email"
variant="bordered"
/>
<Input
endContent={
<LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
}
label="Password"
placeholder="Enter your password"
type="password"
variant="bordered"
/>
<div className="flex py-2 px-1 justify-between">
<Checkbox
classNames={{
label: "text-small",
}}
>
Remember me
</Checkbox>
<Link color="primary" href="#" size="sm">
Forgot password?
</Link>
</div>
</DrawerBody>
<DrawerFooter>
<Button color="danger" variant="flat" onPress={onClose}>
Close
</Button>
<Button color="primary" onPress={onClose}>
Sign in
</Button>
</DrawerFooter>
</>
)}
</DrawerContent>
</Drawer>
</>
);
}`;
import App from "./backdrop.raw.jsx?raw";

const react = {
"/App.jsx": App,
"/MailIcon.jsx": MailIcon,
"/LockIcon.jsx": LockIcon,
};

export default {
Expand Down
61 changes: 61 additions & 0 deletions apps/docs/content/components/drawer/custom-motion.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import {
Drawer,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
Button,
useDisclosure,
} from "@nextui-org/react";

export default function App() {
const {isOpen, onOpen, onOpenChange} = useDisclosure();

return (
<>
<Button onPress={onOpen}>Open Drawer</Button>
<Drawer
isOpen={isOpen}
motionProps={{
variants: {
enter: {
opacity: 1,
x: 0,
duration: 0.3,
},
exit: {
x: 100,
opacity: 0,
duration: 0.3,
},
},
}}
onOpenChange={onOpenChange}
>
<DrawerContent>
{(onClose) => (
<>
<DrawerHeader className="flex flex-col gap-1">Custom Motion Drawer</DrawerHeader>
<DrawerBody>
<p>This drawer has custom enter/exit animations.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
quam.
</p>
</DrawerBody>
<DrawerFooter>
<Button color="danger" variant="light" onPress={onClose}>
Close
</Button>
<Button color="primary" onPress={onClose}>
Action
</Button>
</DrawerFooter>
</>
)}
</DrawerContent>
</Drawer>
</>
);
}
56 changes: 1 addition & 55 deletions apps/docs/content/components/drawer/custom-motion.ts
Original file line number Diff line number Diff line change
@@ -1,58 +1,4 @@
const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
export default function App() {
const {isOpen, onOpen, onOpenChange} = useDisclosure();
return (
<>
<Button onPress={onOpen}>Open Drawer</Button>
<Drawer
isOpen={isOpen}
onOpenChange={onOpenChange}
motionProps={{
variants: {
enter: {
opacity: 1,
x: 0,
duration: 0.3,
},
exit: {
x: 100,
opacity: 0,
duration: 0.3,
},
},
}}
>
<DrawerContent>
{(onClose) => (
<>
<DrawerHeader className="flex flex-col gap-1">Custom Motion Drawer</DrawerHeader>
<DrawerBody>
<p>
This drawer has custom enter/exit animations.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam pulvinar risus non risus hendrerit venenatis.
Pellentesque sit amet hendrerit risus, sed porttitor quam.
</p>
</DrawerBody>
<DrawerFooter>
<Button color="danger" variant="light" onPress={onClose}>
Close
</Button>
<Button color="primary" onPress={onClose}>
Action
</Button>
</DrawerFooter>
</>
)}
</DrawerContent>
</Drawer>
</>
);
}`;
import App from "./custom-motion.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
Loading

0 comments on commit fe1a1ef

Please sign in to comment.