@coreui/react-pro 4.0.0-rc.1

package/src/components/table/CTable.tsx

@@ -0,0 +1,129 @@
+import React, { forwardRef, TableHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableProps extends TableHTMLAttributes<HTMLTableElement> {
+  /**
+   * Set the vertical aligment. [docs]
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * Sets the border color of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  borderColor?: Colors
+  /**
+   * Add borders on all sides of the table and cells. [docs]
+   */
+  bordered?: boolean
+  /**
+   * Remove borders on all sides of the table and cells. [docs]
+   */
+  borderless?: boolean
+  /**
+   * Put the `<caption>` on the top of the table. [docs]
+   */
+  caption?: 'top'
+  /**
+   * 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
+  /**
+   * Enable a hover state on table rows within a `<CTableBody>`. [docs]
+   */
+  hover?: boolean
+  /**
+   * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. [docs]
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * Make table more compact by cutting all cell `padding` in half. [docs]
+   */
+  small?: boolean
+  /**
+   * Add zebra-striping to any table row within the `<CTableBody>`. [docs]
+   */
+  striped?: boolean
+}
+
+export const CTable = forwardRef<HTMLTableElement, CTableProps>(
+  (
+    {
+      children,
+      align,
+      borderColor,
+      bordered,
+      borderless,
+      caption,
+      className,
+      color,
+      hover,
+      responsive,
+      small,
+      striped,
+      ...rest
+    },
+    ref,
+  ) => {
+    const _className = classNames(
+      'table',
+      {
+        [`align-${align}`]: align,
+        [`caption-${caption}`]: caption,
+        [`border-${borderColor}`]: borderColor,
+        'table-bordered': bordered,
+        'table-borderless': borderless,
+        [`table-${color}`]: color,
+        'table-hover': hover,
+        'table-sm': small,
+        'table-striped': striped,
+      },
+      className,
+    )
+
+    return responsive ? (
+      <div
+        className={
+          typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
+        }
+      >
+        <table className={_className ? _className : undefined} {...rest} ref={ref}>
+          {children}
+        </table>
+      </div>
+    ) : (
+      <table className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </table>
+    )
+  },
+)
+
+CTable.propTypes = {
+  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
+  borderColor: PropTypes.string,
+  bordered: PropTypes.bool,
+  borderless: PropTypes.bool,
+  caption: PropTypes.oneOf(['top']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  hover: PropTypes.bool,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+  small: PropTypes.bool,
+  striped: PropTypes.bool,
+}
+
+CTable.displayName = 'CTable'

package/src/components/table/CTableBody.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * 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
+}
+
+export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <tbody className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </tbody>
+    )
+  },
+)
+
+CTableBody.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableBody.displayName = 'CTableBody'

package/src/components/table/CTableCaption.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+export const CTableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  HTMLAttributes<HTMLTableCaptionElement>
+>(({ children, ...props }, ref) => {
+  return (
+    <caption {...props} ref={ref}>
+      {children}
+    </caption>
+  )
+})
+
+CTableCaption.propTypes = {
+  children: PropTypes.node,
+}
+
+CTableCaption.displayName = 'CTableCaption'

package/src/components/table/CTableDataCell.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef, TdHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableDataCellProps
+  extends Omit<TdHTMLAttributes<HTMLTableDataCellElement>, 'align'> {
+  /**
+   * Highlight a table row or cell. [docs]
+   */
+  active?: boolean
+  /**
+   * Set the vertical aligment. [docs]
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * 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
+  /**
+   * @ignore
+   */
+  colSpan?: number
+}
+
+export const CTableDataCell = forwardRef<HTMLTableDataCellElement, CTableDataCellProps>(
+  ({ children, active, align, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`align-${align}`]: align,
+        'table-active': active,
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <td className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </td>
+    )
+  },
+)
+
+CTableDataCell.propTypes = {
+  active: PropTypes.bool,
+  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableDataCell.displayName = 'CTableDataCell'

package/src/components/table/CTableFoot.tsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * 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
+}
+
+export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <tfoot className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </tfoot>
+    )
+  },
+)
+
+CTableFoot.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableFoot.displayName = 'CTableFoot'

package/src/components/table/CTableHead.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * 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
+}
+
+export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <thead className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </thead>
+    )
+  },
+)
+
+CTableHead.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableHead.displayName = 'CTableHead'

