refactor: update PropTypes

Author: mrholek

src/components/Types.tsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types'
+
 export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
 
 export type Colors =
@@ -11,6 +13,20 @@ export type Colors =
   | 'light'
   | string
 
+export const colorPropType = PropTypes.oneOfType([
+  PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'danger',
+    'warning',
+    'info',
+    'dark',
+    'light',
+  ]),
+  PropTypes.string,
+])
+
 export type Placements =
   | 'auto'
   | 'auto-start'
@@ -29,6 +45,24 @@ export type Placements =
   | 'left-end'
   | undefined
 
+export const placementPropType = PropTypes.oneOf<Placements>([
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top-end',
+  'top',
+  'top-start',
+  'bottom-end',
+  'bottom',
+  'bottom-start',
+  'right-start',
+  'right',
+  'right-end',
+  'left-start',
+  'left',
+  'left-end'
+])
+
 export type Shapes =
   | 'rounded'
   | 'rounded-top'
@@ -43,4 +77,23 @@ export type Shapes =
   | 'rounded-3'
   | string
 
+export const shapePropType = PropTypes.oneOfType([
+  PropTypes.oneOf([
+    'rounded',
+    'rounded-top',
+    'rounded-end',
+    'rounded-bottom',
+    'rounded-start',
+    'rounded-circle',
+    'rounded-pill',
+    'rounded-0',
+    'rounded-1',
+    'rounded-2',
+    'rounded-3',
+  ]),
+  PropTypes.string,
+])
+
 export type Triggers = 'hover' | 'focus' | 'click'
+
+export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])

src/components/alert/CAlert.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { Colors } from '../Types'
+import { Colors, colorPropType } from '../Types'
 import { CButtonClose } from '../button/CButtonClose'
 
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
@@ -111,7 +111,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
 CAlert.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  color: PropTypes.string.isRequired,
+  color: colorPropType.isRequired,
   dismissible: PropTypes.bool,
   onDismiss: PropTypes.func,
   onDismissed: PropTypes.func,

src/components/avatar/CAvatar.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Shapes } from '../Types'
+import { Colors, Shapes, colorPropType, shapePropType } from '../Types'
 
 export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -67,8 +67,8 @@ export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
 CAvatar.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  color: PropTypes.string,
-  shape: PropTypes.string,
+  color: colorPropType,
+  shape: shapePropType,
   size: PropTypes.string,
   src: PropTypes.string,
   status: PropTypes.string,

src/components/badge/CBadge.tsx

@@ -2,7 +2,7 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Shapes } from '../Types'
+import { Colors, Shapes, colorPropType, shapePropType } from '../Types'
 
 export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**
@@ -58,9 +58,9 @@ export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
 CBadge.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  color: PropTypes.string,
+  color: colorPropType,
   component: PropTypes.string,
-  shape: PropTypes.string,
+  shape: shapePropType,
   textColor: PropTypes.string,
 }
 

src/components/button/CButton.tsx

@@ -2,7 +2,7 @@ import React, { ButtonHTMLAttributes, ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Shapes } from '../Types'
+import { Colors, Shapes, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
 export interface CButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -101,7 +101,7 @@ export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButton
 CButton.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  color: PropTypes.string,
+  color: colorPropType,
   component: PropTypes.elementType,
   shape: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),

src/components/callout/CCallout.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors } from '../Types'
+import { Colors, colorPropType } from '../Types'
 
 export interface CCalloutProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -38,7 +38,7 @@ export const CCallout = forwardRef<HTMLDivElement, CCalloutProps>(
 CCallout.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  color: PropTypes.string,
+  color: colorPropType,
 }
 
 CCallout.displayName = 'CCallout'

src/components/card/CCard.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors } from '../Types'
+import { Colors, colorPropType } from '../Types'
 
 export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -45,7 +45,7 @@ export const CCard = forwardRef<HTMLDivElement, CCardProps>(
 CCard.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  color: PropTypes.string,
+  color: colorPropType,
   textColor: PropTypes.string,
 }
 

src/components/dropdown/CDropdown.tsx

@@ -11,11 +11,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Manager } from 'react-popper'
 
-import { Placements } from '../Types'
+import { Placements, placementPropType } from '../Types'
 import { useForkedRef } from '../../utils/hooks'
 
-// import { CDropdownMenuProps } from './CDropdownMenu'
-
 export type Directions = 'start' | 'end'
 
 export type Breakpoints =
