design-react-kit 3.3.1 → 4.0.1

package/src/Storyshots.test.js

@@ -1,9 +0,0 @@
-// File is located here in order to avoid a custom jest.config.js
-// Current config is inherited from react-scripts
-import initStoryshots, {
-  multiSnapshotWithOptions
-} from '@storybook/addon-storyshots'
-
-initStoryshots({
-  test: multiSnapshotWithOptions({})
-})

package/src/components/Accordion/Accordion.js

@@ -1,22 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-export default function Accordion(props) {
-  const { className, tag: Tag, ...attributes } = props
-  const classes = classNames('collapse-div', className)
-
-  return <Tag {...attributes} className={classes} />
-}
-
-Accordion.propTypes = propTypes
-Accordion.defaultProps = defaultProps

package/src/components/Accordion/AccordionBody.js

@@ -1,118 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import Transition from 'react-transition-group/Transition'
-
-import { Util } from 'reactstrap'
-
-const {
-  TransitionTimeouts,
-  TransitionPropTypeKeys,
-  TransitionStatuses,
-  pick,
-  omit
-} = Util
-
-const propTypes = {
-  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]),
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  active: PropTypes.bool,
-  onToggle: PropTypes.func
-}
-
-const defaultProps = {
-  ...Transition.defaultProps,
-  timeout: TransitionTimeouts.Collapse,
-  tag: 'div'
-}
-
-const transitionStatusToClassHash = {
-  [TransitionStatuses.ENTERING]: 'collapsing',
-  [TransitionStatuses.ENTERED]: 'collapse show',
-  [TransitionStatuses.EXITING]: 'collapsing',
-  [TransitionStatuses.EXITED]: 'collapse'
-}
-
-function getTransitionClass(status) {
-  return transitionStatusToClassHash[status] || 'collapse'
-}
-
-function getHeight(node) {
-  return node.scrollHeight
-}
-
-export default class AccordionBody extends Component {
-  state = {
-    height: null
-  }
-
-  onEntering = (node, isAppearing) => {
-    this.setState({ height: getHeight(node) })
-    this.props.onEntering(node, isAppearing)
-  }
-
-  onEntered = (node, isAppearing) => {
-    this.setState({ height: null })
-    this.props.onEntered(node, isAppearing)
-  }
-
-  onExit = node => {
-    this.setState({ height: getHeight(node) })
-    this.props.onExit(node)
-  }
-
-  onExiting = node => {
-    // getting this variable triggers a reflow
-    const _unused = node.offsetHeight // eslint-disable-line no-unused-vars
-    this.setState({ height: 0 })
-    this.props.onExiting(node)
-  }
-
-  onExited = node => {
-    this.setState({ height: null })
-    this.props.onExited(node)
-  }
-
-  render() {
-    const { className, tag: Tag, active, children, ...attributes } = this.props
-    const { height } = this.state
-
-    const transitionProps = pick(attributes, TransitionPropTypeKeys)
-    const childProps = omit(attributes, TransitionPropTypeKeys)
-
-    return (
-      <Transition
-        {...transitionProps}
-        in={active}
-        onEntering={this.onEntering}
-        onEntered={this.onEntered}
-        onExit={this.onExit}
-        onExiting={this.onExiting}
-        onExited={this.onExited}>
-        {status => {
-          const transitionClass = getTransitionClass(status)
-          const classes = classNames(className, transitionClass)
-
-          const style = height === null ? null : { height }
-
-          return (
-            <Tag
-              className={classes}
-              style={{ ...childProps.style, ...style }}
-              {...childProps}>
-              <div className="collapse-body">{children}</div>
-            </Tag>
-          )
-        }}
-      </Transition>
-    )
-  }
-}
-
-AccordionBody.propTypes = propTypes
-AccordionBody.defaultProps = defaultProps

package/src/components/Accordion/AccordionHeader.js

