@coreui/react 4.0.0-rc.1

package/src/components/grid/CCol.tsx

@@ -0,0 +1,144 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+type Span = 'auto' | number | string | boolean | null
+
+type BPObject = {
+  span?: Span
+  offset?: number | string | null
+  order?: 'first' | 'last' | number | string | null
+}
+
+type Col = Span | BPObject
+
+export interface CColProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * The number of columns/offset/order on extra small devices (<576px). [docs]
+   *
+   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
+   */
+  xs?: Col
+  /**
+   * The number of columns/offset/order on small devices (<768px). [docs]
+   *
+   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
+   */
+  sm?: Col
+  /**
+   * The number of columns/offset/order on medium devices (<992px). [docs]
+   *
+   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
+   */
+  md?: Col
+  /**
+   * The number of columns/offset/order on large devices (<1200px). [docs]
+   *
+   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
+   */
+  lg?: Col
+  /**
+   * The number of columns/offset/order on X-Large devices (<1400px). [docs]
+   *
+   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
+   */
+  xl?: Col
+  /**
+   * The number of columns/offset/order on XX-Large devices (≥1400px). [docs]
+   *
+   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
+   */
+  xxl?: Col
+}
+
+const BREAKPOINTS = [
+  'xxl' as const,
+  'xl' as const,
+  'lg' as const,
+  'md' as const,
+  'sm' as const,
+  'xs' as const,
+]
+
+export const CCol = forwardRef<HTMLDivElement, CColProps>(
+  ({ children, className, ...rest }, ref) => {
+    const repsonsiveCLassNames: string[] = []
+
+    BREAKPOINTS.forEach((bp) => {
+      const breakpoint = rest[bp]
+      delete rest[bp]
+
+      const infix = bp === 'xs' ? '' : `-${bp}`
+
+      if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
+        repsonsiveCLassNames.push(`col${infix}-${breakpoint}`)
+      }
+
+      if (typeof breakpoint === 'boolean') {
+        repsonsiveCLassNames.push(`col${infix}`)
+      }
+
+      if (breakpoint && typeof breakpoint === 'object') {
+        if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
+          repsonsiveCLassNames.push(`col${infix}-${breakpoint.span}`)
+        }
+
+        if (typeof breakpoint.span === 'boolean') {
+          repsonsiveCLassNames.push(`col${infix}`)
+        }
+
+        if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
+          repsonsiveCLassNames.push(`order${infix}-${breakpoint.order}`)
+        }
+
+        if (typeof breakpoint.offset === 'number') {
+          repsonsiveCLassNames.push(`offset${infix}-${breakpoint.offset}`)
+        }
+      }
+    })
+
+    const _className = classNames(
+      repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col',
+      className,
+    )
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+const span = PropTypes.oneOfType([
+  PropTypes.bool,
+  PropTypes.number,
+  PropTypes.string,
+  PropTypes.oneOf(['auto']),
+])
+
+const col = PropTypes.oneOfType([
+  span,
+  PropTypes.shape({
+    span: span,
+    offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    order: PropTypes.oneOfType([
+      PropTypes.oneOf(['first', 'last']),
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+  }),
+])
+
+CCol.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  xs: col,
+  sm: col,
+}
+
+CCol.displayName = 'CCol'

package/src/components/grid/CContainer.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CContainerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Set container 100% wide until small breakpoint. [docs]
+   */
+  sm?: boolean
+  /**
+   * Set container 100% wide until medium breakpoint. [docs]
+   */
+  md?: boolean
+  /**
+   * Set container 100% wide until large breakpoint. [docs]
+   */
+  lg?: boolean
+  /**
+   * Set container 100% wide until X-large breakpoint. [docs]
+   */
+  xl?: boolean
+  /**
+   * Set container 100% wide until XX-large breakpoint. [docs]
+   */
+  xxl?: boolean
+  /**
+   * Set container 100% wide, spanning the entire width of the viewport. [docs]
+   */
+  fluid?: boolean
+}
+
+const BREAKPOINTS = [
+  'xxl' as const,
+  'xl' as const,
+  'lg' as const,
+  'md' as const,
+  'sm' as const,
+  'fluid' as const,
+]
+
+export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
+  ({ children, className, ...rest }, ref) => {
+    const repsonsiveCLassNames: string[] = []
+
+    BREAKPOINTS.forEach((bp) => {
+      const breakpoint = rest[bp]
+      delete rest[bp]
+
+      breakpoint && repsonsiveCLassNames.push(`container-${bp}`)
+    })
+
+    const _className = classNames(
+      repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container',
+      className,
+    )
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CContainer.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  sm: PropTypes.bool,
+  md: PropTypes.bool,
+  lg: PropTypes.bool,
+  xl: PropTypes.bool,
+  xxl: PropTypes.bool,
+  fluid: PropTypes.bool,
+}
+
+CContainer.displayName = 'CContainer'

