@coreui/react 4.0.0-rc.1

package/src/components/tooltip/CTooltip.tsx

@@ -0,0 +1,116 @@
+import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import PropTypes from 'prop-types'
+import { createPortal } from 'react-dom'
+import { Manager, Popper, Reference } from 'react-popper'
+import { CSSTransition } from 'react-transition-group'
+
+import { CTooltipContent } from './CTooltipContent'
+import { Triggers, triggerPropType } from '../Types'
+
+export interface CTooltipProps {
+  children: ReactElement
+  /**
+   * Content node for your component. [docs]
+   */
+  content: ReactNode
+  /**
+   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. [docs]
+   */
+  trigger?: Triggers | Triggers[]
+  /**
+   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. [docs]
+   *
+   * @type 'top' | 'right' | 'bottom' | 'left'
+   * @default 'top'
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left'
+  /**
+   * Toggle the visibility of popover component. [docs]
+   *
+   * @default true
+   */
+  visible?: boolean
+}
+
+export const CTooltip: FC<CTooltipProps> = ({
+  children,
+  placement = 'top',
+  trigger = 'hover',
+  visible,
+  ...rest
+}) => {
+  const [_visible, setVisible] = useState(visible)
+
+  const getTransitionClass = (state: string) => {
+    return state === 'entering'
+      ? 'fade'
+      : state === 'entered'
+      ? 'fade show'
+      : state === 'exiting'
+      ? 'fade'
+      : 'fade'
+  }
+
+  return (
+    <Manager>
+      <Reference>
+        {({ ref }) =>
+          React.cloneElement(children, {
+            ref: ref,
+            ...((trigger === 'click' || trigger.includes('click')) && {
+              onClick: () => setVisible(!_visible),
+            }),
+            ...((trigger === 'focus' || trigger.includes('focus')) && {
+              onFocus: () => setVisible(true),
+              onBlur: () => setVisible(false),
+            }),
+            ...((trigger === 'hover' || trigger.includes('hover')) && {
+              onMouseEnter: () => setVisible(true),
+              onMouseLeave: () => setVisible(false),
+            }),
+          })
+        }
+      </Reference>
+      {typeof window !== 'undefined' &&
+        createPortal(
+          <CSSTransition
+            in={_visible}
+            timeout={{
+              enter: 0,
+              exit: 200,
+            }}
+            mountOnEnter
+            unmountOnExit
+          >
+            {(state) => {
+              const transitionClass = getTransitionClass(state)
+              return (
+                <Popper placement={placement}>
+                  {(p) => (
+                    <CTooltipContent
+                      transitionClass={transitionClass}
+                      placementClassNamePostfix={
+                        placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                      }
+                      {...rest}
+                      {...p}
+                    ></CTooltipContent>
+                  )}
+                </Popper>
+              )
+            }}
+          </CSSTransition>,
+          document.body,
+        )}
+    </Manager>
+  )
+}
+
+CTooltip.propTypes = {
+  children: PropTypes.any,
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  trigger: triggerPropType,
+  visible: PropTypes.bool,
+}
+
+CTooltip.displayName = 'CTooltip'

package/src/components/tooltip/CTooltipContent.tsx

