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

PropTypes.arrayOf(PropTypes.number),
    ]).description(
      `Index of the currently selected option. When multiple, the set of
      options selected. NOTE: This is deprecated in favor of indicating
      the selected values via the 'value' property.`,
    ),
    size: PropTypes.oneOfType([
      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
      PropTypes.string,
    ]).description('The size of the text and icon.'),
    value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.element, // deprecated, use valueLabel
      PropTypes.object,
      PropTypes.arrayOf(
        PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
      ),
    ]).description(`Currently selected value. This can be an array
      when multiple. Passing an element allows the caller to control how
      the value is rendered. Passing an element is deprecated. Instead,
      use the 'valueLabel' property.`),
    valueLabel: PropTypes.node.description(
      `Provides custom rendering of the value. If not provided, Select
      will render the value automatically.`,
    ),
    valueKey: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.func,
    ]).description(
      `When the options array contains objects, this property indicates how
      to determine the value of each option. If a string is
      provided, it is used as the key to retrieve each option's value.

resizable: PropTypes.bool, // use table default
      filterable: PropTypes.bool, // use table default
      show: PropTypes.bool,
      minWidth: PropTypes.number,

      // Cells only
      getProps: PropTypes.func,

      // Pivot only
      aggregate: PropTypes.func,

      // Headers only
      getHeaderProps: PropTypes.func,

      // Footers only
      getFooterProps: PropTypes.object,
      filterMethod: PropTypes.func,
      filterAll: PropTypes.bool,
      sortMethod: PropTypes.func,
    })).isRequired.description('Array of column descriptors.'),
    data: PropTypes.array.description('Array of data objects.').isRequired,
    defaultPageSize: PropTypes.number.description('Default page size (default 20).'),
    filterable: PropTypes.bool.description('Wheter it should display a filtering row.'),
    pageSizeOptions: PropTypes.arrayOf(PropTypes.number.description('Page size')).description('Array of available page size options ([5, 10, 20, 25, 50, 100]).'),
    sortable: PropTypes.bool.description('Wheter the table headers will allow sorting of the of the data.'),
  };

  return DocumentedElement;
};

export const doc = Nav => {
  const DocumentedNav = describe(Nav)
    .availableAt(getAvailableAtBadge('Nav'))
    .description('Is a Box container for navigation links')
    .usage(
      `import { Nav } from 'grommet';
<nav>`,
    );

  DocumentedNav.propTypes = {
    items: PropTypes.arrayOf(PropTypes.object).description(
      `Navigation items to be placed inside the Nav.
The object values are 'label' for the Anchor label and 'href' for its link.`,
    ),
  };
  return DocumentedNav;
};
</nav>

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 specifying\n      a vertical or horizontal alignment will cause it to be aligned in the\n      center.').defaultValue({
      top: 'top',
      left: 'left'
    }),
    onClickOutside: PropTypes.func.description('Function that will be invoked when the user clicks outside the drop.'),
    onEsc: PropTypes.func.description('Function that will be called when the user presses the escape key inside the drop.'),
    responsive: PropTypes.bool.description('Whether to dynamically re-place when resized.').defaultValue(true),
    restrictFocus: PropTypes.bool.description('Whether the drop should control focus.'),
    stretch: PropTypes.bool.description('Whether the drop element should be stretched to at least match the\n      width of the target element. The default is true because\n      that is what most uses of Drop want, like Select and Menu.').defaultValue(true),
    target: PropTypes.object.description('Target where the drop will be aligned to. This should be a React reference.').isRequired
  };

  return DocumentedDrop;
});

).usage(`
    $ npm install grommet-controls 
    import { GrommetTags } from 'grommet-controls';
    
    `);

  DocumentedElement.propTypes = {
    a11yTitle: a11yTitlePropType,
    children: PropTypes.func.description(
      'Function that will be called when each option is rendered.'
    ),
    focusable: PropTypes.bool.description(
      'Whether the tag list is focusable',
    ),
    icon: PropTypes.element.description('Icon element to remove the tag.'),
    tagProps: PropTypes.object.description('Tag elements `` and `

left: PropTypes.oneOf(['left', 'right']),
    })
      .description('How to align the drop with respect to the button.')
      .defaultValue({
        top: 'top',
        left: 'left',
      }),
    dropContent: PropTypes.element.description(
      'Content to put inside the Drop.',
    ).isRequired,
    dropTarget: PropTypes.object.description(
      `Target where the drop will be aligned to. This should be
      a React reference. Typically, this is not required as the drop will be
      aligned to the DropButton itself by default.`,
    ),
    dropProps: PropTypes.object.description('Any valid Drop prop.'),
    onClose: PropTypes.func.description('Callback for when the drop is closed'),
    onOpen: PropTypes.func.description('Callback for when the drop is opened'),
    open: PropTypes.bool
      .description(
        `Whether the drop should be open or not. Setting this property does not
      influence user interaction after it has been rendered.`,
      )
      .defaultValue(false),
  };

  return DocumentedDropButton;
};

