From 7205a6c07b1f34c3020b6c822f4dd9a261f17633 Mon Sep 17 00:00:00 2001 From: Junior Garcia Date: Thu, 14 Nov 2024 18:49:33 -0300 Subject: [PATCH] feat: drawer improvements --- .changeset/cold-dolls-vanish.md | 6 + .../components/drawer/custom-styles.ts | 337 +++++++++++++++++ apps/docs/content/components/drawer/index.ts | 2 + apps/docs/content/docs/components/drawer.mdx | 4 + packages/components/drawer/package.json | 3 + packages/components/drawer/src/use-drawer.ts | 14 +- .../drawer/stories/drawer.stories.tsx | 339 ++++++++++++++++++ packages/components/modal/src/use-modal.ts | 2 +- pnpm-lock.yaml | 9 + 9 files changed, 707 insertions(+), 9 deletions(-) create mode 100644 .changeset/cold-dolls-vanish.md create mode 100644 apps/docs/content/components/drawer/custom-styles.ts diff --git a/.changeset/cold-dolls-vanish.md b/.changeset/cold-dolls-vanish.md new file mode 100644 index 0000000000..eba5f406b5 --- /dev/null +++ b/.changeset/cold-dolls-vanish.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/drawer": patch +"@nextui-org/modal": patch +--- + +Drawer styles and transition improved diff --git a/apps/docs/content/components/drawer/custom-styles.ts b/apps/docs/content/components/drawer/custom-styles.ts new file mode 100644 index 0000000000..68f5939550 --- /dev/null +++ b/apps/docs/content/components/drawer/custom-styles.ts @@ -0,0 +1,337 @@ +const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Image, Link, Tooltip, Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + + + + +
+ + +
+
+ + + + + + +
+ + +
+ Event image +
+
+

SF Bay Area Meetup in November

+

+ 555 California St, San Francisco, CA 94103 +

+
+
+
+
Nov
+
+ 19 +
+
+
+

+ Tuesday, November 19 +

+

5:00 PM - 9:00 PM PST

+
+
+
+
+ + + + + + +
+
+ + + + } + className="group gap-x-0.5 text-medium text-foreground font-medium" + href="https://www.google.com/maps/place/555+California+St,+San+Francisco,+CA+94103" + rel="noreferrer noopener" + > + 555 California St suite 500 + +

San Francisco, California

+
+
+
+ About the event +
+

+ Hey Bay Area! We are excited to announce our next meetup on Tuesday, + November 19th. +

+

+ Join us for an evening of insightful discussions and hands-on workshops + focused on the latest developments in web development and design. Our + featured speakers will share their experiences with modern frontend + frameworks, responsive design patterns, and emerging web technologies. + You'll have the opportunity to network with fellow developers and + designers while enjoying refreshments and snacks. +

+

+ During the main session, we'll dive deep into practical examples of + building scalable applications, exploring best practices for component + architecture, and understanding advanced state management techniques. Our + interactive workshop portion will let you apply these concepts directly, + with experienced mentors available to provide guidance and answer your + questions. Whether you're a seasoned developer or just starting your + journey, you'll find valuable takeaways from this session. +

+ +

+ Brought to you by the{" "} + + NextUI team + + . +

