Socket
Socket
Sign inDemoInstall

@storybook/addon-info

Package Overview
Dependencies
Maintainers
8
Versions
495
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-info - npm Package Compare versions

Comparing version 3.2.9 to 3.2.10

6

package.json
{
"name": "@storybook/addon-info",
"version": "3.2.9",
"version": "3.2.10",
"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.2.10",
"@storybook/components": "^3.2.10",
"babel-runtime": "^6.23.0",

@@ -21,0 +21,0 @@ "global": "^4.3.2",

5

README.md

@@ -146,3 +146,3 @@ # Storybook Info Addon

React Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during compile time.
React Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.
When rendering a story with a React component commented in this supported format, the Addon Info prop table will display the prop's comment in the description column.

@@ -179,5 +179,4 @@

```
Comments 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.
Storybook Info Addon should now render all the correct types for your component.
## The FAQ

@@ -184,0 +183,0 @@

12

src/components/markdown/code.js

@@ -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 @@

18

src/components/markdown/text.js

@@ -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 @@

20

src/components/Node.js

@@ -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}>
&lt;{name}
</span>
<span style={tagStyle}>&lt;{name}</span>
<Props

@@ -105,5 +101,3 @@ node={node}

<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;{name}
</span>
<span style={tagStyle}>&lt;{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}>
&lt;/{name}&gt;
</span>
<span style={tagStyle}>&lt;/{name}&gt;</span>
</div>

@@ -135,0 +127,0 @@ </div>

27

src/components/Props.js

@@ -35,12 +35,12 @@ import React from 'react';

<span key={name}>
{breakIntoNewLines
? <span>
<br />&nbsp;&nbsp;
</span>
: ' '}
<span style={propNameStyle}>
{name}
</span>
{breakIntoNewLines ? (
<span>
<br />&nbsp;&nbsp;
</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 @@

28

src/components/PropTable.js

@@ -151,23 +151,17 @@ /* eslint-disable no-underscore-dangle */

<tbody>
{array.map(row =>
{array.map(row => (
<tr key={row.property}>
<td>{row.property}</td>
<td>{row.propType}</td>
<td>{row.required}</td>
<td>
{row.property}
{row.defaultValue === undefined ? (
'-'
) : (
<PropVal val={row.defaultValue} {...propValProps} />
)}
</td>
<td>
{row.propType}
</td>
<td>
{row.required}
</td>
<td>
{row.defaultValue === undefined
? '-'
: <PropVal val={row.defaultValue} {...propValProps} />}
</td>
<td>
{row.description}
</td>
<td>{row.description}</td>
</tr>
)}
))}
</tbody>

@@ -174,0 +168,0 @@ </table>

36

src/components/PropVal.js

@@ -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 @@

47

src/components/Story.js

@@ -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) {

6

src/index.js

@@ -63,7 +63,3 @@ import React from 'react';

};
return (
<Story {...props}>
{storyFn(context)}
</Story>
);
return <Story {...props}>{storyFn(context)}</Story>;
}

@@ -70,0 +66,0 @@

5

src/index.test.js

@@ -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),

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc