text: module.exports = [{"name":"Calendar","description":"","props":{"clickCalendarIncrementor":{"type":{"name":"func"},"required":true,"description":"Function to handle calendar incrementor clicks"},"clickSelectDate":{"type":{"name":"func"},"required":true,"description":"Function to handle the click of a day"},"hoverOffDate":{"type":{"name":"func"},"required":true,"description":"Function to handle mouse out of a day"},"index":{"type":{"name":"number"},"required":true,"description":"Index of calendar when there are mulptiple"},"hoverSelectDate":{"type":{"name":"func"},"required":true,"description":"Function to handle mouse over of a day"},"month":{"type":{"name":"array"},"required":true,"description":"Array of calendar weeks in month"},"numberOfCalendars":{"type":{"name":"number"},"required":true,"description":"Number of calendars simultaneously visible"}},"code":"import React from \"react\";\r\nimport CalendarRow from \"./CalendarRow\";\r\nimport CalendarLabels from \"./CalendarLabels\";\r\nimport CalendarIncrementor from \"./CalendarIncrementor\";\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default function Calendar(props) {\r\n  function getRowText(index, arrayLength) {\r\n    if (index === 0) {\r\n      return \"first\";\r\n    } else if (index === arrayLength - 1) {\r\n      return \"last\";\r\n    }\r\n\r\n    return \"middle\";\r\n  }\r\n\r\n  return (\r\n    <div className=\"Calendar\">\r\n      <CalendarIncrementor\r\n        numberOfCalendars={props.numberOfCalendars}\r\n        calendarIndex={props.index}\r\n        clickHandler={props.clickCalendarIncrementor}\r\n        direction=\"backward\"\r\n      />\r\n      <CalendarIncrementor\r\n        numberOfCalendars={props.numberOfCalendars}\r\n        calendarIndex={props.index}\r\n        clickHandler={props.clickCalendarIncrementor}\r\n        direction=\"forward\"\r\n      />\r\n      <div className=\"Calendar-name\">\r\n        {props.month[0][6].date.format(\"MMMM YYYY\")}\r\n      </div>\r\n      <CalendarLabels />\r\n      {props.month.map((week, rowIndex, readOnlyArray) => (\r\n        <CalendarRow\r\n          clickSelectDate={props.clickSelectDate}\r\n          key={rowIndex}\r\n          rowDays={week}\r\n          row={getRowText(rowIndex, readOnlyArray.length)}\r\n          hoverSelectDate={props.hoverSelectDate}\r\n          hoverOffDate={props.hoverOffDate}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n\r\nCalendar.propTypes = {\r\n  /** Function to handle calendar incrementor clicks */\r\n  clickCalendarIncrementor: PropTypes.func.isRequired,\r\n\r\n  /** Function to handle the click of a day */\r\n  clickSelectDate: PropTypes.func.isRequired,\r\n\r\n  /** Function to handle mouse out of a day */\r\n  hoverOffDate: PropTypes.func.isRequired,\r\n\r\n  /** Index of calendar when there are mulptiple */\r\n  index: PropTypes.number.isRequired,\r\n\r\n  /** Function to handle mouse over of a day */\r\n  hoverSelectDate: PropTypes.func.isRequired,\r\n\r\n  /** Array of calendar weeks in month */\r\n  month: PropTypes.array.isRequired,\r\n\r\n  /** Number of calendars simultaneously visible */\r\n  numberOfCalendars: PropTypes.number.isRequired,\r\n};\r\n","examples":[{"name":"Example1","description":"","code":"import React from 'react';\r\nimport Calendar from '@accessdev/arc-ui-react/Calendar';\r\nimport { createMonth, getDefaultState } from '@accessdev/arc-ui-react/Calendar/Calendar.utils';\r\nimport moment from 'moment';\r\n\r\nexport default function CalendarExample1() {\r\n  let month = createMonth(moment(), getDefaultState());\r\n  return (\r\n    <Calendar\r\n      clickCalendarIncrementor={direction => console.log(`incrementor click direction ${direction}`)}\r\n      clickSelectDate={date => console.log(`date clicked ${date}`)}\r\n      hoverOffDate={date => console.log(`date mouse out ${date}`)}\r\n      index={0}\r\n      hoverSelectDate={date => console.log(`date mouse over ${date}`)}\r\n      month={month}\r\n      numberOfCalendars={1}\r\n    />\r\n  );\r\n}"}]},{"name":"DatePicker","description":"","props":{"datesChosen":{"type":{"name":"array"},"required":true,"description":""},"isOpen":{"type":{"name":"bool"},"required":true,"description":""},"onChange":{"type":{"name":"func"},"required":true,"description":""},"focusDate":{"type":{"name":"object"},"required":false,"description":"Moment date to guarantee is visible the first time the date picker opens","defaultValue":{"value":"moment()","computed":true}},"isRange":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}},"numberOfCalendars":{"type":{"name":"number"},"required":false,"description":"","defaultValue":{"value":"1","computed":false}}},"code":"import React, { Component } from \"react\";\r\nimport Calendar from \"../Calendar\";\r\nimport {\r\n  getDatesInView,\r\n  getIncrementedFocusDate,\r\n  updateDatesChosen\r\n} from \"./DatePicker.utils\";\r\nimport { isDayDisabled } from '../Calendar/Calendar.utils';\r\nimport moment from \"moment\";\r\nimport classNames from \"classnames\";\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default class DatePicker extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    const initFocusDate = this.props.focusDate || moment();\r\n    const initDateHovered = null;\r\n    const initDatesChosen = [];\r\n\r\n    this.state = {\r\n      dateHovered: initDateHovered,\r\n      datesChosen: initDatesChosen,\r\n      focusDate: initFocusDate,\r\n      isRange: this.props.isRange,\r\n      visibleDates: getDatesInView({\r\n        ...this.props,\r\n        dateHovered: initDateHovered,\r\n        datesChosen: initDatesChosen,\r\n        focusDate: initFocusDate\r\n      })\r\n    };\r\n\r\n    this.clickCalendarIncrementor = this.clickCalendarIncrementor.bind(this);\r\n    this.handleClickOutside = this.handleClickOutside.bind(this);\r\n    this.hoverOffDate = this.hoverOffDate.bind(this);\r\n    this.hoverSelectDate = this.hoverSelectDate.bind(this);\r\n    this.selectDate = this.selectDate.bind(this);\r\n  }\r\n\r\n  componentDidUpdate(prevProps) {\r\n    if (this.props.showCalendar) {\r\n      document.addEventListener(\"click\", this.handleClickOutside);\r\n    } else {\r\n      document.removeEventListener(\"click\", this.handleClickOutside);\r\n    }\r\n  }\r\n\r\n  clickCalendarIncrementor(direction) {\r\n    const newFocusDate = getIncrementedFocusDate(\r\n      this.state.focusDate,\r\n      direction\r\n    );\r\n    const newVisibleDates = getDatesInView({\r\n      ...this.getStateForUtils(),\r\n      focusDate: newFocusDate\r\n    });\r\n    this.setState({\r\n      focusDate: newFocusDate,\r\n      visibleDates: newVisibleDates\r\n    });\r\n  }\r\n\r\n  getStateForUtils(focusDate = this.state.focusDate) {\r\n    const result = {\r\n      ...this.props,\r\n      ...this.state,\r\n      focusDate\r\n    };\r\n    return result;\r\n  }\r\n\r\n  getDropdownClasses() {\r\n    const result = classNames({\r\n      \"DatePicker-dropdown\": true,\r\n      \"is-singleCalendarOnly\": this.props.numberOfCalendars === 1\r\n    });\r\n    return result;\r\n  }\r\n\r\n  handleClickOutside(event) {\r\n    if (\r\n      this.dropdownElement &&\r\n      !this.dropdownElement.contains(event.target) &&\r\n      this.props.closeDatePicker\r\n    ) {\r\n      this.props.closeDatePicker();\r\n    }\r\n  }\r\n\r\n  hoverOffDate() {\r\n    console.log('hover off date from date picker');\r\n    this.setState({\r\n      dateHovered: null,\r\n      visibleDates: getDatesInView({\r\n        ...this.getStateForUtils(),\r\n        dateHovered: null\r\n      })\r\n    });\r\n  }\r\n\r\n  hoverSelectDate(date) {\r\n    console.log('hover select date from date picker');\r\n    if (isDayDisabled(date, this.getStateForUtils())) {\r\n      return;\r\n    }\r\n\r\n    this.setState({\r\n      dateHovered: date,\r\n      visibleDates: getDatesInView({\r\n        ...this.getStateForUtils(),\r\n        dateHovered: date,\r\n        datesChosen: this.state.datesChosen\r\n      })\r\n    });\r\n  }\r\n\r\n  selectDate(date) {\r\n    console.log('select date from date picker');\r\n    const nextDatesChosen = updateDatesChosen(date, this.state);\r\n    const nextDateHovered = null;\r\n    const nextVisibleDates = getDatesInView({\r\n      ...this.state,\r\n      datesChosen: nextDatesChosen,\r\n      dateHovered: nextDateHovered\r\n    });\r\n    this.setState({\r\n      datesChosen: nextDatesChosen,\r\n      dateHovered: nextDateHovered,\r\n      visibleDates: nextVisibleDates\r\n    });\r\n\r\n    if (this.props.onChange && typeof this.props.onChange === \"function\") {\r\n      this.props.onChange(nextDatesChosen);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div className=\"DatePicker\">\r\n        {!this.props.isOpen ? null : (\r\n          <div\r\n            ref={node => (this.dropdownElement = node)}\r\n            className={this.getDropdownClasses()}\r\n          >\r\n            <div className=\"DatePicker-calendars\">\r\n              {this.state.visibleDates.map((month, index) => (\r\n                <Calendar\r\n                  index={index}\r\n                  key={index}\r\n                  state={this.getStateForUtils(month[0][6].date)}\r\n                  month={this.state.visibleDates[index]}\r\n                  clickCalendarIncrementor={this.clickCalendarIncrementor}\r\n                  clickSelectDate={this.selectDate}\r\n                  hoverSelectDate={this.hoverSelectDate}\r\n                  hoverOffDate={this.hoverOffDate}\r\n                  numberOfCalendars={this.props.numberOfCalendars}\r\n                />\r\n              ))}\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nDatePicker.propTypes = {\r\n\r\n  datesChosen: PropTypes.array.isRequired,\r\n\r\n  isOpen: PropTypes.bool.isRequired,\r\n\r\n  onChange: PropTypes.func.isRequired,\r\n\r\n  /** Moment date to guarantee is visible the first time the date picker opens */\r\n  focusDate: PropTypes.object,\r\n\r\n  isRange: PropTypes.bool,\r\n\r\n  numberOfCalendars: PropTypes.number,\r\n};\r\n\r\nDatePicker.defaultProps = {\r\n  isRange: false,\r\n  numberOfCalendars: 1,\r\n  focusDate: moment(),\r\n};\r\n","examples":[{"name":"Example1","description":"","code":"import React, { Component } from 'react';\r\nimport DatePicker from '@accessdev/arc-ui-react/DatePicker';\r\nimport moment from 'moment';\r\n\r\nexport default class DatePickerExample1 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      isOpen: false,\r\n      datesChosen: [moment(), moment().add(1, 'day')]\r\n    };\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <h2>2 Month Range Example</h2>\r\n        <button onClick={event => this.setState({ isOpen: !this.state.isOpen }) }>\r\n          Toggle DatePicker{' '}\r\n          {this.state.datesChosen[0] && this.state.datesChosen[0].format('YYYY-MM-DD')}\r\n          {this.state.datesChosen[0] && this.state.datesChosen[1] ? ' - ' : null}\r\n          {this.state.datesChosen[1] && this.state.datesChosen[1].format('YYYY-MM-DD')}\r\n        </button>\r\n        <DatePicker\r\n          isOpen={this.state.isOpen}\r\n          datesChosen={this.state.datesChosen}\r\n          isRange={true}\r\n          numberOfCalendars={2}\r\n          onChange={datesArray => { this.setState({ datesChosen: datesArray })}}\r\n          />\r\n      </div>\r\n    );\r\n  }\r\n}"},{"name":"Example2","description":"","code":"import React, { Component } from 'react';\r\nimport DatePicker from '@accessdev/arc-ui-react/DatePicker';\r\nimport moment from 'moment';\r\n\r\nexport default class DatePickerExample1 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      isOpen: false,\r\n      datesChosen: [moment()]\r\n    };\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <h2>Single Date Example</h2>\r\n        <button onClick={event => this.setState({ isOpen: !this.state.isOpen }) }>\r\n          Toggle DatePicker{' '}\r\n          {this.state.datesChosen[0] && this.state.datesChosen[0].format('YYYY-MM-DD')}\r\n          {this.state.datesChosen[0] && this.state.datesChosen[1] ? ' - ' : null}\r\n          {this.state.datesChosen[1] && this.state.datesChosen[1].format('YYYY-MM-DD')}\r\n        </button>\r\n        <DatePicker\r\n          isOpen={this.state.isOpen}\r\n          datesChosen={this.state.datesChosen}\r\n          isRange={false}\r\n          numberOfCalendars={2}\r\n          onChange={datesArray => { this.setState({ datesChosen: datesArray })}}\r\n          />\r\n      </div>\r\n    );\r\n  }\r\n}"}]},{"name":"InputText","description":"","props":{"value":{"type":{"name":"string"},"required":false,"description":"","defaultValue":{"value":"''","computed":false}},"placeHolder":{"type":{"name":"string"},"required":false,"description":""},"label":{"type":{"name":"string"},"required":false,"description":"","defaultValue":{"value":"''","computed":false}},"icon":{"type":{"name":"string"},"required":false,"description":""},"width":{"type":{"name":"string"},"required":false,"description":""},"maxLength":{"type":{"name":"number"},"required":false,"description":""},"errorText":{"type":{"name":"string"},"required":false,"description":""},"onChange":{"type":{"name":"func"},"required":false,"description":""},"onBlur":{"type":{"name":"func"},"required":false,"description":""},"validate":{"type":{"name":"func"},"required":false,"description":""},"isError":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}},"isDisabled":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}},"isInline":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}},"isRequired":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}}},"code":"import React, { Component } from \"react\"; \nimport PropTypes from 'prop-types'; \nimport classNames from \"classnames\";\n\nexport default class InputText extends Component { \n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: props.value,\n            isError: props.isError\n        }\n\n        this.isMouseDown = false;\n    }\n\n    componentWillReceiveProps(nextProps) {\n        this.setState({\n          value: nextProps.value\n        });\n    }\n\n    handleChange = event => {\n        const value = event.target.value;\n        this.setState({\"value\":value});\n        if ('onChange' in this.props) this.props.onChange(event);\n    }\n\n    validateInput = event => {\n        this.refs.focusBorderOnFocus.classList.remove('visible');\n        this.refs.focusBorder.classList.remove(\"border-move\");\n\n        if ('onBlur' in this.props) {\n            this.props.onBlur(event);\n        }\n\n        if ('validate' in this.props) {\n            if (this.props.validate(this.state.value) || this.state.value === '') {\n                this.setState({\"isError\": false});\n            } else {\n                this.setState({\"isError\": true});\n            }\n        }\n    }\n\n    handleMouseDown = event => {\n        this.isMouseDown = true;\n\n        const x = event.pageX - event.target.offsetLeft;\n        const bodyRect = document.body.getBoundingClientRect();\n        const elemRect = event.target.getBoundingClientRect();\n        const offsetX = elemRect.left - bodyRect.left;\n\n        this.refs.focusBorder.style.setProperty('--x', `${ x - offsetX }px`);\n        this.refs.focusBorder.style.setProperty('--width', `${event.target.offsetWidth - (x - offsetX)}px`);\n\n        this.applyAnimation();\n    }\n\n    handleMouseUp = event => {\n        this.isMouseDown = false;\n    }\n\n    handleFocus = event => {\n        if (this.isMouseDown) return;\n\n        this.refs.focusBorder.style.setProperty('--x', `${ event.target.offsetWidth/2 }px`);\n        this.refs.focusBorder.style.setProperty('--width', `${event.target.offsetWidth/2}px`);\n\n        this.applyAnimation();\n    }\n\n    applyAnimation = () => {\n        if (this.refs.focusBorder.classList.contains('border-move')) {\n            this.refs.focusBorder.classList.remove(\"border-move\");\n            void this.refs.focusBorder.offsetWidth;\n        }\n        this.refs.focusBorder.classList.add(\"border-move\");\n\n        this.refs.focusBorder.addEventListener('animationend', event => {\n            if (event.animationName === 'borderMove' || event.animationName === 'borderMoveError') {\n                this.refs.focusBorderOnFocus.classList.add('visible');\n            }\n        });\n    }\n\n    render() { \n        const { \n            placeHolder, \n            label, \n            errorMsg, \n            icon, \n            width,\n            maxLength, \n            onClickIcon, \n            isDisabled, \n            isInline, \n            isRequired \n        } = this.props;\n        return ( \n            <div className={classNames({\n                \"input-text__elem\" : true,  \n                \"inline\": isInline\n            })} style={{\"width\": `${width}`}}> \n                <label className={classNames({\n                    \"error\": this.state.isError\n                })}>\n                    {`${label}${isRequired && label ? '*' : ''}`}\n                </label>\n                <input type='text' \n                       placeholder={label && placeHolder} \n                       value={this.state.value}\n                       onChange={this.handleChange}\n                       onBlur={this.validateInput}\n                       onMouseUp={this.handleMouseUp}\n                       onFocus={this.handleFocus}\n                       onMouseDown={this.handleMouseDown}\n                       className={classNames({\n                            \"invalid\": this.state.isError && 'validate' in this.props, \n                            \"error\": this.state.isError, \n                            \"has-icon\": icon\n                       })} \n                       disabled={isDisabled} \n                       required={isRequired} \n                       maxLength={maxLength} />\n                <span className=\"focus-border\" ref=\"focusBorder\">\n                    <i></i>\n                    <i></i> {/* first child is sides, last child is top/bottom going left */}\n                </span>\n                <span className=\"focus-border-onfocus\" ref=\"focusBorderOnFocus\"></span> {/* for animation when clicking and already focused */}\n                {icon &&\n                    <span className='icon'>\n                        <img src={icon} \n                             alt='' \n                             onClick={onClickIcon} />\n                    </span>\n                }\n                {placeHolder && !label &&\n                    <span className={classNames({\n                        \"animated-placeholder\": true, \n                        \"error-placeholder\": this.state.isError\n                    })}>\n                        {placeHolder}\n                    </span>\n                }\n                {this.state.isError && errorMsg &&\n                    <span className='error'>\n                        {errorMsg}\n                    </span>\n                }\n            </div>\n        ) \n    } \n}\n\nInputText.propTypes = {\n    value: PropTypes.string,\n    placeHolder: PropTypes.string, \n    label: PropTypes.string, \n    icon: PropTypes.string,\n    width: PropTypes.string,\n    maxLength: PropTypes.number,\n    errorText: PropTypes.string,\n    onChange: PropTypes.func,\n    onBlur: PropTypes.func,\n    validate: PropTypes.func,\n    isError: PropTypes.bool,\n    isDisabled: PropTypes.bool,\n    isInline: PropTypes.bool,\n    isRequired: PropTypes.bool\n};\n  \nInputText.defaultProps = {\n    value: '',\n    label: '',\n    isError: false,\n    isDisabled: false,\n    isInline: false,\n    isRequired: false\n};","examples":[{"name":"Example1","description":"","code":"import React, { Component } from 'react';\nimport InputText from '@accessdev/arc-ui-react/InputText';\n\nexport default () => {\n    return (\n      <div>\n        <h2>Basic Examples</h2>\n        <hr /><br />\n        <div style={{width: '275px'}}>\n            <InputText placeHolder='Placeholder text' \n                       label='Normal Field' />\n            <InputText placeHolder='Placeholder text' \n                       label='Field with onChange (see console)'\n                       onChange={event => console.log(event.target.value)} />\n            <InputText placeHolder='Placeholder text' \n                       label='Normal Field (focused)'\n                       value='This is normal text' />\n            <InputText placeHolder='Placeholder text' \n                       label='Normal Field (disabled)'\n                       value='This is disabled text' \n                       isDisabled={true} />\n            <InputText placeHolder='Placeholder text' \n                       label='Normal Field (error)'\n                       value='This is error text'\n                       isError={true} />\n            <InputText placeHolder='Placeholder text' \n                       label='Normal Field (error w/helper)'\n                       value='This is error text'\n                       errorMsg=\"Here is some error text\"\n                       isError={true} />\n            <InputText placeHolder='Placeholder text no Label' />\n            <InputText placeHolder='Max Length 10'\n                       maxLength={10} />\n            <InputText label='Blank Input' />\n            <InputText label='Custom Width'\n                       width='400px' />\n        </div>\n      </div>\n    );\n}"},{"name":"Example2","description":"","code":"import React, { Component } from 'react';\nimport InputText from '@accessdev/arc-ui-react/InputText';\n\nexport default () => {\n    return (\n      <div>\n        <h2>Examples with Icons</h2>\n        <hr /><br />\n        <InputText icon='https://image.freepik.com/free-icon/search-interface-symbol_318-41829.jpg' \n                   onClickIcon={event => console.log(\"You clicked the magnifying glass!\")}\n                   isInline={true}\n                   width='275px'\n                   placeHolder='Input with icon img' />\n        <InputText icon='https://cdn0.iconfinder.com/data/icons/superuser-web-kit/512/686909-user_people_man_human_head_person-512.png' \n                   onClickIcon={event => console.log(\"You clicked the person!\")}\n                   isInline={true}\n                   width='275px'\n                   label='Icon Label' />\n      </div>\n    )\n}"},{"name":"Example3","description":"","code":"import React, { Component } from 'react';\nimport InputText from '@accessdev/arc-ui-react/InputText';\n\nexport default () => {\n    return (\n      <div>\n        <h2>Validation Examples</h2>\n        <hr /><br />\n        <InputText placeHolder='Required field with Validation' \n                   isRequired={true} \n                   isInline={true}\n                   width='275px'\n                   validate={value => value === 'hi'}/>\n        <InputText icon='http://webiconspng.com/wp-content/uploads/2017/01/Calendar-High-Resolution-PNG-Icon.png' \n                   onClickIcon={event => console.log(\"You clicked the calendar!\")}\n                   validate={value => /^\\d{4}$/.test(value) }\n                   isInline={true}\n                   width='275px'\n                   errorMsg=\"Value must be a 4-digit number\"\n                   placeHolder='Validate 4 digit number' />\n        <InputText placeHolder='Required field with Error Msg + label' \n                   label='Please type \"hi\"'\n                   isRequired={true} \n                   isInline={true}\n                   width='275px'\n                   errorMsg='Value must be \"hi\"'\n                   onBlur={event => console.log(event)}\n                   validate={value => value === 'hi'} />\n      </div>\n    )\n}"}]}]