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

2025-01-06 14:22:27 +02:00
parent c440068d49
commit 3253e19b36
5 changed files with 162 additions and 27 deletions
--- 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<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)
--- 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<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>
->(({ className, ...props }, ref) => {
+  DrawerTriggerProps
+>(({ 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>
->(({ className, ...props }, ref) => {
+  DrawerCloseProps
+>(({ 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>
->(({ className, ...props }, ref) => {
+  DrawerOverlayProps
+>(({ 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> & {
-    overlayProps?: React.ComponentPropsWithoutRef<typeof DrawerOverlay>
-    portalProps?: React.ComponentPropsWithoutRef<typeof DrawerPortal>
-  }
->(({ className, overlayProps, portalProps, ...props }, ref) => {
+  DrawerContentProps
+>(({ className, overlayProps, portalProps, ...props }: DrawerContentProps, 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">
->(({ children, className, ...props }, ref) => {
+  DrawerHeaderProps
+>(({ 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">
->(({ className, ...props }, ref) => {
+  DrawerBodyProps
+>(({ 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>
->(({ className, children, ...props }, ref) => (
+  DrawerDescriptionProps
+>(({ className, children, ...props }: DrawerDescriptionProps, ref) => (
  <DrawerPrimitives.Description
    ref={ref}
    className={clx(className)}
--- a/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
+++ b/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>
->((props, ref) => {
+  FocusModalTriggerProps
+>((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>
->(({ className, ...props }, ref) => {
+  FocusModalTitleProps
+>(({ 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<
--- 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<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>,