@storybook/addon-docs 6.1.7 → 6.1.11

package/dist/blocks/Meta.d.ts

@@ -9,7 +9,7 @@ interface MetaProps {
     decorators?: [Decorator];
     parameters?: Parameters;
     args?: Args;
-    argTypes: ArgTypes;
+    argTypes?: ArgTypes;
 }
 /**
  * This component is used to declare component metadata in docs

package/dist/frameworks/svelte/extractArgTypes.d.ts

@@ -28,5 +28,5 @@ declare type Docgen = {
     version: number;
 };
 export declare const extractArgTypes: ArgTypesExtractor;
-export declare const createArgTypes: (docs: Docgen) => ArgTypes;
+export declare const createArgTypes: (docgen: Docgen) => ArgTypes;
 export {};

package/dist/frameworks/svelte/extractArgTypes.js

@@ -15,22 +15,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createArgTypes = exports.extractArgTypes = void 0;
 
+var _clientLogger = require("@storybook/client-logger");
+
 var extractArgTypes = function extractArgTypes(component) {
-  // eslint-disable-next-line new-cap
-  var comp = new component({
-    props: {}
-  }); // eslint-disable-next-line no-underscore-dangle
+  try {
+    // eslint-disable-next-line new-cap
+    var comp = new component({
+      props: {}
+    }); // eslint-disable-next-line no-underscore-dangle
+
+    var docgen = comp.__docgen;
+
+    if (docgen) {
+      return createArgTypes(docgen);
+    }
+  } catch (err) {
+    _clientLogger.logger.log("Error extracting argTypes: ".concat(err));
+  }
 
-  var docs = comp.__docgen;
-  var results = createArgTypes(docs);
-  return results;
+  return {};
 };
 
 exports.extractArgTypes = extractArgTypes;
 
-var createArgTypes = function createArgTypes(docs) {
+var createArgTypes = function createArgTypes(docgen) {
   var results = {};
-  docs.data.forEach(function (item) {
+  docgen.data.forEach(function (item) {
     results[item.name] = {
       control: {
         type: parseType(item.type.type)

package/dist/frameworks/vue/sourceDecorator.js

@@ -24,6 +24,8 @@ require("core-js/modules/es.array.join");
 
 require("core-js/modules/es.array.map");
 
+require("core-js/modules/es.array.reduce");
+
 require("core-js/modules/es.array.slice");
 
 require("core-js/modules/es.date.to-string");
@@ -44,6 +46,8 @@ require("core-js/modules/es.string.iterator");
 
 require("core-js/modules/es.string.replace");
 
+require("core-js/modules/es.string.split");
+
 require("core-js/modules/web.dom-collections.iterator");
 
 Object.defineProperty(exports, "__esModule", {
@@ -66,6 +70,8 @@ var _shared = require("../../shared");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -151,7 +157,7 @@ exports.sourceDecorator = sourceDecorator;
 function vnodeToString(vnode) {
   var _vnode$data, _vnode$componentOptio, _vnode$data2;
 
-  var attrString = [].concat(_toConsumableArray(((_vnode$data = vnode.data) === null || _vnode$data === void 0 ? void 0 : _vnode$data.slot) ? [['slot', vnode.data.slot]] : []), _toConsumableArray(((_vnode$componentOptio = vnode.componentOptions) === null || _vnode$componentOptio === void 0 ? void 0 : _vnode$componentOptio.propsData) ? Object.entries(vnode.componentOptions.propsData) : []), _toConsumableArray(((_vnode$data2 = vnode.data) === null || _vnode$data2 === void 0 ? void 0 : _vnode$data2.attrs) ? Object.entries(vnode.data.attrs) : [])).filter(function (_ref, index, list) {
+  var attrString = [].concat(_toConsumableArray(((_vnode$data = vnode.data) === null || _vnode$data === void 0 ? void 0 : _vnode$data.slot) ? [['slot', vnode.data.slot]] : []), [['class', stringifyClassAttribute(vnode)]], _toConsumableArray(((_vnode$componentOptio = vnode.componentOptions) === null || _vnode$componentOptio === void 0 ? void 0 : _vnode$componentOptio.propsData) ? Object.entries(vnode.componentOptions.propsData) : []), _toConsumableArray(((_vnode$data2 = vnode.data) === null || _vnode$data2 === void 0 ? void 0 : _vnode$data2.attrs) ? Object.entries(vnode.data.attrs) : [])).filter(function (_ref, index, list) {
     var _ref2 = _slicedToArray(_ref, 1),
         name = _ref2[0];
 
@@ -200,8 +206,53 @@ function vnodeToString(vnode) {
   return "<".concat(tag, " ").concat(attrString, ">").concat(vnode.componentOptions.children.map(vnodeToString).join(''), "</").concat(tag, ">");
 }
 
+function stringifyClassAttribute(vnode) {
+  var _vnode$data$staticCla, _vnode$data$staticCla2;
+
+  if (!vnode.data || !vnode.data.staticClass && !vnode.data["class"]) {
+    return undefined;
+  }
+
+  return [].concat(_toConsumableArray((_vnode$data$staticCla = (_vnode$data$staticCla2 = vnode.data.staticClass) === null || _vnode$data$staticCla2 === void 0 ? void 0 : _vnode$data$staticCla2.split(' ')) !== null && _vnode$data$staticCla !== void 0 ? _vnode$data$staticCla : []), _toConsumableArray(normalizeClassBinding(vnode.data["class"]))).filter(Boolean).join(' ') || undefined;
+} // https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
+
+
+function normalizeClassBinding(binding) {
+  if (!binding) {
+    return [];
+  }
+
+  if (typeof binding === 'string') {
+    return [binding];
+  }
+
+  if (binding instanceof Array) {
+    // To handle an object-in-array binding smartly, we use recursion
+    return binding.map(normalizeClassBinding).reduce(function (a, b) {
+      return [].concat(_toConsumableArray(a), _toConsumableArray(b));
+    }, []);
+  }
+
+  if (_typeof(binding) === 'object') {
+    return Object.entries(binding).filter(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          active = _ref6[1];
+
+      return !!active;
+    }).map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 1),
+          className = _ref8[0];
+
+      return className;
+    });
+  } // Unknown class binding
+
+
+  return [];
+}
+
 function stringifyAttr(attrName, value) {
-  if (typeof value === 'undefined') {
+  if (typeof value === 'undefined' || typeof value === 'function') {
     return null;
   }
 

package/dist/frameworks/vue/sourceDecorator.test.js

@@ -31,9 +31,39 @@ describe('vnodeToString', function () {
       template: "<button>Button</button>"
     }))).toMatchInlineSnapshot("<button >Button</button>");
   });
+  it('static class', function () {
+    expect((0, _sourceDecorator.vnodeToString)(getVNode({
+      template: "<button class=\"foo bar\">Button</button>"
+    }))).toMatchInlineSnapshot("<button class=\"foo bar\">Button</button>");
+  });
+  it('string dynamic class', function () {
+    expect((0, _sourceDecorator.vnodeToString)(getVNode({
+      template: "<button :class=\"'foo'\">Button</button>"
+    }))).toMatchInlineSnapshot("<button class=\"foo\">Button</button>");
+  });
+  it('non-string dynamic class', function () {
+    expect((0, _sourceDecorator.vnodeToString)(getVNode({
+      template: "<button :class=\"1\">Button</button>"
+    }))).toMatchInlineSnapshot("<button >Button</button>");
+  });
+  it('array dynamic class', function () {
+    expect((0, _sourceDecorator.vnodeToString)(getVNode({
+      template: "<button :class=\"['foo', null, false, 0, {bar: true, baz: false}]\">Button</button>"
+    }))).toMatchInlineSnapshot("<button class=\"foo bar\">Button</button>");
+  });
+  it('object dynamic class', function () {
+    expect((0, _sourceDecorator.vnodeToString)(getVNode({
+      template: "<button :class=\"{foo: true, bar: false}\">Button</button>"
+    }))).toMatchInlineSnapshot("<button class=\"foo\">Button</button>");
+  });
+  it('merge dynamic and static classes', function () {
+    expect((0, _sourceDecorator.vnodeToString)(getVNode({
+      template: "<button class=\"foo\" :class=\"{bar: null, baz: 1}\">Button</button>"
+    }))).toMatchInlineSnapshot("<button class=\"foo baz\">Button</button>");
+  });
   it('attributes', function () {
     var MyComponent = {
-      props: ['propA', 'propB', 'propC', 'propD'],
+      props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF', 'propG'],
       template: '<div/>'
     };
     expect((0, _sourceDecorator.vnodeToString)(getVNode({
@@ -48,12 +78,18 @@ describe('vnodeToString', function () {
             propC: null,
             propD: {
               foo: 'bar'
-            }
+            },
+            propE: true,
+            propF: function propF() {
+              var foo = 'bar';
+              return foo;
+            },
+            propG: undefined
           }
         };
       },
       template: "<my-component v-bind=\"props\"/>"
-    }))).toMatchInlineSnapshot("<my-component :propD='{\"foo\":\"bar\"}' :propC=\"null\" :propB=\"1\" propA=\"propA\"/>");
+    }))).toMatchInlineSnapshot("<my-component propE :propD='{\"foo\":\"bar\"}' :propC=\"null\" :propB=\"1\" propA=\"propA\"/>");
   });
   it('children', function () {
     expect((0, _sourceDecorator.vnodeToString)(getVNode({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.1.7",
+  "version": "6.1.11",
   "description": "Superior documentation for your components",
   "keywords": [
     "addon",
@@ -19,13 +19,6 @@
   "license": "MIT",
   "main": "dist/public_api.js",
   "types": "dist/public_api.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "angular/**/*",
