@papillonarts/components 0.10.0 → 0.12.0

package/build/primer/Dropdown/Dropdown.tsx

@@ -1,102 +0,0 @@
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import detailsUtilityStyles from '@papillonarts/css/build/primer/utilities/details.scss'
-import displayStyles from '@papillonarts/css/build/primer/utilities/visibility-display.scss'
-import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
-import flexboxStyles from '@papillonarts/css/build/primer/utilities/flexbox.scss'
-import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
-import { useRef } from '@papillonarts/library/hooks'
-import buttonStyles from '../Button/Button.scss'
-import { DropdownProps, defaultProps, dropdownState } from './Dropdown.prop'
-import styles from './Dropdown.scss'
-
-export function Dropdown({
-  className = defaultProps.className,
-  summary,
-  ariaAttr = defaultProps.ariaAttr,
-  items,
-  onClick,
-  state = defaultProps.state,
-}: DropdownProps) {
-  const details = useRef(null)
-
-  if (!items) {
-    return null
-  }
-
-  const indexItems = getIndexItems(items)
-
-  return (
-    <div className={className}>
-      <details
-        ref={details}
-        className={cx(
-          styles.dropdown,
-          detailsUtilityStyles['details-reset'],
-          detailsUtilityStyles['details-overlay'],
-          displayStyles['d-inline-block'],
-          {
-            [styles['dropdown-inactive']]: state === dropdownState.inactive,
-          },
-        )}
-      >
-        <summary className={cx(buttonStyles.btn)} aria-haspopup={ariaAttr?.haspopup ?? false}>
-          <div
-            className={cx(displayStyles['d-flex'], flexboxStyles['flex-justify-between'], flexboxStyles['flex-items-center'], {
-              [styles['dropdown-inactive']]: state === dropdownState.inactive,
-            })}
-          >
-            <div>{summary}</div> <div className={styles['dropdown-caret']} />
-          </div>
-        </summary>
-
-        <ul className={cx(styles['dropdown-menu'], styles['dropdown-menu-se'], layoutStyles['width-full'])}>
-          {indexItems.map((indexItem) => {
-            const { href, text /* isSelected */ } = indexItem
-
-            // const itemOtherProps = isSelected ? { ...{ 'aria-current': ariaAttr?.current } } : null
-
-            return (
-              <li key={uuidv1()}>
-                <a
-                  onClick={(e) => {
-                    e.preventDefault()
-                    const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
-                    onClick({
-                      summary: text,
-                      ariaAttr,
-                      items: newIndexItems.map((newIndexItem) =>
-                        (({
-                          id: newIndexItemId,
-                          href: newIndexItemHref,
-                          text: newIndexItemText,
-                          'date-modified': dateModified,
-                          'date-created': dateCreated,
-                          isSelected: newIndexItemIsSelected,
-                        }) => ({
-                          id: newIndexItemId,
-                          href: newIndexItemHref,
-                          text: newIndexItemText,
-                          'date-modified': dateModified,
-                          'date-created': dateCreated,
-                          isSelected: newIndexItemIsSelected,
-                        }))(newIndexItem),
-                      ),
-                    })
-                    details.current.removeAttribute('open')
-                  }}
-                  className={styles['dropdown-item']}
-                  href={href}
-                  // @ts-ignore
-                  // {...itemOtherProps}
-                >
-                  {text}
-                </a>
-              </li>
-            )
-          })}
-        </ul>
-      </details>
-    </div>
-  )
-}

package/build/primer/Dropdown/__tests__/Dropdown.int.story.tsx

