How to use react-desc - 10 common examples

.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

color: PropTypes.string.description('Default color'),
    continents: PropTypes.arrayOf(PropTypes.shape({
      color: PropTypes.string,
      name: PropTypes.oneOf(['Africa', 'Asia', 'Australia', 'Europe', 'North America', 'South America']).isRequired,
      onClick: PropTypes.func,
      onHover: PropTypes.func
    })).description('Continent details.'),
    onSelectPlace: PropTypes.func.description('Called when the user clicks on a place.\n        It is passed the location.'),
    places: PropTypes.arrayOf(PropTypes.shape({
      color: PropTypes.string,
      name: PropTypes.string, // for a11y aria-label
      location: PropTypes.arrayOf(PropTypes.number).isRequired,
      onClick: PropTypes.func,
      onHover: PropTypes.func
    })).description('Place details.'),
    hoverColor: PropTypes.string.description('Color when hovering over places while selecting.')
  };

  return DocumentedWorldMap;
});

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),
    round: PropTypes.bool.description('Whether to round the line ends.').defaultValue(false),
    size: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full']), PropTypes.shape({
      height: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full']), PropTypes.string]),
      width: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full', 'auto']), PropTypes.string])
    }), PropTypes.string]).description('The size of the Chart.').defaultValue({
      width: 'medium',
      height: 'small'
    }),
    thickness: PropTypes.oneOfType([PropTypes.oneOf(['hair', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'none']), PropTypes.string]).description('The width of the stroke.').defaultValue('medium'),

.usage("import { Chart } from 'grommet';\n");
  // We don't include svg due to a collision on the values property
  // .intrinsicElement('svg');

  DocumentedChart.propTypes = {
    ...genericProps,
    bounds: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).description(
      `The limits for the values, specified as a two dimensional array.
      If not specified, the bounds will automatically be set to fit
      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
      array is specified, it is used to create a gradient mask. Array objects
      indicate what color to show at what value. In the simplest case, the
      values should map to the Y bounds values, resulting in a vertical

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),
    round: PropTypes.bool.description('Whether to round the line ends.').defaultValue(false),
    size: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full']), PropTypes.shape({
      height: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full']), PropTypes.string]),
      width: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full', 'auto']), PropTypes.string])
    }), PropTypes.string]).description('The size of the Chart.').defaultValue({
      width: 'medium',
      height: 'small'

),
    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(
      `The name of the value data when in a Form and the name of
      the input field.`,
    ),
    margin: marginProp,
    pad: PropTypes.bool.description(
      'Whether to add padding to align with the padding of TextInput.',
    ),
    required: PropTypes.bool.description('Whether the field is required.'),
    validate: PropTypes.oneOfType([
      PropTypes.shape({
        regexp: PropTypes.object, // regular expression
        message: PropTypes.string,
      }),
      PropTypes.func,
    ]).description(
      `Validation rule when used within a grommet Form. Provide a regular
      expression or a function. If a
      function is provided, it will be called with two arguments, the value
      for this field and the entire value object. This permits validation to
      encompass multiple fields. The function should return a string message
      describing the validation issue, if any.`,

`import { Meter } from 'grommet';
<meter>`,
    );
  // We don't include svg due to a collision on the values property
  // .intrinsicElement('svg');

  DocumentedMeter.propTypes = {
    ...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.')</meter>

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 doc = function doc(MaskedInput) {
  var DocumentedMaskedInput = describe(MaskedInput).availableAt(getAvailableAtBadge('MaskedInput')).description('An input field with formalized syntax.').usage("import { MaskedInput } from 'grommet';\n").intrinsicElement('input');
  DocumentedMaskedInput.propTypes = {
    id: PropTypes.string.description('The id attribute of the input.'),
    name: PropTypes.string.description('The name attribute of the input.'),
    onChange: PropTypes.func.description("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\n      allow both the final full string element as well as partial strings\n      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\n      is initially valid with respect to the mask.")
  };
  return DocumentedMaskedInput;
};
export var themeDoc = _extends({