chore(): Update typings (#1502)

common/changes/pcln-design-system/chore-update-types_2024-06-24-22-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Update typings for several components",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/BackgroundImage/BackgroundImage.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentPropsWithoutRef } from 'react'
 import styled, { css } from 'styled-components'
 import {
   BorderRadiusProps,
@@ -33,7 +33,7 @@ const image = (props) => (props.image ? { backgroundImage: `url(${props.image})`
 export type BackgroundImageProps = WidthProps &
   HeightProps &
   BorderRadiusProps &
-  Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'width' | 'height'> & {
+  Omit<ComponentPropsWithoutRef<'img'>, 'width' | 'height'> & {
     variation?: 'parallax' | 'static'
     image?: string
     borderRadius?: string

packages/core/src/Box/Box.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject } from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled from 'styled-components'
 import {
   BorderRadiusProps,
@@ -10,6 +10,7 @@ import {
   MinHeightProps,
   MinWidthProps,
   OverflowProps,
+  type ResponsiveValue,
   SizeProps,
   SpaceProps,
   TextAlignProps,
@@ -29,15 +30,15 @@ import {
   textAlign,
   width,
 } from 'styled-system'
-import type { ColorSchemeName } from '../theme/theme'
+import type { BorderRadius, BoxShadowSize, ColorSchemeName } from '../theme/theme'
 import { borderRadiusAttrs } from '../utils/attrs/borderRadiusAttrs'
 import { boxShadowAttrs } from '../utils/attrs/boxShadowAttrs'
 import { applyVariations, color, colorScheme } from '../utils/utils'
 
 /**
  * @public
  */
-export type BoxProps = BorderRadiusProps &
+export type BoxProps = Omit<BorderRadiusProps, 'borderRadius'> &
   BoxShadowProps &
   DisplayProps &
   HeightProps &
@@ -50,27 +51,15 @@ export type BoxProps = BorderRadiusProps &
   SpaceProps &
   TextAlignProps &
   WidthProps &
-  React.HTMLAttributes<HTMLDivElement> & {
-    children?: React.ReactNode | string
+  ComponentPropsWithRef<'div'> & {
+    children?: React.ReactNode
     as?: unknown
     role?: string
     bg?: string
     color?: string
     className?: string
-    borderRadiusSize?:
-      | 'none'
-      | 'xsm'
-      | 'sm'
-      | 'md'
-      | 'lg'
-      | 'xl'
-      | '2xl'
-      | '3xl'
-      | 'full'
-      | 'action-sm'
-      | 'action-md'
-      | 'action-lg'
-    boxShadowSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-lg' | 'overlay-xl'
+    borderRadius?: ResponsiveValue<BorderRadius> | BorderRadiusProps['borderRadius']
+    boxShadowSize?: ResponsiveValue<BoxShadowSize>
     boxShadowColor?:
       | 'primary'
       | 'secondary'
@@ -89,9 +78,16 @@ export type BoxProps = BorderRadiusProps &
       | 'border'
       | 'background'
     colorScheme?: ColorSchemeName
-    onClick?: (unknown) => unknown
-    ref?: MutableRefObject<HTMLDivElement>
-    rounded?: 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'
+    rounded?:
+      | 'round'
+      | 'top'
+      | 'right'
+      | 'bottom'
+      | 'left'
+      | 'topLeft'
+      | 'topRight'
+      | 'bottomRight'
+      | 'bottomLeft'
   }
 
 /**

packages/core/src/Breadcrumbs/BreadcrumbLink.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Flex } from '../Flex/Flex'
-import { Link } from '../Link/Link'
+import { Link, LinkProps } from '../Link/Link'
 import { Text } from '../Text/Text'
 
 /**
@@ -12,13 +12,13 @@ export type BreadcrumbLinkProps = React.RefAttributes<unknown> & {
   href?: string
   icon?: React.ReactNode
   label?: string
-  onClick?: (unknown) => unknown
+  onClick?: LinkProps['onClick']
 }
 
 /**
  * @public
  */
-export const BreadcrumbLink: React.FC<BreadcrumbLinkProps> = React.forwardRef(
+export const BreadcrumbLink: React.FC<BreadcrumbLinkProps> = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
   ({ className, isLastChild, href, icon, label, onClick }, ref) => {
     const linkColor = isLastChild ? 'text.dark' : 'text.light'
 

packages/core/src/Button/Button.spec.tsx

@@ -160,11 +160,7 @@ describe('Button', () => {
 
     expect(button).toHaveStyleRule('border-radius', borderRadius['action-md'])
 
-    rerender(
-      <Button size='small' borderRadius=''>
-        BUTTON
-      </Button>
-    )
+    rerender(<Button size='small'>BUTTON</Button>)
     expect(button).toHaveStyleRule('border-radius', borderRadius['action-sm'])
 
     rerender(

packages/core/src/Button/Button.tsx

@@ -1,9 +1,10 @@
 import { themeGet } from '@styled-system/theme-get'
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import {
   BoxShadowProps,
   HeightProps,
+  type ResponsiveValue,
   SpaceProps,
   WidthProps,
   borderRadius,
@@ -17,6 +18,7 @@ import {
 import { Flex, type FlexProps } from '../Flex/Flex'
 import { boxShadowAttrs } from '../utils/attrs/boxShadowAttrs'
 import { applySizes, applyVariations, borders, getPaletteColor, getTextColorOn } from '../utils/utils'
+import { type BorderRadius, type BoxShadowSize } from '../theme'
 
 /**
  * @public
@@ -213,20 +215,16 @@ export type ButtonProps = WidthProps &
   HeightProps &
   SpaceProps &
   BoxShadowProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> &
-  React.RefAttributes<unknown> & {
+  ComponentPropsWithRef<'button'> & {
     color?: string
     variation?: ButtonVariations
     size?: ButtonSizes | ButtonSizes[]
-    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | ''
-    boxShadowSize?: '' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-md' | 'overlay-lg' | 'overlay-xl'
+    borderRadius?: BorderRadius
+    boxShadowSize?: ResponsiveValue<BoxShadowSize>
     autoFocus?: boolean
-    IconLeft?: React.Component
-    IconRight?: React.Component
+    IconLeft?: React.Component | React.FC
+    IconRight?: React.Component | React.FC
     flexProps?: FlexProps
-    onClick?: (unknown) => unknown
-    onFocus?: (unknown) => unknown
-    onMouseEnter?: (unknown) => unknown
   }
 
 export const buttonStyles = css`
@@ -357,7 +355,7 @@ const ButtonIcon = ({ Component, ...props }) => {
 /**
  * @public
  */
-export const Button = React.forwardRef((props: ButtonProps, ref) => {
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { children, ...restProps } = props
   const { IconLeft, IconRight, size = 'medium', flexProps = {} } = props
   const hasChildren = React.Children.toArray(children).length > 0

packages/core/src/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { BoxChecked, BoxEmpty, BoxMinus } from 'pcln-icons'
-import React, { useEffect, useState } from 'react'
+import React, { type ComponentPropsWithRef, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { applyVariations, getPaletteColor } from '../utils/utils'
 
@@ -100,16 +100,14 @@ const StyledInput = styled.input`
 /**
  * @public
  */
-export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  id: string
+export type CheckboxProps = ComponentPropsWithRef<'input'> & {
+  id?: string
   indeterminate?: boolean
   size?: number
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   color?: string
   checked?: boolean
   defaultChecked?: boolean
   disabled?: boolean
-  ref?: React.Ref<HTMLInputElement>
   unselectedColor?: string
 }
 

packages/core/src/Chip/ButtonChip/ButtonChip.tsx

@@ -1,10 +1,9 @@
 import { ChevronDown } from 'pcln-icons'
 import React from 'react'
 import styled from 'styled-components'
-import { FontSizeProps, SpaceProps } from 'styled-system'
-import { Button } from '../../Button/Button'
+import { Button, type ButtonProps } from '../../Button/Button'
 import { getPaletteColor } from '../../utils/utils'
-import { ChipContent, type IconComponent } from '../ChipContent/ChipContent'
+import { ChipContent, type ChipContentProps } from '../ChipContent/ChipContent'
 import { ChipContentWrapper } from '../ChipContentWrapper'
 
 const ChipButton = styled(Button)`
@@ -34,29 +33,18 @@ export type ButtonChipVariation = 'outline' | 'shadow'
 /**
  * @public
  */
-export type ButtonChipProps = SpaceProps &
-  FontSizeProps & {
-    BridgeIcon?: IconComponent
-    bridgeLabel?: string
-    children?: React.ReactNode
-    color?: string
-    disabled?: boolean
-    expanded?: boolean
-    facet?: string
-    Icon?: IconComponent
-    id?: string
-    label?: string
-    selected?: boolean
-    showActionIcon?: boolean
-    onClick?: (unknown) => unknown
-    width?: string
-    variation?: ButtonChipVariation
-  }
+export type ButtonChipProps = Omit<ChipContentProps, 'action' | 'ref'> & {
+  expanded?: boolean
+  id?: string
+  showActionIcon?: boolean
+  onClick?: ButtonProps['onClick']
+  variation?: ButtonChipVariation
+}
 
 /**
  * @public
  */
-export const ButtonChip: React.FC<ButtonChipProps> = React.forwardRef(
+export const ButtonChip: React.FC<ButtonChipProps> = React.forwardRef<HTMLButtonElement, ButtonChipProps>(
   (
     {
       color,

packages/core/src/Chip/FilterChip/FilterChip.tsx

@@ -27,7 +27,7 @@ export type FilterChipProps = SpaceProps &
     actionTitle?: string
     value?: string | number
     color?: string
-    children?: React.ReactNode | string
+    children?: React.ReactNode
     variation?: FilterChipVariation
   }
 

packages/core/src/CloseButton/CloseButton.styled.tsx

@@ -5,17 +5,14 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 import { ComposedStyleFns } from '../theme/theme'
 import { getPaletteColor } from '../utils/utils'
-import type { CloseButtonProps } from './CloseButton'
+import { type MotionButtonProps } from './CloseButton'
 
 /** @public */
 export const closeButtonSizes = ['sm', 'md', 'lg'] as const
 
 /** @public */
 export type CloseButtonSize = (typeof closeButtonSizes)[number] | number
 
-/** @public */
-export type MotionButtonProps = HTMLMotionProps<'button'> & CloseButtonProps
-
 export const closeButtonIconSizes: Record<CloseButtonSize, number> = {
   sm: 20,
   md: 24,
@@ -38,7 +35,7 @@ export const closeButtonVariants = ['filled', 'white'] as const
 /** @public */
 export type CloseButtonVariant = (typeof closeButtonVariants)[number]
 
-export const closeButtonVariantProps: Record<CloseButtonVariant, Omit<CloseButtonProps, 'variant'>> = {
+export const closeButtonVariantProps = {
   filled: { bgColor: 'background.lightest', boxShadowSize: 'sm', color: 'primary.base' },
   white: { color: 'text.lightest' },
 } as const

packages/core/src/CloseButton/CloseButton.tsx

@@ -1,4 +1,5 @@
 import React, { MouseEventHandler, useState } from 'react'
+import { type HTMLMotionProps } from 'framer-motion'
 import { Relative } from '../Relative/Relative'
 import { type BoxShadowSize, type IStyledSystemProps, type PaletteColor } from '../theme/theme'
 import {
@@ -25,6 +26,9 @@ export type CloseButtonProps = IStyledSystemProps & {
   variant?: CloseButtonVariant
 }
 
+/** @public */
+export type MotionButtonProps = HTMLMotionProps<'button'> & CloseButtonProps
+
 /**
  * @public
  */
@@ -39,7 +43,7 @@ export const CloseButton = ({
   title = 'close',
   variant,
   ...props
-}: CloseButtonProps) => {
+}: MotionButtonProps) => {
   const [hover, setHover] = useState(false)
 
   return (

packages/core/src/Dialog/Dialog.styled.tsx

@@ -1,7 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import themeGet from '@styled-system/theme-get'
-import { HTMLMotionProps, Transition, motion } from 'framer-motion'
+import { Transition, motion } from 'framer-motion'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 import { overflowX, overflowY, zIndex } from 'styled-system'
@@ -35,7 +35,7 @@ const scrimStyles = {
 
 const enterTransition: Transition = { duration: 0.25, ease: 'easeOut' }
 const exitTransition: Transition = { duration: 0.15, ease: 'easeIn' }
-const animationStyles: Record<'default' | 'sheet' | 'overlay', HTMLMotionProps<'div'>> = {
+const animationStyles = {
   default: {
     initial: { opacity: 0, scale: 0.9, translateY: 64 },
     animate: { opacity: 1, scale: 1, translateY: 0, transition: enterTransition },

packages/core/src/Hug/Hug.tsx

@@ -10,7 +10,7 @@ export type HugProps = CardProps & {
   children?: React.ReactNode
   iconDisplay?: string[]
   icon?: React.ReactNode
-  text?: React.ReactNode | React.ReactNode[] | string
+  text?: React.ReactNode
   color?: string
   fontSize?: string | number
 }

packages/core/src/Image/Image.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentPropsWithoutRef } from 'react'
 import styled from 'styled-components'
 import {
   BorderRadiusProps,
@@ -42,7 +42,7 @@ export type ImageProps = BorderRadiusProps &
   MinWidthProps &
   SpaceProps &
   WidthProps &
-  Partial<Omit<HTMLImageElement, 'width' | 'height'>> & {
+  Omit<ComponentPropsWithoutRef<'img'>, 'width' | 'height'> & {
     borderRadiusSize?: string
     rounded?: string
     boxShadowSize?: string