+
+
+
+ Hosted By +
+ + NextUI Team +
+
+
+ 105 Going +
+ + + + + + + + + + + + + + +
+
+
+
+ + + + Contact the host + + + Report event + + + + )} + + + + ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/drawer/index.ts b/apps/docs/content/components/drawer/index.ts index e9fa1947c1..d04c3bf31b 100644 --- a/apps/docs/content/components/drawer/index.ts +++ b/apps/docs/content/components/drawer/index.ts @@ -5,6 +5,7 @@ import placement from "./placement"; import form from "./form"; import backdrop from "./backdrop"; import customMotion from "./custom-motion"; +import customStyles from "./custom-styles"; export const drawerContent = { usage, @@ -14,4 +15,5 @@ export const drawerContent = { form, backdrop, customMotion, + customStyles, }; diff --git a/apps/docs/content/docs/components/drawer.mdx b/apps/docs/content/docs/components/drawer.mdx index 464f057588..0b0b5a82bc 100644 --- a/apps/docs/content/docs/components/drawer.mdx +++ b/apps/docs/content/docs/components/drawer.mdx @@ -115,6 +115,10 @@ Drawer offers a `motionProps` property to customize the `enter` / `exit` animati > Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants). +### Custom Styles + + + ## Slots - **wrapper**: The wrapper slot of the drawer. It wraps the `base` and the `backdrop` slots. diff --git a/packages/components/drawer/package.json b/packages/components/drawer/package.json index 47e169c06f..3fad623399 100644 --- a/packages/components/drawer/package.json +++ b/packages/components/drawer/package.json @@ -50,7 +50,10 @@ "@nextui-org/system": "workspace:*", "@nextui-org/input": "workspace:*", "@nextui-org/checkbox": "workspace:*", + "@nextui-org/tooltip": "workspace:*", + "@nextui-org/image": "workspace:*", "@nextui-org/button": "workspace:*", + "@nextui-org/avatar": "workspace:*", "@nextui-org/link": "workspace:*", "@nextui-org/switch": "workspace:*", "@nextui-org/shared-icons": "workspace:*", diff --git a/packages/components/drawer/src/use-drawer.ts b/packages/components/drawer/src/use-drawer.ts index b7d0478816..3a820bb467 100644 --- a/packages/components/drawer/src/use-drawer.ts +++ b/packages/components/drawer/src/use-drawer.ts @@ -4,7 +4,7 @@ import {drawer} from "@nextui-org/theme"; import {ReactRef, useDOMRef} from "@nextui-org/react-utils"; import {useCallback, useMemo} from "react"; import {TRANSITION_EASINGS} from "@nextui-org/framer-utils"; -import {clsx} from "@nextui-org/shared-utils"; +import {clsx, isEmpty} from "@nextui-org/shared-utils"; import {PropGetter} from "@nextui-org/system"; interface Props extends Omit { @@ -39,7 +39,7 @@ export function useDrawer(originalProps: UseDrawerProps) { const domRef = useDOMRef(ref); const motionProps = useMemo(() => { - if (drawerMotionProps !== void 0) return drawerMotionProps; + if (!isEmpty(drawerMotionProps)) return drawerMotionProps; const key = placement === "left" || placement === "right" ? "x" : "y"; @@ -49,9 +49,8 @@ export function useDrawer(originalProps: UseDrawerProps) { [key]: 0, transition: { [key]: { - bounce: 0, - duration: 0.3, - ease: TRANSITION_EASINGS.ease, + duration: 0.2, + ease: TRANSITION_EASINGS.easeOut, }, }, }, @@ -59,9 +58,8 @@ export function useDrawer(originalProps: UseDrawerProps) { [key]: placement === "top" || placement === "left" ? "-100%" : "100%", transition: { [key]: { - bounce: 0, - duration: 0.6, - ease: TRANSITION_EASINGS.ease, + duration: 0.1, + ease: TRANSITION_EASINGS.easeIn, }, }, }, diff --git a/packages/components/drawer/stories/drawer.stories.tsx b/packages/components/drawer/stories/drawer.stories.tsx index 259c2449fc..92be13f41f 100644 --- a/packages/components/drawer/stories/drawer.stories.tsx +++ b/packages/components/drawer/stories/drawer.stories.tsx @@ -6,6 +6,9 @@ import {Button} from "@nextui-org/button"; import {Input} from "@nextui-org/input"; import {Checkbox} from "@nextui-org/checkbox"; import {Link} from "@nextui-org/link"; +import {Tooltip} from "@nextui-org/tooltip"; +import {Image} from "@nextui-org/image"; +import {Avatar, AvatarGroup} from "@nextui-org/avatar"; import {MailFilledIcon, LockFilledIcon} from "@nextui-org/shared-icons"; import {useDisclosure} from "@nextui-org/use-disclosure"; @@ -165,6 +168,335 @@ const PlacementTemplate = (args: DrawerProps) => { ); }; +const CustomStylesTemplate = (args: DrawerProps) => { + const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen}); + + return ( + <> + + + + {(onClose) => ( + <> + + + + +
+ + +
+
+ + + + + + +
+ + +
+ Event image +
+
+

SF Bay Area Meetup in November

+

+ 555 California St, San Francisco, CA 94103 +

+
+
+
+
Nov
+
+ 19 +
+
+
+

+ Tuesday, November 19 +

+

5:00 PM - 9:00 PM PST

+
+
+
+
+ + + + + + +
+
+ + + + } + className="group gap-x-0.5 text-medium text-foreground font-medium" + href="https://www.google.com/maps/place/555+California+St,+San+Francisco,+CA+94103" + rel="noreferrer noopener" + > + 555 California St suite 500 + +

San Francisco, California

+
+
+
+ About the event +
+

+ Hey Bay Area! We are excited to announce our next meetup on Tuesday, + November 19th. +

+

+ Join us for an evening of insightful discussions and hands-on workshops + focused on the latest developments in web development and design. Our + featured speakers will share their experiences with modern frontend + frameworks, responsive design patterns, and emerging web technologies. + You'll have the opportunity to network with fellow developers and + designers while enjoying refreshments and snacks. +

+

+ During the main session, we'll dive deep into practical examples of + building scalable applications, exploring best practices for component + architecture, and understanding advanced state management techniques. Our + interactive workshop portion will let you apply these concepts directly, + with experienced mentors available to provide guidance and answer your + questions. Whether you're a seasoned developer or just starting your + journey, you'll find valuable takeaways from this session. +

+ +

+ Brought to you by the{" "} + + NextUI team + + . +

+
+
+
+ Hosted By +
+ + NextUI Team +
+
+
+ 105 Going +
+ + + + + + + + + + + + + + +
+
+
+
+ + + + Contact the host + + + Report event + + + + )} + + + + ); +}; + export const Default = { render: Template, args: { @@ -216,3 +548,10 @@ export const CustomMotion = { }, }, }; + +export const CustomStyles = { + render: CustomStylesTemplate, + args: { + ...defaultProps, + }, +}; diff --git a/packages/components/modal/src/use-modal.ts b/packages/components/modal/src/use-modal.ts index 66b6f7be63..9e041ce54d 100644 --- a/packages/components/modal/src/use-modal.ts +++ b/packages/components/modal/src/use-modal.ts @@ -88,7 +88,6 @@ export function useModal(originalProps: UseModalProps) { as, className, classNames, - isOpen, defaultOpen, onOpenChange, @@ -162,6 +161,7 @@ export function useModal(originalProps: UseModalProps) { "data-open": dataAttr(state.isOpen), "data-dismissable": dataAttr(isDismissable), "aria-modal": dataAttr(true), + "data-placement": originalProps?.placement ?? "right", "aria-labelledby": headerMounted ? headerId : undefined, "aria-describedby": bodyMounted ? bodyId : undefined, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed2ef046f9..ef886d7058 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1466,12 +1466,18 @@ importers: specifier: workspace:* version: link:../../utilities/shared-utils devDependencies: + '@nextui-org/avatar': + specifier: workspace:* + version: link:../avatar '@nextui-org/button': specifier: workspace:* version: link:../button '@nextui-org/checkbox': specifier: workspace:* version: link:../checkbox + '@nextui-org/image': + specifier: workspace:* + version: link:../image '@nextui-org/input': specifier: workspace:* version: link:../input @@ -1490,6 +1496,9 @@ importers: '@nextui-org/theme': specifier: workspace:* version: link:../../core/theme + '@nextui-org/tooltip': + specifier: workspace:* + version: link:../tooltip '@nextui-org/use-disclosure': specifier: workspace:* version: link:../../hooks/use-disclosure