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

.intrinsicElement('svg');

  DocumentedDiagram.propTypes = {
    connections: PropTypes.arrayOf(
      PropTypes.shape({
        anchor: PropTypes.oneOf(['center', 'vertical', 'horizontal']),
        color: colorPropType,
        fromTarget: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
          .isRequired,
        label: PropTypes.string, // for accessibility
        offset: PropTypes.oneOfType([
          PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
          PropTypes.string,
        ]),
        thickness: PropTypes.oneOfType([
          PropTypes.oneOf([
            'hair',
            'xxsmall',
            'xsmall',
            'small',
            'medium',
            'large',
          ]),
          PropTypes.string,
        ]),
        toTarget: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
          .isRequired,
        type: PropTypes.oneOf(['direct', 'curved', 'rectilinear']),
      }),
    ).description(
      `Array of objects describing the connections.
      The 'fromTarget' and 'toTarget' may be either DOM element ids or

])
      .description(`Animation effect(s) to use. 'duration' and 'delay' should
        be in milliseconds. 'jiggle' and 'pulse' types are intended for
        small elements, like icons.`),
    backContent: PropTypes.node.description(
      'Content for the back side of the card, if not specified, the card will not be flippable.'
    ),
    background: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.shape({
        color: PropTypes.string,
        dark: PropTypes.bool,
        image: PropTypes.string,
        position: PropTypes.string,
        opacity: PropTypes.oneOfType([
          PropTypes.oneOf(['weak', 'medium', 'strong']),
          PropTypes.bool,
        ]),
      }),
    ]).description(`Either a color identifier to use for the background
        color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark
        is not needed if color is provided.`),
    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.').defaultValue('all'),

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.'),

export var doc = function doc(Box) {
  var DocumentedBox = describe(Box).availableAt(getAvailableAtBadge('Box')).description("A container that lays out its contents in one direction. Box\n      provides CSS flexbox capabilities for layout, as well as general\n      styling of things like background color, border, and animation.").usage("import { Box } from 'grommet';\n").intrinsicElement('div');
  DocumentedBox.propTypes = _extends({}, genericProps, {
    align: PropTypes.oneOf(['start', 'center', 'end', 'baseline', 'stretch']).description('How to align the contents along the cross axis.'),
    alignContent: PropTypes.oneOf(['start', 'center', 'end', 'between', 'around', 'stretch']).description("How to align the contents when there is extra space in\n        the cross axis.").defaultValue('stretch'),
    animation: PropTypes.oneOfType([ANIMATION_TYPE, ANIMATION_SHAPE, PropTypes.arrayOf(PropTypes.oneOfType([ANIMATION_TYPE, ANIMATION_SHAPE]))]).description("Animation effect(s) to use. 'duration' and 'delay' should\n        be in milliseconds. 'jiggle' and 'pulse' types are intended for\n        small elements, like icons."),
    background: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
      color: PropTypes.string,
      dark: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
      image: PropTypes.string,
      position: PropTypes.string,
      opacity: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.oneOf(['weak', 'medium', 'strong'])]),
      repeat: PropTypes.oneOfType([PropTypes.oneOf(['no-repeat', 'repeat']), PropTypes.string]),
      size: PropTypes.oneOfType([PropTypes.oneOf(['cover', 'contain']), PropTypes.string]),
      light: PropTypes.string
    })]).description("Either a color identifier to use for the background\n        color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark\n        is not needed if color is provided."),
    basis: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'full', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', 'auto']), PropTypes.string]).description("A fixed or relative size along its container's main axis."),
    border: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'left', 'bottom', 'right', 'horizontal', 'vertical', 'all']), BORDER_SHAPE, PropTypes.arrayOf(BORDER_SHAPE)]).description('Include a border.'),
    direction: PropTypes.oneOf(['row', 'column', 'row-responsive', 'row-reverse', 'column-reverse']).description('The orientation to layout the child components in.').defaultValue('column'),
    elevation: PropTypes.oneOfType([PropTypes.oneOf(['none', 'xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string]).description("Elevated height above the underlying context, indicated\n        via a drop shadow.").defaultValue('none'),
    flex: PropTypes.oneOfType([PropTypes.oneOf(['grow', 'shrink']), PropTypes.bool, PropTypes.shape({

`A container that lays out its contents in one direction. Box
      provides CSS flexbox capabilities for layout, as well as general
      styling of things like background color, border, and animation.`,
    )
    .usage("import { Box } from 'grommet';\n")
    .intrinsicElement('div');
  DocumentedBox.propTypes = {
    ...genericProps,
    align: PropTypes.oneOf([
      'start',
      'center',
      'end',
      'baseline',
      'stretch',
    ]).description('How to align the contents along the cross axis.'),
    alignContent: PropTypes.oneOf([
      'start',
      'center',
      'end',
      'between',
      'around',
      'stretch',
    ])
      .description(
        `How to align the contents when there is extra space in
        the cross axis.`,
      )
      .defaultValue('stretch'),
    animation: PropTypes.oneOfType([
      ANIMATION_TYPE,
      ANIMATION_SHAPE,
      PropTypes.arrayOf(PropTypes.oneOfType([ANIMATION_TYPE, ANIMATION_SHAPE])),

export default (function (TextInput) {
  var DocumentedTextInput = describe(TextInput).availableAt(getAvailableAtBadge('TextInput')).description('A text input field with optional suggestions.').usage('import { TextInput } from \'grommet\';\n');

  DocumentedTextInput.propTypes = {
    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.').defaultValue({
      top: 'top',
      left: 'left'
    }),
    dropTarget: PropTypes.object.description('Target where any suggestions 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 TextInput itself by default.'),
    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',
      suggestionsExist: 'This input has suggestions use arrow keys to navigate',

'hover', 'focus', and 'drop' keys. This allows you to customize
      the rendering of the Menu button in those cases.`,
    )
    .usage(
      `import { Menu } from 'grommet';
<menu>`,
    )
    .intrinsicElement('button');

  DocumentedMenu.propTypes = {
    ...genericProps,
    disabled: PropTypes.bool
      .description('Whether the menu should be disabled.')
      .defaultValue(false),
    dropAlign: PropTypes.shape({
      top: PropTypes.oneOf(VERTICAL_ALIGN_OPTIONS),
      bottom: PropTypes.oneOf(VERTICAL_ALIGN_OPTIONS),
      left: PropTypes.oneOf(HORIZONTAL_ALIGN_OPTIONS),
      right: PropTypes.oneOf(HORIZONTAL_ALIGN_OPTIONS),
    })
      .description(
        `Where to place the drop down.
The keys correspond to a side of the drop down.
The values correspond to a side of the control. For instance,
{left: 'left', top: 'bottom'} would align the left edges and the top of
the drop down to the bottom of the control. At most one of left or right and
one of top or bottom should be specified.`,
      )
      .defaultValue({ top: 'top', left: 'left' }),
    dropBackground: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.shape({</menu>

export default (function (Paragraph) {
  var DocumentedParagraph = describe(Paragraph).availableAt(getAvailableAtBadge('Paragraph')).description('A paragraph of text.').usage('import { Paragraph } from \'grommet\';\n');

  DocumentedParagraph.propTypes = {
    color: PropTypes.string.description('A color identifier to use for the text color. For example:\n\'status-critical\'.'),
    margin: PropTypes.oneOfType([PropTypes.oneOf(['none', 'small', 'medium', 'large']), PropTypes.shape({
      bottom: PropTypes.oneOf(['small', 'medium', 'large']),
      top: PropTypes.oneOf(['small', 'medium', 'large'])
    })]).description('The amount of margin above and/or below the paragraph. An object can be\nspecified to distinguish top margin and bottom margin.'),
    size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']).description('The size of the Paragraph text.').defaultValue('medium'),
    textAlign: PropTypes.oneOf(['start', 'center', 'end']).description('How to align the text inside the paragraph.')
  };

  return DocumentedParagraph;
});

export default (function (Distribution) {
  var DocumentedDistribution = describe(Distribution).availableAt(getAvailableAtBadge('Distribution')).description('Approximately proportionally sized grid of boxes. The\n      area given to each box isn\'t mathematically precise according to the\n      ratio to the total values. Instead, the boxes are laid out in a\n      manner that makes them more visually easy to scan. For example,\n      two values of 48 and 52 will actually each get 50% of the area.').usage("import { Distribution } from 'grommet';\n");

  DocumentedDistribution.propTypes = {
    children: PropTypes.func.description('Function that will be called when each value is rendered.'),
    gap: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']).description('The amount of spacing between child elements.'),
    values: PropTypes.arrayOf(PropTypes.shape({
      value: PropTypes.number.isRequired
    })).description('Array of objects containing a value. The array should already be\n      sorted from largest to smallest value. The caller can put other\n      properties in the object. The children function will be called to\n      render the contents of each value.').isRequired
  };

  return DocumentedDistribution;
});

export const colorPropType = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.shape({ dark: PropTypes.string, light: PropTypes.string }),
]);

const MARGIN_SIZES = [
  'xxsmall',
  'xsmall',
  'small',
  'medium',
  'large',
  'xlarge',
];

export const marginProp = PropTypes.oneOfType([
  PropTypes.oneOf(['none', ...MARGIN_SIZES]),
  PropTypes.shape({
    bottom: PropTypes.oneOfType([
      PropTypes.oneOf(MARGIN_SIZES),
      PropTypes.string,
    ]),
    horizontal: PropTypes.oneOfType([
      PropTypes.oneOf(MARGIN_SIZES),
      PropTypes.string,
    ]),
    left: PropTypes.oneOfType([
      PropTypes.oneOf(MARGIN_SIZES),
      PropTypes.string,
    ]),
    right: PropTypes.oneOfType([
      PropTypes.oneOf(MARGIN_SIZES),
      PropTypes.string,