{"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"4052acda9105310dadff8bcce9d13b481b76f011","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.5-react-debug.0.tgz","fileCount":64,"integrity":"sha512-ZfQasWP1Fqe2nfpyZ/FGC+alI5SLbxJrneEemvinmNTqmaYVfaFUwZ1+fnU1xvb/tJFtRSnA99I2ihVIjc/+nQ==","signatures":[{"sig":"MEUCIQC/S6+MuYJZ/QJ/n9jpph1jt6uQDfwXWdy6p5JYnzMCwQIgZl1qI2jdZhmg23zKMdfE+puaCSwAJ1QKoY5Y9Ng2F7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":647767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNWwWCRA9TVsSAnZWagAA7xoQAJKBgtUYHipXoHy72JE4\nw+P3zc5Np2C1xZqLO73Xo8mugKwmoSOXqlttmv10VzoeizBj8pEaoxkRD8RN\nbCbuIeERb0crgxZca8rVfFbv+AA/S7b60UCj24JYCplaC+GuaoIMdpA4l5oO\nSq9Ml1qZLBDJE3Ja81eJIz99xLRJk25tSMCzyo5Pbgh0VCJ9jKwgtYikNrJd\nr0B1PCDrH/ZD8yGxXuJVVCRsHqYndw+bjcOdxxowP2SzIxrhqYMox8tDnLVQ\nwtOpYnCtq7HrsCtHGU2YeWW/b0WhHS6+sCgD/z4Ei3jhPvXezVsbuBGjg1YG\nfWKQd62aaHsVs0KK7cwz0+NjZ6lBknifw2R43i4zj+Y9ePNwliuQ8w9oU3XE\nQgB0ZMrm5MyEEsl/QBPJJXGJFBkLRcSkcvHNOWN4Htj87hQv+CWFV+wddoW9\n2IHKDqLCdKEL58hFQ8eWVpHtwAa149ZWerPUr/WN1XA3FTdiOsTJ5s3NohV1\nBXTmLUiFuYDHbswlinKky9xrwU/tmTW1B143cfoVN4sZ9YUrBzmH/aa2uUOp\nUNeWrUeM9fe7QHDlFvplJwzagciCedmZ1DsDnczb0WfTokgZ1cU8VZhDYma6\nm2vIqeR7aHCNF4Pu8iNDxRxJzIQbbUH2IDOaldbmjpLEheYRwTrnE1nM8dAg\nJDv2\r\n=8ilO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@storybook/addon-info","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","gitHead":"9f6ec6d8393eb94ab4685839ab865af11aab32a3","license":"MIT","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","keywords":["addon","storybook"],"repository":{"url":"https://github.com/storybooks/storybook.git","type":"git"},"description":"A Storybook addon to show additional information for your stories.","directories":{},"jsnext:main":"src/index.js","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"usulpro","email":"regx@usul.su"}],"dependencies":{"global":"^4.3.2","marksy":"^6.1.0","core-js":"^2.5.7","prop-types":"^15.6.2","util-deprecate":"^1.0.2","@storybook/addons":"4.1.5-react-debug.0","nested-object-assign":"^1.0.1","@storybook/components":"4.1.5-react-debug.0","react-lifecycles-compat":"^3.0.4","@storybook/client-logger":"4.1.5-react-debug.0","react-addons-create-fragment":"^15.5.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-info_4.1.5-react-debug.0_1547004949603_0.1332281260893622","host":"s3://npm-registry-packages"},"_id":"@storybook/addon-info@4.1.5-react-debug.0","version":"4.1.5-react-debug.0"}