From 3253e19b3603adacd913b8cbb3e88c9beb0c931a Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 6 Jan 2025 14:22:27 +0200 Subject: [PATCH] chore(ui): general updates and fixes to TSDocs and types (#10753) --- .changeset/moody-ladybugs-melt.md | 5 + .../ui/src/components/calender/calendar.tsx | 4 + .../ui/src/components/drawer/drawer.tsx | 108 ++++++++++++++---- .../components/focus-modal/focus-modal.tsx | 50 +++++++- .../ui/src/components/select/select.tsx | 22 +++- 5 files changed, 162 insertions(+), 27 deletions(-) create mode 100644 .changeset/moody-ladybugs-melt.md diff --git a/.changeset/moody-ladybugs-melt.md b/.changeset/moody-ladybugs-melt.md new file mode 100644 index 0000000000..8625810900 --- /dev/null +++ b/.changeset/moody-ladybugs-melt.md @@ -0,0 +1,5 @@ +--- +"@medusajs/ui": patch +--- + +chore(ui): general updates and fixes to TSDocs and types diff --git a/packages/design-system/ui/src/components/calender/calendar.tsx b/packages/design-system/ui/src/components/calender/calendar.tsx index 4a599c077c..a727a09751 100644 --- a/packages/design-system/ui/src/components/calender/calendar.tsx +++ b/packages/design-system/ui/src/components/calender/calendar.tsx @@ -31,6 +31,10 @@ interface CalendarProps extends Omit, keyof CalendarValueProps>, CalendarValueProps {} +/** + * Calendar component used to select a date. + * Its props are based on [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#calendar-1). + */ const Calendar = (props: CalendarProps) => { const [value, setValue] = React.useState( () => getDefaultCalendarDate(props.value, props.defaultValue) diff --git a/packages/design-system/ui/src/components/drawer/drawer.tsx b/packages/design-system/ui/src/components/drawer/drawer.tsx index 7858456c5a..e7ea637e0e 100644 --- a/packages/design-system/ui/src/components/drawer/drawer.tsx +++ b/packages/design-system/ui/src/components/drawer/drawer.tsx @@ -9,45 +9,71 @@ import { Kbd } from "@/components/kbd" import { Text } from "@/components/text" import { clx } from "@/utils/clx" +interface DrawerRootProps extends React.ComponentPropsWithoutRef {} + /** * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives. */ const DrawerRoot = ( - props: React.ComponentPropsWithoutRef + props: DrawerRootProps ) => { return } DrawerRoot.displayName = "Drawer" +interface DrawerTriggerProps extends React.ComponentPropsWithoutRef {} + +/** + * This component is used to create the trigger button that opens the drawer. + * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component. + */ const DrawerTrigger = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { + DrawerTriggerProps +>(({ className, ...props }: DrawerTriggerProps, ref) => { return ( ) }) DrawerTrigger.displayName = "Drawer.Trigger" +interface DrawerCloseProps extends React.ComponentPropsWithoutRef {} + +/** + * This component is used to create the close button for the drawer. + * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component. + */ const DrawerClose = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { + DrawerCloseProps +>(({ className, ...props }: DrawerCloseProps, ref) => { return ( ) }) DrawerClose.displayName = "Drawer.Close" -const DrawerPortal = (props: DrawerPrimitives.DialogPortalProps) => { +interface DrawerPortalProps extends DrawerPrimitives.DialogPortalProps {} + +/** + * The `Drawer.Content` component uses this component to wrap the drawer content. + * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component. + */ +const DrawerPortal = (props: DrawerPortalProps) => { return } DrawerPortal.displayName = "Drawer.Portal" +interface DrawerOverlayProps extends React.ComponentPropsWithoutRef {} + +/** + * This component is used to create the overlay for the drawer. + * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component. + */ const DrawerOverlay = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { + DrawerOverlayProps +>(({ className, ...props }: DrawerOverlayProps, ref) => { return ( { + /** + * Props for the overlay component. + * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component. + */ + overlayProps?: React.ComponentPropsWithoutRef + /** + * Props for the portal component that wraps the drawer content. + * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component. + */ + portalProps?: React.ComponentPropsWithoutRef +} + +/** + * This component wraps the content of the drawer. + * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component. + */ const DrawerContent = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef & { - overlayProps?: React.ComponentPropsWithoutRef - portalProps?: React.ComponentPropsWithoutRef - } ->(({ className, overlayProps, portalProps, ...props }, ref) => { + DrawerContentProps +>(({ className, overlayProps, portalProps, ...props }: DrawerContentProps, ref) => { return ( @@ -86,10 +126,16 @@ const DrawerContent = React.forwardRef< }) DrawerContent.displayName = "Drawer.Content" +interface DrawerHeaderProps extends React.ComponentPropsWithoutRef<"div"> {} + +/** + * This component is used to wrap the header content of the drawer. + * This component is based on the `div` element and supports all of its props. + */ const DrawerHeader = React.forwardRef< HTMLDivElement, - React.ComponentPropsWithoutRef<"div"> ->(({ children, className, ...props }, ref) => { + DrawerHeaderProps +>(({ children, className, ...props }: DrawerHeaderProps, ref) => { return (
{} + +/** + * This component is used to wrap the body content of the drawer. + * This component is based on the `div` element and supports all of its props + */ const DrawerBody = React.forwardRef< HTMLDivElement, - React.ComponentPropsWithoutRef<"div"> ->(({ className, ...props }, ref) => { + DrawerBodyProps +>(({ className, ...props }: DrawerBodyProps, ref) => { return (
) }) DrawerBody.displayName = "Drawer.Body" +interface DrawerFooterProps extends React.HTMLAttributes {} + +/** + * This component is used to wrap the footer content of the drawer. + * This component is based on the `div` element and supports all of its props. + */ const DrawerFooter = ({ className, ...props -}: React.HTMLAttributes) => { +}: DrawerFooterProps) => { return (
{} + +/** + * This component adds accessible description to the drawer. + * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component. + */ const DrawerDescription = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( + DrawerDescriptionProps +>(({ className, children, ...props }: DrawerDescriptionProps, ref) => ( { } FocusModalRoot.displayName = "FocusModal" +interface FocusModalTriggerProps extends React.ComponentPropsWithoutRef {} + +/** + * This component is used to create the trigger button that opens the modal. + * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component. + */ const FocusModalTrigger = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->((props, ref) => { + FocusModalTriggerProps +>((props: FocusModalTriggerProps, ref) => { return }) FocusModalTrigger.displayName = "FocusModal.Trigger" +/** + * This component is used to create the close button for the modal. + * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component. + */ const FocusModalClose = FocusModalPrimitives.Close FocusModalClose.displayName = "FocusModal.Close" -const FocusModalPortal = (props: FocusModalPrimitives.DialogPortalProps) => { +interface FocusModalPortalProps extends FocusModalPrimitives.DialogPortalProps {} + +/** + * The `FocusModal.Content` component uses this component to wrap the modal content. + * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component. + */ +const FocusModalPortal = (props: FocusModalPortalProps) => { return ( ) } FocusModalPortal.displayName = "FocusModal.Portal" +/** + * This component is used to create the overlay for the modal. + * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component. + */ const FocusModalOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef @@ -60,6 +80,10 @@ const FocusModalOverlay = React.forwardRef< }) FocusModalOverlay.displayName = "FocusModal.Overlay" +/** + * This component wraps the content of the modal. + * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component. + */ const FocusModalContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { @@ -85,6 +109,7 @@ const FocusModalContent = React.forwardRef< FocusModalContent.displayName = "FocusModal.Content" /** + * This component is used to wrap the header content of the modal. * This component is based on the `div` element and supports all of its props */ const FocusModalHeader = React.forwardRef< @@ -114,6 +139,10 @@ const FocusModalHeader = React.forwardRef< }) FocusModalHeader.displayName = "FocusModal.Header" +/** + * This component is used to wrap the footer content of the modal. + * This component is based on the `div` element and supports all of its props + */ const FocusModalFooter = React.forwardRef< HTMLDivElement, React.ComponentPropsWithoutRef<"div"> @@ -133,20 +162,31 @@ const FocusModalFooter = React.forwardRef< }) FocusModalFooter.displayName = "FocusModal.Footer" +interface FocusModalTitleProps extends React.ComponentPropsWithoutRef {} + +/** + * This component adds an accessible title to the modal. + * It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component. + */ const FocusModalTitle = React.forwardRef< HTMLHeadingElement, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { + FocusModalTitleProps +>(({ className, ...props }: FocusModalTitleProps, ref) => { return ( ) }) FocusModalTitle.displayName = "FocusModal.Title" +/** + * This component adds accessible description to the modal. + * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component. + */ const FocusModalDescription = FocusModalPrimitives.Description FocusModalDescription.displayName = "FocusModal.Description" /** + * This component is used to wrap the body content of the modal. * This component is based on the `div` element and supports all of its props */ const FocusModalBody = React.forwardRef< diff --git a/packages/design-system/ui/src/components/select/select.tsx b/packages/design-system/ui/src/components/select/select.tsx index 59436d6fbd..4e09ff07de 100644 --- a/packages/design-system/ui/src/components/select/select.tsx +++ b/packages/design-system/ui/src/components/select/select.tsx @@ -82,6 +82,7 @@ const triggerVariants = cva({ /** * The trigger that toggles the select. + * It's based on [Radix UI Select Trigger](https://www.radix-ui.com/primitives/docs/components/select#trigger). */ const Trigger = React.forwardRef< React.ElementRef, @@ -104,19 +105,35 @@ const Trigger = React.forwardRef< }) Trigger.displayName = "Select.Trigger" +interface SelectContentProps extends React.ComponentPropsWithoutRef { +} + +/** + * The content that appears when the select is open. + * It's based on [Radix UI Select Content](https://www.radix-ui.com/primitives/docs/components/select#content). + */ const Content = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef + SelectContentProps >( ( { className, children, + /** + * Whether to show the select items below (`popper`) or over (`item-aligned`) the select input. + */ position = "popper", + /** + * The distance of the content pop-up in pixels from the select input. Only available when position is set to popper. + */ sideOffset = 8, + /** + * The distance in pixels from the boundary edges where collision detection should occur. Only available when position is set to popper. + */ collisionPadding = 24, ...props - }, + }: SelectContentProps, ref ) => ( @@ -155,6 +172,7 @@ Content.displayName = "Select.Content" /** * Used to label a group of items. + * It's based on [Radix UI Select Label](https://www.radix-ui.com/primitives/docs/components/select#label). */ const Label = React.forwardRef< React.ElementRef,