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

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

  DocumentedChart.propTypes = _extends({}, genericProps, {
    bounds: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).description("The limits for the values, specified as a two dimensional array.\n      If not specified, the bounds will automatically be set to fit\n      the provided values."),
    color: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
      color: PropTypes.string,
      opacity: PropTypes.oneOfType([PropTypes.oneOf(['weak', 'medium', 'strong']), PropTypes.bool])
    }), PropTypes.arrayOf(PropTypes.shape({
      color: PropTypes.string,
      value: PropTypes.number
    }))]).description("A color identifier to use for the graphic color. If an\n      array is specified, it is used to create a gradient mask. Array objects\n      indicate what color to show at what value. In the simplest case, the\n      values should map to the Y bounds values, resulting in a vertical\n      gradient. Specifying more objects allows more fine grained control over\n      where the gradient colors change.").defaultValue('accent-1'),
    gap: PropTypes.oneOfType([PropTypes.oneOf(['none', 'xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string]).description("The amount of spacing between data points. This\n      is only used when the size specifies width as 'auto'."),
    id: PropTypes.string.description("A unique identifier for the Chart. This\n      is required if more than one Chart is shown and they use color\n      gradients."),
    onClick: PropTypes.func.description("Called when the user clicks on it.\n      This is only available when the type is line or area."),
    onHover: PropTypes.func.description("Called with a boolean argument\n      indicating when the user hovers onto or away from it.\n      This is only available when the type is line or area."),
    overflow: PropTypes.bool.description("Whether the chart strokes should overflow the component. Set this\n      to true for precise positioning when stacking charts or including\n      precise axes. Set this to false to have the graphical elements\n      align with the component boundaries.").defaultValue(false),

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,</meter>

export var docTableFooter = function docTableFooter(TableFooter) {
  var DocumentedTableFooter = describe(TableFooter).description('The footer of a table.').usage('import { TableFooter } from \'grommet\';\n');

  return DocumentedTableFooter;
};

export const doc = TextArea => {
  const DocumentedTextArea = describe(TextArea)
    .availableAt(getAvailableAtBadge('TextArea'))
    .description('A control to input multiple lines of text.')
    .usage(
      `import { TextArea } from 'grommet';
<textarea name="item" id="item">`,
    )
    .intrinsicElement('textarea');

  DocumentedTextArea.propTypes = {
    id: PropTypes.string.description('The id attribute of the textarea.'),
    fill: PropTypes.bool
      .description('Whether the width and height should fill the container.')
      .defaultValue(false),
    focusIndicator: PropTypes.bool.description(
      'Whether the plain textarea should receive a focus outline.',
    ),</textarea>

export var doc = function doc(Collapsible) {
  var DocumentedCollapsible = describe(Collapsible).description('Expand or collapse animation.').usage("import { Collapsible } from 'grommet';\ntest").intrinsicElement('div');
  DocumentedCollapsible.propTypes = {
    open: PropTypes.bool.description('Whether or not the component should be open.'),
    direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Direction to animate the collapsible content.').defaultValue('vertical')
  };
  return DocumentedCollapsible;
};
export var themeDoc = {

export const doc = RadioButton => {
  const DocumentedRadioButton = describe(RadioButton)
    .availableAt(getAvailableAtBadge('RadioButton'))
    .description('A radio button control.')
    .details(
      `RadioButton should typically not be used directly.
      Instead, use RadioButtonGroup.`,
    )
    .usage(
      `import { RadioButton } from 'grommet';
`,
    )
    .intrinsicElement('input');

  DocumentedRadioButton.propTypes = {
    checked: PropTypes.bool.description('Same as React <input checked="{}">'),
    disabled: PropTypes.bool.description(
      `Same as React <input disabled="{}">. Also adds a hidden input element

export default (function (Chart) {
  var DocumentedChart = describe(Chart).availableAt(getAvailableAtBadge('Chart')).description('A graphical chart.').usage("import { Chart } from 'grommet';\n");

  DocumentedChart.propTypes = {
    bounds: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).description('The limits for the values, specified as a two dimensional array.\n      If not specified, the bounds will automatically be set to fit\n      the provided values.'),
    color: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
      color: PropTypes.string,
      opacity: PropTypes.oneOfType([PropTypes.oneOf(['weak', 'medium', 'strong']), PropTypes.bool])
    })]).description('A color identifier to use for the graphic color.').defaultValue('accent-1'),
    onClick: PropTypes.func.description('Called when the user clicks on it.\n      This is only available when the type is line or area.'),
    onHover: PropTypes.func.description('Called with a boolean argument\n      indicating when the user hovers onto or away from it.\n      This is only available when the type is line or area.'),
    overflow: PropTypes.bool.description('Whether the chart strokes should overflow the component. Set this\n      to true for precise positioning when stacking charts or including\n      precise axes. Set this to false to have the graphical elements\n      align with the component boundaries.').defaultValue(false),
    round: PropTypes.bool.description('Whether to round the line ends.'),
    size: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full']), PropTypes.shape({
      height: PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full']),
      width: PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full'])
    })]).description('The size of the Chart.').defaultValue({ width: 'medium', height: 'small' }),
    thickness: PropTypes.oneOf(['hair', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'none']).description('The width of the stroke.').defaultValue('medium'),

export default (function (RadioButton) {
  var DocumentedRadioButton = describe(RadioButton).availableAt(getAvailableAtBadge('RadioButton')).description('A radio button control.').usage('import { RadioButton } from \'grommet\';\n');

  DocumentedRadioButton.propTypes = {
    checked: PropTypes.bool.description('Same as React <input checked="{}">'),
    disabled: PropTypes.bool.description('Same as React <input disabled="{}">. Also adds a hidden input element\nwith the same name so form submissions work.'),
    id: PropTypes.string.description('The DOM id attribute value to use for the underlying <input> element.'),
    label: PropTypes.node.description('Label text to place next to the control.'),
    name: PropTypes.string.description('The DOM name attribute value to use for the underlying <input> element.').isRequired,
    onChange: PropTypes.func.description('Function that will be called when the user clicks the radio button. It\n      will be passed a React event object. The current state can be accessed\n      via event.target.checked. Same as React <input>.')
  };

  return DocumentedRadioButton;
});

export const doc = Drop => {
  const 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 

export var doc = function doc(TableRow) {
  var DocumentedTableRow = describe(TableRow).description('A row of cells in a table.').usage("import { TableRow } from 'grommet';\n").intrinsicElement('tr');
  return DocumentedTableRow;
};