@coreui/react-pro 4.0.0-rc.1

package/src/components/header/__tests__/__snapshots__/CHeaderText.spec.tsx.snap

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

package/src/components/header/__tests__/__snapshots__/CHeaderToggler.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CHeaderToggler customize 1`] = `
+<div>
+  <button
+    class="header-toggler bazinga"
+    type="button"
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`loads and displays CHeaderToggler component 1`] = `
+<div>
+  <button
+    class="header-toggler"
+    type="button"
+  >
+    Test
+  </button>
+</div>
+`;

package/src/components/image/CImage.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef, ImgHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CImageProps extends ImgHTMLAttributes<HTMLOrSVGImageElement> {
+  /**
+   * Set the horizontal aligment.
+   */
+  align?: 'start' | 'center' | 'end'
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Make image responsive. [docs]
+   */
+  fluid?: boolean
+  /**
+   * Make image rounded. [docs]
+   */
+  rounded?: boolean
+  /**
+   * Give an image a rounded 1px border appearance. [docs]
+   */
+  thumbnail?: boolean
+}
+
+export const CImage = forwardRef<HTMLImageElement, CImageProps>(
+  ({ align, className, fluid, rounded, thumbnail, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`float-${align}`]: align && (align === 'start' || align === 'end'),
+        'd-block mx-auto': align && align === 'center',
+        'img-fluid': fluid,
+        rounded: rounded,
+        'img-thumbnail': thumbnail,
+      },
+      className,
+    )
+    return <img className={_className} {...rest} ref={ref} />
+  },
+)
+
+CImage.propTypes = {
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+  className: PropTypes.string,
+  fluid: PropTypes.bool,
+  rounded: PropTypes.bool,
+  thumbnail: PropTypes.bool,
+}
+
+CImage.displayName = 'CImage'