@@ -55,18 +48,18 @@
     "@mdx-js/loader": "^1.6.19",
     "@mdx-js/mdx": "^1.6.19",
     "@mdx-js/react": "^1.6.19",
-    "@storybook/addons": "6.1.7",
-    "@storybook/api": "6.1.7",
-    "@storybook/client-api": "6.1.7",
-    "@storybook/client-logger": "6.1.7",
-    "@storybook/components": "6.1.7",
-    "@storybook/core": "6.1.7",
-    "@storybook/core-events": "6.1.7",
+    "@storybook/addons": "6.1.11",
+    "@storybook/api": "6.1.11",
+    "@storybook/client-api": "6.1.11",
+    "@storybook/client-logger": "6.1.11",
+    "@storybook/components": "6.1.11",
+    "@storybook/core": "6.1.11",
+    "@storybook/core-events": "6.1.11",
     "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.1.7",
-    "@storybook/postinstall": "6.1.7",
-    "@storybook/source-loader": "6.1.7",
-    "@storybook/theming": "6.1.7",
+    "@storybook/node-logger": "6.1.11",
+    "@storybook/postinstall": "6.1.11",
+    "@storybook/source-loader": "6.1.11",
+    "@storybook/theming": "6.1.11",
     "acorn": "^7.1.0",
     "acorn-jsx": "^5.1.0",
     "acorn-walk": "^7.0.0",
