refactor: update PropTypes

Author: mrholek

src/components/carousel/CCarousel.tsx

@@ -15,7 +15,7 @@ export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   animate?: boolean
   /**
    * A string of all className you want applied to the base component. [docs]
-   * 
+   *
    * @type string
    */
   className?: string
@@ -27,7 +27,7 @@ export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   controls?: boolean
   /**
    * Add darker controls, indicators, and captions. [docs]
-   * 
+   *
    * @type boolean
    */
   dark?: boolean
@@ -36,7 +36,7 @@ export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
    *
    * @type boolean | number
    */
-  interval: boolean | number
+  interval?: boolean | number
   /**
    * index of the active item. [docs]
    *
@@ -158,7 +158,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
             setAnimating,
           }}
         >
-          {indicators && <CCarouselIndicators/>}
+          {indicators && <CCarouselIndicators />}
           <CCarouselInner>{children}</CCarouselInner>
           {controls && (
             <>
@@ -176,9 +176,13 @@ CCarousel.propTypes = {
   animate: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  controls: PropTypes.bool,
+  dark: PropTypes.bool,
   index: PropTypes.number,
-  interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]).isRequired,
+  indicators: PropTypes.bool,
+  interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   onSlideChange: PropTypes.func,
+  transition: PropTypes.oneOf(['slide', 'crossfade']),
 }
 
 CCarousel.displayName = 'CCarousel'

src/components/form/CFormControl.tsx

@@ -113,10 +113,7 @@ CFormControl.propTypes = {
   invalid: PropTypes.bool,
   plainText: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'lg']),
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf(['color', 'file', 'text']),
-    PropTypes.string,
-  ]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]),
   valid: PropTypes.bool,
 }
 

src/components/nav/CNavGroup.tsx

@@ -1,6 +1,5 @@
 import React, {
   CSSProperties,
-  ElementType,
   forwardRef,
   ReactNode,
   useContext,
@@ -21,7 +20,7 @@ export interface CNavGroupProps {
   /**
    * Set component's icon. [docs]
    */
-  icon?: string | ElementType
+  icon?: string | ReactNode
   /**
    * TODO: . [docs]
    */
@@ -134,7 +133,7 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
 CNavGroup.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   idx: PropTypes.string,
   toggler: PropTypes.string,
   visible: PropTypes.bool,

src/components/nav/CNavLink.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'react'
+import React, { ElementType, forwardRef, ReactNode, useContext, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -25,7 +25,10 @@ export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
    * Toggle the disabled state for the component. [docs]
    */
   disabled?: boolean
-  icon?: string | ElementType
+  /**
+   * TODO:. [docs]
+   */
+  icon?: string | ReactNode
 
   /**
    * @ignore
@@ -63,7 +66,7 @@ export const CNavLink = forwardRef<
 CNavLink.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   idx: PropTypes.string,
 }
 

src/components/popover/CPopover.tsx

@@ -48,7 +48,6 @@ export const CPopover: FC<CPopoverProps> = ({
   const [_visible, setVisible] = useState(visible)
   const _placement = placement === 'start' ? 'left' : placement === 'end' ? 'right' : placement
 
- 
   const getTransitionClass = (state: string) => {
     return state === 'entering'
       ? 'fade'
@@ -129,7 +128,7 @@ CPopover.propTypes = {
     'left',
     'left-end',
     'start',
-    'end'
+    'end',
   ]),
   trigger: triggerPropType,
   visible: PropTypes.bool,

src/components/tooltip/CTooltip.tsx

@@ -121,6 +121,8 @@ CTooltip.propTypes = {
     'left-start',
     'left',
     'left-end',
+    'start',
+    'end',
   ]),
   trigger: triggerPropType,
   visible: PropTypes.bool,

src/components/widgets/CWidgetBrand.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useMemo } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -20,7 +20,7 @@ export interface CWidgetBrandProps extends HTMLAttributes<HTMLDivElement> {
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  headerChildren?: string | ElementType
+  headerChildren?: string | ReactNode
   values?: Array<string | number> | Array<Array<string | number>>
 }
 
@@ -37,15 +37,15 @@ export const CWidgetBrand = forwardRef<HTMLDivElement, CWidgetBrandProps>(
     const generatedItems = useMemo(() => {
       return (
         values &&
-        values.map((value: any, index: any) => {
+        values.map((value: any, index: number) => {
           return (
-            <>
+            <React.Fragment key={index}>
               {index % 2 !== 0 && <div className="vr"></div>}
-              <CCol key={index}>
+              <CCol>
                 <div className="fs-5 fw-semibold">{value[0]}</div>
                 <div className="text-uppercase text-medium-emphasis small">{value[1]}</div>
               </CCol>
-            </>
+            </React.Fragment>
           )
         })
       )
@@ -63,7 +63,7 @@ export const CWidgetBrand = forwardRef<HTMLDivElement, CWidgetBrandProps>(
 CWidgetBrand.propTypes = {
   className: PropTypes.string,
   color: colorPropType,
-  headerChildren: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  headerChildren: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   values: PropTypes.arrayOf(PropTypes.any),
 }
 

src/components/widgets/CWidgetDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -8,8 +8,8 @@ import { CCard } from '../card/CCard'
 import { CCardBody } from '../card/CCardBody'
 
 export interface CWidgetDropdownProps extends HTMLAttributes<HTMLDivElement> {
-  action?: string | ElementType
-  chart?: string | ElementType
+  action?: string | ReactNode
+  chart?: string | ReactNode
   /**
    * A string of all className you want applied to the base component. [docs]
    */
@@ -47,8 +47,8 @@ export const CWidgetDropdown = forwardRef<HTMLDivElement, CWidgetDropdownProps>(
 )
 
 CWidgetDropdown.propTypes = {
-  action: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  action: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
   color: colorPropType,
   title: PropTypes.string,

src/components/widgets/CWidgetIcon.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -19,8 +19,8 @@ export interface CWidgetIconProps extends HTMLAttributes<HTMLDivElement> {
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  footer?: string | ElementType
-  icon?: string | ElementType
+  footer?: string | ReactNode
+  icon?: string | ReactNode
   iconPadding?: number
   padding?: number
   title?: string
@@ -52,8 +52,8 @@ export const CWidgetIcon = forwardRef<HTMLDivElement, CWidgetIconProps>(
 CWidgetIcon.propTypes = {
   className: PropTypes.string,
   color: colorPropType,
-  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   iconPadding: PropTypes.number,
   padding: PropTypes.number,
   title: PropTypes.string,

src/components/widgets/CWidgetProgressIcon.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
 import { Colors, colorPropType } from '../Types'
@@ -18,7 +18,7 @@ export interface CWidgetProgressIconProps extends HTMLAttributes<HTMLDivElement>
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  icon?: string | ElementType
+  icon?: string | ReactNode
   /**
    * Sets the color context of the progress bar to one of CoreUI’s themed colors. [docs]
    *
@@ -93,7 +93,7 @@ export const CWidgetProgressIcon = forwardRef<HTMLDivElement, CWidgetProgressIco
 CWidgetProgressIcon.propTypes = {
   className: PropTypes.string,
   color: colorPropType,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   progressColor: PropTypes.string,
   progressValue: PropTypes.number,
   progressWhite: PropTypes.bool,