@coreui/react-pro 4.0.0-rc.1

package/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx

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

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COffcanvas customize and event on click backdrop 1`] = `
+<div>
+  <div
+    class="offcanvas offcanvas-end show bazinga"
+    style="visibility: visible;"
+    tabindex="-1"
+  >
+    Test
+  </div>
+  <div
+    class="modal-backdrop fade show"
+  />
+</div>
+`;
+
+exports[`COffcanvas customize and event on keypress 1`] = `
+<div>
+  <div
+    class="offcanvas offcanvas-end show bazinga"
+    style="visibility: visible;"
+    tabindex="-1"
+  >
+    Test
+  </div>
+  <div
+    class="modal-backdrop fade show"
+  />
+</div>
+`;
+
+exports[`COffcanvas customize one 1`] = `
+<div>
+  <div
+    class="offcanvas offcanvas-start bazinga"
+    style="visibility: hidden;"
+    tabindex="-1"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays COffcanvas component 1`] = `<div />`;

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COffcanvasBody customize 1`] = `
+<div>
+  <div
+    class="offcanvas-body bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays COffcanvasBody component 1`] = `
+<div>
+  <div
+    class="offcanvas-body"
+  />
+</div>
+`;

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.tsx.snap

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

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COffcanvasTitle customize 1`] = `
+<div>
+  <div
+    class="offcanvas-title bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays COffcanvasTitle component 1`] = `
+<div>
+  <h5
+    class="offcanvas-title"
+  />
+</div>
+`;

package/src/components/pagination/CPagination.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CPaginationProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * Set the alignment of pagination components. [docs]
+   */
+  align?: 'start' | 'center' | 'end'
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Size the component small or large. [docs]
+   */
+  size?: 'sm' | 'lg'
+}
+
+export const CPagination = forwardRef<HTMLUListElement, CPaginationProps>(
+  ({ children, align, className, size, ...rest }, ref) => {
+    const _className = classNames(
+      'pagination',
+      {
+        [`justify-content-${align}`]: align,
+        [`pagination-${size}`]: size,
+      },
+      className,
+    )
+    return (
+      <nav ref={ref} {...rest}>
+        <ul className={_className}>{children}</ul>
+      </nav>
+    )
+  },
+)
+
+CPagination.propTypes = {
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+}
+
+CPagination.displayName = 'CPagination'

package/src/components/pagination/CPaginationItem.tsx

@@ -0,0 +1,57 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CLink } from '../link/CLink'
+
+export interface CPaginationItemProps extends HTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   */
+  component?: string | ElementType
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+}
+
+export const CPaginationItem = forwardRef<HTMLAnchorElement, CPaginationItemProps>(
+  ({ children, className, component, ...rest }, ref) => {
+    const _className = classNames(
+      'page-item',
+      {
+        active: rest.active,
+        disabled: rest.disabled,
+      },
+      className,
+    )
+
+    const Component = component ? component : rest.active ? 'span' : 'a'
+
+    return (
+      <li className={_className} {...(rest.active && { 'aria-current': 'page' })}>
+        {Component === 'a' ? (
+          <CLink className="page-link" component={Component} {...rest} ref={ref}>
+            {children}
+          </CLink>
+        ) : (
+          <Component className="page-link" ref={ref}>
+            {children}
+          </Component>
+        )}
+      </li>
+    )
+  },
+)
+
+CPaginationItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CPaginationItem.displayName = 'CPaginationItem'

package/src/components/pagination/CSmartPagination.tsx

@@ -0,0 +1,262 @@
+import React, { forwardRef, ReactNode, HTMLAttributes, useEffect } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+
+import { CPagination } from './CPagination'
+import { CPaginationItem } from './CPaginationItem'
+
+export interface CSmartPaginationProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Current page number. [docs]
+   *
+   * @default 1
+   */
+  activePage?: number
+  /**
+   * Show/hide dots. [docs]
+   *
+   * @default true
+   */
+  dots?: boolean
+  /**
+   * Show/hide arrows. [docs]
+   *
+   * @default true
+   */
+  arrows?: boolean
+  /**
+   * Show double arrows buttons. [docs]
+   *
+   * @default doubleArrows
+   */
+  doubleArrows?: boolean
+  /**
+   * The content of 'firstButton' button. [docs]
+   *
+   * @default '<React.Fragment>&laquo;</React.Fragment>''
+   */
+  firstButton?: ReactNode | string
+  /**
+   * The content of 'previousButton' button. [docs]
+   *
+   * @default '<React.Fragment>&lsaquo;</React.Fragment>'
+   */
+  previousButton?: ReactNode | string
+  /**
+   * The content of 'nextButton' button. [docs]
+   *
+   * @default '<React.Fragment>&rsaquo;</React.Fragment>''
+   */
+  nextButton?: ReactNode | string
+  /**
+   * The content of 'lastButton' button. [docs]
+   *
+   * @default '<React.Fragment>&raquo;</React.Fragment>'
+   */
+  lastButton?: ReactNode | string
+  /**
+   * Size of pagination, valid values: 'sm', 'lg'. [docs]
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Horizontall align. [docs]
+   *
+   * @default 'start'
+   */
+  align?: 'start' | 'center' | 'end'
+  /**
+   * Maximum items number. [docs]
+   *
+   * @default 5
+   */
+  limit?: number
+  /**
+   * Number of pages. [docs]
+   */
+  pages: number
+  /**
+   * On active page change callback. [docs]
+   */
+  onActivePageChange: (a: number, b?: boolean) => void // TODO: change a, b to descriptive names
+}
+
+export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationProps>(
+  (
+    {
+      className,
+      activePage = 1,
+      size,
+      firstButton = <React.Fragment>&laquo;</React.Fragment>,
+      previousButton = <React.Fragment>&lsaquo;</React.Fragment>,
+      nextButton = <React.Fragment>&rsaquo;</React.Fragment>,
+      lastButton = <React.Fragment>&raquo;</React.Fragment>,
+      dots = true,
+      arrows = true,
+      doubleArrows = true,
+      limit = 5,
+      pages,
+      align = 'start',
+      onActivePageChange,
+      ...rest
+    },
+    ref,
+  ) => {
+    useEffect(() => {
+      pages < activePage && onActivePageChange(pages, true)
+    }, [pages])
+
+    const _classNames = classNames(`justify-content-${align}`, className)
+
+    const showDots: boolean = (() => {
+      return dots && limit > 4 && limit < pages
+    })()
+
+    const maxPrevItems: number = (() => {
+      return Math.floor((limit - 1) / 2)
+    })()
+
+    const maxNextItems: number = (() => {
+      return Math.ceil((limit - 1) / 2)
+    })()
+
+    const beforeDots: boolean = (() => {
+      return showDots && activePage > maxPrevItems + 1
+    })()
+
+    const afterDots: boolean = (() => {
+      return showDots && activePage < pages - maxNextItems
+    })()
+
+    const computedLimit: number = (() => {
+      return limit - (afterDots ? 1 : 0) - (beforeDots ? 1 : 0)
+    })()
+
+    const range: number = (() => {
+      return activePage + maxNextItems
+    })()
+
+    const lastItem: number = (() => {
+      return range >= pages ? pages : range - (afterDots ? 1 : 0)
+    })()
+
+    const itemsAmount: number = (() => {
+      return pages < computedLimit ? pages : computedLimit
+    })()
+
+    const items: number[] = (() => {
+      if (activePage - maxPrevItems <= 1) {
+        return Array.from(
+          {
+            length: itemsAmount,
+          },
+          (_v, i) => i + 1,
+        )
+      } else {
+        return Array.from(
+          {
+            length: itemsAmount,
+          },
+          (_v, i) => {
+            return lastItem - i
+          },
+        ).reverse()
+      }
+    })()
+
+    const setPage = (number: number): void => {
+      if (number !== activePage) {
+        onActivePageChange(number)
+      }
+    }
+
+    return (
+      <CPagination className={_classNames} aria-label="pagination" size={size} {...rest} ref={ref}>
+        {doubleArrows && (
+          <CPaginationItem
+            onClick={() => setPage(1)}
+            aria-label="Go to first page"
+            aria-disabled={activePage === 1}
+            disabled={activePage === 1}
+          >
+            {firstButton}
+          </CPaginationItem>
+        )}
+        {arrows && (
+          <CPaginationItem
+            onClick={() => setPage(activePage - 1)}
+            aria-label="Go to previous page"
+            aria-disabled={activePage === 1}
+            disabled={activePage === 1}
+          >
+            {previousButton}
+          </CPaginationItem>
+        )}
+        {beforeDots && (
+          <CPaginationItem role="separator" disabled>
+            …
+          </CPaginationItem>
+        )}
+        {items.map((i) => {
+          return (
+            <CPaginationItem
+              onClick={() => setPage(i)}
+              aria-label={activePage === i ? `Current page ${i}` : `Go to page ${i}`}
+              active={activePage === i}
+              key={i}
+            >
+              {i}
+            </CPaginationItem>
+          )
+        })}
+        {afterDots && (
+          <CPaginationItem role="separator" disabled>
+            …
+          </CPaginationItem>
+        )}
+        {arrows && (
+          <CPaginationItem
+            onClick={() => setPage(activePage + 1)}
+            aria-label="Go to next page"
+            aria-disabled={activePage === pages}
+            disabled={activePage === pages}
+          >
+            {nextButton}
+          </CPaginationItem>
+        )}
+        {doubleArrows && (
+          <CPaginationItem
+            onClick={() => setPage(pages)}
+            aria-label="Go to last page"
+            aria-disabled={activePage === pages}
+            disabled={activePage === pages}
+          >
+            {lastButton}
+          </CPaginationItem>
+        )}
+      </CPagination>
+    )
+  },
+)
+
+CSmartPagination.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string]),
+  activePage: PropTypes.number,
+  dots: PropTypes.bool,
+  arrows: PropTypes.bool,
+  doubleArrows: PropTypes.bool,
+  firstButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  previousButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  nextButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  lastButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  size: PropTypes.oneOf(['sm', 'lg']),
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+  limit: PropTypes.number,
+  pages: PropTypes.number.isRequired,
+  onActivePageChange: PropTypes.func.isRequired,
+}
+
+CSmartPagination.displayName = 'CSmartPagination'

package/src/components/pagination/__tests__/CPagination.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPagination, CPaginationItem } from '../../../index'
+
+test('loads and displays CPagination component', async () => {
+  const { container } = render(<CPagination>Test</CPagination>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CPagination customize', async () => {
+  const { container } = render(
+    <CPagination className="bazinga" aria-label="ariaLabel" size="lg">
+      Test
+    </CPagination>,
+  )
+  expect(container).toMatchSnapshot()
+  let element = container.firstChild
+  if (element !== null) {
+    element = element.firstChild
+    expect(element).toHaveClass('bazinga')
+    expect(element).toHaveClass('pagination')
+    expect(element).toHaveClass('pagination-lg')
+  } else {
+    expect(true).toBe(false)
+  }
+})
+
+test('CPagination example', async () => {
+  const { container } = render(
+    <CPagination>
+      <CPaginationItem>A</CPaginationItem>
+      <CPaginationItem>B</CPaginationItem>
+      <CPaginationItem>C</CPaginationItem>
+    </CPagination>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/pagination/__tests__/CPaginationItem.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 { CPaginationItem } from '../../../index'
+
+test('loads and displays CPaginationItem component', async () => {
+  const { container } = render(<CPaginationItem>Test</CPaginationItem>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CPaginationItem customize', async () => {
+  const { container } = render(
+    <CPaginationItem className="bazinga" active={true} component="h3" disabled={true}>
+      Test
+    </CPaginationItem>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('page-item')
+  expect(container.firstChild).toHaveClass('active')
+  expect(container.firstChild).toHaveClass('disabled')
+  let element = container.firstChild
+  if (element !== null) {
+    element = element.firstChild
+    expect(element).toHaveClass('page-link')
+  } else {
+    expect(true).toBe(false)
+  }
+})

package/src/components/pagination/__tests__/__snapshots__/CPagination.spec.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CPagination customize 1`] = `
+<div>
+  <nav
+    aria-label="ariaLabel"
+  >
+    <ul
+      class="pagination pagination-lg bazinga"
+    >
+      Test
+    </ul>
+  </nav>
+</div>
+`;
+
+exports[`CPagination example 1`] = `
+<div>
+  <nav>
+    <ul
+      class="pagination"
+    >
+      <li
+        class="page-item"
+      >
+        <a
+          class="page-link"
+        >
+          A
+        </a>
+      </li>
+      <li
+        class="page-item"
+      >
+        <a
+          class="page-link"
+        >
+          B
+        </a>
+      </li>
+      <li
+        class="page-item"
+      >
+        <a
+          class="page-link"
+        >
+          C
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+`;
+
+exports[`loads and displays CPagination component 1`] = `
+<div>
+  <nav>
+    <ul
+      class="pagination"
+    >
+      Test
+    </ul>
+  </nav>
+</div>
+`;

package/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CPaginationItem customize 1`] = `
+<div>
+  <li
+    aria-current="page"
+    class="page-item active disabled bazinga"
+  >
+    <h3
+      class="page-link"
+    >
+      Test
+    </h3>
+  </li>
+</div>
+`;
+
+exports[`loads and displays CPaginationItem component 1`] = `
+<div>
+  <li
+    class="page-item"
+  >
+    <a
+      class="page-link"
+    >
+      Test
+    </a>
+  </li>
+</div>
+`;