@storybook/addon-info - npm Package Compare versions

Comparing version 3.3.0-alpha.4 to 3.3.0-alpha.6

dist/components/PropTable.js

@@ -12,14 +12,2 @@ 'use strict';
 
-var _values = require('babel-runtime/core-js/object/values');
-
-var _values2 = _interopRequireDefault(_values);
-
-var _keys = require('babel-runtime/core-js/object/keys');
-
-var _keys2 = _interopRequireDefault(_keys);
-
-var _map = require('babel-runtime/core-js/map');
-
-var _map2 = _interopRequireDefault(_map);
-
 exports.default = PropTable;
@@ -47,80 +35,2 @@
 
-var PropTypesMap = new _map2.default(); /* eslint-disable no-underscore-dangle */
-
-(0, _keys2.default)(_propTypes2.default).forEach(function (typeName) {
-  var type = _propTypes2.default[typeName];
-
-  PropTypesMap.set(type, typeName);
-  PropTypesMap.set(type.isRequired, typeName);
-});
-
-var isNotEmpty = function isNotEmpty(obj) {
-  return obj && obj.props && (0, _keys2.default)(obj.props).length > 0;
-};
-
-var hasDocgen = function hasDocgen(type) {
-  return isNotEmpty(type.__docgenInfo);
-};
-
-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: propType,
-      required: 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;
-      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 (docgenInfo && docgenInfo.type) {
-          propType = docgenInfo.type.name;
-        }
-      }
-
-      props[property] = { property: property, propType: propType, required: required, description: description };
-    });
-  }
-
-  if (type.defaultProps) {
-    (0, _keys2.default)(type.defaultProps).forEach(function (property) {
-      var value = type.defaultProps[property];
-
-      if (value === undefined) {
-        return;
-      }
-
-      if (!props[property]) {
-        props[property] = { property: property };
-      }
-
-      props[property].defaultValue = value;
-    });
-  }
-
-  return props;
-};
-
 var multiLineText = exports.multiLineText = function multiLineText(input) {
@@ -141,3 +51,3 @@ if (!input) return input;
   });
-};
+}; /* eslint-disable no-underscore-dangle */
 
@@ -148,3 +58,4 @@ function PropTable(props) {
       maxPropArrayLength = props.maxPropArrayLength,
-      maxPropStringLength = props.maxPropStringLength;
+      maxPropStringLength = props.maxPropStringLength,
+      propDefinitions = props.propDefinitions;
 
@@ -156,6 +67,3 @@
 
-  var accumProps = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type);
-  var array = (0, _values2.default)(accumProps);
-
-  if (!array.length) {
+  if (!propDefinitions.length) {
     return _react2.default.createElement(
@@ -213,3 +121,3 @@ 'small',
       null,
-      array.map(function (row) {
+      propDefinitions.map(function (row) {
         return _react2.default.createElement(
@@ -251,3 +159,4 @@ 'tr',
 PropTable.defaultProps = {
-  type: null
+  type: null,
+  propDefinitions: []
 };
@@ -258,3 +167,10 @@ PropTable.propTypes = {
   maxPropArrayLength: _propTypes2.default.number.isRequired,
-  maxPropStringLength: _propTypes2.default.number.isRequired
+  maxPropStringLength: _propTypes2.default.number.isRequired,
+  propDefinitions: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    property: _propTypes2.default.string.isRequired,
+    propType: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.string]),
+    required: _propTypes2.default.bool,
+    description: _propTypes2.default.string,
+    defaultValue: _propTypes2.default.any
+  }))
 };

dist/components/Story.js

@@ -23,6 +23,2 @@ 'use strict';
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -70,6 +66,2 @@
 
-var _PropTable = require('./PropTable');
-
-var _PropTable2 = _interopRequireDefault(_PropTable);
-
 var _Node = require('./Node');
@@ -83,5 +75,4 @@
 
-/* eslint no-underscore-dangle: 0 */
+_global2.default.STORYBOOK_REACT_CLASSES = _global2.default.STORYBOOK_REACT_CLASSES || []; /* eslint no-underscore-dangle: 0 */
 
-_global2.default.STORYBOOK_REACT_CLASSES = _global2.default.STORYBOOK_REACT_CLASSES || [];
 var STORYBOOK_REACT_CLASSES = _global2.default.STORYBOOK_REACT_CLASSES;
@@ -194,5 +185,8 @@
       open: false,
-      stylesheet: _this.props.styles(JSON.parse((0, _stringify2.default)(stylesheet)))
+      stylesheet: _this.props.styles(stylesheet)
     };
-    _this.marksy = (0, _marksy2.default)(_this.props.marksyConf);
+    _this.marksy = (0, _marksy2.default)({
+      createElement: _react.createElement,
+      elements: _this.props.components
+    });
     return _this;
@@ -205,3 +199,3 @@ }
       this.setState({
-        stylesheet: nextProps.styles(JSON.parse((0, _stringify2.default)(stylesheet)))
+        stylesheet: nextProps.styles(stylesheet)
       });
@@ -260,5 +254,5 @@ }
 