@@ -1,43 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { dropdownState } from '../Dropdown.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Dropdown =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Dropdown.Dropdown
-    : require('../../../../build').primer.Dropdown.Dropdown
-
-export default {
-  title: 'Primer/Atom/Dropdown',
-  component: Dropdown,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Dropdown.int.test.js'] },
-  excludeStories: ['summary', 'ariaAttr', 'items', 'custom'],
-}
-
-export const summary = 'Dropdown'
-
-export const ariaAttr = {
-  haspopup: true,
-  current: 'page',
-}
-
-export const items = [
-  { href: '#url', text: 'Dropdown Item 1', isSelected: true },
-  { href: '#url', text: 'Dropdown Item 2', isSelected: false },
-  { href: '#url', text: 'Dropdown Item 3', isSelected: false },
-  { href: '#url', text: 'Dropdown Item 4', isSelected: false },
-]
-
-export function custom(onClick) {
-  return <Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={onClick} />
-}
-
-export function regular() {
-  return <Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
-}
-
-export function inactive() {
-  return <Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={dropdownState.inactive} />
-}

package/build/primer/Dropdown/__tests__/Dropdown.int.test.ts

@@ -1,53 +0,0 @@
-import { items, regular, inactive } from './Dropdown.int.story'
-
-jest.mock('@papillonarts/library/array', () => ({
-  getIndexItems: () => {},
-  getIndexItemsWithSelected: () => {},
-}))
-
-jest.mock('@papillonarts/library/hooks', () => ({
-  useRef: () => {},
-}))
-
-const libraryArrayMockObject = require('@papillonarts/library/array')
-const libraryHooksMockObject = require('@papillonarts/library/hooks')
-
-describe('<Dropdown />', () => {
-  const indexItemsDataObject = [
-    { ...items[0], index: 0 },
-    { ...items[1], index: 1 },
-    { ...items[2], index: 2 },
-    { ...items[3], index: 3 },
-  ]
-
-  const newIndexItemsWithSelectedDataObject = [
-    { ...items[0], index: 0, isSelected: true },
-    { ...items[1], index: 1, isSelected: false },
-    { ...items[2], index: 2, isSelected: false },
-    { ...items[3], index: 3, isSelected: false },
-  ]
-
-  beforeEach(() => {
-    jest.spyOn(libraryArrayMockObject, 'getIndexItems').mockReturnValue(indexItemsDataObject)
-
-    jest.spyOn(libraryArrayMockObject, 'getIndexItemsWithSelected').mockReturnValue(newIndexItemsWithSelectedDataObject)
-
-    jest.spyOn(libraryHooksMockObject, 'useRef').mockImplementation(() => ({
-      current: {
-        removeAttribute: () => {},
-      },
-    }))
-  })
-
-  afterEach(() => jest.clearAllMocks())
-
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-
-    test('must match inacive()', () => {
-      expect(global.renderToJSON(inactive())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Dropdown/index.ts

@@ -1,2 +0,0 @@
-export { Dropdown } from './Dropdown'
-export { dropdownState } from './Dropdown.prop'

package/build/primer/ErrorBoundary/ErrorBoundary.prop.ts

@@ -1,5 +0,0 @@
-export const defaultProps = {}
-
-export interface ErrorBoundaryProps {
-  children: React.ReactNode // https://react.dev/learn/typescript#typing-children,
-}

package/build/primer/ErrorBoundary/ErrorBoundary.tsx

@@ -1,35 +0,0 @@
-/* eslint-disable no-unused-vars, no-console */
-import { Component } from 'react'
-import { ErrorBoundaryProps } from './ErrorBoundary.prop'
-
-export class ErrorBoundary extends Component<ErrorBoundaryProps> {
-  constructor(props) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true }
-  }
-
-  componentDidCatch(error, errorInfo) {
-    // You can also log the error to an error reporting service
-    console.log('~error~', error)
-    console.log('~errorInfo~', errorInfo)
-  }
-
-  render() {
-    // @ts-ignore
-    const { hasError } = this.state
-    // @ts-ignore
-    const { children } = this.props
-
-    if (hasError) {
-      // You can render any custom fallback UI
-      return <h1>Something went wrong.</h1>
-    }
-
-    return children
-  }
-}

package/build/primer/ErrorBoundary/__tests__/ErrorBoundary.int.story.tsx

@@ -1,23 +0,0 @@
-import { withTests } from '@storybook/addon-jest'
-import results from '../../../../../../.jest-test-results.json'
-
-const ErrorBoundary =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.ErrorBoundary
-    : require('../../../../build').primer.ErrorBoundary
-
-export default {
-  title: 'Primer/Molecule/ErrorBoundary',
-  component: ErrorBoundary,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['ErrorBoundary.int.test.js'] },
-  excludeStories: ['custom'],
-}
-
-export function regular() {
-  return (
-    <ErrorBoundary>
-      <div />
-    </ErrorBoundary>
-  )
-}

package/build/primer/ErrorBoundary/__tests__/ErrorBoundary.int.test.ts

@@ -1,9 +0,0 @@
-import { regular } from './ErrorBoundary.int.story'
-
-describe('<ErrorBoundary />', () => {
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/ErrorBoundary/index.ts

@@ -1 +0,0 @@
-export { ErrorBoundary } from './ErrorBoundary'

package/build/primer/Form/Checkbox/Checkbox.prop.ts

@@ -1,34 +0,0 @@
-export const checkboxState = {
-  active: 'active',
-  inactive: 'inactive',
-}
-
-export const inputType = {
-  checkbox: 'checkbox',
-}
-
-export const defaultProps = {
-  dataTest: null,
-  className: null,
-  htmlFor: 'checkbox',
-  inputType: inputType.checkbox,
-  isChecked: false,
-  text: null,
-  state: checkboxState.active,
-}
-
-export interface AriaAttrType {
-  describedBy: string
-}
-
-export interface CheckboxProps {
-  dataTest?: string
-  className?: string
-  htmlFor?: string
-  ariaAttr: AriaAttrType
-  inputType?: typeof inputType.checkbox
-  isChecked?: boolean
-  text?: string
-  onChange: (value) => void
-  state?: typeof checkboxState.active | typeof checkboxState.inactive
-}

package/build/primer/Form/Checkbox/Checkbox.tsx

@@ -1,40 +0,0 @@
-import cx from 'classnames'
-import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
-import { CheckboxProps, defaultProps, checkboxState } from './Checkbox.prop'
-import styles from './Checkbox.scss'
-import formStyles from '../index.scss'
-
-export function Checkbox({
-  dataTest = defaultProps.dataTest,
-  className = defaultProps.className,
-  htmlFor = defaultProps.htmlFor,
-  ariaAttr,
-  inputType = defaultProps.inputType,
-  isChecked = defaultProps.isChecked,
-  text = defaultProps.text,
-  onChange,
-  state = defaultProps.state,
-}: CheckboxProps) {
-  const { describedBy } = ariaAttr
-
-  return (
-    <div
-      data-test={dataTest}
-      className={cx(className, marginStyles['m-0'], formStyles['form-checkbox'], {
-        [styles['checkbox-inactive']]: state === checkboxState.inactive,
-      })}
-    >
-      <label htmlFor={htmlFor}>
-        <input
-          type={inputType}
-          aria-describedby={describedBy}
-          onChange={(event) => {
-            onChange(event)
-          }}
-          checked={isChecked}
-        />
-        {text}
-      </label>
-    </div>
-  )
-}

package/build/primer/Form/Checkbox/__tests__/Checkbox.int.story.tsx

@@ -1,50 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { checkboxState } from '../Checkbox.prop'
-import results from '../../../../../../../.jest-test-results.json'
-
-const Checkbox =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../../index').primer.Form.Checkbox.Checkbox
-    : require('../../../../../build').primer.Form.Checkbox.Checkbox
-
-export default {
-  title: 'Primer/Atom/Form/Checkbox',
-  component: Checkbox,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Checkbox.int.test.js'] },
-  excludeStories: ['ariaAttr', 'text', 'custom'],
-}
-
-const ariaAttr = {
-  describedBy: 'help-text-for-checkbox',
-}
-
-export const text = {
-  isChecked: 'is checked',
-  isNotChecked: 'is not checked',
-}
-
-export function custom(onChange) {
-  return <Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={onChange} text="is checked" />
-}
-
-export function isChecked() {
-  return <Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} />
-}
-
-export function isCheckedInactive() {
-  return (
-    <Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} state={checkboxState.inactive} />
-  )
-}
-
-export function isNotChecked() {
-  return <Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} />
-}
-
-export function isNotCheckedInactive() {
-  return (
-    <Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} state={checkboxState.inactive} />
-  )
-}

