@coreui/react 4.0.0-rc.1

package/src/components/form/CFormInput.tsx

@@ -0,0 +1,87 @@
+import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+// import { CFormLabel } from './CFormLabel'
+
+export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * Set component validation state to invalid. [docs]
+   */
+  invalid?: boolean
+  // label?: string | ReactNode
+  /**
+   * Method called immediately after the `value` prop changes. [docs]
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  /**
+   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
+   */
+  plainText?: boolean
+  /**
+   * Toggle the readonly state for the component. [docs]
+   */
+  readOnly?: boolean
+  /**
+   * Size the component small or large. [docs]
+   *
+   * @type 'sm' | 'lg'
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Specifies the type of component. [docs]
+   *
+   * @type 'color' | 'file' | 'text' | string
+   * @default 'text'
+   */
+  type?: 'color' | 'file' | 'text' | string
+  /**
+   * Set component validation state to valid. [docs]
+   */
+  valid?: boolean
+  /**
+   * The `value` attribute of component. [docs]
+   *
+   * @controllable onChange
+   * */
+  value?: string | string[] | number
+}
+
+export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
+  ({ children, className, invalid, plainText, size, type = 'text', valid, ...rest }, ref) => {
+    const _className = classNames(
+      plainText ? 'form-control-plaintext' : 'form-control',
+      {
+        [`form-control-${size}`]: size,
+        'form-control-color': type === 'color',
+        'is-invalid': invalid,
+        'is-valid': valid,
+      },
+      className,
+    )
+    return (
+      <input type={type} className={_className} {...rest} ref={ref}>
+        {children}
+      </input>
+    )
+  },
+)
+
+CFormInput.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  invalid: PropTypes.bool,
+  plainText: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]),
+  valid: PropTypes.bool,
+}
+
+CFormInput.displayName = 'CFormInput'

package/src/components/form/CFormLabel.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFormLabelProps extends HTMLAttributes<HTMLLabelElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * A string of all className you want to be applied to the component, and override standard className value. [docs]
+   */
+  customClassName?: string
+}
+
+export const CFormLabel = forwardRef<HTMLLabelElement, CFormLabelProps>(
+  ({ children, className, customClassName, ...rest }, ref) => {
+    const _className = customClassName ? customClassName : classNames('form-label', className)
+    return (
+      <label className={_className} {...rest} ref={ref}>
+        {children}
+      </label>
+    )
+  },
+)
+
+CFormLabel.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  customClassName: PropTypes.string,
+}
+
+CFormLabel.displayName = 'CFormLabel'

package/src/components/form/CFormRange.tsx

@@ -0,0 +1,53 @@
+import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * Specifies the maximum value for the component. [docs]
+   */
+  max?: number
+  /**
+   * Specifies the minimum value for the component. [docs]
+   */
+  min?: number
+  /**
+   * Method called immediately after the `value` prop changes. [docs]
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  /**
+   * Toggle the readonly state for the component. [docs]
+   */
+  readOnly?: boolean
+  /**
+   * Specifies the interval between legal numbers in the component. [docs]
+   */
+  steps: number
+  /**
+   * The `value` attribute of component. [docs]
+   *
+   * @controllable onChange
+   * */
+  value?: string | string[] | number
+}
+
+export const CFormRange = forwardRef<HTMLInputElement, CFormRangeProps>(
+  ({ className, ...rest }, ref) => {
+    const _className = classNames('form-range', className)
+    return <input type="range" className={_className} {...rest} ref={ref} />
+  },
+)
+
+CFormRange.propTypes = {
+  className: PropTypes.string,
+}
+
+CFormRange.displayName = 'CFormRange'

package/src/components/form/CFormSelect.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, InputHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Specifies the number of visible options in a drop-down list. [docs]
+   */
+  htmlSize?: number
+  /**
+   * Set component validation state to invalid. [docs]
+   */
+  invalid?: boolean
+  /**
+   * Size the component small or large. [docs]
+   *
+   * @type 'sm' | 'lg'
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Set component validation state to valid. [docs]
+   */
+  valid?: boolean
+}
+
+export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
+  ({ children, className, htmlSize, invalid, size, valid, ...rest }, ref) => {
+    const _className = classNames(
+      'form-select',
+      {
+        [`form-select-${size}`]: size,
+        'is-invalid': invalid,
+        'is-valid': valid,
+      },
+      className,
+    )
+    return (
+      <select className={_className} size={htmlSize} {...rest} ref={ref}>
+        {children}
+      </select>
+    )
+  },
+)
+
+CFormSelect.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  htmlSize: PropTypes.number,
+  invalid: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  valid: PropTypes.bool,
+}
+
+CFormSelect.displayName = 'CFormSelect'