package/src/components/grid/CRow.tsx

@@ -0,0 +1,118 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export type BPObject = {
+  cols?: 'auto' | number | string | null
+  gutter?: number | string | null
+  gutterX?: number | string | null
+  gutterY?: number | string | null
+}
+
+export interface CRowProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * The number of columns/offset/order on extra small devices (<576px). [docs]
+   *
+   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
+   */
+  xs?: BPObject
+  /**
+   * The number of columns/offset/order on small devices (<768px). [docs]
+   *
+   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
+   */
+  sm?: BPObject
+  /**
+   * The number of columns/offset/order on medium devices (<992px). [docs]
+   *
+   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
+   */
+  md?: BPObject
+  /**
+   * The number of columns/offset/order on large devices (<1200px). [docs]
+   *
+   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
+   */
+  lg?: BPObject
+  /**
+   * The number of columns/offset/order on X-Large devices (<1400px). [docs]
+   *
+   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
+   */
+  xl?: BPObject
+  /**
+   * The number of columns/offset/order on XX-Large devices (≥1400px). [docs]
+   *
+   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
+   */
+  xxl?: BPObject
+}
+
+const BREAKPOINTS = [
+  'xxl' as const,
+  'xl' as const,
+  'lg' as const,
+  'md' as const,
+  'sm' as const,
+  'xs' as const,
+]
+
+export const CRow = forwardRef<HTMLDivElement, CRowProps>(
+  ({ children, className, ...rest }, ref) => {
+    const repsonsiveCLassNames: string[] = []
+
+    BREAKPOINTS.forEach((bp) => {
+      const breakpoint = rest[bp]
+      delete rest[bp]
+
+      const infix = bp === 'xs' ? '' : `-${bp}`
+
+      if (typeof breakpoint === 'object') {
+        if (breakpoint.cols) {
+          repsonsiveCLassNames.push(`row-cols${infix}-${breakpoint.cols}`)
+        }
+        if (typeof breakpoint.gutter === 'number') {
+          repsonsiveCLassNames.push(`g${infix}-${breakpoint.gutter}`)
+        }
+        if (typeof breakpoint.gutterX === 'number') {
+          repsonsiveCLassNames.push(`gx${infix}-${breakpoint.gutterX}`)
+        }
+        if (typeof breakpoint.gutterY === 'number') {
+          repsonsiveCLassNames.push(`gy${infix}-${breakpoint.gutterY}`)
+        }
+      }
+    })
+
+    const _className = classNames('row', repsonsiveCLassNames, className)
+
+    return (
+      <div className={_className} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+const bp = PropTypes.shape({
+  cols: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.string]),
+  gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  gutterX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  gutterY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+})
+
+CRow.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  xs: bp,
+  sm: bp,
+  md: bp,
+  lg: bp,
+  xl: bp,
+  xxl: bp,
+}
+
+CRow.displayName = 'CRow'

