@coreui/react 4.0.0-rc.1

package/src/components/sidebar/CSidebar.tsx

@@ -0,0 +1,197 @@
+import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../utils/hooks'
+import { CBackdrop } from '../backdrop/CBackdrop'
+
+export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Make sidebar narrow. [docs]
+   */
+  narrow?: boolean
+  /**
+   * Event emitted after visibility of component changed. [docs]
+   */
+  onVisibleChange?: (visible: boolean) => void
+  /**
+   * Set sidebar to narrow variant. [docs]
+   */
+  overlaid?: boolean
+  /**
+   * Place sidebar in non-static positions. [docs]
+   */
+  position?: 'fixed' | 'sticky'
+  /**
+   * Size the component small, large, or extra large. [docs]
+   */
+  size?: 'sm' | 'lg' | 'xl'
+  /**
+   * Expand narrowed sidebar on hover. [docs]
+   */
+  unfoldable?: boolean
+  /**
+   * Toggle the visibility of sidebar component. [docs]
+   */
+  visible?: boolean
+}
+
+const isOnMobile = (element: HTMLDivElement) =>
+  Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
+
+const isVisible = (element: HTMLDivElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
+  (
+    {
+      children,
+      className,
+      narrow,
+      onVisibleChange,
+      overlaid,
+      position,
+      size,
+      unfoldable,
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const sidebarRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, sidebarRef)
+    const [mobile, setMobile] = useState(false)
+    const [_visible, setVisible] = useState(visible)
+    const [inViewport, setInViewport] = useState<boolean>()
+
+    useEffect(() => {
+      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
+
+      setVisible(visible)
+    }, [visible])
+
+    useEffect(() => {
+      typeof inViewport !== 'undefined' && onVisibleChange && onVisibleChange(inViewport)
+    }, [inViewport])
+
+    useEffect(() => {
+      mobile && visible && setVisible(false)
+    }, [mobile])
+
+    useEffect(() => {
+      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
+      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+
+      window.addEventListener('resize', () => handleResize())
+      window.addEventListener('mouseup', handleClickOutside)
+      window.addEventListener('keyup', handleKeyup)
+
+      sidebarRef.current?.addEventListener('mouseup', handleOnClick)
+      sidebarRef.current?.addEventListener('transitionend', () => {
+        sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+      })
+
+      return () => {
+        window.removeEventListener('resize', () => handleResize())
+        window.removeEventListener('mouseup', handleClickOutside)
+        window.removeEventListener('keyup', handleKeyup)
+
+        sidebarRef.current?.removeEventListener('mouseup', handleOnClick)
+        sidebarRef.current?.removeEventListener('transitionend', () => {
+          sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+        })
+      }
+    })
+
+    const handleHide = () => {
+      setVisible(false)
+    }
+
+    const handleResize = () => {
+      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
+      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+    }
+
+    const handleKeyup = (event: Event) => {
+      if (
+        mobile &&
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as HTMLElement)
+      ) {
+        handleHide()
+      }
+    }
+    const handleClickOutside = (event: Event) => {
+      if (
+        mobile &&
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as HTMLElement)
+      ) {
+        handleHide()
+      }
+    }
+
+    const handleOnClick = (event: Event) => {
+      const target = event.target as HTMLAnchorElement
+      target &&
+        target.classList.contains('nav-link') &&
+        !target.classList.contains('nav-group-toggle') &&
+        mobile &&
+        handleHide()
+    }
+
+    const _className = classNames(
+      'sidebar',
+      {
+        'sidebar-narrow': narrow,
+        'sidebar-overlaid': overlaid,
+        [`sidebar-${position}`]: position,
+        [`sidebar-${size}`]: size,
+        'sidebar-narrow-unfoldable': unfoldable,
+        show: _visible === true && mobile,
+        hide: _visible === false && !mobile,
+      },
+      className,
+    )
+
+    return (
+      <>
+        <div className={_className} {...rest} ref={forkedRef}>
+          {children}
+        </div>
+        {typeof window !== 'undefined' &&
+          mobile &&
+          createPortal(
+            <CBackdrop className="sidebar-backdrop" visible={_visible} />,
+            document.body,
+          )}
+      </>
+    )
+  },
+)
+
+CSidebar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  narrow: PropTypes.bool,
+  onVisibleChange: PropTypes.func,
+  overlaid: PropTypes.bool,
+  position: PropTypes.oneOf(['fixed', 'sticky']),
+  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+  unfoldable: PropTypes.bool,
+  visible: PropTypes.bool,
+}
+
+CSidebar.displayName = 'CSidebar'