package/src/components/form/CFormSwitch.tsx

@@ -0,0 +1,84 @@
+import React, { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CFormLabel } from './CFormLabel'
+
+export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document. [docs]
+   */
+  id?: string
+  /**
+   * Set component validation state to invalid. [docs]
+   */
+  invalid?: boolean
+  /**
+   * The element represents a caption for a component. [docs]
+   */
+  label?: string | ReactNode
+  /**
+   * Size the component large or extra large. Works only with `switch` [docs]
+   *
+   * @type 'lg' | 'xl'
+   */
+  size?: 'lg' | 'xl'
+  /**
+   * Specifies the type of component. [docs]
+   *
+   * @type checkbox' | 'radio'
+   * @default 'checkbox'
+   */
+  type?: 'checkbox' | 'radio'
+  /**
+   * Set component validation state to valid. [docs]
+   */
+  valid?: boolean
+}
+
+export const CFormSwitch = forwardRef<HTMLInputElement, CFormSwitchProps>(
+  ({ className, id, invalid, label, size, type = 'checkbox', valid, ...rest }, ref) => {
+    const _className = classNames(
+      'form-check form-switch',
+      {
+        [`form-switch-${size}`]: size,
+        'is-invalid': invalid,
+        'is-valid': valid,
+      },
+      className,
+    )
+
+    const inputClassName = classNames('form-check-input', {
+      'is-invalid': invalid,
+      'is-valid': valid,
+    })
+    const labelClassName = classNames('form-check-label')
+
+    return (
+      <div className={_className}>
+        <input type={type} className={inputClassName} id={id} {...rest} ref={ref} />
+        {label && (
+          <CFormLabel customClassName={labelClassName} {...(id && { htmlFor: id })}>
+            {label}
+          </CFormLabel>
+        )}
+      </div>
+    )
+  },
+)
+
+CFormSwitch.propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string,
+  invalid: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  size: PropTypes.oneOf(['lg', 'xl']),
+  type: PropTypes.oneOf(['checkbox', 'radio']),
+  valid: PropTypes.bool,
+}
+
+CFormSwitch.displayName = 'CFormSwitch'

package/src/components/form/CFormText.tsx

@@ -0,0 +1,35 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFormTextProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * 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 'div'
+   */
+  component?: string | ElementType
+}
+
+export const CFormText = forwardRef<HTMLDivElement | HTMLSpanElement, CFormTextProps>(
+  ({ children, className, component: Component = 'div', ...rest }, ref) => {
+    const _className = classNames('form-text', className)
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CFormText.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CFormText.displayName = 'CFormText'

package/src/components/form/CFormTextarea.tsx

@@ -0,0 +1,68 @@
+import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFormTextareaProps extends InputHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * Set component validation state to invalid. [docs]
+   */
+  invalid?: boolean
+  /**
+   * Method called immediately after the `value` prop changes. [docs]
+   */
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>
+  /**
+   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. [docs]
+   */
+  plainText?: boolean
+  /**
+   * Toggle the readonly state for the component. [docs]
+   */
+  readOnly?: boolean
+  /**
+   * Set component validation state to valid. [docs]
+   */
+  valid?: boolean
+  /**
+   * The `value` attribute of component. [docs]
+   *
+   * @controllable onChange
+   * */
+  value?: string | string[] | number
+}
+
+export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>(
+  ({ children, className, invalid, plainText, valid, ...rest }, ref) => {
+    const _className = classNames(
+      plainText ? 'form-control-plaintext' : 'form-control',
+      {
+        'is-invalid': invalid,
+        'is-valid': valid,
+      },
+      className,
+    )
+    return (
+      <textarea className={_className} {...rest} ref={ref}>
+        {children}
+      </textarea>
+    )
+  },
+)
+
+CFormTextarea.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  invalid: PropTypes.bool,
+  plainText: PropTypes.bool,
+  valid: PropTypes.bool,
+}
+
+CFormTextarea.displayName = 'CFormTextarea'

package/src/components/form/CInputGroup.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CInputGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Size the component small or large. [docs]
+   *
+   * @type 'sm' | 'lg'
+   */
+  size?: 'sm' | 'lg'
+}
+
+export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
+  ({ children, className, size, ...rest }, ref) => {
+    const _className = classNames(
+      'input-group',
+      {
+        [`input-group-${size}`]: size,
+      },
+      className,
+    )
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CInputGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+}
+
+CInputGroup.displayName = 'CInputGroup'

