@storybook/addon-info - npm Package Compare versions

Comparing version 3.3.0-alpha.2 to 3.3.0-alpha.3

dist/components/Node.js

@@ -58,2 +58,3 @@ 'use strict';
 
+
   if (typeof type === 'string') {
@@ -60,0 +61,0 @@ data.name = type;

dist/components/Props.js

@@ -45,2 +45,3 @@ 'use strict';
   var defaultProps = props.node.type.defaultProps;
+
   if (!nodeProps || (typeof nodeProps === 'undefined' ? 'undefined' : (0, _typeof3.default)(nodeProps)) !== 'object') {
@@ -47,0 +48,0 @@ return _react2.default.createElement('span', null);

dist/components/PropTable.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.multiLineText = undefined;
 
@@ -124,2 +125,19 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
+var multiLineText = exports.multiLineText = function multiLineText(input) {
+  if (!input) return input;
+  var text = String(input);
+  var arrayOfText = text.split(/\r?\n|\r/g);
+  var isSingleLine = arrayOfText.length < 2;
+  return isSingleLine ? text : arrayOfText.map(function (lineOfText, i // note: lineOfText is the closest we will get to a unique key
+  ) {
+    return _react2.default.createElement(
+      'span',
+      { key: lineOfText },
+      i > 0 && _react2.default.createElement('br', null),
+      ' ',
+      lineOfText
+    );
+  });
+};
+
 function PropTable(props) {
@@ -219,3 +237,3 @@ var type = props.type,
             { bordered: true },
-            row.description
+            multiLineText(row.description)
           )
@@ -222,0 +240,0 @@ );

dist/components/PropVal.js

@@ -117,4 +117,4 @@ 'use strict';
       maxPropStringLength = props.maxPropStringLength;
+  var val = props.val;
 
-  var val = props.val;
   var braceWrap = true;
@@ -121,0 +121,0 @@ var content = null;

dist/components/Story.js

@@ -86,2 +86,3 @@ 'use strict';
 
+
 var stylesheet = {
@@ -369,3 +370,3 @@ link: {
         (0, _keys2.default)(STORYBOOK_REACT_CLASSES).forEach(function (key) {
-          if (STORYBOOK_REACT_CLASSES[key].name === _this3.props.context.kind) {
+          if (STORYBOOK_REACT_CLASSES[key].name === _this3.props.context.story) {
             retDiv = _react2.default.createElement(
@@ -372,0 +373,0 @@ 'div',

dist/components/types/Object.js

@@ -14,9 +14,5 @@ 'use strict';
 var ObjectType = function ObjectType() {
-  return _react2.default.createElement(
-    'span',
-    null,
-    '{}'
-  );
+  return _react2.default.createElement('span', null);
 };
 
 exports.default = ObjectType;

dist/components/types/ObjectType.js

@@ -14,9 +14,5 @@ 'use strict';
 var ObjectType = function ObjectType() {
-  return _react2.default.createElement(
-    'span',
-    null,
-    '{}'
-  );
+  return _react2.default.createElement('span', null);
 };
 
 exports.default = ObjectType;

dist/components/types/OneOfType.js

@@ -21,4 +21,4 @@ 'use strict';
   var propType = _ref.propType;
+  var length = propType.value.length;
 
-  var length = propType.value.length;
   return _react2.default.createElement(
@@ -25,0 +25,0 @@ 'span',

dist/components/types/PrettyPropType.js

@@ -97,5 +97,5 @@ 'use strict';
   propType: _proptypes.TypeInfo,
-  depth: _propTypes2.default.number.isRequired
+  depth: _propTypes2.default.number
 };
 
 exports.default = PrettyPropType;

package.json

 {
   "name": "@storybook/addon-info",
-  "version": "3.3.0-alpha.2",
+  "version": "3.3.0-alpha.3",
   "description": "A Storybook addon to show additional information for your stories.",
@@ -17,4 +17,4 @@ "license": "MIT",
   "dependencies": {
-    "@storybook/addons": "^3.3.0-alpha.2",
-    "@storybook/components": "^3.3.0-alpha.2",
+    "@storybook/addons": "^3.3.0-alpha.3",
+    "@storybook/components": "^3.3.0-alpha.3",
     "babel-runtime": "^6.26.0",
@@ -28,3 +28,2 @@ "global": "^4.3.2",
   "devDependencies": {
-    "git-url-parse": "^6.2.2",
     "react": "^16.0.0",
@@ -31,0 +30,0 @@ "react-dom": "^16.0.0",

README.md

 # Storybook Info Addon
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
-[![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook)
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
 [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
 [![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
-[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
-[![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
 
+* * *
+
 Storybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).
@@ -14,3 +16,3 @@ Useful when you want to display usage or other types of documentation alongside your story.
 This addon works with Storybook for:
-[React](https://github.com/storybooks/storybook/tree/master/app/react).
+- [React](https://github.com/storybooks/storybook/tree/master/app/react)
 
@@ -37,3 +39,10 @@ ![Screenshot](docs/home-screenshot.png)
   .add('simple info',
-    withInfo('doc string about my component')(() =>
+    withInfo(`
+      description or documentation about my component, supports markdown
+    
+      ~~~js
+      <Button>Click Here</Button>
+      ~~~
+    
+    `)(() =>
       <Component>Click the "?" mark at top-right to view the info.</Component>
@@ -57,3 +66,3 @@ )
       // other possible options see in Global options section below
-    )(() =>
+    })(() =>
       <Component>Click the "?" mark at top-right to view the info.</Component>
@@ -70,3 +79,5 @@ )
 
-    addDecorator((story, context) => withInfo('common info')(story)(context));
+```js
+addDecorator((story, context) => withInfo('common info')(story)(context));
+```
 
@@ -84,13 +95,21 @@ ## Global options
   header: false, // Toggles display of header with component name and description
+});
+```
+
+## Options and Defaults
+
+```js
+{
+  header: false, // Toggles display of header with component name and description
   inline: true, // Displays info inline vs click button to view
   source: true, // Displays the source of story Component
   propTables: [/* Components used in story */], // displays Prop Tables with this components
-  propTablesExclude: [], // Exclude Components from being shoun in Prop Tables section
+  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section
   styles: {}, // Overrides styles of addon
   marksyConf: {}, // Overrides components used to display markdown. Warning! This option's name will be likely deprecated in favor to "components" with the same API in 3.3 release. Follow this PR #1501 for details
   maxPropsIntoLine: 1, // Max props to display per line in source code
-  maxPropObjectKeys: 10,
-  maxPropArrayLength: 10,
-  maxPropStringLength: 100,
-});
+  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name
+  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array
+  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string
+}
 ```
@@ -152,3 +171,3 @@
 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.
+When 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.
 
@@ -184,2 +203,3 @@ ```js
 ```
+
 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.
@@ -186,0 +206,0 @@

src/components/Node.js

@@ -34,3 +34,3 @@ import React from 'react';
   data.children = element.props.children;
-  const type = element.type;
+  const { type } = element;
 
@@ -37,0 +37,0 @@ if (typeof type === 'string') {

src/components/Props.js

@@ -14,3 +14,3 @@ import React from 'react';
   const nodeProps = props.node.props;
-  const defaultProps = props.node.type.defaultProps;
+  const { defaultProps } = props.node.type;
   if (!nodeProps || typeof nodeProps !== 'object') {
@@ -17,0 +17,0 @@ return <span />;

src/components/PropTable.js

@@ -85,2 +85,19 @@ /* eslint-disable no-underscore-dangle */
 
+export const multiLineText = input => {
+  if (!input) return input;
+  const text = String(input);
+  const arrayOfText = text.split(/\r?\n|\r/g);
+  const isSingleLine = arrayOfText.length < 2;
+  return isSingleLine
+    ? text
+    : arrayOfText.map((
+        lineOfText,
+        i // note: lineOfText is the closest we will get to a unique key
+      ) => (
+        <span key={lineOfText}>
+          {i > 0 && <br />} {lineOfText}
+        </span>
+      ));
+};
+
 export default function PropTable(props) {
@@ -134,3 +151,3 @@ const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
             </Td>
-            <Td bordered>{row.description}</Td>
+            <Td bordered>{multiLineText(row.description)}</Td>
           </tr>
@@ -137,0 +154,0 @@ ))}

src/components/PropVal.js

@@ -79,3 +79,3 @@ import React from 'react';
   const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
-  let val = props.val;
+  let { val } = props;
   let braceWrap = true;
@@ -82,0 +82,0 @@ let content = null;

src/components/Story.js

@@ -15,3 +15,3 @@ /* eslint no-underscore-dangle: 0 */
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
-const STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES;
+const { STORYBOOK_REACT_CLASSES } = global;
 
@@ -241,3 +241,3 @@ const stylesheet = {
       Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
-        if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.kind) {
+        if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.story) {
           retDiv = <div>{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}</div>;
@@ -244,0 +244,0 @@ }

src/components/types/Object.js

 import React from 'react';
 
-const ObjectType = () => <span>{'{}'}</span>;
+const ObjectType = () => <span>{}</span>;
 
 export default ObjectType;

src/components/types/ObjectType.js

 import React from 'react';
 
-const ObjectType = () => <span>{'{}'}</span>;
+const ObjectType = () => <span>{}</span>;
 
 export default ObjectType;

src/components/types/OneOfType.js

@@ -7,3 +7,3 @@ import React from 'react';
 const OneOfType = ({ propType }) => {
-  const length = propType.value.length;
+  const { length } = propType.value;
   return (
@@ -10,0 +10,0 @@ <span>

src/components/types/PrettyPropType.js

@@ -54,5 +54,5 @@ import PropTypes from 'prop-types';
   propType: TypeInfo,
-  depth: PropTypes.number.isRequired,
+  depth: PropTypes.number,
 };
 
 export default PrettyPropType;

src/index.test.js

@@ -38,3 +38,3 @@ /* global document */
         number={7}
-        string={'seven'}
+        string="seven"
         bool
@@ -41,0 +41,0 @@ />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

3

decreased by-25%

Number of package files

60

increased by3.45%

Lines of code

3640

increased by1.7%

Number of lines in readme file

206

increased by10.75%

Worsened metrics

Total package byte prevSize

311510

decreased by-0.08%

Dependency changes

• Updated@storybook/addons@^3.3.0-alpha.3

• Updated@storybook/components@^3.3.0-alpha.3