How to use the react-desc.PropTypes.shape function in react-desc

import { describe, PropTypes } from 'react-desc';
import { OVERFLOW_VALUES } from '../Box/doc';
import { getAvailableAtBadge } from '../../utils'; // if you update values here, make sure to update in Box/doc too.

var dropOverflowPropTypes = PropTypes.oneOfType([PropTypes.oneOf(OVERFLOW_VALUES), PropTypes.shape({
  horizontal: PropTypes.oneOf(OVERFLOW_VALUES),
  vertical: PropTypes.oneOf(OVERFLOW_VALUES)
}), PropTypes.string]);
export var doc = function doc(Drop) {
  var DocumentedDrop = describe(Drop).availableAt(getAvailableAtBadge('Drop')).description('A container that is overlaid next to a target.').usage("import { Drop } from 'grommet';\n...").intrinsicElement('div');
  DocumentedDrop.propTypes = {
    align: PropTypes.shape({
      top: PropTypes.oneOf(['top', 'bottom']),
      bottom: PropTypes.oneOf(['top', 'bottom']),
      right: PropTypes.oneOf(['left', 'right']),
      left: PropTypes.oneOf(['left', 'right'])
    }).description("How to align the drop with respect to the target element. Not \n        specifying a vertical or horizontal alignment will cause it to be \n        aligned in the center.").defaultValue({
      top: 'top',
      left: 'left'
    }),
    onClickOutside: PropTypes.func.description('Function that will be invoked when the user clicks outside the drop.'),

`Function that will be called when the user types or pastes text.`,
    ),
    onBlur: PropTypes.func.description(
      `Function that will be called when the user leaves the field.`,
    ),
    mask: PropTypes.arrayOf(
      PropTypes.shape({
        length: PropTypes.oneOfType([
          PropTypes.number,
          PropTypes.arrayOf(PropTypes.number),
        ]),
        fixed: PropTypes.string,
        options: PropTypes.arrayOf(
          PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        ),
        regexp: PropTypes.shape({}), // RegExp
      }),
    ).description(
      `Describes the structure of the mask. If a regexp is provided, it should
      allow both the final full string element as well as partial strings
      as the user types characters one by one.`,
    ),
    size: PropTypes.oneOfType([
      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
      PropTypes.string,
    ]).description('The size of the text.'),
    value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]).description(
      `What text to put in the input. The caller should ensure that it
      is initially valid with respect to the mask.`,

export var doc = function doc(Meter) {
  var DocumentedMeter = describe(Meter).availableAt(getAvailableAtBadge('Meter')).description('A graphical meter.').usage("import { Meter } from 'grommet';\n<meter>"); // We don't include svg due to a collision on the values property
  // .intrinsicElement('svg');

  DocumentedMeter.propTypes = _extends({}, genericProps, {
    background: backgroundPropType.defaultValue({
      color: 'light-2',
      opacity: 'medium'
    }),
    max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The maximum value for the Meter.'),
    round: PropTypes.bool.description('Whether to round the line ends').defaultValue(false),
    size: PropTypes.oneOfType([PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge', 'full']), PropTypes.string]).description('The size of the Meter.').defaultValue('medium'),
    thickness: PropTypes.oneOfType([PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string]).description('The size of the Meter.').defaultValue('medium'),
    type: PropTypes.oneOf(['bar', 'circle']).description('The visual type of meter.').defaultValue('bar'),
    values: PropTypes.arrayOf(PropTypes.shape({
      color: PropTypes.string,
      highlight: PropTypes.bool,
      label: PropTypes.string.isRequired,
      // for accessibility
      onClick: PropTypes.func,
      onHover: PropTypes.func,
      value: PropTypes.number.isRequired
    })).description("Array of value objects describing the data.\n      'value' is the actual numeric value.\n      'label' is a text string describing it.\n      'color' indicates the color name to use. If not specified a default one\n      will be chosen.\n      'onClick' will be called when the user clicks on it.\n      Set 'highlight' to call attention to it.\n      'onHover' will be called with a boolean argument indicating when the\n      user hovers onto or away from it.")
  });
  return DocumentedMeter;
};
export var themeDoc = {</meter>

export default (function (Diagram) {
  var DocumentedDiagram = describe(Diagram).availableAt(getAvailableAtBadge('Diagram')).description('Graphical lines between DOM elements.\n      Diagram is meant to be used with Stack.').usage("import { Diagram } from 'grommet';\n");

  DocumentedDiagram.propTypes = {
    connections: PropTypes.arrayOf(PropTypes.shape({
      anchor: PropTypes.oneOf(['center', 'vertical', 'horizontal']),
      color: PropTypes.string,
      fromTarget: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
      label: PropTypes.string, // for accessibility
      offset: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
      thickness: PropTypes.oneOf(['hair', 'xxsmall', 'xsmall', 'small', 'medium', 'large']),
      toTarget: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
      type: PropTypes.oneOf(['direct', 'curved', 'rectilinear'])
    })).description('Array of objects describing the connections.\n      The \'fromTarget\' and \'toTarget\' may be either DOM element ids or\n      React references.\n      \'offset\' can be used to shift a bit to reduce the amount of overlap\n      with other connection lines to make the lines easier to distinguish.').isRequired
  };

  return DocumentedDiagram;
});

'center',
      'end',
      'evenly',
      'start',
      'stretch',
    ])
      .description('How to align the contents along the main axis.')
      .defaultValue('stretch'),
    onClick: PropTypes.func.description(
      `Click handler. Setting this property adds additional attributes to
      the DOM for accessibility.`,
    ),
    overflow: overflowPropType.description('box overflow.'),
    pad: PropTypes.oneOfType([
      PropTypes.oneOf(['none', ...PAD_SIZES]),
      PropTypes.shape({
        bottom: PropTypes.oneOfType([
          PropTypes.oneOf(PAD_SIZES),
          PropTypes.string,
        ]),
        horizontal: PropTypes.oneOfType([
          PropTypes.oneOf(PAD_SIZES),
          PropTypes.string,
        ]),
        left: PropTypes.oneOfType([
          PropTypes.oneOf(PAD_SIZES),
          PropTypes.string,
        ]),
        right: PropTypes.oneOfType([
          PropTypes.oneOf(PAD_SIZES),
          PropTypes.string,
        ]),

PropTypes.node,
    ]).description(
      `A custom icon to be used when rendering the select. You can use false to
       not render an icon at all.`,
    ),
    labelKey: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.func,
    ]).description(
      `When the options array contains objects, this property indicates how
      to determine the label of each option. If a string is
      provided, it is used as the key to retrieve each option's label.
      If a function is provided, it is called with the option and the
      return value indicates the label.`,
    ),
    messages: PropTypes.shape({
      multiple: PropTypes.string,
    }).description('Custom messages.'),
    multiple: PropTypes.bool.description(
      'Whether to allow multiple options to be selected.',
    ),
    onChange: PropTypes.func.description(
      'Function that will be called when the user selects an option.',
    ),
    onClose: PropTypes.func.description(
      'Function that will be called when the Select drop closes.',
    ),
    onOpen: PropTypes.func.description(
      'Function that will be called when the Select drop opens.',
    ),
    onSearch: PropTypes.func.description(
      `Function that will be called when the user types in the search input.

export var doc = function doc(Layer) {
  var DocumentedLayer = describe(Layer).availableAt(getAvailableAtBadge('Layer')).description("An overlay. Layer is typically modal and anchored to an edge, corner, or\n      center of the window. It is the caller's responsibility to provide a\n      control for the user to close the layer.").usage("import { Layer } from 'grommet';\n").intrinsicElement('div');
  DocumentedLayer.propTypes = {
    animate: PropTypes.bool.description("Whether to animate the Layer content when it opens. This\n        property is deprecated and will be removed in the next major version\n        of grommet. Instead, use 'animation'.").defaultValue(true),
    animation: PropTypes.oneOfType([PropTypes.oneOf(['slide', 'fadeIn', 'none']), PropTypes.bool]).description('Animation transition of the Layer content when it opens and closes.').defaultValue('slide'),
    full: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['vertical', 'horizontal'])]).description("Whether the width and/or height should fill the current viewport \n        size.").defaultValue(false),
    margin: PropTypes.oneOfType([PropTypes.oneOf(['none'].concat(PAD_SIZES)), PropTypes.shape({
      bottom: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),
      horizontal: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),
      left: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),
      right: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),
      top: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),
      vertical: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string])
    }), PropTypes.string]).description("The amount of margin around the Layer. An object can be specified to\ndistinguish horizontal margin, vertical margin, and margin on a\nparticular side of the layer"),
    modal: PropTypes.bool.description("Whether there should be an overlay preventing interaction underneath \n        the layer.").defaultValue(true),
    onClickOutside: PropTypes.func.description("Function that will be invoked on modal layers when the user clicks \n      outside the layer."),
    onEsc: PropTypes.func.description("Function that will be called when the user presses the escape key inside\n       the layer."),
    plain: PropTypes.bool.description('Whether this is a plain Layer with no background color or border.').defaultValue(false),
    position: PropTypes.oneOf(['bottom', 'bottom-left', 'bottom-right', 'center', 'hidden', 'left', 'right', 'top', 'top-left', 'top-right']).description('Position of the layer content.').defaultValue('center'),
    responsive: PropTypes.bool.description('Whether the layer should take full width and height on mobile').defaultValue(true)
  };
  return DocumentedLayer;
};

export default (function (Button) {
  var DocumentedButton = describe(Button).availableAt(getAvailableAtBadge('Button')).description('A button. We have a separate component from the browser base so we can style it.').usage('import { Button } from \'grommet\';\n<button label="\'Label\'">');

  DocumentedButton.propTypes = {
    a11yTitle: PropTypes.string.description('Custom title to be used by screen readers.'),
    active: PropTypes.bool.description('Whether the button is active.'),
    color: PropTypes.string.description('Fill color for primary, border color otherwise.'),
    fill: PropTypes.bool.description('Whether the button expands to fill all of the available width and height.'),
    focusIndicator: PropTypes.bool.description('Whether when \'plain\' it should receive a focus outline.').defaultValue(true),
    hoverIndicator: PropTypes.oneOfType([PropTypes.oneOf(['background']), PropTypes.shape({
      background: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
    })]).description('The hover indicator to apply when the user is mousing over the\nbutton. An object can be also be specified for color index support:\n{background: \'neutral-2\'}. This prop is meant to be used only\nwith plain Buttons.'),
    href: PropTypes.string.description('If specified, the button will behave like an anchor tag.'),
    icon: PropTypes.element.description('Icon element to place in the button.'),
    label: PropTypes.node.description('Label text to place in the button.'),
    onClick: PropTypes.func.description('Click handler. Not setting this property and not specifying a href\ncauses the Button to be disabled.'),
    plain: PropTypes.bool.description('Whether this is a plain button with no border or padding.'),
    primary: PropTypes.bool.description('Whether this is a primary button. There should be at most one per page or screen.'),
    reverse: PropTypes.bool.description('Whether an icon and label should be reversed so that the icon is at the\nend of the anchor.'),
    type: PropTypes.oneOf(['button', 'reset', 'submit']).description('The type of button. Set the type to submit for the default button on forms.').defaultValue('button')
  };

  return DocumentedButton;
});</button>

export default (function (DataTable) {
  var DocumentedDataTable = describe(DataTable).availableAt(getAvailableAtBadge('DataTable')).description('A data driven table.').usage('import { DataTable } from \'grommet\';\n');

  DocumentedDataTable.propTypes = {
    columns: PropTypes.arrayOf(PropTypes.shape({
      align: PropTypes.oneOf(['center', 'start', 'end']),
      aggregate: PropTypes.oneOf(['avg', 'max', 'min', 'sum']),
      footer: PropTypes.oneOfType([PropTypes.node, PropTypes.shape({
        aggregate: PropTypes.bool
      })]),
      header: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.shape({
        aggregate: PropTypes.bool
      })]),
      property: PropTypes.string.isRequired,
      render: PropTypes.func,
      search: PropTypes.bool
    })).description('\n      A description of the data. The order controls the column order.\n      \'property\' indicates which property in the data objects to associate\n      the column with. \'header\' indicates what to display in the column\n      header. \'render\' allows for custom rendering of body cells. Use \'render\'\n      for custom formatting for things like currency and date or to\n      display rich content like Meters. \'align\' indicates how the cells in\n      the column are aligned. \'aggregate\' indicates how the data in the\n      column should be aggregated. This only applies to a footer or groupBy\n      context. \'footer\' indicates what should be shown in the footer for\n      the column. \'search\' indicates whether a search filter should be\n      made available for the column.\n    '),
    data: PropTypes.arrayOf(PropTypes.shape({})).description('Array of data objects.'),
    groupBy: PropTypes.string.description('Property to group data by.'),
    onMore: PropTypes.func.description('Use this to indicate that \'data\' doesn\'t contain all that it could.\n      It will be called when all of the data rows have been rendered.\n      This might be used when the total number of items that could be retrieved\n      is more than you\'d want to load into the browser. \'onMore\' allows you\n      to lazily fetch more from the server only when needed. This cannot\n      be combined with properties that expect all data to be present in the\n      browser, such as columns.search, sortable, groupBy, or columns.aggregate.'),
    onSearch: PropTypes.func.description('When supplied, and when at least one column has \'search\' enabled,\n      this function will be called with an object with keys for property\n      names and values which are the search text strings. This is typically\n      employed so a back-end can be used to search through the data.'),
    resizeable: PropTypes.string.description('Whether to allow the user to resize column widths.'),
    size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']).description('\n      The height of the table body. If set, the table body will have a fixed\n      height and the rows will be scrollable within it. In order to preserve\n      header and footer cell alignment, all cells will have the same\n      width. This cannot be used in combination with \'resizeable\'.\n    '),
    sortable: PropTypes.string.description('Whether to allow the user to sort columns.')

export default (Element) => {
  const DocumentedElement = describe(Element)
    .availableAt(getAvailableAtGitHub({ url: 'https://github.com/atanasster/grommet-nextjs' }))
    .description('A tag control with a label and icon.')
    .usage(
      `$ npm install grommet-controls 
    import { GrommetTag } from 'grommet-controls';
    `
    );

  DocumentedElement.propTypes = {
    a11yTitle: a11yTitlePropType,
    border: PropTypes.oneOfType([
      PropTypes.oneOf(['top', 'left', 'bottom', 'right',
        'horizontal', 'vertical', 'all']),
      PropTypes.shape({
        color: PropTypes.string,
        side: PropTypes.oneOf(['top', 'left', 'bottom', 'right',
          'horizontal', 'vertical', 'all']),
        size: PropTypes.oneOf(['small', 'medium', 'large']),
      }),
    ]).description('Include a border.'),
    background: PropTypes.string.description('Fill color for the tag.'),
    disabled: PropTypes.bool.description(
      'Displays a disabled style for the tag',
    ),
    focusable: PropTypes.bool.description(
      'Whether the tag is focusable',
    ),
    icon: PropTypes.element.description('Icon element to place in the tag.'),
    label: PropTypes.node.description(
      'Label text to place next to the control.'