package/src/components/sidebar/CSidebarBrand.tsx

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

package/src/components/sidebar/CSidebarFooter.tsx

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

package/src/components/sidebar/CSidebarHeader.tsx

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

package/src/components/sidebar/CSidebarNav.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+}
+
+interface ContextProps {
+  visibleGroup: string
+  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+}
+
+export const CNavContext = createContext({} as ContextProps)
+
+export const CSidebarNav = forwardRef<HTMLUListElement, CSidebarNavProps>(
+  ({ children, className, ...rest }, ref) => {
+    const [visibleGroup, setVisibleGroup] = useState('')
+    const CNavContextValues = {
+      visibleGroup,
+      setVisibleGroup,
+    }
+    const classes = classNames('sidebar-nav', className)
+    return (
+      <ul className={classes} ref={ref} {...rest}>
+        <CNavContext.Provider value={CNavContextValues}>
+          {React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+              return React.cloneElement(child, { key: index, idx: `${index}` })
+            }
+            return
+          })}
+        </CNavContext.Provider>
+      </ul>
+    )
+  },
+)
+
+CSidebarNav.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CSidebarNav.displayName = 'CSidebarNav'

package/src/components/sidebar/CSidebarToggler.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CSidebarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+}
+
+export const CSidebarToggler = forwardRef<HTMLButtonElement, CSidebarTogglerProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('sidebar-toggler', className)
+    return (
+      <button className={_className} ref={ref} {...rest}>
+        {children}
+      </button>
+    )
+  },
+)
+
+CSidebarToggler.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CSidebarToggler.displayName = 'CSidebarToggler'

package/src/components/sidebar/__tests__/CSidebar.spec.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import {
+  CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
+} from '../../../index'
+
+test('loads and displays CSidebar component', async () => {
+  const { container } = render(<CSidebar>Test</CSidebar>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CSidebar customize show', async () => {
+  const { container } = render(
+    <CSidebar
+      className="bazinga"
+      narrow={true}
+      position="fixed"
+      selfHiding="lg"
+      visible={true}
+      unfoldable={true}
+      overlaid={true}
+    >
+      Test
+    </CSidebar>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('sidebar')
+  expect(container.firstChild).toHaveClass('sidebar-narrow')
+  expect(container.firstChild).toHaveClass('sidebar-overlaid')
+  expect(container.firstChild).toHaveClass('sidebar-fixed')
+  expect(container.firstChild).toHaveClass('sidebar-self-hiding-lg')
+  expect(container.firstChild).toHaveClass('sidebar-narrow-unfoldable')
+  expect(container.firstChild).toHaveClass('show')
+})
+
+test('CSidebar customize hide', async () => {
+  const { container } = render(
+    <CSidebar
+      className="bazinga"
+      position="sticky"
+      selfHiding="md"
+      visible={false}
+      overlaid={false}
+    >
+      Test
+    </CSidebar>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('sidebar')
+  expect(container.firstChild).toHaveClass('sidebar-sticky')
+  expect(container.firstChild).toHaveClass('sidebar-self-hiding-md')
+})

package/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarNav.spec.tsx

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

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebar customize hide 1`] = `
+<div>
+  <div
+    class="sidebar sidebar-sticky sidebar-self-hiding-md hide bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CSidebar customize show 1`] = `
+<div>
+  <div
+    class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-self-hiding-lg sidebar-narrow-unfoldable show bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CSidebar component 1`] = `
+<div>
+  <div
+    class="sidebar"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarBrand customize 1`] = `
+<div>
+  <div
+    class="sidebar-brand bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CSidebarBrand component 1`] = `
+<div>
+  <div
+    class="sidebar-brand"
+    color="primary"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.tsx.snap

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.tsx.snap

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarNav customize 1`] = `
+<div>
+  <ul
+    class="sidebar-nav bazinga"
+  />
+</div>
+`;
+
+exports[`loads and displays CSidebarNav component 1`] = `
+<div>
+  <ul
+    class="sidebar-nav"
+  />
+</div>
+`;

package/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.tsx.snap

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