How to use the @pluginjs/utils.compose function in @pluginjs/utils

this.eventName('click'),
        `.${this.classes.ITEM}`,
        ({ target }) => {
          const hasItemClass = hasClass(this.classes.ITEM)
          const $item = hasItemClass(target)
            ? target
            : parentWith(hasItemClass, target)
          this.$selected = $item
          this.close()
          this.trigger(EVENTS.CHANGE, getData('data', $item), this)
        }
      )
    )(this.$panel)

    if (this.options.keyboard) {
      compose(
        bindEvent(this.eventName('blur'), () => {
          this.leave('focus')
          removeEvent(this.eventName('keydown'), this.$element)
        }),
        bindEvent(this.eventName('focus'), () => {
          this.enter('focus')
          bindEvent(
            this.eventName('keydown'),
            e => {
              this.triggerCloseButten()
              if (e.keyCode === 40 && e.which === 40) {
                // down
                this.next()
                e.preventDefault()
              }
              if (e.keyCode === 38 && e.which === 38) {

//   )
        // }
        default: {
          return baseFormat(options)
        }
      }
    }

    // update :: String -> monad
    const update = compose(
      chain(updateMiddleware(options)),
      input
    )

    // getFormattedData :: {} -> String
    const format = compose(
      chain(formatMiddleware(options)),
      Model.of
    )
    this.onChange = event => {
      const data = event.target.value.slice(this.lastValue.length)
      this.data = update(data)
      this.element.value = format(this.data)
    }
    if (this.element.disabled || this.options.disabled) {
      this.disable()
    }
    this.observe()
    this.enter('initialized')
    this.trigger(EVENTS.READY)
  }

constructor(element, options = {}) {
    super(NAMESPACE, element)
    // options
    this.initOptions(DEFAULTS, options)
    if (options.module) {
      this.options.module = options.module
    }
    this.firstClassName = this.element.className
    this.setupI18n()
    // class
    this.initClasses(CLASSES)
    compose(
      attr({ placeholder: this.options.placeholder }),
      addClass(this.classes.NAMESPACE, 'pj-input')
    )(this.element)
    // init global vars
    this.$body = query('body')

    this.module = this.options.module[0]
    this.contrast = true
    this.history = true

    this.data = DATA
    this.color = null
    this.oldColor = null
    this.solidModule = this.options.solidModule

    this.info = {

bindEvent(this.eventName('change'), e => {
        const val = e.target.value
        this.set(this.options.parse.call(this, val))
      }),
      // switch panel
      bindEvent(this.eventName('click'), () => {
        if (this.is('disabled')) {
          return false
        }

        this.openPanel()
        return null
      })
    )(this.element)

    compose(
      // manage event
      bindEvent(this.eventName('click'), `.${this.classes.MANAGE}`, () => {
        this.options.manage()
      }),
      // action event
      bindEvent(this.eventName('click'), `.${this.classes.OK}`, () => {
        if (this.is('disabled')) {
          return false
        }
        // this.oldColor = this.color
        // if (this.oldColor != null) {
        //   if (this.oldColor.indexOf('linear-gradient') > -1) {
        //     this.setGradient(this.oldColor)
        //   } else {
        //     this.setSolid(this.oldColor)
        //   }

addClass(this.classes.ISDAYS),
          removeClass(this.classes.ISMONTHS),
          removeClass(this.classes.ISYEARS)
        )(this.$calendars[index])
        break
      case 'months':
        this.generateMonthpicker(index)
        compose(
          removeClass(this.classes.ISDAYS),
          addClass(this.classes.ISMONTHS),
          removeClass(this.classes.ISYEARS)
        )(this.$calendars[index])
        break
      case 'years':
        this.generateYearpicker(index)
        compose(
          removeClass(this.classes.ISDAYS),
          removeClass(this.classes.ISMONTHS),
          addClass(this.classes.ISYEARS)
        )(this.$calendars[index])
        break
      default:
        break
    }
  }

manageViews(index) {
    switch (this.views[index]) {
      case 'days':
        this.generateDaypicker(index)
        compose(
          addClass(this.classes.ISDAYS),
          removeClass(this.classes.ISMONTHS),
          removeClass(this.classes.ISYEARS)
        )(this.$calendars[index])
        break
      case 'months':
        this.generateMonthpicker(index)
        compose(
          removeClass(this.classes.ISDAYS),
          addClass(this.classes.ISMONTHS),
          removeClass(this.classes.ISYEARS)
        )(this.$calendars[index])
        break
      case 'years':
        this.generateYearpicker(index)
        compose(
          removeClass(this.classes.ISDAYS),
          removeClass(this.classes.ISMONTHS),
          addClass(this.classes.ISYEARS)
        )(this.$calendars[index])
        break
      default:
        break
    }

() => {
        if (this.instance.is('disabled')) {
          return
        }
        this.instance.oldValue = this.instance.val()
        this.instance.PREVIEW.set(this.instance.options.image)
        removeClass(
          this.classes.EXIST,
          addClass(this.classes.SHOW, this.instance.$wrap)
        )
        addClass(this.classes.OPENDISABLE, this.$trigger)
      },
      this.$empty
    )

    compose(
      bindEvent(this.instance.eventName('mouseenter'), () => {
        if (this.instance.is('disabled')) {
          return
        }

        addClass(this.classes.HOVER, this.$trigger)
      }),
      bindEvent(this.instance.eventName('mouseleave'), () => {
        if (this.instance.is('disabled')) {
          return null
        }
        if (this.instance.is('holdHover')) {
          return false
        }
        removeClass(this.classes.HOVER, this.$trigger)
        this.instance.leave('holdHover')

bind() {
    compose(
      bindEvent(this.eventName('mouseenter'), () => {
        addClass(this.classes.HOVERING, this.element)
        this.enter('hovering')
        this.trigger(EVENTS.HOVER)
      }),
      bindEvent(this.eventName('mouseleave'), () => {
        removeClass(this.classes.HOVERING, this.element)

        if (!this.is('hovering')) {
          return
        }
        this.leave('hovering')
        this.trigger(EVENTS.HOVERED)
      }),
      bindEvent(this.eventName('mouseenter'), `.${this.classes.HOTSPOT}`, e => {
        const $hotspot = e.target

bind() {
    compose(
      ...[
        { type: this.eventName('touch'), handler: () => false },
        { type: this.eventName('click'), handler: () => false },
        {
          type: this.eventName('focus.keyboard'),
          handler: () => this.trigger(EVENTS.FOCUS)
        },
        {
          type: this.eventName('blur.keyboard'),
          handler: () => this.trigger(EVENTS.BLUR)
        }
      ].map(options => bindEvent(options.type, options.handler))
    )(this.element)
  }

bindEvent(
      this.eventName('input'),
      ({ target }) => {
        const val = target.value
        if (val.length <= 0 || val.length < this.options.minChars) {
          if (this.is('open')) {
            this.close()
          }
          return
        }
        debounce(this.search(val), 200)
      },
      this.$element
    )

    compose(
      bindEvent(this.eventName('click'), `.${this.classes.CLOSE}`, () => {
        if (this.is('disabled')) {
          return
        }
        this.$element.value = ''
        hideElement(this.$close)
      }),
      bindEvent(this.eventName('mouseleave'), () => {
        if (this.is('disabled')) {
          return
        }
        this.leave('hover')
        hideElement(this.$close)
      }),
      bindEvent(this.eventName('mouseenter'), () => {
        if (this.is('disabled')) {