How to use the prop-types.shape function in prop-types

propTypes.bookingUnitType = oneOf([LINE_ITEM_NIGHT, LINE_ITEM_DAY, LINE_ITEM_UNITS]);

const requiredLineItemPropType = (props, propName, componentName) => {
  const prop = props[propName];

  if (!prop || prop === '') {
    return new Error(`Missing line item code prop from ${componentName}.`);
  }
  if (!/^line-item\/.+/.test(prop)) {
    return new Error(`Invalid line item code value ${prop} passed to ${componentName}.`);
  }
};

// Denormalised transaction object
propTypes.transaction = shape({
  id: propTypes.uuid.isRequired,
  type: propTypes.value('transaction').isRequired,
  attributes: shape({
    createdAt: instanceOf(Date),
    lastTransitionedAt: instanceOf(Date).isRequired,
    lastTransition: oneOf(TRANSITIONS).isRequired,

    // An enquiry won't need a total sum nor a booking so these are
    // optional.
    payinTotal: propTypes.money,
    payoutTotal: propTypes.money,

    lineItems: arrayOf(
      shape({
        code: requiredLineItemPropType,
        includeFor: arrayOf(oneOf(['customer', 'provider'])).isRequired,

}
        break;
      }
    }
  };

  render() {
    const { devices, ...otherProps } = this.props;
    return ;
  }
}

ElementBasedDeviceDedector.propTypes = {
  onChangeType: PropTypes.func.isRequired,
  devices: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string,
      breakpointPx: PropTypes.number,
    }),
  ),
};

ElementBasedDeviceDedector.defaultProps = {
  devices: [
    // below 768px
    {
      name: 'mobile',
      breakpointPx: 768,
    },
    // 768px - 991px
    {
      name: 'tablet',

);
  }
}

BlogListPanel.defaultProps = {
  chronological: true,
};

BlogListPanel.propTypes = {
  /* eslint-disable react/forbid-prop-types */
  classes: PropTypes.object.isRequired,
  /* eslint-enable react/forbid-prop-types */
  title: PropTypes.string.isRequired,
  posts: PropTypes.arrayOf(PropTypes.shape({
    fileName: PropTypes.string,
    posts: PropTypes.arrayOf(PropTypes.object),
  })).isRequired,
  chronological: PropTypes.bool,
};

export default withStyles(contentStyles, { withTheme: true })(BlogListPanel);

loadingUuid: PT.string.isRequired,
    timestamp: PT.number.isRequired,
  }).isRequired,
  filterState: PT.shape().isRequired,
  challenges: PT.arrayOf(PT.shape()),
  selectedCommunityId: PT.string.isRequired,
  getKeywords: PT.func.isRequired,
  getSubtracks: PT.func.isRequired,
  isSavingFilter: PT.bool,
  savedFilters: PT.arrayOf(PT.shape()).isRequired,
  loadingKeywords: PT.bool.isRequired,
  loadingSubtracks: PT.bool.isRequired,
  saveFilter: PT.func.isRequired,
  selectBucket: PT.func.isRequired,
  setFilterState: PT.func.isRequired,
  auth: PT.shape().isRequired,
  tokenV2: PT.string,
};

function mapDispatchToProps(dispatch) {
  const a = actions.challengeListing.filterPanel;
  const cla = challengeListingActions.challengeListing;
  const sa = sidebarActions.challengeListing.sidebar;
  return {
    ...bindActionCreators(a, dispatch),
    getSubtracks: () => {
      dispatch(cla.getChallengeSubtracksInit());
      dispatch(cla.getChallengeSubtracksDone());
    },
    getCommunityList: (auth) => {
      const uuid = shortId();
      dispatch(communityActions.tcCommunity.getListInit(uuid));

/**
     * @en
     * Custom short names of months.
     *
     * @cn
     * 用户自定义的每个月的名称。
     */
    monthNames: arrayWith12Strings,
    /**
     * @en
     * Custom short names of action buttons.
     *
     * @cn
     * 用户自定义的选择框操作按钮的名称。
     */
    actionNames: PropTypes.shape({
      ok: PropTypes.string,
      cancel: PropTypes.string
    }),
    /**
     * @en
     * The start year.
     *
     * @cn
     * 可选范围的起始年份。
     */
    yearStart: PropTypes.number,
    /**
     * @en
     * The end year.
     *
     * @cn

<button type="button"> createOrganizationRole(formState)}
        disabled={mutationInProgress}
      &gt;
        Create role
      </button>
    
  );
}

NewOrganizationRole.propTypes = {
  organizationId: PropTypes.number.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }).isRequired,
};

export default withRouter(NewOrganizationRole);

);
  }
}

Month.defaultProps = {};

Month.propTypes = {
  style: PropTypes.object,
  styles: PropTypes.object,
  month: PropTypes.object,
  drag: PropTypes.object,
  dateOptions: PropTypes.object,
  disabledDates: PropTypes.array,
  preview: PropTypes.shape({
    startDate: PropTypes.object,
    endDate: PropTypes.object,
  }),
  showPreview: PropTypes.bool,
  displayMode: PropTypes.oneOf(['dateRange', 'date']),
  minDate: PropTypes.object,
  maxDate: PropTypes.object,
  ranges: PropTypes.arrayOf(rangeShape),
  focusedRange: PropTypes.arrayOf(PropTypes.number),
  onDragSelectionStart: PropTypes.func,
  onDragSelectionEnd: PropTypes.func,
  onDragSelectionMove: PropTypes.func,
  onMouseLeave: PropTypes.func,
  monthDisplayFormat: PropTypes.string,
  showWeekDays: PropTypes.bool,
  showMonthName: PropTypes.bool,

isVisible={algo.modal.create}
                    onConfirm={this.onConfirm}
                    onCancel={this.onCancel}
                />
                
                
            
        ) : null;
    }
}

Detail.propTypes = {
    query: PropTypes.shape({
        update: PropTypes.string,
    }),
    item: PropTypes.shape({}),
    loading: PropTypes.shape({}).isRequired,
};

Detail.defaultProps = {
    item: null,
    query: null,
};

function mapStateToProps(s, ownProps) {
    const state = s.models.experiment;

    const id = ownProps.match.params.id || state.item.id,
        item = id ? state.item.results[id] : null;

    return {
        user: s.user,

...merged.initialState,
      ...props.initialState,
    },
    stateSetters: setState => ({
      ...merged.stateSetters(setState),
      ...props.stateSetters(setState),
    }),
  }));

const StoryState = ({stateProps, children}) => (
  
);

StoryState.propTypes = {
  stateProps: PropTypes.arrayOf(
    PropTypes.shape({
      initialState: State.propTypes.initialState,
      stateSetters: State.propTypes.stateSetters,
    })
  ),
};

export default State;
export {StoryState};

hasMore={this.state.hasNextPage}
          threshold={950}
          loader={}
        >
          
        
      
    );
  }
}

Library.propTypes = {
  slug: PropTypes.string.isRequired,
  history: PropTypes.shape({
    replace: PropTypes.func.isRequired,
    location: PropTypes.shape({
      search: PropTypes.string,
    }).isRequired,
  }).isRequired,
};

export default Library;