@@ -30,7 +28,7 @@ export type Alignments = Directions | Breakpoints
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
-   * @type { 'left' | 'right' | { xs: 'left' | 'right' } | { sm: 'left' | 'right' } | { md: 'left' | 'right' } | { lg: 'left' | 'right' } | { xl: 'left' | 'right'} | { xxl: 'left' | 'right'} }
+   * @type { 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} }
    */
   alignment?: Alignments
   /**
@@ -110,11 +108,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       popper = false
     }
 
-    // Disable popper if dropdown is in nav.
-    // if (variant === 'nav-item') {
-    //   popper = false
-    // }
-
     const contextValues = {
       alignment,
       dark,
@@ -138,12 +131,12 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     useEffect(() => {
       window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
-      // window.addEventListener('mouseover', handleKeyup)
+      // TODO: consider to add in future releases `window.addEventListener('mouseover', handleKeyup)`
 
       return () => {
         window.removeEventListener('click', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
-        // window.removeEventListener('mouseover', handleKeyup)
+        // TODO: consider to add in future releases `window.addEventListener('mouseover', handleKeyup)`
       }
     })
 
@@ -181,13 +174,13 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 )
 
 CDropdown.propTypes = {
-  alignment: PropTypes.any, // TODO: refactor
+  alignment: PropTypes.any, // TODO: fix; add proper PropTypes
   children: PropTypes.node,
   className: PropTypes.string,
   component: PropTypes.elementType,
   dark: PropTypes.bool,
   direction: PropTypes.oneOf(['dropup', 'dropend', 'dropstart']),
-  placement: PropTypes.any, // TODO: refactor
+  placement: placementPropType,
   popper: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'nav-item']),
   visible: PropTypes.bool,

src/components/dropdown/CDropdownToggle.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
-import { Triggers } from '../Types'
+import { Triggers, triggerPropType } from '../Types'
 
 import { CButton, CButtonProps } from '../button/CButton'
 import { CDropdownContext } from './CDropdown'
@@ -54,7 +54,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
       onFocus: () => setVisible(true),
       onBlur: () => setVisible(false),
     }),
-    // TODO: add hover trigger
+    // TODO: consider to add in future releases
     // ...((trigger === 'hover' || trigger.includes('hover')) && {
     //   onMouseEnter: () => setVisible(true),
     //   onMouseLeave: () => setVisible(false),
@@ -67,7 +67,6 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ...triggers,
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Toggler = (ref?: React.Ref<any>) => {
     return variant === 'nav-item' ? (
       <a href="#" {...togglerProps} ref={ref}>
@@ -89,7 +88,7 @@ CDropdownToggle.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   split: PropTypes.bool,
-  trigger: PropTypes.any, //TODO: refactor
+  trigger: triggerPropType
 }
 
 CDropdownToggle.displayName = 'CDropdownToggle'

src/components/form/CFormCheck.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Shapes } from '../Types'
+import { Colors, Shapes, colorPropType, shapePropType } from '../Types'
 
 import { CFormControl } from './CFormControl'
 import { CFormLabel } from './CFormLabel'
@@ -64,10 +64,10 @@ export interface CFormCheckProps extends HTMLAttributes<HTMLInputElement> {
   /**
    * Specifies the type of component. [docs]
    *
-   * @type checkbox' | 'radio' | string
+   * @type checkbox' | 'radio'
    * @default 'checkbox'
    */
-  type?: 'checkbox' | 'radio' | string
+  type?: 'checkbox' | 'radio' 
   /**
    * Set component validation state to valid. [docs]
    */
@@ -161,8 +161,8 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
 
 CFormCheck.propTypes = {
   button: PropTypes.bool,
-  buttonColor: PropTypes.string,
-  buttonShape: PropTypes.string,
+  buttonColor: colorPropType,
+  buttonShape: shapePropType,
   buttonSize: PropTypes.oneOf(['sm', 'lg']),
   buttonVariant: PropTypes.oneOf(['outline', 'ghost']),
   className: PropTypes.string,
@@ -172,7 +172,7 @@ CFormCheck.propTypes = {
   label: PropTypes.string,
   size: PropTypes.oneOf(['lg', 'xl']),
   switch: PropTypes.bool,
-  type: PropTypes.string, // TODO: check
+  type: PropTypes.oneOf(['checkbox', 'radio']),
   valid: PropTypes.bool,
 }