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

exports.default = function (Drop) {
  var DocumentedDrop = (0, _reactDesc.describe)(Drop).availableAt((0, _utils.getAvailableAtBadge)('Drop')).description('A drop container that opens next to a target.').usage('import { Drop } from \'grommet\';\n...');

  DocumentedDrop.propTypes = {
    align: _reactDesc.PropTypes.shape({
      top: _reactDesc.PropTypes.oneOf(['top', 'bottom']),
      bottom: _reactDesc.PropTypes.oneOf(['top', 'bottom']),
      right: _reactDesc.PropTypes.oneOf(['left', 'right']),
      left: _reactDesc.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: _reactDesc.PropTypes.func.description('Function that will be invoked when the user clicks outside the drop.'),
    onEsc: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the escape key inside the drop.'),
    responsive: _reactDesc.PropTypes.bool.description('Whether to dynamically re-place when resized.').defaultValue(true),
    restrictFocus: _reactDesc.PropTypes.bool.description('Whether the drop should control focus.'),
    stretch: _reactDesc.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: _reactDesc.PropTypes.object.description('Target where the drop will be aligned to. This should be a React reference.').isRequired
  };

  return DocumentedDrop;

exports.default = function (TextArea) {
  var DocumentedTextArea = (0, _reactDesc.describe)(TextArea).availableAt((0, _utils.getAvailableAtBadge)('TextArea')).description('A textarea.').usage('import { TextArea } from \'grommet\';\n<textarea name="\'item\'" id="\'item\'">');

  DocumentedTextArea.propTypes = {
    id: _reactDesc.PropTypes.string.description('The id attribute of the textarea.'),
    focusIndicator: _reactDesc.PropTypes.bool.description('Whether the plain textarea should receive a focus outline.'),
    name: _reactDesc.PropTypes.string.description('The name attribute of the textarea.'),
    placeholder: _reactDesc.PropTypes.string.description('Placeholder text to use when no value is provided.'),
    plain: _reactDesc.PropTypes.bool.description('Whether this is a plain textarea with no border or padding.\nOnly use this when the containing context provides sufficient affordance.'),
    value: _reactDesc.PropTypes.string.description('What text to put in the textarea.')
  };

  return DocumentedTextArea;
};</textarea>

exports.default = function (Heading) {
  var DocumentedHeading = (0, _reactDesc.describe)(Heading).availableAt((0, _utils.getAvailableAtBadge)('Heading')).description('Heading text structed in levels.').usage('import { Heading } from \'grommet\';\n');

  DocumentedHeading.propTypes = {
    color: _reactDesc.PropTypes.string.description('A color identifier to use for the text color. For example:\n      \'brand\'.'),
    level: _reactDesc.PropTypes.oneOf([1, 2, 3, 4, '1', '2', '3', '4']).description('The heading level. It corresponds to the number after the \'H\' for\nthe DOM tag. Set the level for semantic accuracy and accessibility.\nThe sizing can be further adjusted using the size property.'),
    margin: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(['none', 'small', 'medium', 'large']), _reactDesc.PropTypes.shape({
      bottom: _reactDesc.PropTypes.oneOf(['none', 'small', 'medium', 'large']),
      top: _reactDesc.PropTypes.oneOf(['none', 'small', 'medium', 'large'])
    })]).description('The amount of margin above and/or below the heading. An object can be\nspecified to distinguish top margin and bottom margin.'),
    responsive: _reactDesc.PropTypes.bool.description('Whether the font size should be scaled for\n      mobile environments.').defaultValue(true),
    size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description('The font size is primarily driven by the chosen tag. But, it can\nbe adjusted via this size property. The tag should be set for semantic\ncorrectness and accessibility. This size property allows for stylistic\nadjustments.'),
    textAlign: _reactDesc.PropTypes.oneOf(['start', 'center', 'end']).description('How to align the text inside the heading.'),
    truncate: _reactDesc.PropTypes.bool.description('Restrict the text to a single line and truncate with ellipsis if it\nis too long to all fit.')
  };

  return DocumentedHeading;
};

exports.default = function (Anchor) {
  var DocumentedAnchor = (0, _reactDesc.describe)(Anchor).availableAt((0, _utils.getAvailableAtBadge)('Anchor')).description('A text link. We have a separate component from the browser\nbase so we can style it. You can either set the icon and/or label properties\nor just use children.').usage("import { Anchor } from 'grommet';\n");

  DocumentedAnchor.propTypes = {
    a11yTitle: _reactDesc.PropTypes.string.description('Custom title to be used by screen readers.'),
    href: _reactDesc.PropTypes.string.description('Hyperlink reference to place in the anchor.'),
    icon: _reactDesc.PropTypes.element.description('Icon element to place in the anchor.'),
    label: _reactDesc.PropTypes.node.description('Label text to place in the anchor.'),
    onClick: _reactDesc.PropTypes.func.description('Click handler. It can be used, for example, \n    to add analytics and track who clicked in the anchor.'),
    primary: _reactDesc.PropTypes.bool.description('Whether this is a primary anchor.'),
    reverse: _reactDesc.PropTypes.bool.description('Whether an icon and label should be reversed so that the icon is at the end of the anchor.')
  };

  return DocumentedAnchor;
};

exports.default = function (Anchor) {
  var DocumentedAnchor = (0, _reactDesc.describe)(Anchor).availableAt((0, _utils.getAvailableAtBadge)('Anchor')).description('A text link. We have a separate component from the browser\nbase so we can style it. You can either set the icon and/or label properties\nor just use children.').usage("import { Anchor } from 'grommet';\n");

  DocumentedAnchor.propTypes = {
    a11yTitle: _reactDesc.PropTypes.string.description('Custom title to be used by screen readers.'),
    href: _reactDesc.PropTypes.string.description('Hyperlink reference to place in the anchor.'),
    icon: _reactDesc.PropTypes.element.description('Icon element to place in the anchor.'),
    label: _reactDesc.PropTypes.node.description('Label text to place in the anchor.'),
    onClick: _reactDesc.PropTypes.func.description('Click handler. It can be used, for example, \n    to add analytics and track who clicked in the anchor.'),
    primary: _reactDesc.PropTypes.bool.description('Whether this is a primary anchor.'),
    reverse: _reactDesc.PropTypes.bool.description('Whether an icon and label should be reversed so that the icon is at the end of the anchor.')
  };

  return DocumentedAnchor;
};

exports.default = function (Menu) {
  var DocumentedMenu = (0, _reactDesc.describe)(Menu).availableAt((0, _utils.getAvailableAtBadge)('Menu')).description('Presents a list of choices within a drop down via a control that\n      opens it.').usage('import { Menu } from \'grommet\';\n<menu>');

  DocumentedMenu.propTypes = {
    disabled: _reactDesc.PropTypes.bool.description('Whether the menu should be disabled.'),
    dropAlign: _reactDesc.PropTypes.shape({
      top: _reactDesc.PropTypes.oneOf(VERTICAL_ALIGN_OPTIONS),
      bottom: _reactDesc.PropTypes.oneOf(VERTICAL_ALIGN_OPTIONS),
      left: _reactDesc.PropTypes.oneOf(HORIZONTAL_ALIGN_OPTIONS),
      right: _reactDesc.PropTypes.oneOf(HORIZONTAL_ALIGN_OPTIONS)
    }).description('Where to place the drop down. The keys correspond to a side of the drop down.\nThe values correspond to a side of the control. For instance,\n{left: \'left\', top: \'bottom\'} would align the left edges and the top of\nthe drop down to the bottom of the control. At most one of left or right and\none of top or bottom should be specified.'),
    dropBackground: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.shape({
      color: _reactDesc.PropTypes.string,
      opacity: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(['weak', 'medium', 'strong']), _reactDesc.PropTypes.bool])
    })]).description('Background color when drop is active'),
    dropTarget: _reactDesc.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 Menu itself by default.'),
    icon: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.bool, _reactDesc.PropTypes.node]).description('Indicates the icon shown as a control to open it.'),
    items: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object).description('Menu items to be placed inside the drop down.\nThe object values can be any Button prop, for example: label and onClick.').isRequired,
    label: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.node]).description('Indicates the label shown as a control to open it.'),
    messages: _reactDesc.PropTypes.shape({
      closeMenu: _reactDesc.PropTypes.string,</menu>

exports.default = function (Keyboard) {
  var DocumentedKeyboard = (0, _reactDesc.describe)(Keyboard).description('A react component that handles keyboard key presses.').usage('import { Keyboard } from \'grommet\';\n {}} />');

  DocumentedKeyboard.propTypes = {
    target: _reactDesc.PropTypes.oneOf(['component', 'document']).description('Where to listen for the keyboard presses.').defaultValue('component'),
    onBackspace: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the backspace key.'),
    onComma: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the comma key.'),
    onDown: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the down key.'),
    onEnter: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the enter key.'),
    onEsc: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the esc key.'),
    onLeft: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the left key.'),
    onRight: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the right key.'),
    onShift: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the shift key.'),
    onSpace: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the space key.'),
    onTab: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the tab key.'),
    onUp: _reactDesc.PropTypes.func.description('Function that will be called when the user presses the up key.')
  };

  return DocumentedKeyboard;
};

exports.default = function (DropButton) {
  var DocumentedDropButton = (0, _reactDesc.describe)(DropButton).availableAt((0, _utils.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: _reactDesc.PropTypes.string.description('Custom title to be used by screen readers.'),
    disabled: _reactDesc.PropTypes.bool.description('Whether the button should be disabled.'),
    dropAlign: _reactDesc.PropTypes.shape({
      top: _reactDesc.PropTypes.oneOf(['top', 'bottom']),
      bottom: _reactDesc.PropTypes.oneOf(['top', 'bottom']),
      right: _reactDesc.PropTypes.oneOf(['left', 'right']),
      left: _reactDesc.PropTypes.oneOf(['left', 'right'])
    }).description('How to align the drop with respect to the button.').defaultValue({
      top: 'top',
      left: 'left'
    }),
    dropContent: _reactDesc.PropTypes.element.description('Content to put inside the Drop.').isRequired,
    dropTarget: _reactDesc.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: _reactDesc.PropTypes.func.description('Callback for when the drop is closed'),
    onOpen: _reactDesc.PropTypes.func.description('Callback for when the drop is opened'),
    open: _reactDesc.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.')
  };

exports.default = function (CheckBox) {
  var DocumentedCheckBox = (0, _reactDesc.describe)(CheckBox).availableAt((0, _utils.getAvailableAtBadge)('CheckBox')).description('A checkbox toggle control.').usage('import { CheckBox } from \'grommet\';\n');

  DocumentedCheckBox.propTypes = {
    checked: _reactDesc.PropTypes.bool.description('Same as React <input checked="{}">'),
    disabled: _reactDesc.PropTypes.bool.description('Same as React <input disabled="{}">. Also adds a hidden input element\n      with the same name so form submissions work.'),
    id: _reactDesc.PropTypes.string.description('The DOM id attribute value to use for the underlying <input> element.'),
    label: _reactDesc.PropTypes.node.description('Label text to place next to the control.'),
    name: _reactDesc.PropTypes.string.description('The DOM name attribute value to use for the underlying <input> element.'),
    onChange: _reactDesc.PropTypes.func.description('Function that will be called when the user clicks the check box. It\n      will be passed a React event object. The current state can be accessed\n      via event.target.checked. Same as React <input>.'),
    reverse: _reactDesc.PropTypes.bool.description('Whether to show the label in front of the checkbox.'),
    toggle: _reactDesc.PropTypes.bool.description('Whether to visualize it as a toggle switch.')
  };

  return DocumentedCheckBox;
};

footer: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.node, _reactDesc.PropTypes.shape({
        aggregate: _reactDesc.PropTypes.bool
      })]),
      header: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.node, _reactDesc.PropTypes.shape({
        aggregate: _reactDesc.PropTypes.bool
      })]),
      property: _reactDesc.PropTypes.string.isRequired,
      render: _reactDesc.PropTypes.func,
      search: _reactDesc.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: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({})).description('Array of data objects.'),
    groupBy: _reactDesc.PropTypes.string.description('Property to group data by.'),
    onMore: _reactDesc.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: _reactDesc.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: _reactDesc.PropTypes.string.description('Whether to allow the user to resize column widths.'),
    size: _reactDesc.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: _reactDesc.PropTypes.string.description('Whether to allow the user to sort columns.')
  };

  return DocumentedDataTable;
};