@@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  active: PropTypes.bool,
-  onToggle: PropTypes.func
-}
-
-const defaultProps = {
-  tag: 'button'
-}
-
-export default function AccordionHeader(props) {
-  const { className, tag: Tag, active, onToggle, ...attributes } = props
-  const classes = classNames('collapse-header')
-  const toggleClasses = classNames(className, {
-    collapsed: active
-  })
-
-  return (
-    <div className={classes}>
-      <Tag
-        data-toggle="collapse"
-        aria-expanded={active ? 'true' : 'false'}
-        className={toggleClasses}
-        onClick={onToggle}
-        {...attributes}
-      />
-    </div>
-  )
-}
-
-AccordionHeader.propTypes = propTypes
-AccordionHeader.defaultProps = defaultProps

package/src/components/Autocomplete/Autocomplete.js

@@ -1,255 +0,0 @@
-// /* eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-// // Customized components for https://github.com/JedWatson/react-select/tree/v2/src
-
-// import React, { Component, Fragment } from 'react';
-// import PropTypes from 'prop-types';
-// import ReactSelect, { SelectBase, components as defaultComponents } from 'react-select';
-
-// import { SelectPropTypes } from '../Select/Select';
-
-// const SelectContainer = (props) => {
-//   const { children, innerProps, selectProps } = props;
-//   const { bsSize } = selectProps;
-
-//   const classNames = [
-//     'autocomplete-container autocomplete-wrapper custom-autocomplete',
-//     bsSize ? `form-control-${bsSize}` : '',
-//   ].join(' ');
-
-//   return (
-//     <div className={classNames} {...innerProps}>
-//       {children}
-//     </div>
-//   );
-// };
-
-// SelectContainer.propTypes = {
-//   selectProps: PropTypes.shape(SelectPropTypes),
-//   children: PropTypes.node,
-//   innerProps: PropTypes.any,
-// };
-
-// const Control = (props) => {
-//   const { children, innerProps } = props;
-//   const { innerRef, ...rest } = innerProps;
-
-//   return (
-//     <div className="autocomplete-control" {...rest}>
-//       {children}
-//     </div>
-//   );
-// };
-
-// Control.propTypes = {
-//   selectProps: PropTypes.shape(SelectPropTypes),
-//   children: PropTypes.node,
-//   innerProps: PropTypes.any,
-// };
-
-// class ValueContainer extends Component {
-//   render() {
-//     const { children, selectProps } = this.props;
-//     const { components } = selectProps;
-
-//     return (
-//       <div className="autocomplete-value-container">
-//         {(() => React.Children.map(children, (child) => {
-//           if (child === null) return;
-
-//           const { isDisabled, cx, ...rest } = child.props;
-//           switch (child.type) {
-//             case defaultComponents.Input:
-//             case components.Input:
-//               return <Input
-//                 {...rest}
-//                 selectProps={selectProps}
-//               />;
-//             default:
-//               return child;
-//           }
-//         }))()}
-//       </div>
-//     );
-//   }
-// }
-
-// ValueContainer.propTypes = {
-//   selectProps: PropTypes.shape(SelectPropTypes),
-//   children: PropTypes.node,
-// };
-
-// class MenuList extends Component {
-//   styles = {
-//     top: -16,
-//   };
-
-//   render() {
-//     const { children } = this.props;
-
-//     return (
-//       <ul className="autocomplete-wrap" style={this.styles}>
-//         {children}
-//       </ul>
-//     );
-//   }
-// }
-
-// MenuList.propTypes = {
-//   children: PropTypes.node,
-//   innerProps: PropTypes.any,
-// };
-
-// const Option = (props) => {
-//   const { children, innerProps } = props;
-//   const { innerRef, ...rest } = innerProps;
-
-//   return <li {...rest}>{children}</li>;
-// };
-
-// Option.propTypes = {
-//   children: PropTypes.node,
-//   innerProps: PropTypes.any,
-// };
-
-// class Input extends Component {
-//   render() {
-//     const {
-//       getStyles,
-//       innerRef,
-//       isHidden,
-//       selectProps,
-//       ...rest
-//     } = this.props;
-//     const classNames = 'autocomplete-input-container search-wrap';
-
-//     return (
-//       <div className={classNames}>
-//         <input
-//           {...rest}
-//           type="search"
-//           className="form-control autocomplete"
-//         />
-//       </div>
-//     );
-//   }
-// }
-
-// Input.propTypes = {
-//   selectProps: PropTypes.shape(SelectPropTypes),
-//   getStyles: PropTypes.func,
-//   isHidden: PropTypes.bool,
-//   innerRef: PropTypes.func,
-// };
-
-// class Autocomplete extends Component {
-//   state = {
-//     inputText: '',
-//   };
-
-//   componentDidMount() {
-//     const { defaultValue } = this.props;
-
-//     // It has to trigger its `FormGroup` as well
-//     if (defaultValue) {
-//       this.onChange(defaultValue);
-//     }
-//   }
-
-//   components = {
-//     SelectContainer,
-//     Control,
-//     DropdownIndicator: null,
-//     IndicatorsContainer: () => <div className="select-indicators" />,
-//     ValueContainer,
-//     MenuList,
-//     Option,
-//     SingleValue: () => <div className="single-value-container" />,
-//     ...this.props.components,
-//   };
-
-//   onInputChange = (inputText, { action }) => {
-//     // Do not clear on blur
-//     if (action && ['input-blur', 'menu-close'].includes(action)) {
-//       return;
-//     }
-
-//     this.setState(
-//       {
-//         inputText,
-//       },
-//       () => {
-//         if (this.props.onInputChange) {
-//           this.props.onInputChange(inputText, { action });
-//         }
-//       },
-//     );
-//   };
-
-//   onInputClear = () => {
-//     this.setState(
-//       {
-//         inputText: '',
-//       },
-//       () => {
-//         if (this.props.onInputClear) {
-//           this.props.onInputClear();
-//         }
-//       },
-//     );
-//   };
-
-//   onChange = (selected) => {
-//     this.setState(
-//       {
-//         inputText: selected.label,
-//       },
-//       () => {
-//         if (this.props.onChange) {
-//           this.props.onChange(selected);
-//         }
-//       },
-//     );
-//   };
-
-//   render() {
-//     const { inputText } = this.state;
-//     const {
-//       options,
-//       placeholder,
-//       menuIsOpen,
-//       ...rest
-//     } = this.props;
-
-//     const isLabelActive = !!inputText;
-
-//     const classNames = isLabelActive ? 'active' : '';
-
-//     return (
-//       <Fragment>
-//         <ReactSelect
-//           {...rest}
-//           onInputChange={this.onInputChange}
-//           onInputClear={this.onInputClear}
-//           onChange={this.onChange}
-//           placeholder={null}
-//           hideSelectedOptions={false}
-//           backspaceRemovesValue={false}
-//           isSearchable={true}
-//           options={options}
-//           components={this.components}
-//           inputValue={inputText}
-//           aria-label={placeholder}
-//         />
-//         <label className={classNames} style={{ pointerEvents: 'none' }}>
-//           {placeholder}
-//         </label>
-//       </Fragment>
-//     );
-//   }
-// }
-
-// export default Autocomplete;
-
-// Autocomplete.propTypes = SelectPropTypes;
-
-// Autocomplete.defaultProps = SelectBase.defaultProps;

