@coreui/react 4.0.0-rc.1

package/dist/pages/404.d.ts

@@ -0,0 +1,2 @@
+declare const NotFoundPage: () => JSX.Element;
+export default NotFoundPage;

package/dist/utils/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { useForkedRef } from './useForkedRef';
+export { useForkedRef };

package/dist/utils/hooks/useForkedRef.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type AssignableRef<ValueType> = {
+    bivarianceHack(instance: ValueType | null): void;
+}['bivarianceHack'] | React.MutableRefObject<ValueType | null>;
+export declare function useForkedRef<RefValueType = any>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): ((node: any) => void) | null;
+export declare function assignRef<RefValueType = any>(ref: AssignableRef<RefValueType> | null | undefined, value: any): void;
+export declare function isFunction(value: any): value is Function;

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@coreui/react",
+  "version": "4.0.0-rc.1",
+  "config": {
+    "version_short": "4.0"
+  },
+  "description": "",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "jsnext:main": "dist/index.es.js",
+  "files": [
+    "dist/",
+    "src/components/",
+    "src/utils/",
+    "src/index.ts",
+    "tsconfig.json",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "docs:api": "rimraf \"content/docs/$npm_package_config_version_short/api/*\" & node build/api.js",
+    "docs:build": "gatsby build --prefix-paths",
+    "docs:dist": "run-s docs:api docs:build",
+    "docs:dev": "gatsby develop",
+    "docs:serve": "gatsby serve",
+    "lint": "eslint \"src/components/**/*.{js,ts,tsx}\"",
+    "test": "jest --coverage",
+    "test:update": "jest --coverage --updateSnapshot"
+  },
+  "peerDependencies": {
+    "@coreui/coreui": "^4.0.3",
+    "react": "^17",
+    "react-dom": "^17"
+  },
+  "devDependencies": {
+    "@coreui/coreui": "^4.0.3",
+    "@coreui/icons": "^2.0.1",
+    "@coreui/icons-react": "^2.0.0-rc.5",
+    "@coreui/react-chartjs": "^2.0.0-rc.1",
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@popperjs/core": "^2.9.3",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-helmet": "^6.1.2",
+    "@types/react-transition-group": "^4.4.2",
+    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.2",
+    "classnames": "^2.3.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jsdoc": "^36.0.7",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "gatsby": "^3.12.0",
+    "gatsby-plugin-google-gtag": "3",
+    "gatsby-plugin-manifest": "^3.12.0",
+    "gatsby-plugin-mdx": "^2.12.0",
+    "gatsby-plugin-sass": "4",
+    "gatsby-plugin-sitemap": "4",
+    "gatsby-remark-autolink-headers": "^4.9.0",
+    "gatsby-source-filesystem": "^3.12.0",
+    "glob": "^7.1.7",
+    "globby": "^11.0.4",
+    "jest": "^27.0.6",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.3.2",
+    "prism-react-renderer": "^1.2.1",
+    "prismjs": "^1.24.1",
+    "react": "^17.0.1",
+    "react-docgen-typescript": "^2.1.0",
+    "react-dom": "^17.0.1",
+    "react-github-btn": "^1.2.1",
+    "react-helmet": "^6.1.0",
+    "react-popper": "^2.2.5",
+    "react-transition-group": "^4.4.2",
+    "remark-html": "^13.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.56.22.56.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "sass": "^1.38.0",
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.3.5"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "dist/"
+    ]
+  }
+}

package/src/components/Types.tsx

@@ -0,0 +1,107 @@
+import PropTypes from 'prop-types'
+
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+export type Colors =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'dark'
+  | 'light'
+  | string
+
+export const colorPropType = PropTypes.oneOfType([
+  PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'danger',
+    'warning',
+    'info',
+    'dark',
+    'light',
+  ]),
+  PropTypes.string,
+])
+
+export type Placements =
+  | 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top-end'
+  | 'top'
+  | 'top-start'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'left-start'
+  | 'left'
+  | 'left-end'
+  | undefined
+
+export const placementPropType = PropTypes.oneOf<Placements>([
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top-end',
+  'top',
+  'top-start',
+  'bottom-end',
+  'bottom',
+  'bottom-start',
+  'right-start',
+  'right',
+  'right-end',
+  'left-start',
+  'left',
+  'left-end',
+])
+
+export type Shapes =
+  | 'rounded'
+  | 'rounded-top'
+  | 'rounded-end'
+  | 'rounded-bottom'
+  | 'rounded-start'
+  | 'rounded-circle'
+  | 'rounded-pill'
+  | 'rounded-0'
+  | 'rounded-1'
+  | 'rounded-2'
+  | 'rounded-3'
+  | string
+
+export const shapePropType = PropTypes.oneOfType([
+  PropTypes.oneOf([
+    'rounded',
+    'rounded-top',
+    'rounded-end',
+    'rounded-bottom',
+    'rounded-start',
+    'rounded-circle',
+    'rounded-pill',
+    'rounded-0',
+    'rounded-1',
+    'rounded-2',
+    'rounded-3',
+  ]),
+  PropTypes.string,
+])
+
+export type TextColors = Colors | 'white' | 'muted' | string
+
+export const textColorsPropType = PropTypes.oneOfType([
+  colorPropType,
+  PropTypes.oneOf(['white', 'muted']),
+  PropTypes.string,
+])
+
+export type Triggers = 'hover' | 'focus' | 'click'
+
+export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])