-      var buttonStyle = (0, _extends3.default)({}, stylesheet.button.base, stylesheet.button.topRight);
+      var buttonStyle = (0, _extends3.default)({}, this.state.stylesheet.button.base, this.state.stylesheet.button.topRight);
 
-      var infoStyle = (0, _assign2.default)({}, stylesheet.info);
+      var infoStyle = (0, _assign2.default)({}, this.state.stylesheet.info);
       if (!this.state.open) {
@@ -347,3 +341,5 @@ infoStyle.display = 'none';
           'div',
-          { style: this.props.showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent },
+          {
+            style: this.props.showInline ? this.state.stylesheet.jsxInfoContent : this.state.stylesheet.infoContent
+          },
           this.props.info
@@ -500,3 +496,3 @@ );
             ),
-            _react2.default.createElement(_PropTable2.default, {
+            _react2.default.createElement(_this4.props.PropTable, {
               type: type,
@@ -557,3 +553,3 @@ maxPropObjectKeys: maxPropObjectKeys,
   children: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
-  marksyConf: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
+  components: _propTypes2.default.shape({}),
   maxPropsIntoLine: _propTypes2.default.number.isRequired,
@@ -573,3 +569,3 @@ maxPropObjectKeys: _propTypes2.default.number.isRequired,
   showSource: true,
-  marksyConf: {}
+  components: {}
 };

dist/components/types/proptypes.js

@@ -14,5 +14,5 @@ 'use strict';
 
-var TypeInfo = exports.TypeInfo = _propTypes2.default.shape({
+var TypeInfo = exports.TypeInfo = (0, _propTypes.oneOfType)([_propTypes2.default.shape({
   name: _propTypes2.default.string,
   value: _propTypes2.default.any
-});
+}), _propTypes2.default.string]);

dist/index.js

@@ -26,2 +26,10 @@ 'use strict';
 
+var _nestedObjectAssign = require('nested-object-assign');
+
+var _nestedObjectAssign2 = _interopRequireDefault(_nestedObjectAssign);
+
+var _clientLogger = require('@storybook/client-logger');
+
+var _clientLogger2 = _interopRequireDefault(_clientLogger);
+
 var _Story = require('./components/Story');
@@ -31,2 +39,10 @@
 
+var _PropTable = require('./components/PropTable');
+
+var _PropTable2 = _interopRequireDefault(_PropTable);
+
+var _makeTableComponent = require('./components/makeTableComponent');
+
+var _makeTableComponent2 = _interopRequireDefault(_makeTableComponent);
+
 var _markdown = require('./components/markdown');
@@ -41,2 +57,3 @@
   propTables: [],
+  TableComponent: _PropTable2.default,
   maxPropsIntoLine: 3,
@@ -48,3 +65,3 @@ maxPropObjectKeys: 3,
 
-var defaultMarksyConf = {
+var defaultComponents = {
   h1: _markdown.H1,
@@ -63,2 +80,4 @@ h2: _markdown.H2,
 
+var hasWarned = false;
+
 function addInfo(storyFn, context, infoOptions) {
@@ -74,5 +93,13 @@ var options = (0, _extends3.default)({}, defaultOptions, infoOptions);
 
-  var marksyConf = (0, _extends3.default)({}, defaultMarksyConf);
+  var components = (0, _extends3.default)({}, defaultComponents);
+  if (options && options.components) {
+    (0, _assign2.default)(components, options.components);
+  }
   if (options && options.marksyConf) {
-    (0, _assign2.default)(marksyConf, options.marksyConf);
+    if (!hasWarned) {
+      _clientLogger2.default.warn('@storybook/addon-info: "marksyConf" option has been renamed to "components"');
+      hasWarned = true;
+    }
+
+    (0, _assign2.default)(components, options.marksyConf);
   }
@@ -85,8 +112,9 @@ var props = {
     showSource: Boolean(options.source),
+    styles: typeof options.styles === 'function' ? options.styles : function (s) {
+      return (0, _nestedObjectAssign2.default)({}, s, options.styles);
+    },
     propTables: options.propTables,
     propTablesExclude: options.propTablesExclude,
-    styles: typeof options.styles === 'function' ? options.styles : function (s) {
-      return s;
-    },
-    marksyConf: marksyConf,
+    PropTable: (0, _makeTableComponent2.default)(options.TableComponent),
+    components: components,
     maxPropObjectKeys: options.maxPropObjectKeys,
@@ -93,0 +121,0 @@ maxPropArrayLength: options.maxPropArrayLength,

package.json

 {
   "name": "@storybook/addon-info",
-  "version": "3.3.0-alpha.4",
+  "version": "3.3.0-alpha.6",
   "description": "A Storybook addon to show additional information for your stories.",
@@ -17,7 +17,8 @@ "license": "MIT",
   "dependencies": {
-    "@storybook/addons": "^3.3.0-alpha.4",
-    "@storybook/components": "^3.3.0-alpha.4",
+    "@storybook/client-logger": "^3.3.0-alpha.6",
+    "@storybook/components": "^3.3.0-alpha.6",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
-    "marksy": "^2.0.0",
+    "marksy": "^6.0.1",
+    "nested-object-assign": "^1.0.1",
     "prop-types": "^15.6.0",
@@ -24,0 +25,0 @@ "react-addons-create-fragment": "^15.5.3",

README.md

@@ -62,2 +62,9 @@ # Storybook Info Addon
     withInfo({
+      styles: {
+        header: {
+          h1: {
+            color: 'red'
+          }
+        }
+      },
       text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to "summary" in 3.3 release. Follow this PR #1501 for details
@@ -71,2 +78,26 @@ // other possible options see in Global options section below
 
+The `styles` prop can also accept a function. The default stylesheet is passed as argument:
+
+```js
+import { withInfo } from '@storybook/addon-info';
+
+storiesOf('Component', module)
+  .add('custom info styles using a function',
+    withInfo({
+      styles: stylesheet => ({
+        ...stylesheet,
+        header: {
+          ...stylesheet.header,
+          h1: {
+            ...stylesheet.header.h1,
+            color: 'red'
+          }
+        }
+      })
+    })(() =>
+      <Component>Click the "?" mark at top-right to view the info.</Component>
+    )
+  )
+```
+
 ## Usage as decorator
@@ -105,8 +136,9 @@
   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
+  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.
+  components: {}, // Overrides components used to display markdown
   maxPropsIntoLine: 1, // Max props to display per line in source code
   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
+  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,
+  TableComponent: props => {}, // Override the component used to render the props table
 }
@@ -166,2 +198,98 @@ ```
 
+### Rendering a Custom Table
+
+The `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.
+
+```js
+  {
+    propDefinitions: Array<{
+      property: string, // The name of the prop
+      propType: Object | string, // The prop type. TODO: info about what this object is...
+      required: boolean, // True if the prop is required
+      description: string, // The description of the prop
+      defaultValue: any // The default value of the prop
+    }>
+  }
+```
+
+Example:
+
+```js
+// button.js
+// @flow
+import React from 'react'
+
+const paddingStyles = {
+  small: '4px 8px',
+  medium: '8px 16px'
+}
+
+const Button = ({
+  size,
+  ...rest
+}: {
+  /** The size of the button */
+  size: 'small' | 'medium'
+}) => {
+  const style = {
+    padding: paddingStyles[size] || ''
+  }
+  return <button style={style} {...rest} />
+}
+Button.defaultProps = {
+  size: 'medium'
+}
+
+export default Button
+```
+```js
+// stories.js
+import React from "react";
+
+import { storiesOf } from "@storybook/react";
+import { withInfo } from "@storybook/addon-info";
+import Button from "./button";
+
+const Red = props => <span style={{ color: "red" }} {...props} />;
+
+const TableComponent = ({ propDefinitions }) => {
+  const props = propDefinitions.map(
+    ({ property, propType, required, description, defaultValue }) => {
+      return (
+        <tr key={property}>
+          <td>
+            {property}
+            {required ? <Red>*</Red> : null}
+          </td>
+          <td>{propType.name}</td>
+          <td>{defaultValue}</td>
+          <td>{description}</td>
+        </tr>
+      );
+    }
+  );
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>name</th>
+          <th>type</th>
+          <th>default</th>
+          <th>description</th>
+        </tr>
+      </thead>
+      <tbody>{props}</tbody>
+    </table>
+  );
+};
+
+storiesOf("Button", module).add(
+  "with text",
+  withInfo({
+    TableComponent
+  })(() => <Button>Hello Button</Button>)
+);
+```
+
 ### React Docgen Integration
@@ -168,0 +296,0 @@

src/components/PropTable.js

@@ -10,77 +10,2 @@ /* eslint-disable no-underscore-dangle */
 
-const PropTypesMap = new Map();
-
-Object.keys(PropTypes).forEach(typeName => {
-  const type = PropTypes[typeName];
-
-  PropTypesMap.set(type, typeName);
-  PropTypesMap.set(type.isRequired, typeName);
-});
-
-const isNotEmpty = obj => obj && obj.props && Object.keys(obj.props).length > 0;
-
-const hasDocgen = type => isNotEmpty(type.__docgenInfo);
-
-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,
-      required: 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;
-      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 (docgenInfo && docgenInfo.type) {
-          propType = docgenInfo.type.name;
-        }
-      }
-
-      props[property] = { property, propType, required, description };
-    });
-  }
-
-  if (type.defaultProps) {
-    Object.keys(type.defaultProps).forEach(property => {
-      const value = type.defaultProps[property];
-
-      if (value === undefined) {
-        return;
-      }
-
-      if (!props[property]) {
-        props[property] = { property };
-      }
-
-      props[property].defaultValue = value;
-    });
-  }
-
-  return props;
-};
-
 export const multiLineText = input => {
@@ -104,3 +29,9 @@ if (!input) return input;
 export default function PropTable(props) {
-  const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+  const {
+    type,
+    maxPropObjectKeys,
+    maxPropArrayLength,
+    maxPropStringLength,
+    propDefinitions,
+  } = props;
 
@@ -111,6 +42,3 @@ if (!type) {
 
-  const accumProps = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type);
-  const array = Object.values(accumProps);
-
-  if (!array.length) {
+  if (!propDefinitions.length) {
     return <small>No propTypes defined!</small>;
@@ -137,3 +65,3 @@ }
       <tbody>
-        {array.map(row => (
+        {propDefinitions.map(row => (
           <tr key={row.property}>
@@ -165,2 +93,3 @@ <Td bordered code>
   type: null,
+  propDefinitions: [],
 };
@@ -172,2 +101,11 @@ PropTable.propTypes = {
   maxPropStringLength: PropTypes.number.isRequired,
+  propDefinitions: PropTypes.arrayOf(
+    PropTypes.shape({
+      property: PropTypes.string.isRequired,
+      propType: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+      required: PropTypes.bool,
+      description: PropTypes.string,
+      defaultValue: PropTypes.any,
+    })
+  ),
 };

src/components/Story.js

 /* eslint no-underscore-dangle: 0 */
 
-import React from 'react';
+import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
@@ -10,3 +10,2 @@ import global from 'global';
 
-import PropTable from './PropTable';
 import Node from './Node';
@@ -110,5 +109,8 @@ import { Pre } from './markdown';
       open: false,
-      stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))),
+      stylesheet: this.props.styles(stylesheet),
     };
-    this.marksy = marksy(this.props.marksyConf);
+    this.marksy = marksy({
+      createElement,
+      elements: this.props.components,
+    });
   }
@@ -118,3 +120,3 @@
     this.setState({
-      stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))),
+      stylesheet: nextProps.styles(stylesheet),
     });
@@ -158,7 +160,7 @@ }
     const buttonStyle = {
-      ...stylesheet.button.base,
-      ...stylesheet.button.topRight,
+      ...this.state.stylesheet.button.base,
+      ...this.state.stylesheet.button.topRight,
     };
 
-    const infoStyle = Object.assign({}, stylesheet.info);
+    const infoStyle = Object.assign({}, this.state.stylesheet.info);
     if (!this.state.open) {
@@ -222,3 +224,9 @@ infoStyle.display = 'none';
       return (
-        <div style={this.props.showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent}>
+        <div
+          style={
+            this.props.showInline
+              ? this.state.stylesheet.jsxInfoContent
+              : this.state.stylesheet.infoContent
+          }
+        >
           {this.props.info}
@@ -341,3 +349,3 @@ </div>
         <h2 style={this.state.stylesheet.propTableHead}>"{getName(type)}" Component</h2>
-        <PropTable
+        <this.props.PropTable
           type={type}
@@ -387,3 +395,3 @@ maxPropObjectKeys={maxPropObjectKeys}
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  marksyConf: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  components: PropTypes.shape({}),
   maxPropsIntoLine: PropTypes.number.isRequired,
@@ -403,3 +411,3 @@ maxPropObjectKeys: PropTypes.number.isRequired,
   showSource: true,
-  marksyConf: {},
+  components: {},
 };

src/components/types/proptypes.js

@@ -1,6 +0,9 @@
-import PropTypes from 'prop-types';
+import PropTypes, { oneOfType } from 'prop-types';
 
-export const TypeInfo = PropTypes.shape({
-  name: PropTypes.string,
-  value: PropTypes.any,
-});
+export const TypeInfo = oneOfType([
+  PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.any,
+  }),
+  PropTypes.string,
+]);

src/index.js

 import React from 'react';
 import deprecate from 'util-deprecate';
+import nestedObjectAssign from 'nested-object-assign';
+import logger from '@storybook/client-logger';
 import Story from './components/Story';
+import PropTable from './components/PropTable';
+import makeTableComponent from './components/makeTableComponent';
 import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
@@ -11,2 +15,3 @@
   propTables: [],
+  TableComponent: PropTable,
   maxPropsIntoLine: 3,
@@ -18,3 +23,3 @@ maxPropObjectKeys: 3,
 
-const defaultMarksyConf = {
+const defaultComponents = {
   h1: H1,
@@ -33,2 +38,4 @@ h2: H2,
 
+let hasWarned = false;
+
 function addInfo(storyFn, context, infoOptions) {
@@ -47,5 +54,13 @@ const options = {
 
-  const marksyConf = { ...defaultMarksyConf };
+  const components = { ...defaultComponents };
+  if (options && options.components) {
+    Object.assign(components, options.components);
+  }
   if (options && options.marksyConf) {
-    Object.assign(marksyConf, options.marksyConf);
+    if (!hasWarned) {
+      logger.warn('@storybook/addon-info: "marksyConf" option has been renamed to "components"');
+      hasWarned = true;
+    }
+
+    Object.assign(components, options.marksyConf);
   }
@@ -58,6 +73,10 @@ const props = {
     showSource: Boolean(options.source),
+    styles:
+      typeof options.styles === 'function'
+        ? options.styles
+        : s => nestedObjectAssign({}, s, options.styles),
     propTables: options.propTables,
     propTablesExclude: options.propTablesExclude,
-    styles: typeof options.styles === 'function' ? options.styles : s => s,
-    marksyConf,
+    PropTable: makeTableComponent(options.TableComponent),
+    components,
     maxPropObjectKeys: options.maxPropObjectKeys,
@@ -64,0 +83,0 @@ maxPropArrayLength: options.maxPropArrayLength,

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

Total package byte prevSize

318661

increased by2.11%

Number of package files

62

increased by3.33%

Lines of code

3759

increased by2.87%

Number of lines in readme file

334

increased by62.14%

Worsened metrics

Dependency count

11

increased by10%

Dependency changes

• + Added@storybook/client-logger@^3.3.0-alpha.6

• + Addednested-object-assign@^1.0.1

• + Added@storybook/client-logger@3.4.12(transitive)

• + Addedmarksy@6.1.0(transitive)

• + Addednested-object-assign@1.0.4(transitive)

• - Removed@storybook/addons@^3.3.0-alpha.4

• - Removed@storybook/addons@3.4.12(transitive)

• - Removedmarksy@2.0.1(transitive)

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

• Updatedmarksy@^6.0.1