package/src/components/image/__tests__/CImage.spec.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CImage } from '../../../index'
+
+test('loads and displays CImage component', async () => {
+  const { container } = render(<CImage />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CImage customize one', async () => {
+  const { container } = render(<CImage align="end" />)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('float-end')
+})
+
+test('CImage customize two', async () => {
+  const { container } = render(
+    <CImage className="bazinga" align="center" fluid={true} rounded={true} thumbnail={true} />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('d-block')
+  expect(container.firstChild).toHaveClass('mx-auto')
+  expect(container.firstChild).toHaveClass('img-fluid')
+  expect(container.firstChild).toHaveClass('rounded')
+  expect(container.firstChild).toHaveClass('img-thumbnail')
+  expect(container.firstChild).toHaveClass('bazinga')
+})

package/src/components/image/__tests__/__snapshots__/CImage.spec.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CImage customize one 1`] = `
+<div>
+  <img
+    class="float-end"
+  />
+</div>
+`;
+
+exports[`CImage customize two 1`] = `
+<div>
+  <img
+    class="d-block mx-auto img-fluid rounded img-thumbnail bazinga"
+  />
+</div>
+`;
+
+exports[`loads and displays CImage component 1`] = `
+<div>
+  <img
+    class=""
+  />
+</div>
+`;

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './widgets'

package/src/components/link/CLink.tsx

@@ -0,0 +1,64 @@
+import React, { AllHTMLAttributes, ElementType, forwardRef, MouseEvent } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CLinkProps extends AllHTMLAttributes<HTMLElement> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'a'
+   */
+  component?: string | ElementType
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * The href attribute specifies the URL of the page the link goes to. [docs]
+   */
+  href?: string
+}
+
+export const CLink = forwardRef<HTMLButtonElement | HTMLAnchorElement, CLinkProps>(
+  ({ children, active, className, component: Component = 'a', disabled, ...rest }, ref) => {
+    // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
+    const _className = classNames(className, { active, disabled })
+
+    return (
+      <Component
+        className={_className}
+        {...(active && { 'aria-current': 'page' })}
+        {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
+        {...((Component === 'a' || Component === 'button') && {
+          onClick: (event: MouseEvent<HTMLElement>) => {
+            event.preventDefault
+            !disabled && rest.onClick && rest.onClick(event)
+          },
+        })}
+        disabled={disabled}
+        {...rest}
+        ref={ref}
+      >
+        {children}
+      </Component>
+    )
+  },
+)
+
+CLink.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+  disabled: PropTypes.bool,
+}
+
+CLink.displayName = 'CLink'

package/src/components/link/__tests__/CLink.spec.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CLink } from '../../../index'
+
+test('loads and displays CLink component', async () => {
+  const { container } = render(<CLink>Test</CLink>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CLink customize', async () => {
+  const { container } = render(
+    <CLink className="bazinga" active={true} component="button" disabled type="submit">
+      Test
+    </CLink>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('active')
+  expect(container.firstChild).toHaveAttribute('disabled')
+})
+
+test('CLink click on button', async () => {
+  const onClick = jest.fn()
+  render(
+    <CLink onClick={onClick} className="bazinga">
+      Test
+    </CLink>,
+  )
+  expect(onClick).toHaveBeenCalledTimes(0)
+  const link = document.querySelector('.bazinga')
+  if (link !== null) {
+    fireEvent.click(link)
+  }
+  expect(onClick).toHaveBeenCalledTimes(1)
+})
+
+test('CLink click on disabled button', async () => {
+  const click = jest.fn()
+  render(
+    <CLink onClick={click} className="bazinga" component="button" disabled>
+      Test
+    </CLink>,
+  )
+  expect(click).toHaveBeenCalledTimes(0)
+  const link = document.querySelector('.bazinga')
+  if (link !== null) {
+    fireEvent.click(link)
+  }
+  expect(click).toHaveBeenCalledTimes(0)
+})

package/src/components/link/__tests__/__snapshots__/CLink.spec.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CLink customize 1`] = `
+<div>
+  <button
+    aria-current="page"
+    class="bazinga active disabled"
+    disabled=""
+    type="submit"
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`loads and displays CLink component 1`] = `
+<div>
+  <a
+    class=""
+  >
+    Test
+  </a>
+</div>
+`;

package/src/components/list-group/CListGroup.tsx

@@ -0,0 +1,66 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'ul'
+   */
+  component?: string | ElementType
+  /**
+   * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`). [docs]
+   */
+  flush?: boolean
+  /**
+   * Specify a layout type. [docs]
+   */
+  layout?:
+    | 'horizontal'
+    | 'horizontal-sm'
+    | 'horizontal-md'
+    | 'horizontal-lg'
+    | 'horizontal-xl'
+    | 'horizontal-xxl'
+}
+
+export const CListGroup = forwardRef<HTMLDivElement | HTMLUListElement, CListGroupProps>(
+  ({ children, className, component: Component = 'ul', flush, layout }, ref) => {
+    const _className = classNames(
+      'list-group',
+      {
+        'list-group-flush': flush,
+        [`list-group-${layout}`]: layout,
+      },
+      className,
+    )
+
+    return (
+      <Component className={_className} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CListGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+  flush: PropTypes.bool,
+  layout: PropTypes.oneOf([
+    'horizontal',
+    'horizontal-sm',
+    'horizontal-md',
+    'horizontal-lg',
+    'horizontal-xl',
+    'horizontal-xxl',
+  ]),
+}
+
+CListGroup.displayName = 'CListGroup'

package/src/components/list-group/CListGroupItem.tsx

@@ -0,0 +1,81 @@
+import React, { ElementType, HTMLAttributes, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+import { CLink } from '../link/CLink'
+
+export interface CListGroupItemProps
+  extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * A string of all className you want applied to the 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
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'li'
+   */
+  component?: string | ElementType
+}
+
+export const CListGroupItem = forwardRef<
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
+  CListGroupItemProps
+>(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
+  const _className = classNames(
+    'list-group-item',
+    {
+      [`list-group-item-${color}`]: color,
+      'list-group-item-action': component === 'a' || component === 'button',
+      active,
+      disabled,
+    },
+    className,
+  )
+
+  const Component = component === 'a' || component === 'button' ? CLink : component
+
+  rest = {
+    ...((component === 'a' || component === 'button') && {
+      active,
+      disabled,
+      component,
+      ref: ref,
+    }),
+    ...(active && { 'aria-current': true }),
+    ...(disabled && { 'aria-disabled': true }),
+    ...rest,
+  }
+
+  return (
+    <Component className={_className} {...rest}>
+      {children}
+    </Component>
+  )
+})
+
+CListGroupItem.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  component: PropTypes.elementType,
+  disabled: PropTypes.bool,
+}
+
+CListGroupItem.displayName = 'CListGroupItem'