package/src/components/Avatar/AvatarContainer.js

@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const AvatarContainer = props => {
-  const { className, tag: Tag, ...attributes } = props
-  const wrapperClasses = classNames(
-    'd-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap',
-    className
-  )
-  return <Tag {...attributes} className={wrapperClasses} />
-}
-AvatarContainer.propTypes = propTypes
-AvatarContainer.defaultProps = defaultProps
-export default AvatarContainer

package/src/components/Avatar/AvatarExtraText.js

@@ -1,22 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const AvatarExtraText = props => {
-  const { className, tag: Tag, ...attributes } = props
-  const wrapperClass = classNames('extra-text', className)
-  return <Tag className={wrapperClass} {...attributes} />
-}
-
-AvatarExtraText.propTypes = propTypes
-AvatarExtraText.defaultProps = defaultProps
-export default AvatarExtraText

package/src/components/Avatar/AvatarGroupContainer.js

@@ -1,23 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  wrapperClassName: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'ul'
-}
-
-const AvatarGroupContainer = props => {
-  const { className, tag: Tag, wrapperClassName, ...attributes } = props
-  const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName)
-  return <Tag {...attributes} className={wrapperClasses}></Tag>
-}
-
-AvatarGroupContainer.propTypes = propTypes
-AvatarGroupContainer.defaultProps = defaultProps
-export default AvatarGroupContainer

