How to use @storybook/addon-info - 10 common examples

import infoAddonDefaults from './infoAddonDefaults';

let assetRoot;
if (typeof location !== 'undefined') {
  if (/\.sbook\.io/.test(location.hostname)) {
    // As storybook hub cannot host the static files, use the externally hosted SLDS assets (CORS enabled)
    assetRoot = '//mashmatrix.github.io/react-lightning-design-system/assets';
    // As SVG doesn't allow the use of cross-domain external resources (even CORS header is set in resource server)
    // forcedly use svg4everybody polyfill
    svg4everybody({ polyfill: true });
  } else if (location.hostname === 'mashmatrix.github.io') {
    assetRoot = '//mashmatrix.github.io/react-lightning-design-system/assets';
  }
}

setDefaults(infoAddonDefaults);
setAddon(infoAddon);
addDecorator(withKnobs);
addDecorator(wrapContent({ assetRoot }));

configure(() => {
  require('../stories/index.js');
}, module);

addParameters({
  options: {
    brandName: 'ChaosKit',
    brandUrl: 'https://www.github.com/gremlin/chaoskit',
    hierarchySeparator: /\/|\./,
    hierarchyRootSeparator: /\|/,
  },
});

//
// Decorators
//

addDecorator(
  withInfo({
    header: false,
  }),
);
addDecorator(withKnobs);
addDecorator(withA11y);
addDecorator(story =&gt; <div>{story()}</div>);
addDecorator(centered);

//
// Load stories
//

const req = require.context('../src/components/', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename =&gt; req(filename));

import React from 'react';
import { configure, addDecorator, addParameters } from '@storybook/react';
import addons from '@storybook/addons';
import { withInfo } from '@storybook/addon-info';
import { configureActions } from '@storybook/addon-actions';
// import { checkA11y } from 'storybook-addon-a11y';
import {
  CARBON_CURRENT_THEME,
  CARBON_TYPE_TOKEN,
} from './addon-carbon-theme/shared';
import Container from './Container';

const customPropertyPrefix = 'cds';

addDecorator(
  withInfo({
    styles: {
      children: {
        width: '100%',
      },
    },
    maxPropStringLength: 200, // Displays the first 200 characters in the default prop string
  })
);