package/src/components/accordion/CAccordion.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. [docs]
+   */
+  flush?: boolean
+}
+
+export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
+  ({ children, className, flush, ...rest }, ref) => {
+    const _className = classNames('accordion', { 'accordion-flush': flush }, className)
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CAccordion.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  flush: PropTypes.bool,
+}
+
+CAccordion.displayName = 'CAccordion'

package/src/components/accordion/CAccordionBody.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('accordion-body', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CAccordionBody.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CAccordionBody.displayName = 'CAccordionBody'

package/src/components/accordion/CAccordionButton.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Set button state to collapsed. [docs]
+   */
+  collapsed?: boolean
+}
+
+export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
+  ({ children, className, collapsed, ...rest }, ref) => {
+    const _className = classNames('accordion-button', { collapsed: collapsed }, className)
+
+    return (
+      <button className={_className} {...rest} aria-expanded={!collapsed} ref={ref}>
+        {children}
+      </button>
+    )
+  },
+)
+
+CAccordionButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  collapsed: PropTypes.bool,
+}
+
+CAccordionButton.displayName = 'CAccordionButton'

package/src/components/accordion/CAccordionCollapse.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { CCollapse, CCollapseProps } from '../collapse/CCollapse'
+
+export const CAccordionCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <CCollapse className="accordion-collapse" {...props} ref={ref}>
+        {children}
+      </CCollapse>
+    )
+  },
+)
+
+CAccordionCollapse.propTypes = {
+  children: PropTypes.node,
+}
+
+CAccordionCollapse.displayName = 'CAccordionCollapse'

package/src/components/accordion/CAccordionHeader.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('accordion-header', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CAccordionHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CAccordionHeader.displayName = 'CAccordionHeader'

package/src/components/accordion/CAccordionItem.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('accordion-item', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CAccordionItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CAccordionItem.displayName = 'CAccordionItem'

package/src/components/accordion/__tests__/CAccordion.spec.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CAccordion } from '../../../index'
+
+test('loads and displays CAccordion component', async () => {
+  const { container } = render(<CAccordion>Test</CAccordion>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CAccordion customize', async () => {
+  const { container } = render(<CAccordion className="bazinga">Test</CAccordion>)
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container).toMatchSnapshot()
+})
+
+test('CAccordion use case test', async () => {
+  jest.useFakeTimers()
+  const { rerender } = render(<CAccordion flush={false}>Test</CAccordion>)
+  expect(screen.getByText('Test')).toHaveClass('accordion')
+  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
+  rerender(<CAccordion flush={true}>Test</CAccordion>)
+  expect(screen.getByText('Test')).toHaveClass('accordion')
+  expect(screen.getByText('Test')).toHaveClass('accordion-flush')
+  jest.runAllTimers()
+  expect(screen.getByText('Test')).toHaveClass('accordion')
+  expect(screen.getByText('Test')).toHaveClass('accordion-flush')
+  rerender(<CAccordion flush={false}>Test</CAccordion>)
+  expect(screen.getByText('Test')).toHaveClass('accordion')
+  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
+  jest.runAllTimers()
+  expect(screen.getByText('Test')).toHaveClass('accordion')
+  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
+  jest.runAllTimers()
+  jest.useRealTimers()
+})

package/src/components/accordion/__tests__/CAccordionBody.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionButton.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CAccordionButton } from '../../../index'
+
+test('loads and displays CAccordionButton component', async () => {
+  const { container } = render(<CAccordionButton>Test</CAccordionButton>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CAccordionButton customize', async () => {
+  const { container } = render(
+    <CAccordionButton className="bazinga" collapsed={true}>
+      Test
+    </CAccordionButton>,
+  )
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('accordion-button')
+  expect(container.firstChild).toHaveClass('collapsed')
+  expect(container).toMatchSnapshot()
+})

package/src/components/accordion/__tests__/CAccordionCollapse.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CAccordionCollapse } from '../../../index'
+
+test('loads and displays CAccordionCollapse component', async () => {
+  const { container } = render(<CAccordionCollapse>Test</CAccordionCollapse>)
+  expect(container.firstChild).toHaveClass('accordion-collapse')
+  expect(container).toMatchSnapshot()
+})

package/src/components/accordion/__tests__/CAccordionHeader.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionItem.spec.tsx

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

package/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap

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

package/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap

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

package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CAccordionButton customize 1`] = `
+<div>
+  <button
+    aria-expanded="false"
+    class="accordion-button collapsed bazinga"
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`loads and displays CAccordionButton component 1`] = `
+<div>
+  <button
+    aria-expanded="true"
+    class="accordion-button"
+  >
+    Test
+  </button>
+</div>
+`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionCollapse.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads and displays CAccordionCollapse component 1`] = `
+<div>
+  <div
+    class="accordion-collapse collapse"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap

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

package/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap

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