package/src/components/table/CTableHeaderCell.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, ThHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+  /**
+   * 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
+}
+
+export const CTableHeaderCell = forwardRef<HTMLTableHeaderCellElement, CTableHeaderCellProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <th className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </th>
+    )
+  },
+)
+
+CTableHeaderCell.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableHeaderCell.displayName = 'CTableHeaderCell'

package/src/components/table/CTableRow.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  /**
+   * Highlight a table row or cell.. [docs]
+   */
+  active?: boolean
+  /**
+   * Set the vertical aligment. [docs]
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * 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
+}
+
+export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
+  ({ children, active, align, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`align-${align}`]: align,
+        'table-active': active,
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <tr className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </tr>
+    )
+  },
+)
+
+CTableRow.propTypes = {
+  active: PropTypes.bool,
+  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableRow.displayName = 'CTableRow'

package/src/components/table/__tests__/CTable.spec.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import {
+  CTable,
+  CTableCaption,
+  CTableHead,
+  CTableRow,
+  CTableHeaderCell,
+  CTableBody,
+  CTableDataCell,
+  CTableFoot,
+} from '../../../index'
+
+test('loads and displays CTable component', async () => {
+  const { container } = render(<CTable />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CTable customize', async () => {
+  const { container } = render(
+    <CTable
+      className="bazinga"
+      align="middle"
+      borderColor="primary"
+      bordered={true}
+      borderless={true}
+      caption="top"
+      color="info"
+      hover={true}
+      responsive="xl"
+      small={true}
+      striped={true}
+    >
+      <CTableBody>
+        <CTableRow>
+          <CTableDataCell>Test</CTableDataCell>
+        </CTableRow>
+      </CTableBody>
+    </CTable>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('table-responsive-xl')
+  if (container.firstChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.firstChild.firstChild).toHaveClass('table')
+    expect(container.firstChild.firstChild).toHaveClass('align-middle')
+    expect(container.firstChild.firstChild).toHaveClass('caption-top')
+    expect(container.firstChild.firstChild).toHaveClass('border-primary')
+    expect(container.firstChild.firstChild).toHaveClass('table-bordered')
+    expect(container.firstChild.firstChild).toHaveClass('table-borderless')
+    expect(container.firstChild.firstChild).toHaveClass('table-info')
+    expect(container.firstChild.firstChild).toHaveClass('table-hover')
+    expect(container.firstChild.firstChild).toHaveClass('table-sm')
+    expect(container.firstChild.firstChild).toHaveClass('table-striped')
+    expect(container.firstChild.firstChild).toHaveClass('bazinga')
+    expect(container.firstChild.firstChild).toHaveTextContent('Test')
+  }
+})
+
+test('CTable full example test', async () => {
+  const { container } = render(
+    <CTable caption="top">
+      <CTableCaption>List of users</CTableCaption>
+      <CTableHead>
+        <CTableRow>
+          <CTableHeaderCell>#</CTableHeaderCell>
+          <CTableHeaderCell>Class</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+        </CTableRow>
+      </CTableHead>
+      <CTableBody>
+        <CTableRow>
+          <CTableHeaderCell>1</CTableHeaderCell>
+          <CTableDataCell>Mark</CTableDataCell>
+          <CTableDataCell>Otto</CTableDataCell>
+          <CTableDataCell>@mdo</CTableDataCell>
+        </CTableRow>
+        <CTableRow>
+          <CTableHeaderCell>2</CTableHeaderCell>
+          <CTableDataCell>Jacob</CTableDataCell>
+          <CTableDataCell>Thornton</CTableDataCell>
+          <CTableDataCell>@fat</CTableDataCell>
+        </CTableRow>
+        <CTableRow>
+          <CTableHeaderCell>3</CTableHeaderCell>
+          <CTableDataCell>Larry</CTableDataCell>
+          <CTableDataCell>the Bird</CTableDataCell>
+          <CTableDataCell>@twitter</CTableDataCell>
+        </CTableRow>
+      </CTableBody>
+      <CTableFoot>
+        <CTableRow>
+          <CTableHeaderCell>#</CTableHeaderCell>
+          <CTableHeaderCell>Class</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+        </CTableRow>
+      </CTableFoot>
+    </CTable>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/table/__tests__/CTableBody.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 { CTableBody, CTableDataCell, CTableRow } from '../../../index'
+
+test('loads and displays CTableBody component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableBody />, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableBody customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody className="bazinga" color="info">
+      <CTableRow>
+        <CTableDataCell> Test</CTableDataCell>
+      </CTableRow>
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('table-info')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableCaption.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 { CTableCaption } from '../../../index'
+
+test('loads and displays CTableCaption component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableCaption />, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableCaption customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableCaption>Test</CTableCaption>, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableDataCell } from '../../../index'
+import { CTableBody } from '../CTableBody'
+import { CTableRow } from '../CTableRow'
+
+test('loads and displays CTableDataCell component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody>
+      <CTableRow>
+        <CTableDataCell />
+      </CTableRow>
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableDataCell customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody>
+      <CTableRow>
+        <CTableDataCell className="bazinga" active={true} align="middle" color="info">
+          Test
+        </CTableDataCell>
+      </CTableRow>
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('align-middle')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-active')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-info')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableFoot.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 { CTableFoot, CTableHeaderCell, CTableRow } from '../../../index'
+
+test('loads and displays CTableFoot component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableFoot />, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableFoot customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableFoot className="bazinga" color="info">
+      <CTableRow>
+        <CTableHeaderCell>Test</CTableHeaderCell>
+      </CTableRow>
+    </CTableFoot>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('table-info')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
+})