package/src/components/grid/__tests__/CCol.spec.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CCol } from '../../../index'
+
+test('CCol no-breakpoints', async () => {
+  const { container } = render(<CCol>Test</CCol>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('col')
+})
+
+test('CCol customize breakpoints are numbers', async () => {
+  const { container } = render(
+    <CCol className="bazinga" xs={1} sm={2} md={3} lg={4} xl={5} xxl={6}>
+      Test
+    </CCol>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('col-1')
+  expect(container.firstChild).toHaveClass('col-sm-2')
+  expect(container.firstChild).toHaveClass('col-md-3')
+  expect(container.firstChild).toHaveClass('col-lg-4')
+  expect(container.firstChild).toHaveClass('col-xl-5')
+  expect(container.firstChild).toHaveClass('col-xxl-6')
+})
+
+test('CCol customize breakpoints are boolean', async () => {
+  const { container } = render(
+    <CCol className="bazinga" xs={true} sm={true} md={true} lg={true} xl={true} xxl={true}>
+      Test
+    </CCol>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('col')
+  expect(container.firstChild).toHaveClass('col-sm')
+  expect(container.firstChild).toHaveClass('col-md')
+  expect(container.firstChild).toHaveClass('col-lg')
+  expect(container.firstChild).toHaveClass('col-xl')
+  expect(container.firstChild).toHaveClass('col-xxl')
+})

package/src/components/grid/__tests__/CContainer.spec.tsx

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

package/src/components/grid/__tests__/CRow.spec.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CRow } from '../../../index'
+
+test('CRow not-customize', async () => {
+  const { container } = render(<CRow>Test</CRow>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CRow customize cols', async () => {
+  const { container } = render(
+    <CRow
+      className="bazinga"
+      xs={{ cols: 1 }}
+      sm={{ cols: 2 }}
+      md={{ cols: 3 }}
+      lg={{ cols: 4 }}
+      xl={{ cols: 5 }}
+      xxl={{ cols: 6 }}
+    >
+      Test
+    </CRow>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('row-cols-1')
+  expect(container.firstChild).toHaveClass('row-cols-sm-2')
+  expect(container.firstChild).toHaveClass('row-cols-md-3')
+  expect(container.firstChild).toHaveClass('row-cols-lg-4')
+  expect(container.firstChild).toHaveClass('row-cols-xl-5')
+  expect(container.firstChild).toHaveClass('row-cols-xxl-6')
+})
+
+test('CRow customize gutter single gutter', async () => {
+  const { container } = render(
+    <CRow className="bazinga" xs={{ gutter: 7 }}>
+      Test
+    </CRow>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('g-7')
+})
+
+test('CRow customize gutter', async () => {
+  const { container } = render(
+    <CRow
+      className="bazinga"
+      xs={{ gutter: 1 }}
+      sm={{ gutter: 2 }}
+      md={{ gutter: 3 }}
+      lg={{ gutter: 4 }}
+      xl={{ gutter: 5 }}
+      xxl={{ gutter: 6 }}
+    >
+      Test
+    </CRow>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('g-1')
+  expect(container.firstChild).toHaveClass('g-sm-2')
+  expect(container.firstChild).toHaveClass('g-md-3')
+  expect(container.firstChild).toHaveClass('g-lg-4')
+  expect(container.firstChild).toHaveClass('g-xl-5')
+  expect(container.firstChild).toHaveClass('g-xxl-6')
+})
+
+test('CRow customize gutterX', async () => {
+  const { container } = render(
+    <CRow
+      className="bazinga"
+      xs={{ gutterX: 1 }}
+      sm={{ gutterX: 2 }}
+      md={{ gutterX: 3 }}
+      lg={{ gutterX: 4 }}
+      xl={{ gutterX: 5 }}
+      xxl={{ gutterX: 6 }}
+    >
+      Test
+    </CRow>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('gx-1')
+  expect(container.firstChild).toHaveClass('gx-sm-2')
+  expect(container.firstChild).toHaveClass('gx-md-3')
+  expect(container.firstChild).toHaveClass('gx-lg-4')
+  expect(container.firstChild).toHaveClass('gx-xl-5')
+  expect(container.firstChild).toHaveClass('gx-xxl-6')
+})
+
+test('CRow customize gutterY', async () => {
+  const { container } = render(
+    <CRow
+      className="bazinga"
+      xs={{ gutterY: 1 }}
+      sm={{ gutterY: 2 }}
+      md={{ gutterY: 3 }}
+      lg={{ gutterY: 4 }}
+      xl={{ gutterY: 5 }}
+      xxl={{ gutterY: 6 }}
+    >
+      Test
+    </CRow>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('gy-1')
+  expect(container.firstChild).toHaveClass('gy-sm-2')
+  expect(container.firstChild).toHaveClass('gy-md-3')
+  expect(container.firstChild).toHaveClass('gy-lg-4')
+  expect(container.firstChild).toHaveClass('gy-xl-5')
+  expect(container.firstChild).toHaveClass('gy-xxl-6')
+})

package/src/components/grid/__tests__/__snapshots__/CCol.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCol customize breakpoints are boolean 1`] = `
+<div>
+  <div
+    class="col-xxl col-xl col-lg col-md col-sm col bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CCol customize breakpoints are numbers 1`] = `
+<div>
+  <div
+    class="col-xxl-6 col-xl-5 col-lg-4 col-md-3 col-sm-2 col-1 bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CCol no-breakpoints 1`] = `
+<div>
+  <div
+    class="col"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/grid/__tests__/__snapshots__/CContainer.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CContainer customize 1`] = `
+<div>
+  <div
+    class="container-md bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CContainer customize fluid 1`] = `
+<div>
+  <div
+    class="container-fluid bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CContainer component 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/grid/__tests__/__snapshots__/CRow.spec.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CRow customize cols 1`] = `
+<div>
+  <div
+    class="row row-cols-xxl-6 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CRow customize gutter 1`] = `
+<div>
+  <div
+    class="row g-xxl-6 g-xl-5 g-lg-4 g-md-3 g-sm-2 g-1 bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CRow customize gutter single gutter 1`] = `
+<div>
+  <div
+    class="row g-7 bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CRow customize gutterX 1`] = `
+<div>
+  <div
+    class="row gx-xxl-6 gx-xl-5 gx-lg-4 gx-md-3 gx-sm-2 gx-1 bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CRow customize gutterY 1`] = `
+<div>
+  <div
+    class="row gy-xxl-6 gy-xl-5 gy-lg-4 gy-md-3 gy-sm-2 gy-1 bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CRow not-customize 1`] = `
+<div>
+  <div
+    class="row"
+  >
+    Test
+  </div>
+</div>
+`;