@coreui/react-pro 4.0.0-rc.1

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

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

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/dist/utils/hooks/useStateWithCallback.d.ts

@@ -0,0 +1 @@
+export declare const useStateWithCallback: (initialState: any, callback: any) => any[];

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@coreui/react-pro",
+  "version": "4.0.0-rc.1",
+  "config": {
+    "version_short": "4.0"
+  },
+  "description": "",
+  "license": "",
+  "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-pro": "^4.0.3",
+    "react": "^17",
+    "react-dom": "^17"
+  },
+  "devDependencies": {
+    "@coreui/coreui-pro": "^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.10.1",
+    "@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.1.0",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-helmet": "^6.1.2",
+    "@types/react-transition-group": "^4.4.3",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "classnames": "^2.3.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jsdoc": "^36.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "gatsby": "^3.14.0",
+    "gatsby-plugin-google-gtag": "3",
+    "gatsby-plugin-manifest": "^3.14.0",
+    "gatsby-plugin-mdx": "^2.14.0",
+    "gatsby-plugin-sass": "4",
+    "gatsby-plugin-sitemap": "4",
+    "gatsby-remark-autolink-headers": "^4.11.0",
+    "gatsby-source-filesystem": "^3.14.0",
+    "glob": "^7.1.7",
+    "globby": "^11.0.4",
+    "jest": "^27.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.4.1",
+    "prism-react-renderer": "^1.2.1",
+    "prismjs": "^1.25.0",
+    "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.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.56.22.56.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "sass": "^1.41.1",
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.4.3"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "dist/"
+    ]
+  }
+}

package/src/components/Types.tsx

@@ -0,0 +1,128 @@
+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 Gradients =
+  | 'primary-gradient'
+  | 'secondary-gradient'
+  | 'success-gradient'
+  | 'danger-gradient'
+  | 'warning-gradient'
+  | 'info-gradient'
+  | 'dark-gradient'
+  | 'light-gradient'
+
+export const gradientsPropType = PropTypes.oneOf([
+  'primary-gradient',
+  'secondary-gradient',
+  'success-gradient',
+  'danger-gradient',
+  'warning-gradient',
+  'info-gradient',
+  'dark-gradient',
+  'light-gradient',
+])
+
+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,54 @@
+import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The active item key. [docs]
+   */
+  activeItemKey?: number | string
+  /**
+   * Make accordion items stay open when another item is opened
+   */
+  alwaysOpen?: boolean
+  /**
+   * 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 interface CAccordionContextProps {
+  _activeItemKey?: number | string
+  alwaysOpen?: boolean
+  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+}
+
+export const CAccordionContext = createContext({} as CAccordionContextProps)
+
+export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
+  ({ children, activeItemKey = undefined, alwaysOpen = false, className, flush, ...rest }, ref) => {
+    const [_activeItemKey, setActiveKey] = useState(activeItemKey)
+    const _className = classNames('accordion', { 'accordion-flush': flush }, className)
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        <CAccordionContext.Provider value={{ _activeItemKey, alwaysOpen, setActiveKey }}>
+          {children}
+        </CAccordionContext.Provider>
+      </div>
+    )
+  },
+)
+
+CAccordion.propTypes = {
+  alwaysOpen: PropTypes.bool,
+  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  flush: PropTypes.bool,
+}
+
+CAccordion.displayName = 'CAccordion'

package/src/components/accordion/CAccordionBody.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CAccordionItemContext } from './CAccordionItem'
+
+import { CCollapse } from './../collapse/CCollapse'
+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 { visible } = useContext(CAccordionItemContext)
+    const _className = classNames('accordion-body', className)
+
+    return (
+      <CCollapse className="accordion-collpase" visible={visible}>
+        <div className={_className} {...rest} ref={ref}>
+          {children}
+        </div>
+      </CCollapse>
+    )
+  },
+)
+
+CAccordionBody.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CAccordionBody.displayName = 'CAccordionBody'

package/src/components/accordion/CAccordionButton.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CAccordionItemContext } from './CAccordionItem'
+
+export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
+  ({ children, className, ...rest }, ref) => {
+    const { visible, setVisible } = useContext(CAccordionItemContext)
+
+    const _className = classNames('accordion-button', { collapsed: !visible }, className)
+
+    return (
+      <button
+        className={_className}
+        {...rest}
+        aria-expanded={!visible}
+        onClick={() => setVisible(!visible)}
+        ref={ref}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+CAccordionButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+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,31 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CAccordionButton } from './CAccordionButton'
+
+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}>
+        <CAccordionButton>{children}</CAccordionButton>
+      </div>
+    )
+  },
+)
+
+CAccordionHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CAccordionHeader.displayName = 'CAccordionHeader'

package/src/components/accordion/CAccordionItem.tsx

@@ -0,0 +1,66 @@
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CAccordionContext } from './CAccordion'
+
+export interface CAccordionItemContextProps {
+  setVisible: (a: boolean) => void
+  visible?: boolean
+}
+
+export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
+
+export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Item key. [docs]
+   */
+  itemKey?: number | string
+}
+
+export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
+  ({ children, className, itemKey, ...rest }, ref) => {
+    const _itemKey = useRef(itemKey ? itemKey : Math.random().toString(36).substr(2, 9))
+
+    const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
+    const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
+
+    useEffect(() => {
+      !alwaysOpen && visible && setActiveKey(_itemKey.current)
+    }, [visible])
+
+    useEffect(() => {
+      setVisible(Boolean(_activeItemKey === _itemKey.current))
+    }, [_activeItemKey])
+
+    const _className = classNames('accordion-item', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        <CAccordionItemContext.Provider value={{ setVisible, visible }}>
+          {children}
+        </CAccordionItemContext.Provider>
+      </div>
+    )
+  },
+)
+
+CAccordionItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  itemKey: PropTypes.oneOfType([PropTypes.number, 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,15 @@
+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>Test</CAccordionBody>)
+  expect(container.firstChild?.firstChild).toHaveClass('accordion-body')
+  expect(container).toMatchSnapshot()
+})

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

@@ -0,0 +1,16 @@
+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">Test</CAccordionButton>)
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('accordion-button')
+  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,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CAccordionBody customize 1`] = `
+<div>
+  <div
+    class="accordion-collpase collapse"
+  >
+    <div
+      class="accordion-body"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CAccordionBody component 1`] = `
+<div>
+  <div
+    class="accordion-collpase collapse"
+  >
+    <div
+      class="accordion-body"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;