package/src/components/list-group/__tests__/CListGroup.spec.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CListGroup, CListGroupItem } from '../../../index'
+
+test('loads and displays CListGroup component', async () => {
+  const { container } = render(<CListGroup>Test</CListGroup>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CListGroup customize', async () => {
+  const { container } = render(
+    <CListGroup className="bazinga" component="h3" flush={true} layout="horizontal-xl">
+      Test
+    </CListGroup>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('list-group')
+  expect(container.firstChild).toHaveClass('list-group-flush')
+  expect(container.firstChild).toHaveClass('list-group-horizontal-xl')
+})
+
+test('CListGroup example', async () => {
+  const { container } = render(
+    <CListGroup>
+      <CListGroupItem>A</CListGroupItem>
+      <CListGroupItem>B</CListGroupItem>
+      <CListGroupItem>C</CListGroupItem>
+    </CListGroup>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/list-group/__tests__/CListGroupItem.spec.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CListGroupItem } from '../../../index'
+
+test('loads and displays CListGroupItem component', async () => {
+  const { container } = render(<CListGroupItem>Test</CListGroupItem>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CListGroupItem customize', async () => {
+  const { container } = render(
+    <CListGroupItem
+      className="bazinga"
+      active={true}
+      color="warning"
+      disabled={true}
+      component="button"
+    >
+      Test
+    </CListGroupItem>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('list-group-item')
+  expect(container.firstChild).toHaveClass('list-group-item-action')
+  expect(container.firstChild).toHaveClass('active')
+  expect(container.firstChild).toHaveClass('disabled')
+})

package/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroup customize 1`] = `
+<div>
+  <h3
+    class="list-group list-group-flush list-group-horizontal-xl bazinga"
+  >
+    Test
+  </h3>
+</div>
+`;
+
+exports[`CListGroup example 1`] = `
+<div>
+  <ul
+    class="list-group"
+  >
+    <li
+      class="list-group-item"
+    >
+      A
+    </li>
+    <li
+      class="list-group-item"
+    >
+      B
+    </li>
+    <li
+      class="list-group-item"
+    >
+      C
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`loads and displays CListGroup component 1`] = `
+<div>
+  <ul
+    class="list-group"
+  >
+    Test
+  </ul>
+</div>
+`;

package/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroupItem customize 1`] = `
+<div>
+  <button
+    aria-current="true"
+    aria-disabled="true"
+    class="list-group-item list-group-item-warning list-group-item-action active disabled bazinga active disabled"
+    disabled=""
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`loads and displays CListGroupItem component 1`] = `
+<div>
+  <li
+    class="list-group-item"
+  >
+    Test
+  </li>
+</div>
+`;

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

@@ -0,0 +1,93 @@
+import React, { ButtonHTMLAttributes, useEffect, useState, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CButton } from './../button/CButton'
+import { CSpinner } from './../spinner/CSpinner'
+export interface CLoadingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Makes button disabled when loading. [docs]
+   */
+  disabledOnLoading?: boolean
+  /**
+   * Loading state (set to true to start animation). [docs]
+   */
+  loading?: boolean
+  /**
+   * @ignore
+   */
+  onClick?: () => void
+  /**
+   * Sets type of spinner. [docs]
+   *
+   * @type {'border' | 'grow'}
+   * @default 'border'
+   */
+  spinnerType?: 'border' | 'grow'
+  /**
+   * Automatically starts loading animation and stops after a determined amount of milliseconds. [docs]
+   */
+  timeout?: number
+}
+
+export const CLoadingButton = forwardRef<HTMLButtonElement, CLoadingButtonProps>(
+  (
+    {
+      children,
+      className,
+      disabledOnLoading,
+      loading,
+      onClick,
+      spinnerType = 'border',
+      timeout,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_loading, setLoading] = useState<boolean>()
+
+    useEffect(() => {
+      setLoading(loading)
+    }, [loading])
+
+    const handleOnClick = () => {
+      onClick && onClick()
+      if (timeout) {
+        setLoading(true)
+        setTimeout(() => {
+          setLoading(false)
+        }, timeout)
+      }
+    }
+
+    const _className = classNames('btn-loading', _loading && 'is-loading', className)
+
+    return (
+      <CButton
+        className={_className}
+        {...(disabledOnLoading && _loading && { disabled: true })}
+        onClick={handleOnClick}
+        {...rest}
+        ref={ref}
+      >
+        <CSpinner className="btn-loading-spinner" size="sm" variant={spinnerType} />
+        {children}
+      </CButton>
+    )
+  },
+)
+
+CLoadingButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  disabledOnLoading: PropTypes.bool,
+  loading: PropTypes.bool,
+  onClick: PropTypes.func,
+  spinnerType: PropTypes.oneOf(['border', 'grow']),
+  timeout: PropTypes.number,
+}
+
+CLoadingButton.displayName = 'CLoadingButton'