@storybook/addon-info - npm Package Compare versions

Comparing version 3.2.5 to 3.2.6-alpha.0

dist/components/markdown/htags.js

@@ -26,3 +26,3 @@ 'use strict';
 
-var _theme = require('../theme');
+var _components = require('@storybook/components');
 
@@ -41,3 +41,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function H1(props) {
-  var styles = (0, _extends3.default)({}, _theme.baseFonts, {
+  var styles = (0, _extends3.default)({}, _components.baseFonts, {
     borderBottom: '1px solid #eee',
@@ -60,3 +60,3 @@ fontWeight: 600,
 function H2(props) {
-  var styles = (0, _extends3.default)({}, _theme.baseFonts, {
+  var styles = (0, _extends3.default)({}, _components.baseFonts, {
     fontWeight: 600,
@@ -78,3 +78,3 @@ margin: 0,
 function H3(props) {
-  var styles = (0, _extends3.default)({}, _theme.baseFonts, {
+  var styles = (0, _extends3.default)({}, _components.baseFonts, {
     fontWeight: 600,
@@ -97,3 +97,3 @@ margin: 0,
 function H4(props) {
-  var styles = (0, _extends3.default)({}, _theme.baseFonts, {
+  var styles = (0, _extends3.default)({}, _components.baseFonts, {
     fontWeight: 600,
@@ -115,3 +115,3 @@ margin: 0,
 function H5(props) {
-  var styles = (0, _extends3.default)({}, _theme.baseFonts, {
+  var styles = (0, _extends3.default)({}, _components.baseFonts, {
     fontWeight: 600,
@@ -133,3 +133,3 @@ margin: 0,
 function H6(props) {
-  var styles = (0, _extends3.default)({}, _theme.baseFonts, {
+  var styles = (0, _extends3.default)({}, _components.baseFonts, {
     fontWeight: 400,
@@ -136,0 +136,0 @@ margin: 0,

dist/components/markdown/text.js

@@ -24,3 +24,3 @@ 'use strict';
 
-var _theme = require('../theme');
+var _components = require('@storybook/components');
 
@@ -33,3 +33,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function P(props) {
-  var style = (0, _extends3.default)({}, _theme.baseFonts, {
+  var style = (0, _extends3.default)({}, _components.baseFonts, {
     fontSize: '15px'
@@ -48,3 +48,3 @@ });
 function LI(props) {
-  var style = (0, _extends3.default)({}, _theme.baseFonts, {
+  var style = (0, _extends3.default)({}, _components.baseFonts, {
     fontSize: '15px'
@@ -63,3 +63,3 @@ });
 function UL(props) {
-  var style = (0, _extends3.default)({}, _theme.baseFonts, {
+  var style = (0, _extends3.default)({}, _components.baseFonts, {
     fontSize: '15px'
@@ -66,0 +66,0 @@ });

dist/components/PropTable.js

@@ -56,19 +56,63 @@ 'use strict';
 
-function PropTable(props) {
-  var type = props.type,
-      maxPropObjectKeys = props.maxPropObjectKeys,
-      maxPropArrayLength = props.maxPropArrayLength,
-      maxPropStringLength = props.maxPropStringLength;
+var isNotEmpty = function isNotEmpty(obj) {
+  return obj && obj.props && (0, _keys2.default)(obj.props).length > 0;
+};
 
+var renderDocgenPropType = function renderDocgenPropType(propType) {
+  if (!propType) {
+    return 'unknown';
+  }
 
-  if (!type) {
-    return null;
+  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 accumProps = {};
+var hasDocgen = function hasDocgen(type) {
+  return isNotEmpty(type.__docgenInfo);
+};
 
+var boolToString = function boolToString(value) {
+  return value ? 'yes' : 'no';
+};
+
+var propsFromDocgen = function propsFromDocgen(type) {
+  var props = {};
+  var docgenInfoProps = type.__docgenInfo.props;
+
+  (0, _keys2.default)(docgenInfoProps).forEach(function (property) {
+    var docgenInfoProp = docgenInfoProps[property];
+    var defaultValueDesc = docgenInfoProp.defaultValue || {};
+    var propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
+
+    props[property] = {
+      property: property,
+      propType: renderDocgenPropType(propType),
+      required: boolToString(docgenInfoProp.required),
+      description: docgenInfoProp.description,
+      defaultValue: defaultValueDesc.value
+    };
+  });
+
+  return props;
+};
+
+var propsFromPropTypes = function propsFromPropTypes(type) {
+  var props = {};
+
   if (type.propTypes) {
     (0, _keys2.default)(type.propTypes).forEach(function (property) {
       var typeInfo = type.propTypes[property];
-      var required = typeInfo.isRequired === undefined ? 'yes' : 'no';
+      var required = boolToString(typeInfo.isRequired === undefined);
       var description = type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] ? type.__docgenInfo.props[property].description : null;
@@ -83,3 +127,3 @@ var propType = PropTypesMap.get(typeInfo) || 'other';
 
-      accumProps[property] = { property: property, propType: propType, required: required, description: description };
+      props[property] = { property: property, propType: propType, required: required, description: description };
     });
@@ -96,10 +140,25 @@ }
 
-      if (!accumProps[property]) {
-        accumProps[property] = { property: property };
+      if (!props[property]) {
+        props[property] = { property: property };
       }
 
-      accumProps[property].defaultValue = value;
+      props[property].defaultValue = value;
     });
   }
 
+  return props;
+};
+
+function PropTable(props) {
+  var type = props.type,
+      maxPropObjectKeys = props.maxPropObjectKeys,
+      maxPropArrayLength = props.maxPropArrayLength,
+      maxPropStringLength = props.maxPropStringLength;
+
+
+  if (!type) {
+    return null;
+  }
+
+  var accumProps = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type);
   var array = (0, _values2.default)(accumProps);
@@ -106,0 +165,0 @@

dist/components/Story.js

@@ -63,2 +63,4 @@ 'use strict';
 
+var _components = require('@storybook/components');
+
 var _marksy = require('marksy');
@@ -76,4 +78,2 @@
 
-var _theme = require('./theme');
-
 var _markdown = require('./markdown');
@@ -122,3 +122,3 @@
   },
-  infoBody: (0, _extends3.default)({}, _theme.baseFonts, {
+  infoBody: (0, _extends3.default)({}, _components.baseFonts, {
     fontWeight: 300,
@@ -125,0 +125,0 @@ lineHeight: 1.45,

package.json

 {
   "name": "@storybook/addon-info",
-  "version": "3.2.5",
+  "version": "3.2.6-alpha.0",
   "description": "A Storybook addon to show additional information for your stories.",
@@ -17,3 +17,4 @@ "license": "MIT",
   "dependencies": {
-    "@storybook/addons": "^3.2.0",
+    "@storybook/addons": "^3.2.6-alpha.0",
+    "@storybook/components": "^3.2.6-alpha.0",
     "babel-runtime": "^6.23.0",
@@ -20,0 +21,0 @@ "global": "^4.3.2",

README.md

@@ -32,3 +32,2 @@ # Storybook Info Addon
 ```js
-import { configure, setAddon } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
@@ -50,3 +49,2 @@
 ```js
-import { configure, setAddon } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
@@ -73,5 +71,3 @@
 
-```
-addDecorator((story, context) => withInfo('common info')(story)(context));
-```
+    addDecorator((story, context) => withInfo('common info')(story)(context));
 
@@ -130,2 +126,56 @@ ## Global options
 
+To customize your defaults:
+
+```js
+// config.js
+import infoAddon, { setDefaults } from '@storybook/addon-info';
+
+// addon-info
+setDefaults({
+  inline: true,
+  maxPropsIntoLine: 1,
+  maxPropObjectKeys: 10,
+  maxPropArrayLength: 10,
+  maxPropStringLength: 100,
+});
+setAddon(infoAddon);
+```
+
+### React Docgen Integration
+
+React Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during 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.
+
+```js
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/** Button component description */
+const DocgenButton = ({ disabled, label, style, onClick }) =>
+  <button disabled={disabled} style={style} onClick={onClick}>
+    {label}
+  </button>;
+
+DocgenButton.defaultProps = {
+  disabled: false,
+  onClick: () => {},
+  style: {},
+};
+
+DocgenButton.propTypes = {
+  /** Boolean indicating whether the button should render as disabled */
+  disabled: PropTypes.bool,
+  /** button label. */
+  label: PropTypes.string.isRequired,
+  /** onClick handler */
+  onClick: PropTypes.func,
+  /** component styles */
+  style: PropTypes.shape,
+};
+
+export default DocgenButton;
+```
+
+Storybook Info Addon should now render all the correct types for your component.
+
 ## The FAQ
@@ -132,0 +182,0 @@

src/components/markdown/htags.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { baseFonts } from '../theme';
+import { baseFonts } from '@storybook/components';
 
@@ -5,0 +5,0 @@ const defaultProps = {

src/components/markdown/text.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { baseFonts } from '../theme';
+import { baseFonts } from '@storybook/components';
 
@@ -5,0 +5,0 @@ const defaultProps = { children: null };

src/components/PropTable.js

@@ -24,15 +24,57 @@ /* eslint-disable no-underscore-dangle */
 
-export default function PropTable(props) {
-  const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+const isNotEmpty = obj => obj && obj.props && Object.keys(obj.props).length > 0;
 
-  if (!type) {
-    return null;
+const renderDocgenPropType = propType => {
+  if (!propType) {
+    return 'unknown';
   }
 
-  const accumProps = {};
+  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 => {
+  const props = {};
+  const docgenInfoProps = type.__docgenInfo.props;
+
+  Object.keys(docgenInfoProps).forEach(property => {
+    const docgenInfoProp = docgenInfoProps[property];
+    const defaultValueDesc = docgenInfoProp.defaultValue || {};
+    const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
+
+    props[property] = {
+      property,
+      propType: renderDocgenPropType(propType),
+      required: boolToString(docgenInfoProp.required),
+      description: docgenInfoProp.description,
+      defaultValue: defaultValueDesc.value,
+    };
+  });
+
+  return props;
+};
+
+const propsFromPropTypes = type => {
+  const props = {};
+
   if (type.propTypes) {
     Object.keys(type.propTypes).forEach(property => {
       const typeInfo = type.propTypes[property];
-      const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
+      const required = boolToString(typeInfo.isRequired === undefined);
       const description =
@@ -55,3 +97,3 @@ type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]
 
-      accumProps[property] = { property, propType, required, description };
+      props[property] = { property, propType, required, description };
     });
@@ -68,10 +110,21 @@ }
 
-      if (!accumProps[property]) {
-        accumProps[property] = { property };
+      if (!props[property]) {
+        props[property] = { property };
       }
 
-      accumProps[property].defaultValue = value;
+      props[property].defaultValue = value;
     });
   }
 
+  return props;
+};
+
+export default function PropTable(props) {
+  const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+
+  if (!type) {
+    return null;
+  }
+
+  const accumProps = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type);
   const array = Object.values(accumProps);
@@ -78,0 +131,0 @@

src/components/Story.js

@@ -6,2 +6,3 @@ /* eslint no-underscore-dangle: 0 */
 import global from 'global';
+import { baseFonts } from '@storybook/components';
 
@@ -12,3 +13,2 @@ import marksy from 'marksy';
 import Node from './Node';
-import { baseFonts } from './theme';
 import { Pre } from './markdown';
@@ -15,0 +15,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

No v1

Quality

Package 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

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

Total package byte prevSize

291825

increased by1.3%

Lines of code

3071

increased by2.47%

Number of lines in readme file

183

increased by37.59%

Worsened metrics

Dependency count

9

increased by12.5%

Number of package files

32

decreased by-5.88%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@storybook/components@^3.2.6-alpha.0

• + Added@storybook/components@3.4.12(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedbrcast@3.0.2(transitive)

• + Addedcss-in-js-utils@2.0.1(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addedfast-memoize@2.5.2(transitive)

• + Addedglamor@2.20.40(transitive)

• + Addedglamorous@4.13.1(transitive)

• + Addedhtml-element-attributes@1.3.1(transitive)

• + Addedhtml-tag-names@1.1.5(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedinline-style-prefixer@3.0.8(transitive)

• + Addedis-function@1.0.2(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedreact-html-attributes@1.4.6(transitive)

• + Addedscheduler@0.23.2(transitive)

• + Addedsvg-tag-names@1.1.2(transitive)

• + Addedthrough@2.3.8(transitive)

• Updated@storybook/addons@^3.2.6-alpha.0