.availableAt(getAvailableAtBadge('FormField'))
    .description(
      `A single field in a form. FormField wraps an input component with
      a label, help, and/or error messaging. It typically contains an input
      control like TextInput, TextArea, Select, etc.`,
    )
    .usage(
      `import { FormField } from 'grommet';
`,
    )
    .intrinsicElement('div');

  DocumentedFormField.propTypes = {
    component: PropTypes.oneOfType([
      PropTypes.func,
      PropTypes.object,
    ]).description(
      `The component to insert in the FormField. Grommet will add update the form values when this field changes. Any additional properties (such as initial value) you pass to FormField will be forwarded to this component. The component may be custom as long it supports the proporties of name, value, onChange (event => {}), while event has either event.value or event.target.value.  `,
    ),
    error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
      'Any error text describing issues with the field',
    ),
    help: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
      'Any help text describing how the field works',
    ),
    htmlFor: PropTypes.string.description(
      'The id of the input element contained in this field',
    ),
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
      'A short label describing the field',
    ),
    name: PropTypes.string.description(

export default (Element) => {
  const DocumentedElement = describe(Element)
    .description('A Grommet 2 table component with pagination, filtering, footer, child rows and grouping. Derived from https://github.com/react-tools/react-table. ')
    .usage(`
    $ npm install grommet-table 
    import { GrommetTable } from 'grommet-table';
    
`);

  DocumentedElement.propTypes = {
    decorations: PropTypes.shape({
      table: PropTypes.object.description('Table styling, all **``** properties are valid.'),
      header: PropTypes.object.description('Header cell styling, all **``** properties are valid'),
      headerGroup: PropTypes.object.description('Grouped columns header styling, all **``** properties are valid.'),
      filter: PropTypes.object.description('Filter row styling, all **``** properties are valid.'),
      filterInput: PropTypes.object.description('Filter input control styling, all **``** properties are valid.'),
      body: PropTypes.object.description('Body styling, all **``** properties are valid.'),
      row: PropTypes.object.description('Row of data styling, all **``** properties are valid.'),
      rowOdd: PropTypes.object.description('Odd row for striped styling, all **``** properties are valid.'),
      rowEven: PropTypes.object.description('Even row for striped styling, all **``** properties are valid.'),
      cell: PropTypes.object.description('Cell of data styling, all **``** properties are valid.'),
      footer: PropTypes.object.description('Footer row styling, all **``** properties are valid.'),
      pagination: PropTypes.object.description('Pagination box styling, all **``** properties are valid.'),
      expander: PropTypes.object.description('Expander button styling, all **`<button>`** properties are valid, as well as icons OpenIcon and CloseIcon.'),
    }).description(`Visual styling of the various Grommet Table elements. Where applicable, those settings can be overriden at the column level. Example:
\`\`\`
  </button>

var DocumentedDropButton = describe(DropButton).availableAt(getAvailableAtBadge('DropButton')).description('A Button that when clicked will a Drop with the specified \'dropContent\'.\n      When opened, the drop will control the focus so that the contents behind\n      it are not focusable. All properties of Button can be passed through.\n      ').usage('import { DropButton } from \'grommet\';\n');

  DocumentedDropButton.propTypes = {
    a11yTitle: PropTypes.string.description('Custom title to be used by screen readers.'),
    disabled: PropTypes.bool.description('Whether the button should be disabled.'),
    dropAlign: 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 button.').defaultValue({
      top: 'top',
      left: 'left'
    }),
    dropContent: PropTypes.element.description('Content to put inside the Drop.').isRequired,
    dropTarget: PropTypes.object.description('Target where the drop will be aligned to. This should be\n      a React reference. Typically, this is not required as the drop will be\n      aligned to the DropButton itself by default.'),
    onClose: PropTypes.func.description('Callback for when the drop is closed'),
    onOpen: PropTypes.func.description('Callback for when the drop is opened'),
    open: PropTypes.bool.description('Whether the drop should be open or not. Setting this property does not\n      influence user interaction after it has been rendered.')
  };

  return DocumentedDropButton;
});

})
      .description('How to align the drop.')
      .defaultValue({
        top: 'bottom',
        left: 'left',
      }),
    dropHeight: PropTypes.oneOfType([
      PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
      PropTypes.string,
    ]).description('The height of the drop container.'),
    dropTarget: PropTypes.object.description(
      `Target where any suggestions drop will be aligned to. This should be
      a React reference. Typically, this is not required as the drop will be
      aligned to the TextInput itself by default.`,
    ),
    dropProps: PropTypes.object.description('Any valid Drop prop.'),
    id: PropTypes.string.description('The id attribute of the input.'),
    focusIndicator: PropTypes.bool.description(
      'Whether the plain text input should receive a focus outline.',
    ),
    messages: PropTypes.shape({
      enterSelect: PropTypes.string,
      suggestionsCount: PropTypes.string,
      suggestionsExist: PropTypes.string,
      suggestionIsOpen: PropTypes.string,
    })
      .description(
        'Custom messages for TextInput. Used for accessibility by screen readers.',
      )
      .defaultValue({
        enterSelect: '(Press Enter to Select)',
        suggestionsCount: 'suggestions available',