package/src/components/Avatar/AvatarIcon.js

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  href: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  color: PropTypes.string,
-  size: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const AvatarIcon = props => {
-  const { className, tag: Tag, size, href, color, ...attributes } = props
-  const typeClass = classNames('avatar', {
-    [`size-${size}`]: size,
-    [`avatar-${color}`]: color
-  })
-  if (href) {
-    return <a href={href} {...attributes} className={typeClass}></a>
-  }
-
-  return <Tag {...attributes} className={typeClass} />
-}
-
-AvatarIcon.propTypes = propTypes
-AvatarIcon.defaultProps = defaultProps
-export default AvatarIcon

package/src/components/Avatar/AvatarPresence.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  presence: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const AvatarPresence = props => {
-  const { className, tag: Tag, presence, ...attributes } = props
-  const typeClass = classNames('avatar-presence', {
-    [`${presence}`]: presence
-  })
-  return <Tag {...attributes} className={typeClass} />
-}
-
-AvatarPresence.propTypes = propTypes
-AvatarPresence.defaultProps = defaultProps
-export default AvatarPresence

package/src/components/Avatar/AvatarStatus.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  status: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const AvatarStatus = props => {
-  const { className, tag: Tag, status, ...attributes } = props
-  const typeClass = classNames('avatar-status', {
-    [`${status}`]: status
-  })
-  return <Tag {...attributes} className={typeClass} />
-}
-
-AvatarStatus.propTypes = propTypes
-AvatarStatus.defaultProps = defaultProps
-export default AvatarStatus

package/src/components/Avatar/AvatarWrapper.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  extra: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const AvatarWrapper = props => {
-  const { className, tag: Tag, extra, ...attributes } = props
-  const wrapperClass = classNames('avatar-wrapper', className, {
-    [`avatar-extra-${extra}`]: extra
-  })
-  return <Tag {...attributes} className={wrapperClass} />
-}
-
-AvatarWrapper.propTypes = propTypes
-AvatarWrapper.defaultProps = defaultProps
-export default AvatarWrapper

package/src/components/Badge/Badge.js

@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Badge as BadgeReact } from 'reactstrap'
-
-const propTypes = {
-  color: PropTypes.string,
-  pill: PropTypes.bool,
-  tag: PropTypes.string,
-  children: PropTypes.node,
-  cssModule: PropTypes.object,
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  color: 'secondary',
-  pill: false,
-  tag: 'span'
-}
-
-const Badge = props => {
-  const { children } = props
-  return <BadgeReact {...props}>{children}</BadgeReact>
-}
-
-Badge.propTypes = propTypes
-Badge.defaultProps = defaultProps
-
-export default Badge

package/src/components/BottomNav/BottomNav.js

@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'nav'
-}
-
-const BottomNav = props => {
-  const { tag: Tag, ...attributes } = props
-  const wrapperClasses = classNames('bottom-nav')
-  return (
-    <Tag className={wrapperClasses}>
-      <ul {...attributes} />
-    </Tag>
-  )
-}
-
-BottomNav.propTypes = propTypes
-BottomNav.defaultProps = defaultProps
-
-export default BottomNav