@@ -92,9 +85,9 @@
     "@babel/core": "^7.12.3",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.23",
-    "@storybook/react": "6.1.7",
-    "@storybook/vue": "6.1.7",
-    "@storybook/web-components": "6.1.7",
+    "@storybook/react": "6.1.11",
+    "@storybook/vue": "6.1.11",
+    "@storybook/web-components": "6.1.11",
     "@types/cross-spawn": "^6.0.1",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.3",
@@ -123,7 +116,7 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.11.5",
-    "@storybook/vue": "6.1.7",
+    "@storybook/vue": "6.1.11",
     "babel-loader": "^8.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
@@ -154,5 +147,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "303d951f9ae4aa2241c9823e1cb6edbfd50fb093"
+  "gitHead": "5999b789d796414997c21d74517f7dfede6ddeff",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  }
 }

package/ts3.4/dist/blocks/Meta.d.ts

@@ -11,7 +11,7 @@ interface MetaProps {
     ];
     parameters?: Parameters;
     args?: Args;
-    argTypes: ArgTypes;
+    argTypes?: ArgTypes;
 }
 /**
  * This component is used to declare component metadata in docs

package/ts3.4/dist/frameworks/svelte/extractArgTypes.d.ts

@@ -38,5 +38,5 @@ declare type Docgen = {
     version: number;
 };
 export declare const extractArgTypes: ArgTypesExtractor;
-export declare const createArgTypes: (docs: Docgen) => ArgTypes;
+export declare const createArgTypes: (docgen: Docgen) => ArgTypes;
 export {};