package/build/primer/Form/Checkbox/__tests__/Checkbox.int.test.ts

@@ -1,23 +0,0 @@
-import { isChecked, isNotChecked, isCheckedInactive, isNotCheckedInactive } from './Checkbox.int.story'
-
-describe('<Checkbox />', () => {
-  afterEach(() => jest.clearAllMocks())
-
-  describe('Render', () => {
-    test('must match isChecked()', () => {
-      expect(global.renderToJSON(isChecked())).toMatchSnapshot()
-    })
-
-    test('must match isCheckedInactive()', () => {
-      expect(global.renderToJSON(isCheckedInactive())).toMatchSnapshot()
-    })
-
-    test('must match isNotChecked()', () => {
-      expect(global.renderToJSON(isNotChecked())).toMatchSnapshot()
-    })
-
-    test('must match isNotCheckedInactive()', () => {
-      expect(global.renderToJSON(isNotCheckedInactive())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Form/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export { Checkbox } from './Checkbox'
-export { checkboxState } from './Checkbox.prop'

package/build/primer/Form/Input/Input.prop.ts

@@ -1,43 +0,0 @@
-export const inputState = {
-  active: 'active',
-  inactive: 'inactive',
-}
-
-export const inputType = {
-  text: 'text',
-  password: 'password',
-}
-
-export const defaultProps = {
-  dataTest: null,
-  id: null,
-  className: null,
-  placeholder: null,
-  ariaAttr: {
-    label: '',
-  },
-  inputType: inputType.text,
-  onFocus: () => {},
-  onBlur: () => {},
-  state: inputState.active,
-}
-
-export interface AriaAttrType {
-  label: string
-}
-
-export interface InputProps {
-  dataTest?: string
-  id?: string
-  className?: string
-  placeholder?: string
-  ariaAttr?: AriaAttrType
-  inputType?: typeof inputType.text | typeof inputType.password
-  value: string
-  onChange: (value) => void
-  onKeyUp: (value) => void
-  onFocus?: (value) => void
-  onBlur?: (value) => void
-  autoFocus: boolean
-  state?: typeof inputState.active | typeof inputState.inactive
-}

package/build/primer/Form/Input/Input.tsx

@@ -1,43 +0,0 @@
-import cx from 'classnames'
-import { InputProps, defaultProps, inputState } from './Input.prop'
-import styles from './Input.scss'
-import formStyles from '../index.scss'
-
-export function Input({
-  dataTest = defaultProps.dataTest,
-  id = defaultProps.id,
-  className = defaultProps.className,
-  placeholder = defaultProps.placeholder,
-  ariaAttr = defaultProps.ariaAttr,
-  inputType = defaultProps.inputType,
-  value,
-  onChange,
-  onKeyUp,
-  onFocus = defaultProps.onFocus,
-  onBlur = defaultProps.onBlur,
-  autoFocus,
-  state = defaultProps.state,
-}: InputProps) {
-  return (
-    <input
-      data-test={dataTest}
-      id={id}
-      className={cx(className, formStyles['form-control'], {
-        [styles['input-inactive']]: state === inputState.inactive,
-      })}
-      value={value}
-      onChange={(event) => {
-        onChange(event)
-      }}
-      onKeyUp={(event) => {
-        onKeyUp(event)
-      }}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      type={inputType}
-      placeholder={placeholder}
-      aria-label={ariaAttr.label}
-      autoFocus={autoFocus} // eslint-disable-line
-    />
-  )
-}

package/build/primer/Form/Input/__tests__/Input.int.story.tsx

@@ -1,54 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { inputState } from '../Input.prop'
-import results from '../../../../../../../.jest-test-results.json'
-
-const Input =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../../index').primer.Form.Input.Input
-    : require('../../../../../build').primer.Form.Input.Input
-
-export default {
-  title: 'Primer/Atom/Form/Input',
-  component: Input,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Input.int.test.js'] },
-  excludeStories: ['placeholder', 'ariaAttr', 'custom'],
-}
-
-const placeholder = 'Fantastic placeholder'
-
-const ariaAttr = {
-  label: 'Repository description',
-}
-
-export function custom(onChange, onKeyUp, onFocus, onBlur) {
-  return <Input placeholder={placeholder} ariaAttr={ariaAttr} onChange={onChange} onKeyUp={onKeyUp} onFocus={onFocus} onBlur={onBlur} />
-}
-
-export function regular() {
-  return (
-    <Input
-      placeholder={placeholder}
-      ariaAttr={ariaAttr}
-      onChange={action('onChange')}
-      onKeyUp={action('onKeyUp')}
-      onFocus={action('onFocus')}
-      onBlur={action('onBlur')}
-    />
-  )
-}
-
-export function inactive() {
-  return (
-    <Input
-      placeholder={placeholder}
-      ariaAttr={ariaAttr}
-      onChange={action('onChange')}
-      onKeyUp={action('onKeyUp')}
-      onFocus={action('onFocus')}
-      onBlur={action('onBlur')}
-      state={inputState.inactive}
-    />
-  )
-}

package/build/primer/Form/Input/__tests__/Input.int.test.ts

@@ -1,15 +0,0 @@
-import { regular, inactive } from './Input.int.story'
-
-describe('<Input />', () => {
-  afterEach(() => jest.clearAllMocks())
-
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-
-    test('must match inactive()', () => {
-      expect(global.renderToJSON(inactive())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Form/Input/index.ts

@@ -1,2 +0,0 @@
-export { Input } from './Input'
-export { inputType, inputState } from './Input.prop'

package/build/primer/Form/Radio/Radio.prop.ts

@@ -1,30 +0,0 @@
-export const radioState = {
-  active: 'active',
-  inactive: 'inactive',
-}
-
-export const inputType = {
-  radio: 'radio',
-}
-
-export const defaultProps = {
-  dataTest: null,
-  className: null,
-  htmlFor: 'checkbox',
-  inputType: inputType.radio,
-  isChecked: false,
-  text: null,
-  state: radioState.active,
-}
-
-export interface RadioProps {
-  dataTest?: string
-  className?: string
-  htmlFor?: string
-  inputType?: typeof inputType.radio
-  name: string
-  isChecked?: boolean
-  text?: string
-  onChange: (value) => void
-  state?: typeof radioState.active | typeof radioState.inactive
-}

package/build/primer/Form/Radio/Radio.tsx

@@ -1,38 +0,0 @@
-import cx from 'classnames'
-import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
-import { RadioProps, defaultProps, radioState } from './Radio.prop'
-import styles from './Radio.scss'
-import formStyles from '../index.scss'
-
-export function Radio({
-  dataTest = defaultProps.dataTest,
-  className = defaultProps.className,
-  htmlFor = defaultProps.htmlFor,
-  inputType = defaultProps.inputType,
-  name,
-  isChecked = defaultProps.isChecked,
-  text = defaultProps.text,
-  onChange,
-  state = defaultProps.state,
-}: RadioProps) {
-  return (
-    <div
-      data-test={dataTest}
-      className={cx(className, marginStyles['m-0'], formStyles['form-checkbox'], {
-        [styles['radio-inactive']]: state === radioState.inactive,
-      })}
-    >
-      <label htmlFor={htmlFor}>
-        <input
-          type={inputType}
-          name={name}
-          onChange={(event) => {
-            onChange(event)
-          }}
-          checked={isChecked}
-        />
-        {text}
-      </label>
-    </div>
-  )
-}