Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@storybook/addon-info
Advanced tools
@storybook/addon-info - npm Package Compare versions
Comparing version 3.2.9 to 3.3.0-alpha.0
@@ -33,2 +33,4 @@ 'use strict'; | ||
| var _components = require('@storybook/components'); | ||
| var _PropVal = require('./PropVal'); | ||
@@ -38,2 +40,6 @@ | ||
| var _PrettyPropType = require('./types/PrettyPropType'); | ||
| var _PrettyPropType2 = _interopRequireDefault(_PrettyPropType); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -50,10 +56,2 @@ | ||
| var stylesheet = { | ||
| propTable: { | ||
| marginLeft: -10, | ||
| borderSpacing: '10px 5px', | ||
| borderCollapse: 'separate' | ||
| } | ||
| }; | ||
| var isNotEmpty = function isNotEmpty(obj) { | ||
@@ -63,23 +61,2 @@ return obj && obj.props && (0, _keys2.default)(obj.props).length > 0; | ||
| var renderDocgenPropType = function renderDocgenPropType(propType) { | ||
| if (!propType) { | ||
| return 'unknown'; | ||
| } | ||
| var name = propType.name; | ||
| switch (name) { | ||
| case 'arrayOf': | ||
| return propType.value.name + '[]'; | ||
| case 'instanceOf': | ||
| return propType.value; | ||
| case 'union': | ||
| return propType.raw; | ||
| case 'signature': | ||
| return propType.raw; | ||
| default: | ||
| return name; | ||
| } | ||
| }; | ||
| var hasDocgen = function hasDocgen(type) { | ||
@@ -89,6 +66,2 @@ return isNotEmpty(type.__docgenInfo); | ||
| var boolToString = function boolToString(value) { | ||
| return value ? 'yes' : 'no'; | ||
| }; | ||
| var propsFromDocgen = function propsFromDocgen(type) { | ||
@@ -105,4 +78,4 @@ var props = {}; | ||
| property: property, | ||
| propType: renderDocgenPropType(propType), | ||
| required: boolToString(docgenInfoProp.required), | ||
| propType: propType, | ||
| required: docgenInfoProp.required, | ||
| description: docgenInfoProp.description, | ||
@@ -122,9 +95,10 @@ defaultValue: defaultValueDesc.value | ||
| var typeInfo = type.propTypes[property]; | ||
| var required = boolToString(typeInfo.isRequired === undefined); | ||
| var description = type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] ? type.__docgenInfo.props[property].description : null; | ||
| var required = typeInfo.isRequired === undefined; | ||
| var docgenInfo = type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]; | ||
| var description = docgenInfo ? docgenInfo.description : null; | ||
| var propType = PropTypesMap.get(typeInfo) || 'other'; | ||
| if (propType === 'other') { | ||
| if (type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] && type.__docgenInfo.props[property].type) { | ||
| propType = type.__docgenInfo.props[property].type.name; | ||
| if (docgenInfo && docgenInfo.type) { | ||
| propType = docgenInfo.type.name; | ||
| } | ||
@@ -185,4 +159,4 @@ } | ||
| return _react2.default.createElement( | ||
| 'table', | ||
| { style: stylesheet.propTable }, | ||
| _components.Table, | ||
| null, | ||
| _react2.default.createElement( | ||
@@ -195,24 +169,24 @@ 'thead', | ||
| _react2.default.createElement( | ||
| 'th', | ||
| null, | ||
| _components.Th, | ||
| { bordered: true }, | ||
| 'property' | ||
| ), | ||
| _react2.default.createElement( | ||
| 'th', | ||
| null, | ||
| _components.Th, | ||
| { bordered: true }, | ||
| 'propType' | ||
| ), | ||
| _react2.default.createElement( | ||
| 'th', | ||
| null, | ||
| _components.Th, | ||
| { bordered: true }, | ||
| 'required' | ||
| ), | ||
| _react2.default.createElement( | ||
| 'th', | ||
| null, | ||
| _components.Th, | ||
| { bordered: true }, | ||
| 'default' | ||
| ), | ||
| _react2.default.createElement( | ||
| 'th', | ||
| null, | ||
| _components.Th, | ||
| { bordered: true }, | ||
| 'description' | ||
@@ -230,24 +204,24 @@ ) | ||
| _react2.default.createElement( | ||
| 'td', | ||
| null, | ||
| _components.Td, | ||
| { bordered: true, code: true }, | ||
| row.property | ||
| ), | ||
| _react2.default.createElement( | ||
| 'td', | ||
| null, | ||
| row.propType | ||
| _components.Td, | ||
| { bordered: true, code: true }, | ||
| _react2.default.createElement(_PrettyPropType2.default, { propType: row.propType }) | ||
| ), | ||
| _react2.default.createElement( | ||
| 'td', | ||
| null, | ||
| row.required | ||
| _components.Td, | ||
| { bordered: true }, | ||
| row.required ? 'yes' : '-' | ||
| ), | ||
| _react2.default.createElement( | ||
| 'td', | ||
| null, | ||
| _components.Td, | ||
| { bordered: true }, | ||
| row.defaultValue === undefined ? '-' : _react2.default.createElement(_PropVal2.default, (0, _extends3.default)({ val: row.defaultValue }, propValProps)) | ||
| ), | ||
| _react2.default.createElement( | ||
| 'td', | ||
| null, | ||
| _components.Td, | ||
| { bordered: true }, | ||
| row.description | ||
@@ -254,0 +228,0 @@ ) |
| { | ||
| "name": "@storybook/addon-info", | ||
| "version": "3.2.9", | ||
| "version": "3.3.0-alpha.0", | ||
| "description": "A Storybook addon to show additional information for your stories.", | ||
@@ -17,4 +17,4 @@ "license": "MIT", | ||
| "dependencies": { | ||
| "@storybook/addons": "^3.2.6", | ||
| "@storybook/components": "^3.2.7", | ||
| "@storybook/addons": "^3.3.0-alpha.0", | ||
| "@storybook/components": "^3.3.0-alpha.0", | ||
| "babel-runtime": "^6.23.0", | ||
@@ -21,0 +21,0 @@ "global": "^4.3.2", |
@@ -64,7 +64,3 @@ import { Prism } from 'global'; | ||
| }; | ||
| return ( | ||
| <pre style={style}> | ||
| {props.children} | ||
| </pre> | ||
| ); | ||
| return <pre style={style}>{props.children}</pre>; | ||
| } | ||
@@ -82,7 +78,3 @@ | ||
| }; | ||
| return ( | ||
| <blockquote style={style}> | ||
| {props.children} | ||
| </blockquote> | ||
| ); | ||
| return <blockquote style={style}>{props.children}</blockquote>; | ||
| } | ||
@@ -89,0 +81,0 @@ |
@@ -13,7 +13,3 @@ import React from 'react'; | ||
| }; | ||
| return ( | ||
| <p style={style}> | ||
| {props.children} | ||
| </p> | ||
| ); | ||
| return <p style={style}>{props.children}</p>; | ||
| } | ||
@@ -29,7 +25,3 @@ | ||
| }; | ||
| return ( | ||
| <li style={style}> | ||
| {props.children} | ||
| </li> | ||
| ); | ||
| return <li style={style}>{props.children}</li>; | ||
| } | ||
@@ -45,7 +37,3 @@ | ||
| }; | ||
| return ( | ||
| <ul style={style}> | ||
| {props.children} | ||
| </ul> | ||
| ); | ||
| return <ul style={style}>{props.children}</ul>; | ||
| } | ||
@@ -52,0 +40,0 @@ |
@@ -69,5 +69,3 @@ import React from 'react'; | ||
| <div style={containerStyle}> | ||
| <span style={tagStyle}> | ||
| {text} | ||
| </span> | ||
| <span style={tagStyle}>{text}</span> | ||
| </div> | ||
@@ -81,5 +79,3 @@ ); | ||
| <div style={containerStyle}> | ||
| <span style={tagStyle}> | ||
| <{name} | ||
| </span> | ||
| <span style={tagStyle}><{name}</span> | ||
| <Props | ||
@@ -105,5 +101,3 @@ node={node} | ||
| <div style={containerStyleCopy}> | ||
| <span style={tagStyle}> | ||
| <{name} | ||
| </span> | ||
| <span style={tagStyle}><{name}</span> | ||
| <Props | ||
@@ -118,3 +112,3 @@ node={node} | ||
| </div> | ||
| {React.Children.map(children, childElement => | ||
| {React.Children.map(children, childElement => ( | ||
| <Node | ||
@@ -128,7 +122,5 @@ node={childElement} | ||
| /> | ||
| )} | ||
| ))} | ||
| <div style={containerStyleCopy}> | ||
| <span style={tagStyle}> | ||
| </{name}> | ||
| </span> | ||
| <span style={tagStyle}></{name}></span> | ||
| </div> | ||
@@ -135,0 +127,0 @@ </div> |
@@ -35,12 +35,12 @@ import React from 'react'; | ||
| <span key={name}> | ||
| {breakIntoNewLines | ||
| ? <span> | ||
| <br /> | ||
| </span> | ||
| : ' '} | ||
| <span style={propNameStyle}> | ||
| {name} | ||
| </span> | ||
| {breakIntoNewLines ? ( | ||
| <span> | ||
| <br /> | ||
| </span> | ||
| ) : ( | ||
| ' ' | ||
| )} | ||
| <span style={propNameStyle}>{name}</span> | ||
| {/* Use implicit true: */} | ||
| {(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') && | ||
| {(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') && ( | ||
| <span> | ||
@@ -56,3 +56,4 @@ = | ||
| </span> | ||
| </span>} | ||
| </span> | ||
| )} | ||
@@ -64,7 +65,3 @@ {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)} | ||
| return ( | ||
| <span> | ||
| {items} | ||
| </span> | ||
| ); | ||
| return <span>{items}</span>; | ||
| } | ||
@@ -71,0 +68,0 @@ |
@@ -5,3 +5,6 @@ /* eslint-disable no-underscore-dangle */ | ||
| import React from 'react'; | ||
| import { Table, Td, Th } from '@storybook/components'; | ||
| import PropVal from './PropVal'; | ||
| import PrettyPropType from './types/PrettyPropType'; | ||
@@ -17,37 +20,6 @@ const PropTypesMap = new Map(); | ||
| const stylesheet = { | ||
| propTable: { | ||
| marginLeft: -10, | ||
| borderSpacing: '10px 5px', | ||
| borderCollapse: 'separate', | ||
| }, | ||
| }; | ||
| const isNotEmpty = obj => obj && obj.props && Object.keys(obj.props).length > 0; | ||
| const renderDocgenPropType = propType => { | ||
| if (!propType) { | ||
| return 'unknown'; | ||
| } | ||
| const name = propType.name; | ||
| switch (name) { | ||
| case 'arrayOf': | ||
| return `${propType.value.name}[]`; | ||
| case 'instanceOf': | ||
| return propType.value; | ||
| case 'union': | ||
| return propType.raw; | ||
| case 'signature': | ||
| return propType.raw; | ||
| default: | ||
| return name; | ||
| } | ||
| }; | ||
| const hasDocgen = type => isNotEmpty(type.__docgenInfo); | ||
| const boolToString = value => (value ? 'yes' : 'no'); | ||
| const propsFromDocgen = type => { | ||
@@ -64,4 +36,4 @@ const props = {}; | ||
| property, | ||
| propType: renderDocgenPropType(propType), | ||
| required: boolToString(docgenInfoProp.required), | ||
| propType, | ||
| required: docgenInfoProp.required, | ||
| description: docgenInfoProp.description, | ||
@@ -81,17 +53,11 @@ defaultValue: defaultValueDesc.value, | ||
| const typeInfo = type.propTypes[property]; | ||
| const required = boolToString(typeInfo.isRequired === undefined); | ||
| const description = | ||
| type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] | ||
| ? type.__docgenInfo.props[property].description | ||
| : null; | ||
| const required = typeInfo.isRequired === undefined; | ||
| const docgenInfo = | ||
| type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]; | ||
| const description = docgenInfo ? docgenInfo.description : null; | ||
| let propType = PropTypesMap.get(typeInfo) || 'other'; | ||
| if (propType === 'other') { | ||
| if ( | ||
| type.__docgenInfo && | ||
| type.__docgenInfo.props && | ||
| type.__docgenInfo.props[property] && | ||
| type.__docgenInfo.props[property].type | ||
| ) { | ||
| propType = type.__docgenInfo.props[property].type.name; | ||
| if (docgenInfo && docgenInfo.type) { | ||
| propType = docgenInfo.type.name; | ||
| } | ||
@@ -144,36 +110,34 @@ } | ||
| return ( | ||
| <table style={stylesheet.propTable}> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <th>property</th> | ||
| <th>propType</th> | ||
| <th>required</th> | ||
| <th>default</th> | ||
| <th>description</th> | ||
| <Th bordered>property</Th> | ||
| <Th bordered>propType</Th> | ||
| <Th bordered>required</Th> | ||
| <Th bordered>default</Th> | ||
| <Th bordered>description</Th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {array.map(row => | ||
| {array.map(row => ( | ||
| <tr key={row.property}> | ||
| <td> | ||
| <Td bordered code> | ||
| {row.property} | ||
| </td> | ||
| <td> | ||
| {row.propType} | ||
| </td> | ||
| <td> | ||
| {row.required} | ||
| </td> | ||
| <td> | ||
| {row.defaultValue === undefined | ||
| ? '-' | ||
| : <PropVal val={row.defaultValue} {...propValProps} />} | ||
| </td> | ||
| <td> | ||
| {row.description} | ||
| </td> | ||
| </Td> | ||
| <Td bordered code> | ||
| <PrettyPropType propType={row.propType} /> | ||
| </Td> | ||
| <Td bordered>{row.required ? 'yes' : '-'}</Td> | ||
| <Td bordered> | ||
| {row.defaultValue === undefined ? ( | ||
| '-' | ||
| ) : ( | ||
| <PropVal val={row.defaultValue} {...propValProps} /> | ||
| )} | ||
| </Td> | ||
| <Td bordered>{row.description}</Td> | ||
| </tr> | ||
| )} | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </Table> | ||
| ); | ||
@@ -180,0 +144,0 @@ } |
@@ -51,7 +51,3 @@ import React from 'react'; | ||
| } | ||
| return ( | ||
| <span style={valueStyles.array}> | ||
| [{createFragment(items)}] | ||
| </span> | ||
| ); | ||
| return <span style={valueStyles.array}>[{createFragment(items)}]</span>; | ||
| } | ||
@@ -63,7 +59,3 @@ | ||
| names.slice(0, maxPropObjectKeys).forEach((name, i) => { | ||
| items[`k${i}`] = ( | ||
| <span style={valueStyles.attr}> | ||
| {name} | ||
| </span> | ||
| ); | ||
| items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>; | ||
| items[`c${i}`] = ': '; | ||
@@ -94,7 +86,3 @@ items[`v${i}`] = <PropVal val={val[name]} />; | ||
| if (typeof val === 'number') { | ||
| content = ( | ||
| <span style={valueStyles.number}> | ||
| {val} | ||
| </span> | ||
| ); | ||
| content = <span style={valueStyles.number}>{val}</span>; | ||
| } else if (typeof val === 'string') { | ||
@@ -104,7 +92,3 @@ if (val.length > maxPropStringLength) { | ||
| } | ||
| content = ( | ||
| <span style={valueStyles.string}> | ||
| "{val}" | ||
| </span> | ||
| ); | ||
| content = <span style={valueStyles.string}>"{val}"</span>; | ||
| braceWrap = false; | ||
@@ -116,7 +100,3 @@ } else if (typeof val === 'boolean') { | ||
| } else if (typeof val === 'function') { | ||
| content = ( | ||
| <span style={valueStyles.func}> | ||
| {val.name ? `${val.name}()` : 'anonymous()'} | ||
| </span> | ||
| ); | ||
| content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>; | ||
| } else if (!val) { | ||
@@ -138,7 +118,3 @@ content = <span style={valueStyles.empty}>{`${val}`}</span>; | ||
| return ( | ||
| <span> | ||
| {content} | ||
| </span> | ||
| ); | ||
| return <span>{content}</span>; | ||
| } | ||
@@ -145,0 +121,0 @@ |
@@ -119,7 +119,3 @@ /* eslint no-underscore-dangle: 0 */ | ||
| _renderStory() { | ||
| return ( | ||
| <div style={this.state.stylesheet.infoStory}> | ||
| {this.props.children} | ||
| </div> | ||
| ); | ||
| return <div style={this.state.stylesheet.infoStory}>{this.props.children}</div>; | ||
| } | ||
@@ -148,8 +144,7 @@ | ||
| return ( | ||
| infoHeader && | ||
| <div style={this.state.stylesheet.infoPage}> | ||
| <div style={this.state.stylesheet.infoBody}> | ||
| {infoHeader} | ||
| infoHeader && ( | ||
| <div style={this.state.stylesheet.infoPage}> | ||
| <div style={this.state.stylesheet.infoBody}>{infoHeader}</div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| ); | ||
@@ -181,5 +176,3 @@ } | ||
| <div> | ||
| <div style={this.state.stylesheet.children}> | ||
| {this.props.children} | ||
| </div> | ||
| <div style={this.state.stylesheet.children}>{this.props.children}</div> | ||
| <a style={linkStyle} onClick={openOverlay} role="button" tabIndex="0"> | ||
@@ -213,8 +206,4 @@ Show Info | ||
| <div style={this.state.stylesheet.header.body}> | ||
| <h1 style={this.state.stylesheet.header.h1}> | ||
| {this.props.context.kind} | ||
| </h1> | ||
| <h2 style={this.state.stylesheet.header.h2}> | ||
| {this.props.context.story} | ||
| </h2> | ||
| <h1 style={this.state.stylesheet.header.h1}>{this.props.context.kind}</h1> | ||
| <h2 style={this.state.stylesheet.header.h2}>{this.props.context.story}</h2> | ||
| </div> | ||
@@ -247,7 +236,3 @@ ); | ||
| const source = lines.map(s => s.slice(padding)).join('\n'); | ||
| return ( | ||
| <div style={this.state.stylesheet.infoContent}> | ||
| {this.marksy(source).tree} | ||
| </div> | ||
| ); | ||
| return <div style={this.state.stylesheet.infoContent}>{this.marksy(source).tree}</div>; | ||
| } | ||
@@ -261,7 +246,3 @@ | ||
| if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.kind) { | ||
| retDiv = ( | ||
| <div> | ||
| {STORYBOOK_REACT_CLASSES[key].docgenInfo.description} | ||
| </div> | ||
| ); | ||
| retDiv = <div>{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}</div>; | ||
| } | ||
@@ -290,3 +271,3 @@ }); | ||
| <Pre> | ||
| {React.Children.map(this.props.children, (root, idx) => | ||
| {React.Children.map(this.props.children, (root, idx) => ( | ||
| <Node | ||
@@ -301,3 +282,3 @@ key={idx} | ||
| /> | ||
| )} | ||
| ))} | ||
| </Pre> | ||
@@ -357,3 +338,3 @@ </div> | ||
| const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props; | ||
| const propTables = array.map(type => | ||
| const propTables = array.map(type => ( | ||
| <div key={type.displayName || type.name}> | ||
@@ -370,3 +351,3 @@ <h2 style={this.state.stylesheet.propTableHead}> | ||
| </div> | ||
| ); | ||
| )); | ||
@@ -373,0 +354,0 @@ if (!propTables || propTables.length === 0) { |
@@ -63,7 +63,3 @@ import React from 'react'; | ||
| }; | ||
| return ( | ||
| <Story {...props}> | ||
| {storyFn(context)} | ||
| </Story> | ||
| ); | ||
| return <Story {...props}>{storyFn(context)}</Story>; | ||
| } | ||
@@ -70,0 +66,0 @@ |
@@ -30,3 +30,3 @@ /* global document */ | ||
| describe('addon Info', () => { | ||
| const story = context => | ||
| const story = context => ( | ||
| <div> | ||
@@ -42,3 +42,4 @@ It's a {context.story} story: | ||
| /> | ||
| </div>; | ||
| </div> | ||
| ); | ||
| const api = { | ||
@@ -45,0 +46,0 @@ add: (name, fn) => fn(testContext), |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.56%
311689
- Number of package files
- increased by81.25%
58
- Lines of code
- increased by16.69%
3579
Worsened metrics
- Number of low quality alerts
- increased by100%
2