package/src/components/form/CInputGroupText.tsx

@@ -0,0 +1,35 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CInputGroupTextProps extends HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
+  /**
+   * 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 'span'
+   */
+  component?: string | ElementType
+}
+
+export const CInputGroupText = forwardRef<HTMLLabelElement | HTMLSpanElement, CInputGroupTextProps>(
+  ({ children, className, component: Component = 'span', ...rest }, ref) => {
+    const _className = classNames('input-group-text', className)
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CInputGroupText.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CInputGroupText.displayName = 'CInputGroupText'

package/src/components/form/__tests__/CForm.spec.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CForm, CFormLabel, CFormInput, CFormText, CFormCheck, CButton } from '../../../index'
+
+test('loads and displays CForm component', async () => {
+  const { container } = render(<CForm>Test</CForm>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CForm customize', async () => {
+  const { container } = render(
+    <CForm className="bazinga" validated={true}>
+      Test
+    </CForm>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('was-validated')
+})
+
+test('CForm example', async () => {
+  const { container } = render(
+    <CForm>
+      <CFormLabel>A</CFormLabel>
+      <CFormInput type="email" aria-describedby="B" />
+      <CFormText>C</CFormText>
+      <CFormCheck label="D" />
+      <CButton type="submit" color="primary">
+        E
+      </CButton>
+    </CForm>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/form/__tests__/CFormCheck.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 { CFormCheck } from '../../../index'
+
+test('loads and displays CFormCheck component', async () => {
+  const { container } = render(<CFormCheck />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CFormCheck customize button=false', async () => {
+  const { container } = render(
+    <CFormCheck className="bazinga" id="id" inline={true} label="label" type="radio" />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('form-check')
+  expect(container.firstChild).toHaveClass('form-check-inline')
+})
+
+test('CFormCheck customize button=true', async () => {
+  const { container } = render(
+    <CFormCheck
+      button={{ color: 'primary', size: 'lg', shape: 'rounded', variant: 'ghost' }}
+      className="bazinga"
+      id="id"
+      inline={true}
+      label="label"
+      type="radio"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/form/__tests__/CFormControl.spec.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CFormInput } from '../../../index'
+
+test('loads and displays CFormInput component', async () => {
+  const { container } = render(<CFormInput />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CFormInput customize', async () => {
+  const { container } = render(
+    <CFormInput
+      className="bazinga"
+      disabled={true}
+      plainText={true}
+      readOnly={true}
+      size="lg"
+      type="color"
+      value="value"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('form-control-plaintext')
+  expect(container.firstChild).toHaveClass('form-control-color')
+  expect(container.firstChild).toHaveClass('form-control-lg')
+})
+
+test('CFormInput change input', async () => {
+  jest.useFakeTimers()
+  const onChange = jest.fn()
+  render(<CFormInput onChange={onChange} />)
+  expect(onChange).toHaveBeenCalledTimes(0)
+  const input = document.querySelector('input')
+  if (input !== null) {
+    fireEvent.change(input, { target: { value: 'bazinga' } })
+  }
+  expect(onChange).toHaveBeenCalledTimes(1)
+  if (input !== null) {
+    fireEvent.change(input, { target: { value: '2' } })
+  }
+  expect(onChange).toHaveBeenCalledTimes(2)
+})

package/src/components/form/__tests__/CFormFeedback.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 { CFormFeedback } from '../../../index'
+
+test('loads and displays CFormFeedback component', async () => {
+  const { container } = render(<CFormFeedback />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CFormFeedback customize one', async () => {
+  const { container } = render(
+    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={true} />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('invalid-tooltip')
+  expect(container.firstChild).toHaveClass('valid-tooltip')
+  expect(container.firstChild).toHaveClass('bazinga')
+})
+
+test('CFormFeedback customize two', async () => {
+  const { container } = render(
+    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={false} />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('invalid-feedback')
+  expect(container.firstChild).toHaveClass('valid-feedback')
+  expect(container.firstChild).toHaveClass('bazinga')
+})

package/src/components/form/__tests__/CFormFloating.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 { CFormFloating } from '../../../index'
+
+test('loads and displays CFormFloating component', async () => {
+  const { container } = render(<CFormFloating />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CFormFloating customize', async () => {
+  const { container } = render(<CFormFloating className="bazinga">Test</CFormFloating>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-floating')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveTextContent('Test')
+})