@coreui/react-pro 4.0.0-rc.1

package/src/components/loading-button/__tests__/CLoadingButton.spec.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CLoadingButton } from '../../../index'
+
+test('loads and displays CLoadingButton component', async () => {
+  const { container } = render(<CLoadingButton />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CLoadingButton customize', async () => {
+  const { container } = render(
+    <CLoadingButton
+      className="bazinga"
+      disabledOnLoading={true}
+      loading={true}
+      spinnerType="grow"
+      timeout={1000}
+    >
+      Text
+    </CLoadingButton>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('btn-loading')
+  expect(container.firstChild).toHaveClass('is-loading')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveAttribute('disabled', '')
+  expect(container.firstChild).toHaveTextContent('Text')
+  if (container.firstChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.firstChild.firstChild).toHaveClass('btn-loading-spinner')
+    expect(container.firstChild.firstChild).toHaveClass('spinner-grow')
+    expect(container.firstChild.firstChild).toHaveClass('spinner-grow-sm')
+  }
+})
+
+test('CLoadingButton test event on click', async () => {
+  const onClick = jest.fn()
+  render(<CLoadingButton onClick={onClick}>Text</CLoadingButton>)
+  expect(onClick).toHaveBeenCalledTimes(0)
+  const button = document.querySelector('.btn-loading')
+  if (button !== null) {
+    fireEvent.click(button)
+  }
+  expect(onClick).toHaveBeenCalledTimes(1)
+})

package/src/components/loading-button/__tests__/__snapshots__/CLoadingButton.spec.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CLoadingButton customize 1`] = `
+<div>
+  <button
+    class="btn btn-primary btn-loading is-loading bazinga disabled"
+    disabled=""
+    type="button"
+  >
+    <div
+      class="spinner-grow text-undefined spinner-grow-sm btn-loading-spinner"
+      role="status"
+    >
+      <span
+        class="visually-hidden"
+      >
+        Loading...
+      </span>
+    </div>
+    Text
+  </button>
+</div>
+`;
+
+exports[`loads and displays CLoadingButton component 1`] = `
+<div>
+  <button
+    class="btn btn-primary btn-loading"
+    type="button"
+  >
+    <div
+      class="spinner-border text-undefined spinner-border-sm btn-loading-spinner"
+      role="status"
+    >
+      <span
+        class="visually-hidden"
+      >
+        Loading...
+      </span>
+    </div>
+  </button>
+</div>
+`;

package/src/components/modal/CModal.tsx

@@ -0,0 +1,240 @@
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CSSTransition } from 'react-transition-group'
+
+import { useForkedRef } from '../../utils/hooks'
+
+import { CBackdrop } from '../backdrop/CBackdrop'
+import { CModalContent } from './CModalContent'
+import { CModalDialog } from './CModalDialog'
+
+export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Align the modal in the center or top of the screen. [docs]
+   *
+   * @default 'top'
+   */
+  alignment?: 'top' | 'center'
+  /**
+   * Apply a backdrop on body while modal is open. [docs]
+   * @default true
+   */
+  backdrop?: boolean | 'static'
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * @ignore
+   */
+  duration?: number
+  /**
+   * Set modal to covers the entire user viewport. [docs]
+   */
+  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * Closes the modal when escape key is pressed. [docs]
+   * @default true
+   */
+  keyboard?: boolean
+  /**
+   * Method called before the dissmiss animation has started. [docs]
+   */
+  onDismiss?: () => void
+  /**
+   * Generates modal using createPortal. [docs]
+   */
+  portal?: boolean
+  /**
+   * Create a scrollable modal that allows scrolling the modal body. [docs]
+   */
+  scrollable?: boolean
+  /**
+   * Size the component small, large, or extra large. [docs]
+   */
+  size?: 'sm' | 'lg' | 'xl'
+  /**
+   * Remove animation to create modal that simply appear rather than fade in to view. [docs]
+   */
+  transition?: boolean
+  /**
+   * Toggle the visibility of modal component. [docs]
+   */
+  visible?: boolean
+}
+
+interface ModalContextProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CModalContext = createContext({} as ModalContextProps)
+
+export const CModal = forwardRef<HTMLDivElement, CModalProps>(
+  (
+    {
+      children,
+      alignment,
+      backdrop = true,
+      className,
+      duration = 150,
+      fullscreen,
+      keyboard = true,
+      onDismiss,
+      portal = true,
+      scrollable,
+      size,
+      transition = true,
+      visible,
+    },
+    ref,
+  ) => {
+    const modalRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, modalRef)
+
+    const [_visible, setVisible] = useState(visible)
+    const [staticBackdrop, setStaticBackdrop] = useState(false)
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    const contextValues = {
+      visible: _visible,
+      setVisible,
+    }
+
+    const handleDismiss = () => {
+      if (backdrop === 'static') {
+        return setStaticBackdrop(true)
+      }
+      return onDismiss && onDismiss()
+    }
+
+    useLayoutEffect(() => {
+      setTimeout(() => setStaticBackdrop(false), duration)
+    }, [staticBackdrop])
+
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'd-block'
+        : state === 'entered'
+        ? 'show d-block'
+        : state === 'exiting'
+        ? 'd-block'
+        : ''
+    }
+    const _className = classNames(
+      'modal',
+      {
+        'modal-static': staticBackdrop,
+        fade: transition,
+      },
+      className,
+    )
+
+    // Set focus to modal after open
+    useLayoutEffect(() => {
+      if (_visible) {
+        document.body.classList.add('modal-open')
+        setTimeout(
+          () => {
+            modalRef.current?.focus()
+          },
+          !transition ? 0 : duration,
+        )
+      } else {
+        document.body.classList.remove('modal-open')
+      }
+      return () => document.body.classList.remove('modal-open')
+    }, [_visible])
+
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === 'Escape' && keyboard) {
+          return handleDismiss()
+        }
+      },
+      [modalRef, handleDismiss],
+    )
+
+    const modal = (ref?: React.Ref<HTMLDivElement>, transitionClass?: string) => {
+      return (
+        <CModalContext.Provider value={contextValues}>
+          <div
+            className={classNames(_className, transitionClass)}
+            tabIndex={-1}
+            role="dialog"
+            ref={ref}
+          >
+            <CModalDialog
+              alignment={alignment}
+              fullscreen={fullscreen}
+              scrollable={scrollable}
+              size={size}
+              onClick={(event) => event.stopPropagation()}
+            >
+              <CModalContent>{children}</CModalContent>
+            </CModalDialog>
+          </div>
+        </CModalContext.Provider>
+      )
+    }
+
+    return (
+      <>
+        <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
+          <CSSTransition
+            in={_visible}
+            timeout={!transition ? 0 : duration}
+            onExit={onDismiss}
+            mountOnEnter
+            unmountOnExit
+          >
+            {(state) => {
+              const transitionClass = getTransitionClass(state)
+              return typeof window !== 'undefined' && portal
+                ? createPortal(modal(forkedRef, transitionClass), document.body)
+                : modal(forkedRef, transitionClass)
+            }}
+          </CSSTransition>
+        </div>
+        {typeof window !== 'undefined' && portal
+          ? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)
+          : backdrop && <CBackdrop visible={_visible} />}
+      </>
+    )
+  },
+)
+
+CModal.propTypes = {
+  alignment: PropTypes.oneOf(['top', 'center']),
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  duration: PropTypes.number,
+  fullscreen: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+  keyboard: PropTypes.bool,
+  onDismiss: PropTypes.func,
+  portal: PropTypes.bool,
+  scrollable: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+  transition: PropTypes.bool,
+  visible: PropTypes.bool,
+}
+
+CModal.displayName = 'CModal'

package/src/components/modal/CModalBody.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CModalBody = forwardRef<HTMLDivElement, CModalBodyProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('modal-body', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CModalBody.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CModalBody.displayName = 'CModalBody'

package/src/components/modal/CModalContent.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CModalContentProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CModalContent = forwardRef<HTMLDivElement, CModalContentProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('modal-content', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CModalContent.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CModalContent.displayName = 'CModalContent'

package/src/components/modal/CModalDialog.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CModalDialogProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Align the modal in the center or top of the screen. [docs]
+   *
+   * @default 'top'
+   */
+  alignment?: 'top' | 'center'
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Set modal to covers the entire user viewport. [docs]
+   */
+  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * Does the modal dialog itself scroll, or does the whole dialog scroll within the window. [docs]
+   */
+  scrollable?: boolean
+  /**
+   * Size the component small, large, or extra large. [docs]
+   */
+  size?: 'sm' | 'lg' | 'xl'
+}
+
+export const CModalDialog = forwardRef<HTMLDivElement, CModalDialogProps>(
+  ({ children, alignment, className, fullscreen, scrollable, size, ...rest }, ref) => {
+    const _className = classNames(
+      'modal-dialog',
+      {
+        'modal-dialog-centered': alignment === 'center',
+        [typeof fullscreen === 'boolean'
+          ? 'modal-fullscreen'
+          : `modal-fullscreen-${fullscreen}-down`]: fullscreen,
+        'modal-dialog-scrollable': scrollable,
+        [`modal-${size}`]: size,
+      },
+      className,
+    )
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CModalDialog.propTypes = {
+  alignment: PropTypes.oneOf(['top', 'center']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  fullscreen: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+  scrollable: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+}
+
+CModalDialog.displayName = 'CModalDialog'

package/src/components/modal/CModalFooter.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CModalFooter = forwardRef<HTMLDivElement, CModalFooterProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('modal-footer', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CModalFooter.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CModalFooter.displayName = 'CModalFooter'

package/src/components/modal/CModalHeader.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { CModalContext } from './CModal'
+import { CCloseButton } from '../close-button/CCloseButton'
+import classNames from 'classnames'
+
+export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Add a close button component to the header. [docs]
+   *
+   * @default true
+   */
+  closeButton?: boolean
+}
+
+export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
+  ({ children, className, closeButton = true, ...rest }, ref) => {
+    const { setVisible } = useContext(CModalContext)
+    const _className = classNames('modal-header', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+        {closeButton && <CCloseButton onClick={() => setVisible(false)} />}
+      </div>
+    )
+  },
+)
+
+CModalHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  closeButton: PropTypes.bool,
+}
+
+CModalHeader.displayName = 'CModalHeader'

package/src/components/modal/CModalTitle.tsx

@@ -0,0 +1,36 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'h5'
+   */
+  component?: string | ElementType
+}
+
+export const CModalTitle = forwardRef<HTMLHeadElement, CModalTitleProps>(
+  ({ children, component: Component = 'h5', className, ...rest }, ref) => {
+    const _className = classNames('modal-title', className)
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CModalTitle.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CModalTitle.displayName = 'CModalTitle'

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CModal } from '../../../index'
+
+test('loads and displays CModal component', async () => {
+  const { container } = render(<CModal portal={false}>Test</CModal>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModal customize', async () => {
+  const { container } = render(
+    <CModal
+      alignment="center"
+      className="bazinga"
+      duration={100}
+      fullscreen="xl"
+      scrollable={true}
+      size="xl"
+      visible={true}
+    >
+      Test
+    </CModal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CModal dialog close on press ESC', async () => {
+  jest.useFakeTimers()
+  const onDismiss = jest.fn()
+  render(
+    <CModal onDismiss={onDismiss} portal={false} visible>
+      Test
+    </CModal>,
+  )
+  expect(onDismiss).toHaveBeenCalledTimes(0)
+  const modal = document.querySelector('.modal')
+  if (modal !== null) {
+    fireEvent.keyDown(modal, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    })
+  }
+  jest.runAllTimers()
+  expect(onDismiss).toHaveBeenCalledTimes(1)
+  jest.useRealTimers()
+})
+
+// test('CModal dialog close on backdrop', async () => {
+//   jest.useFakeTimers()
+//   const onDismiss = jest.fn()
+//   render(
+//     <CModal onDismiss={onDismiss} portal={false} visible={true}>
+//       Test
+//     </CModal>,
+//   )
+//   expect(onDismiss).toHaveBeenCalledTimes(0)
+//   const backdrop = document.querySelector('.modal-backdrop')
+//   if (backdrop !== null) {
+//     fireEvent.click(backdrop)
+//   }
+//   jest.runAllTimers()
+//   expect(onDismiss).toHaveBeenCalledTimes(1)
+//   jest.useRealTimers()
+// })

package/src/components/modal/__tests__/CModalBody.spec.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CModalBody } from '../../../index'
+
+test('loads and displays CModalBody component', async () => {
+  const { container } = render(<CModalBody>Test</CModalBody>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalBody customize', async () => {
+  const { container } = render(<CModalBody className="bazinga">Test</CModalBody>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-body')
+})

package/src/components/modal/__tests__/CModalContent.spec.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CModalContent } from '../../../index'
+
+test('loads and displays CModalContent component', async () => {
+  const { container } = render(<CModalContent>Test</CModalContent>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalContent customize', async () => {
+  const { container } = render(<CModalContent className="bazinga">Test</CModalContent>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-content')
+})

package/src/components/modal/__tests__/CModalDialog.spec.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CModalDialog } from '../../../index'
+
+test('loads and displays CModalDialog component', async () => {
+  const { container } = render(<CModalDialog>Test</CModalDialog>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalDialog customize', async () => {
+  const { container } = render(
+    <CModalDialog
+      className="bazinga"
+      alignment="center"
+      fullscreen="lg"
+      scrollable={true}
+      size="xl"
+    >
+      Test
+    </CModalDialog>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-dialog')
+  expect(container.firstChild).toHaveClass('modal-dialog-centered')
+  expect(container.firstChild).toHaveClass('modal-fullscreen-lg-down')
+  expect(container.firstChild).toHaveClass('modal-dialog-scrollable')
+  expect(container.firstChild).toHaveClass('modal-xl')
+})