addParameters({
  options: {
    theme: {
      brandTitle: 'carbon components react',
      brandUrl:
        'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
    },

import PropTypes from 'prop-types';
import PropVal from '@storybook/addon-info/dist/components/PropVal';
import { configure, setAddon } from '@storybook/react';
import infoAddon from '@storybook/addon-info';

// temp fix PropVal.propTypes
// https://github.com/storybooks/storybook/issues/1305
PropVal.propTypes = {
  ...PropVal.propTypes,
  maxPropObjectKeys: PropTypes.number,
  maxPropArrayLength: PropTypes.number,
  maxPropStringLength: PropTypes.number,
};

setAddon(infoAddon);
configure(() => require('./fa5'), module);

import PropTypes from 'prop-types';
import PropVal from '@storybook/addon-info/dist/components/PropVal';
import { configure, setAddon } from '@storybook/react';
import infoAddon from '@storybook/addon-info';

// temp fix PropVal.propTypes
// https://github.com/storybooks/storybook/issues/1305
PropVal.propTypes = {
  ...PropVal.propTypes,
  maxPropObjectKeys: PropTypes.number,
  maxPropArrayLength: PropTypes.number,
  maxPropStringLength: PropTypes.number,
};

setAddon(infoAddon);
configure(() => require('../../fela/src/navbar/.stories'), module);
configure(() => require('../../fela/src/.stories'), module);
configure(() => require('../../icons/.storybook/stories'), module);

import PropTypes from 'prop-types';
import PropVal from '@storybook/addon-info/dist/components/PropVal';
import { configure, setAddon } from '@storybook/react';
import infoAddon from '@storybook/addon-info';

// temp fix PropVal.propTypes
// https://github.com/storybooks/storybook/issues/1305
PropVal.propTypes = {
  ...PropVal.propTypes,
  maxPropObjectKeys: PropTypes.number,
  maxPropArrayLength: PropTypes.number,
  maxPropStringLength: PropTypes.number,
};

setAddon(infoAddon);
configure(() => require('../navbar/.stories'), module);
configure(() => require('../.stories'), module);

var _marksy2 = _interopRequireDefault(_marksy);

var _markdown = require('@storybook/addon-info/dist/components/markdown');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var defaultMarksyConf = {
  h1: _markdown.H1,
  h2: _markdown.H2,
  h3: _markdown.H3,
  h4: _markdown.H4,
  h5: _markdown.H5,
  h6: _markdown.H6,
  code: _markdown.Code,
  p: _markdown.P,
  a: _markdown.A,
  li: _markdown.LI,
  ul: _markdown.UL
};

function renderInfoContent(content) {
  var marksyConf = (0, _extends3.default)({}, defaultMarksyConf);
  var markdownInfo = (0, _marksy2.default)(marksyConf, content);

  if (!content || content === '' || typeof content !== 'string') {
    return null;
  }

  var lines = content.split('\n');
  while (lines[0].trim() === '') {
    lines.shift();
  }

var _marksy = require('marksy');

var _marksy2 = _interopRequireDefault(_marksy);

var _markdown = require('@storybook/addon-info/dist/components/markdown');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var defaultMarksyConf = {
  h1: _markdown.H1,
  h2: _markdown.H2,
  h3: _markdown.H3,
  h4: _markdown.H4,
  h5: _markdown.H5,
  h6: _markdown.H6,
  code: _markdown.Code,
  p: _markdown.P,
  a: _markdown.A,
  li: _markdown.LI,
  ul: _markdown.UL
};

function renderInfoContent(content) {
  var marksyConf = (0, _extends3.default)({}, defaultMarksyConf);
  var markdownInfo = (0, _marksy2.default)(marksyConf, content);

  if (!content || content === '' || typeof content !== 'string') {
    return null;
  }

  var lines = content.split('\n');
  while (lines[0].trim() === '') {

var _marksy = require('marksy');

var _marksy2 = _interopRequireDefault(_marksy);

var _markdown = require('@storybook/addon-info/dist/components/markdown');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var defaultMarksyConf = {
  h1: _markdown.H1,
  h2: _markdown.H2,
  h3: _markdown.H3,
  h4: _markdown.H4,
  h5: _markdown.H5,
  h6: _markdown.H6,
  code: _markdown.Code,
  p: _markdown.P,
  a: _markdown.A,
  li: _markdown.LI,
  ul: _markdown.UL
};

function renderInfoContent(content) {
  var marksyConf = (0, _extends3.default)({}, defaultMarksyConf);
  var markdownInfo = (0, _marksy2.default)(marksyConf, content);

  if (!content || content === '' || typeof content !== 'string') {
    return null;
  }

  var lines = content.split('\n');

var _markdown = require('@storybook/addon-info/dist/components/markdown');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var defaultMarksyConf = {
  h1: _markdown.H1,
  h2: _markdown.H2,
  h3: _markdown.H3,
  h4: _markdown.H4,
  h5: _markdown.H5,
  h6: _markdown.H6,
  code: _markdown.Code,
  p: _markdown.P,
  a: _markdown.A,
  li: _markdown.LI,
  ul: _markdown.UL
};

function renderInfoContent(content) {
  var marksyConf = (0, _extends3.default)({}, defaultMarksyConf);
  var markdownInfo = (0, _marksy2.default)(marksyConf, content);

  if (!content || content === '' || typeof content !== 'string') {
    return null;
  }

  var lines = content.split('\n');
  while (lines[0].trim() === '') {
    lines.shift();
  }
  var padding = 0;