How to use the skatejs.props.boolean function in skatejs

import { store } from '../../store.js'; // connect to the Redux store.
import { updateDrawerState } from '../../actions/app.js'; // redux actions
import { BaseComponent } from '../base-component.js';

@define
class InfoToggle extends BaseComponent {
  static is = 'pl-toggle-info';

  constructor(self) {
    self = super(self);
    return self;
  }

  static props = {
    _drawerOpened: props.boolean,
  };

  _stateChanged(state) {
    this._drawerOpened = state.app.drawerOpened;
    this.isViewallPage = state.app.isViewallPage;
  }

  render({ _drawerOpened, isViewallPage }) {
    return (
      <button class="pl-c-tools__action"> store.dispatch(updateDrawerState(!_drawerOpened))}
      &gt;
        <span class="pl-c-tools__action-text">
          {_drawerOpened
            ? `Hide ${isViewallPage ? 'all ' : ''}Pattern Info`</span></button>

window.addEventListener('message', this.receiveIframeMessage, false);
  }

  _stateChanged(state) {
    // throw new Error('_stateChanged() not implemented', this);
    this.triggerUpdate();
  }

  rendered() {
    this.inputElement = this.querySelector('.js-c-typeahead__input');
  }

  static props = {
    maxResults: props.string,
    placeholder: props.string,
    hideClearButton: props.boolean,
    clearButtonText: props.string,
  };

  onInput = e => {
    const value = e.target.value;

    this.setState({
      value: value,
    });

    this.onSuggestionsFetchRequested({ value }); // re-render search results immediately based on latest input value
  };

  toggleSearch() {
    if (!this.state.isOpen) {
      this.openSearch();

static get props() {
    return {
      myArray: props.array,
      myBoolean: props.boolean
    }
  }
  myBoolean: boolean

for ( const key in vueProps ) {
        const prop = vueProps[ key ]
        const defaultVal = getDefault(prop)

        if ( prop.type === null ) {
            result[ key ] = skatePropTypes.any
            warn()
            console.warn('vue-web-component: You did not specify a prop type for the attribute mentioned in the previous warning. Any values for this attribute will be passed as a string value to the Vue component.')
        }
        else if ( prop.type === Number )
            result[ key ] = Object.assign({}, skatePropTypes.number, {default:defaultVal})
        else if ( prop.type === String )
            result[ key ] = Object.assign({}, skatePropTypes.string, {default:defaultVal})
        else if ( prop.type === Boolean )
            result[ key ] = Object.assign({}, skatePropTypes.boolean, {default:defaultVal})
        else if ( prop.type === Object )
            result[ key ] = Object.assign({}, skatePropTypes.object, {default:defaultVal})
        else if ( prop.type === Array )
            result[ key ] = Object.assign({}, skatePropTypes.array, {default:defaultVal})
        else {
            result[ key ] = skatePropTypes.any
            warn()
            console.warn('vue-web-component: You specified a type in your Vue component that is currently is not supported by vue-web-component. Any values for the attribute mentioned in the previous warning will be passed as string value to the Vue component.')
        }

    }

    return result

}

triggers.forEach(trigger => {
        trigger.classList.add('pl-is-active');
        this.previousActiveLinks.push(trigger);
      });
    }
  }

  static props = {
    autoClose: {
      ...props.boolean,
      ...{ default: true },
    },
    currentPattern: props.string,
    layoutMode: props.string,
    collapsedByDefault: {
      ...props.boolean,
      ...{ default: true },
    },
    noViewAll: {
      ...props.boolean,
      ...{ default: window.config?.theme?.noViewAll || false },
    },
  };

  toggleSpecialNavPanel(e) {
    const target = e.target;
    target.parentNode.classList.toggle('pl-is-active');
  }

  toggleNavPanel(e) {
    const target = e.target;
    target.classList.toggle('pl-is-active');