How to use the @instructure/ui-utils/lib/warning function in @instructure/ui-utils

setSelected (index) {
    let selectedIndex

    // Check index boundary
    warning(this.isValidIndex(index), `[Tablist] Invalid tab index: ${index}`)

    const handleChange = () => {
      if (selectedIndex !== undefined && typeof this.props.onChange === 'function') {
        this.props.onChange(index, selectedIndex)
      }
    }

    if (this.props.selectedIndex === undefined) {
      this.setState((state, props) => {
        selectedIndex = state.selectedIndex

        if (index !== selectedIndex) {
          handleChange()
          return { selectedIndex: index, focus: true }
        } else {
          return state

constructor (props) {
    super()

    this._messagesId = props.messagesId || `FormFieldLayout__messages-${uid()}`

    if (props.inline && props.layout === 'inline') {
      warning(
        !!props.width,
        `[FormFieldLayout] The inline prop is true, and the layout is set to inline.
        This will cause a layout issue in Internet Explorer 11 unless you also add a
        value for the width prop.`
      )
    }
  }

constructor (props, context) {
    super(props, context)

    const initialDateValue = props.dateValue || props.defaultDateValue || undefined
    const locale = this._locale(props, context)
    const timezone = this._timezone(props, context)
    const parsedDate = this._parseDate(initialDateValue, locale, timezone)

    warning(
      (!initialDateValue || parsedDate.isValid()),
      `[DateInput] Unexpected date format received for dateValue prop: ${initialDateValue}`
    )

    this.state = {
      showCalendar: false,
      ...this.computeState(initialDateValue, parsedDate, props)
    }

    this._input = undefined
  }

componentWillReceiveProps (nextProps) {
    if (this.props.dateValue !== nextProps.dateValue) {
      const parsedDate = this.parseDate(nextProps.dateValue)

      warning(
        (!nextProps.dateValue || parsedDate.isValid()),
        `[DateInput] Unexpected date format received for dateValue prop: ${nextProps.dateValue}`
      )

      this.setState((state, props) => {
        return this.computeState(
          nextProps.dateValue,
          parsedDate,
          nextProps,
          state
        )
      })
    }
  }

_validateDateProp (dateStr, fallbackDateStr, propName, locale, timezone) {
    const parsedDate = this._parseDate(dateStr, locale, timezone)
    const isEmpty = !dateStr
    const isValid = parsedDate.isValid()

    warning(isEmpty || isValid, `[DatePicker] Unexpected date format received for ${propName} prop: ${dateStr}`)

    return (isEmpty || !isValid) ? fallbackDateStr : dateStr
  }

getIndex (startIndex, step) {
    const count = this.tabs.length
    const change = (step < 0) ? step + count : step

    warning(this.isValidIndex(startIndex), `[Tablist] Invalid tab index: ${startIndex}`)

    let index = startIndex
    do {
      index = (index + change) % count
    } while (this.getTab(index).props.disabled)

    return index
  }

returnFocus () {
    try {
      this.focusLaterElement.focus()
    } catch (e) {
      warning(
        false,
        `
        You tried to return focus to ${this.focusLaterElement}
        but it is not in the DOM anymore: ${e}
        `
      )
    }
    this.focusLaterElement = null
  }

handleCalendarSelect = (event, newValue) => {
    const parsedDate = this.parseDate(newValue)

    warning(parsedDate.isValid(), `[DateInput] Unexpected date format received from DatePicker: ${newValue}`)

    this.acceptValue(event, newValue)

    if (parsedDate.isValid()) {
      this.hideCalendar()
    }
  }