chore(ui): general updates and fixes to TSDocs and types (#10753)

.changeset/moody-ladybugs-melt.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+chore(ui): general updates and fixes to TSDocs and types

packages/design-system/ui/src/components/calender/calendar.tsx

@@ -31,6 +31,10 @@ interface CalendarProps
   extends Omit<BaseCalendarProps<CalendarDate>, 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<CalendarDate  | null | undefined>(
     () => getDefaultCalendarDate(props.value, props.defaultValue)

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<typeof DrawerPrimitives.Root> {}
+
 /**
  * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
  */
 const DrawerRoot = (
-  props: React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Root>
+  props: DrawerRootProps
 ) => {
   return <DrawerPrimitives.Root {...props} />
 }
 DrawerRoot.displayName = "Drawer"
 
+interface DrawerTriggerProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Trigger> {}
+
+/**
+ * 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<typeof DrawerPrimitives.Trigger>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Trigger>
+  DrawerTriggerProps
->(({ className, ...props }, ref) => {
+>(({ className, ...props }: DrawerTriggerProps, ref) => {
   return (
     <DrawerPrimitives.Trigger ref={ref} className={clx(className)} {...props} />
   )
 })
 DrawerTrigger.displayName = "Drawer.Trigger"
 
+interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Close> {}
+
+/**
+ * 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<typeof DrawerPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Close>
+  DrawerCloseProps
->(({ className, ...props }, ref) => {
+>(({ className, ...props }: DrawerCloseProps, ref) => {
   return (
     <DrawerPrimitives.Close ref={ref} className={clx(className)} {...props} />
   )
 })
 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 <DrawerPrimitives.DialogPortal {...props} />
 }
 DrawerPortal.displayName = "Drawer.Portal"
 
+interface DrawerOverlayProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Overlay> {}
+
+/**
+ * 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<typeof DrawerPrimitives.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Overlay>
+  DrawerOverlayProps
->(({ className, ...props }, ref) => {
+>(({ className, ...props }: DrawerOverlayProps, ref) => {
   return (
     <DrawerPrimitives.Overlay
       ref={ref}
@@ -62,13 +88,27 @@ const DrawerOverlay = React.forwardRef<
 })
 DrawerOverlay.displayName = "Drawer.Overlay"
 
+interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Content> {
+  /**
+   * 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<typeof DrawerOverlay>
+  /**
+   * 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<typeof DrawerPortal>
+}
+
+/**
+ * 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<typeof DrawerPrimitives.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Content> & {
+  DrawerContentProps
-    overlayProps?: React.ComponentPropsWithoutRef<typeof DrawerOverlay>
+>(({ className, overlayProps, portalProps, ...props }: DrawerContentProps, ref) => {
-    portalProps?: React.ComponentPropsWithoutRef<typeof DrawerPortal>
-  }
->(({ className, overlayProps, portalProps, ...props }, ref) => {
   return (
     <DrawerPortal {...portalProps}>
       <DrawerOverlay {...overlayProps} />
@@ -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">
+  DrawerHeaderProps
->(({ children, className, ...props }, ref) => {
+>(({ children, className, ...props }: DrawerHeaderProps, ref) => {
   return (
     <div
       ref={ref}
@@ -110,20 +156,32 @@ const DrawerHeader = React.forwardRef<
 })
 DrawerHeader.displayName = "Drawer.Header"
 
+interface DrawerBodyProps extends React.ComponentPropsWithoutRef<"div"> {}
+
+/**
+ * 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">
+  DrawerBodyProps
->(({ className, ...props }, ref) => {
+>(({ className, ...props }: DrawerBodyProps, ref) => {
   return (
     <div ref={ref} className={clx("flex-1 px-6 py-4", className)} {...props} />
   )
 })
 DrawerBody.displayName = "Drawer.Body"
 
+interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * 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<HTMLDivElement>) => {
+}: DrawerFooterProps) => {
   return (
     <div
       className={clx(
@@ -136,13 +194,23 @@ const DrawerFooter = ({
 }
 DrawerFooter.displayName = "Drawer.Footer"
 
+/**
+ * This component adds an accessible title to the drawer.
+ * It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.
+ */
 const DrawerTitle = DrawerPrimitives.Title
 DrawerTitle.displayName = "Drawer.Title"
 
+interface DrawerDescriptionProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Description> {}
+
+/**
+ * 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<typeof DrawerPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Description>
+  DrawerDescriptionProps
->(({ className, children, ...props }, ref) => (
+>(({ className, children, ...props }: DrawerDescriptionProps, ref) => (
   <DrawerPrimitives.Description
     ref={ref}
     className={clx(className)}

packages/design-system/ui/src/components/focus-modal/focus-modal.tsx

@@ -24,24 +24,44 @@ const FocusModalRoot = (props: FocusModalRootProps) => {
 }
 FocusModalRoot.displayName = "FocusModal"
 
+interface FocusModalTriggerProps extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Trigger> {}
+
+/**
+ * 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<typeof FocusModalPrimitives.Trigger>,
-  React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Trigger>
+  FocusModalTriggerProps
->((props, ref) => {
+>((props: FocusModalTriggerProps, ref) => {
   return <FocusModalPrimitives.Trigger ref={ref} {...props} />
 })
 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 (
     <FocusModalPrimitives.DialogPortal {...props} />
   )
 }
 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<typeof FocusModalPrimitives.Overlay>,
   React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Overlay>
@@ -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<typeof FocusModalPrimitives.Content>,
   React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Content> & {
@@ -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<typeof FocusModalPrimitives.Title> {}
+
+/**
+ * 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<typeof FocusModalPrimitives.Title>
+  FocusModalTitleProps
->(({ className, ...props }, ref) => {
+>(({ className, ...props }: FocusModalTitleProps, ref) => {
   return (
     <FocusModalPrimitives.Title ref={ref} {...props} />
   )
 })
 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<

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<typeof SelectPrimitive.Trigger>,
@@ -104,19 +105,35 @@ const Trigger = React.forwardRef<
 })
 Trigger.displayName = "Select.Trigger"
 
+interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+}
+
+/**
+ * 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<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+  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
   ) => (
     <SelectPrimitive.Portal>
@@ -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<typeof SelectPrimitive.Label>,