@@ -0,0 +1,37 @@
+import React, { CSSProperties, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CTooltipProps } from './CTooltip'
+import { PopperChildrenProps } from 'react-popper'
+
+interface CTooltipContentProps
+  extends Omit<CTooltipProps, 'placement' | 'children' | 'trigger'>,
+    Omit<PopperChildrenProps, 'placementPostfix' | 'style'> {
+  transitionClass?: string
+  style?: CSSProperties
+  placementClassNamePostfix?: string
+}
+
+export const CTooltipContent = forwardRef<HTMLDivElement, CTooltipContentProps>(
+  ({ content, placementClassNamePostfix, arrowProps, transitionClass, style }, ref) => (
+    <div
+      className={classNames(`tooltip bs-tooltip-${placementClassNamePostfix}`, transitionClass)}
+      ref={ref}
+      style={style}
+      role="tooltip"
+    >
+      <div className="tooltip-arrow" {...arrowProps}></div>
+      <div className="tooltip-inner">{content}</div>
+    </div>
+  ),
+)
+
+CTooltipContent.propTypes = {
+  arrowProps: PropTypes.any,
+  content: PropTypes.node,
+  placementClassNamePostfix: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  transitionClass: PropTypes.string,
+}
+
+CTooltipContent.displayName = 'CTooltipContent'

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { act, render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTooltip, CLink } from '../../../index'
+
+test('loads and displays CTooltip component', async () => {
+  const { container } = render(
+    <CTooltip content="content">
+      <CLink>Test</CLink>
+    </CTooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CTooltip customize', async () => {
+  const { container } = render(
+    <CTooltip trigger="hover" placement="right" content="content">
+      <CLink className="link">Test</CLink>
+    </CTooltip>,
+  )
+  const link = document.querySelector('.link')
+  act(() => {
+    if (link !== null) {
+      fireEvent.mouseOver(link)
+    }
+  })
+  expect(container).toMatchSnapshot()
+})
+
+// test('CTooltip on toggle', async () => {
+//   jest.useFakeTimers()
+//   const onToggle = jest.fn()
+//   render(
+//     <CTooltip
+//       trigger="click"
+//       placement="right-end"
+//       content="content"
+//       visible={true}
+//       onToggle={onToggle}
+//     >
+//       <CButton>Test</CButton>
+//     </CTooltip>,
+//   )
+//   expect(onToggle).toHaveBeenCalledTimes(0)
+//   const btn = document.querySelector('.btn')
+//   if (btn !== null) {
+//     fireEvent.click(btn)
+//   }
+//   expect(onToggle).toHaveBeenCalledTimes(1)
+// })

package/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTooltip customize 1`] = `
+<div>
+  <a
+    class="link"
+  >
+    Test
+  </a>
+</div>
+`;
+
+exports[`loads and displays CTooltip component 1`] = `
+<div>
+  <a
+    class=""
+  >
+    Test
+  </a>
+</div>
+`;

package/src/components/widgets/CWidgetStatsA.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+import { CCard } from '../card/CCard'
+import { CCardBody } from '../card/CCardBody'
+
+export interface CWidgetStatsAProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Action node for your component. [docs]
+   */
+  action?: ReactNode
+  /**
+   * Chart node for your component. [docs]
+   */
+  chart?: string | ReactNode
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Title node for your component. [docs]
+   */
+  title?: string | ReactNode
+  /**
+   * Value node for your component. [docs]
+   */
+  value?: string | number | ReactNode
+}
+
+export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
+  ({ action, chart, className, color, title, value, ...rest }, ref) => {
+    const _className = classNames(
+      { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
+      className,
+    )
+
+    return (
+      <CCard className={_className} {...rest} ref={ref}>
+        <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+          <div>
+            {value && <div className="fs-4 fw-semibold">{value}</div>}
+            {title && <div>{title}</div>}
+          </div>
+          {action}
+        </CCardBody>
+        {chart}
+      </CCard>
+    )
+  },
+)
+
+CWidgetStatsA.propTypes = {
+  action: PropTypes.node,
+  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  color: colorPropType,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+}
+
+CWidgetStatsA.displayName = 'CWidgetStatsA'

package/src/components/widgets/CWidgetStatsB.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+
+import { Colors, colorPropType } from '../Types'
+
+import { CCard } from '../card/CCard'
+import { CCardBody } from '../card/CCardBody'
+import { CProgress, CProgressProps } from '../progress/CProgress'
+
+export interface CWidgetStatsBProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Colors have been inverted from their default dark shade. [docs]
+   */
+  inverse?: boolean
+  /**
+   * Sets the color context of the progress bar to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  progress?: CProgressProps
+  /**
+   * Title node for your component. [docs]
+   */
+  title?: string | ReactNode
+  /**
+   * Helper text for your component. [docs]
+   */
+  text?: string
+  /**
+   * Value node for your component. [docs]
+   */
+  value?: string | number | ReactNode
+}
+
+export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
+  ({ className, color, inverse, progress, text, title, value, ...rest }, ref) => {
+    return (
+      <CCard
+        className={className}
+        color={color}
+        {...(inverse && { textColor: 'high-emphasis-inverse' })}
+        {...rest}
+        ref={ref}
+      >
+        <CCardBody>
+          {value && <div className="fs-4 fw-semibold">{value}</div>}
+          {title && <div>{title}</div>}
+          <CProgress className="my-2" height={4} {...(inverse && { white: true })} {...progress} />
+          {text && (
+            <small className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
+              {text}
+            </small>
+          )}
+        </CCardBody>
+      </CCard>
+    )
+  },
+)
+
+CWidgetStatsB.propTypes = {
+  className: PropTypes.string,
+  color: colorPropType,
+  inverse: PropTypes.bool,
+  progress: PropTypes.object,
+  text: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+}
+
+CWidgetStatsB.displayName = 'CWidgetCWidgetStatsB'

package/src/components/widgets/CWidgetStatsC.tsx

@@ -0,0 +1,93 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+
+import { Colors, colorPropType } from '../Types'
+
+import { CCard } from '../card/CCard'
+import { CCardBody } from '../card/CCardBody'
+import { CProgress, CProgressProps } from '../progress/CProgress'
+
+export interface CWidgetStatsCProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Icon node for your component. [docs]
+   */
+  icon?: string | ReactNode
+  /**
+   * Colors have been inverted from their default dark shade. [docs]
+   */
+  inverse?: boolean
+  /**
+   * Sets the color context of the progress bar to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  progress?: CProgressProps
+  /**
+   * Title node for your component. [docs]
+   */
+  title?: string | ReactNode
+  /**
+   * Value node for your component. [docs]
+   */
+  value?: string | number | ReactNode
+}
+
+export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
+  ({ className, color, icon, inverse, progress, title, value, ...rest }, ref) => {
+    return (
+      <CCard
+        className={className}
+        color={color}
+        {...(inverse && { textColor: 'high-emphasis-inverse' })}
+        {...rest}
+        ref={ref}
+      >
+        <CCardBody>
+          {icon && (
+            <div className={`text-medium-emphasis${inverse ? '-inverse' : ''} text-end mb-4`}>
+              {icon}
+            </div>
+          )}
+          {value && (
+            <div className={`text-high-emphasis${inverse ? '-inverse' : ''} fs-4 fw-semibold`}>
+              {value}
+            </div>
+          )}
+          {title && (
+            <div className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
+              {title}
+            </div>
+          )}
+          <CProgress
+            className="mt-3 mb-0"
+            height={4}
+            {...(inverse && { white: true })}
+            {...progress}
+          />
+        </CCardBody>
+      </CCard>
+    )
+  },
+)
+
+CWidgetStatsC.propTypes = {
+  className: PropTypes.string,
+  color: colorPropType,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  inverse: PropTypes.bool,
+  progress: PropTypes.object,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+}
+
+CWidgetStatsC.displayName = 'CWidgetStatsCWidgetStatsC'

package/src/components/widgets/CWidgetStatsD.tsx

@@ -0,0 +1,85 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+import { CCard } from '../card/CCard'
+import { CCardBody } from '../card/CCardBody'
+import { CCardHeader } from '../card/CCardHeader'
+import { CCol } from '../grid/CCol'
+
+type Value = {
+  title?: string | ReactNode
+  value?: number | string | ReactNode
+}
+
+export interface CWidgetStatsDProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Chart node for your component. [docs]
+   */
+  chart?: string | ReactNode
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Icon node for your component. [docs]
+   */
+  icon?: string | ReactNode
+  /**
+   * Values and titles for your component. [docs]
+   */
+  values?: Value[]
+}
+
+export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
+  ({ className, chart, color, icon, values, ...rest }, ref) => {
+    const _className = classNames(className)
+    const classNameHeader = classNames(
+      'position-relative d-flex justify-content-center align-items-center',
+      {
+        [`bg-${color}`]: color,
+      },
+    )
+
+    return (
+      <CCard className={_className} {...rest} ref={ref}>
+        <CCardHeader className={classNameHeader}>
+          {icon}
+          {chart}
+        </CCardHeader>
+        <CCardBody className="row text-center">
+          {values &&
+            values.map((value: Value, index: number) => {
+              return (
+                <React.Fragment key={index}>
+                  {index % 2 !== 0 && <div className="vr"></div>}
+                  <CCol>
+                    <div className="fs-5 fw-semibold">{value.value}</div>
+                    <div className="text-uppercase text-medium-emphasis small">{value.title}</div>
+                  </CCol>
+                </React.Fragment>
+              )
+            })}
+        </CCardBody>
+      </CCard>
+    )
+  },
+)
+
+CWidgetStatsD.propTypes = {
+  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  color: colorPropType,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  values: PropTypes.arrayOf(PropTypes.any),
+}
+
+CWidgetStatsD.displayName = 'CWidgetStatsD'

package/src/components/widgets/CWidgetStatsE.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CCard } from '../card/CCard'
+import { CCardBody } from '../card/CCardBody'
+
+export interface CWidgetStatsEProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Chart node for your component. [docs]
+   */
+  chart?: string | ReactNode
+  /**
+   * Title node for your component. [docs]
+   */
+  title?: string | ReactNode
+  /**
+   * Value node for your component. [docs]
+   */
+  value?: string | number | ReactNode
+}
+
+export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
+  ({ chart, className, title, value, ...rest }, ref) => {
+    const _className = classNames(className)
+
+    return (
+      <CCard className={_className} {...rest} ref={ref}>
+        <CCardBody className="text-center">
+          {title && (
+            <div className="text-medium-emphasis small text-uppercase fw-semibold">{title}</div>
+          )}
+          {value && <div className="fs-6 fw-semibold py-3">{value}</div>}
+          {chart}
+        </CCardBody>
+      </CCard>
+    )
+  },
+)
+
+CWidgetStatsE.propTypes = {
+  children: PropTypes.node,
+  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+}
+
+CWidgetStatsE.displayName = 'CWidgetStatsE'

package/src/components/widgets/CWidgetStatsF.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+import { CCard } from '../card/CCard'
+import { CCardBody } from '../card/CCardBody'
+import { CCardFooter } from '../card/CCardFooter'
+
+export interface CWidgetStatsFProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Footer node for your component. [docs]
+   */
+  footer?: string | ReactNode
+  /**
+   * Icon node for your component. [docs]
+   */
+  icon?: string | ReactNode
+  /**
+   * Set padding of your component. [docs]
+   */
+  padding?: boolean
+  /**
+   * Title node for your component. [docs]
+   */
+  title?: string | ReactNode
+  /**
+   * Value node for your component. [docs]
+   */
+  value?: string | number | ReactNode
+}
+
+export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
+  ({ className, color, footer, icon, padding = true, title, value, ...rest }, ref) => {
+    const _className = classNames(className)
+
+    return (
+      <CCard className={_className} {...rest} ref={ref}>
+        <CCardBody className={`d-flex align-items-center ${padding === false && 'p-0'}`}>
+          <div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
+          <div>
+            <div className={`fs-6 fw-semibold text-${color}`}>{value}</div>
+            <div className="text-medium-emphasis text-uppercase fw-semibold small">{title}</div>
+          </div>
+        </CCardBody>
+        {footer && <CCardFooter>{footer}</CCardFooter>}
+      </CCard>
+    )
+  },
+)
+
+CWidgetStatsF.propTypes = {
+  className: PropTypes.string,
+  color: colorPropType,
+  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  padding: PropTypes.bool,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+}
+
+CWidgetStatsF.displayName = 'CWidgetStatsF'