@storybook/addon-interactions 6.5.0-alpha.61 → 6.5.0-alpha.64

package/dist/cjs/components/MatcherResult.js

@@ -96,6 +96,7 @@ var Received = function Received(_ref3) {
   var value = _ref3.value,
       parsed = _ref3.parsed;
   return parsed ? /*#__PURE__*/_react.default.createElement(_MethodCall.Node, {
+    showObjectInspector: true,
     value: value,
     style: {
       color: '#D43900'
@@ -110,8 +111,12 @@ var Expected = function Expected(_ref4) {
       parsed = _ref4.parsed;
 
   if (parsed) {
-    if (typeof value === 'string' && value.startsWith('called with')) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value);
+    if (typeof value === 'string' && value.startsWith('called with')) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value);
+    }
+
     return /*#__PURE__*/_react.default.createElement(_MethodCall.Node, {
+      showObjectInspector: true,
       value: value,
       style: {
         color: '#16B242'

package/dist/cjs/components/MethodCall.js

@@ -55,11 +55,13 @@ require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
 
+var _objectInspector = require("@devtools-ds/object-inspector");
+
 var _theming = require("@storybook/theming");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["value", "nested", "callsById"],
+var _excluded = ["value", "nested", "showObjectInspector", "callsById"],
     _excluded2 = ["value"],
     _excluded3 = ["value"],
     _excluded4 = ["value"];
@@ -184,6 +186,7 @@ var Node = function Node(_ref) {
 
   var value = _ref.value,
       nested = _ref.nested,
+      showObjectInspector = _ref.showObjectInspector,
       callsById = _ref.callsById,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -254,7 +257,8 @@ var Node = function Node(_ref) {
 
     case Object.prototype.toString.call(value) === '[object Object]':
       return /*#__PURE__*/_react.default.createElement(ObjectNode, _extends({
-        value: value
+        value: value,
+        showInspector: showObjectInspector
       }, props));
 
     default:
@@ -371,11 +375,22 @@ var ArrayNode = function ArrayNode(_ref5) {
 exports.ArrayNode = ArrayNode;
 
 var ObjectNode = function ObjectNode(_ref6) {
-  var value = _ref6.value,
+  var showInspector = _ref6.showInspector,
+      value = _ref6.value,
       _ref6$nested = _ref6.nested,
       nested = _ref6$nested === void 0 ? false : _ref6$nested;
+  var isDarkMode = (0, _theming.useTheme)().base === 'dark';
   var colors = useThemeColors();
 
+  if (showInspector) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_objectInspector.ObjectInspector, {
+      id: "interactions-object-inspector",
+      data: value,
+      includePrototypes: false,
+      colorScheme: isDarkMode ? 'dark' : 'light'
+    }));
+  }
+
   if (nested) {
     return /*#__PURE__*/_react.default.createElement("span", {
       style: {
@@ -384,7 +399,7 @@ var ObjectNode = function ObjectNode(_ref6) {
     }, '{…}');
   }
 
-  var nodelist = interleave(Object.entries(value).slice(0, 1).map(function (_ref7) {
+  var nodelist = interleave(Object.entries(value).slice(0, 2).map(function (_ref7) {
     var _ref8 = _slicedToArray(_ref7, 2),
         k = _ref8[0],
         v = _ref8[1];

package/dist/cjs/components/MethodCall.stories.js

@@ -8,11 +8,15 @@ require("core-js/modules/es.array.slice.js");
 
 require("core-js/modules/es.function.name.js");
 
+require("core-js/modules/es.promise.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Simple = exports.Nested = exports.Complex = exports.Chained = exports.Args = void 0;
 
+require("regenerator-runtime/runtime.js");
+
 require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.regexp.constructor.js");
@@ -43,6 +47,10 @@ var _MethodCall = require("./MethodCall");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -128,8 +136,51 @@ var Args = function Args() {
     value: {
       hello: 'world',
       arr: [1, 2, 3],
-      more: 1
+      more: true
     }
+  }), /*#__PURE__*/_react.default.createElement(_MethodCall.Node, {
+    value: {
+      hello: 'world',
+      arr: [1, 2, 3],
+      more: true
+    },
+    showObjectInspector: true
+  }), /*#__PURE__*/_react.default.createElement(_MethodCall.Node, {
+    value: {
+      hello: 'world',
+      arr: [1, 2, 3],
+      more: true,
+      regex: /regex/,
+      class: /*#__PURE__*/_createClass(function DummyClass() {
+        _classCallCheck(this, DummyClass);
+      }),
+      fn: function fn() {
+        return 123;
+      },
+      asyncFn: function () {
+        var _asyncFn = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+          return regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  return _context.abrupt("return", 'hello');
+
+                case 1:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function asyncFn() {
+          return _asyncFn.apply(this, arguments);
+        }
+
+        return asyncFn;
+      }()
+    },
+    showObjectInspector: true
   }), /*#__PURE__*/_react.default.createElement(_MethodCall.Node, {
     value: new FooBar()
   }), /*#__PURE__*/_react.default.createElement(_MethodCall.Node, {

package/dist/esm/components/MatcherResult.js

@@ -66,6 +66,7 @@ export var Received = function Received(_ref3) {
   var value = _ref3.value,
       parsed = _ref3.parsed;
   return parsed ? /*#__PURE__*/React.createElement(Node, {
+    showObjectInspector: true,
     value: value,
     style: {
       color: '#D43900'
@@ -77,8 +78,12 @@ export var Expected = function Expected(_ref4) {
       parsed = _ref4.parsed;
 
   if (parsed) {
-    if (typeof value === 'string' && value.startsWith('called with')) return /*#__PURE__*/React.createElement(React.Fragment, null, value);
+    if (typeof value === 'string' && value.startsWith('called with')) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, value);
+    }
+
     return /*#__PURE__*/React.createElement(Node, {
+      showObjectInspector: true,
       value: value,
       style: {
         color: '#16B242'

package/dist/esm/components/MethodCall.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.from.js";
-var _excluded = ["value", "nested", "callsById"],
+var _excluded = ["value", "nested", "showObjectInspector", "callsById"],
     _excluded2 = ["value"],
     _excluded3 = ["value"],
     _excluded4 = ["value"];
@@ -46,6 +46,7 @@ import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.regexp.flags.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
+import { ObjectInspector } from '@devtools-ds/object-inspector';
 import { useTheme } from '@storybook/theming';
 import React, { Fragment } from 'react';
 var colorsLight = {
@@ -144,6 +145,7 @@ export var Node = function Node(_ref) {
 
   var value = _ref.value,
       nested = _ref.nested,
+      showObjectInspector = _ref.showObjectInspector,
       callsById = _ref.callsById,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -214,7 +216,8 @@ export var Node = function Node(_ref) {
 
     case Object.prototype.toString.call(value) === '[object Object]':
       return /*#__PURE__*/React.createElement(ObjectNode, _extends({
-        value: value
+        value: value,
+        showInspector: showObjectInspector
       }, props));
 
     default:
@@ -310,11 +313,22 @@ export var ArrayNode = function ArrayNode(_ref5) {
   }, "(", value.length, ") [", nodelist, ", \u2026]");
 };
 export var ObjectNode = function ObjectNode(_ref6) {
-  var value = _ref6.value,
+  var showInspector = _ref6.showInspector,
+      value = _ref6.value,
       _ref6$nested = _ref6.nested,
       nested = _ref6$nested === void 0 ? false : _ref6$nested;
+  var isDarkMode = useTheme().base === 'dark';
   var colors = useThemeColors();
 
+  if (showInspector) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObjectInspector, {
+      id: "interactions-object-inspector",
+      data: value,
+      includePrototypes: false,
+      colorScheme: isDarkMode ? 'dark' : 'light'
+    }));
+  }
+
   if (nested) {
     return /*#__PURE__*/React.createElement("span", {
       style: {
@@ -323,7 +337,7 @@ export var ObjectNode = function ObjectNode(_ref6) {
     }, '{…}');
   }
 
-  var nodelist = interleave(Object.entries(value).slice(0, 1).map(function (_ref7) {
+  var nodelist = interleave(Object.entries(value).slice(0, 2).map(function (_ref7) {
     var _ref8 = _slicedToArray(_ref7, 2),
         k = _ref8[0],
         v = _ref8[1];

package/dist/esm/components/MethodCall.stories.js

@@ -1,3 +1,9 @@
+import "regenerator-runtime/runtime.js";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,6 +31,7 @@ import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.promise.js";
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
@@ -100,8 +107,51 @@ export var Args = function Args() {
     value: {
       hello: 'world',
       arr: [1, 2, 3],
-      more: 1
+      more: true
     }
+  }), /*#__PURE__*/React.createElement(Node, {
+    value: {
+      hello: 'world',
+      arr: [1, 2, 3],
+      more: true
+    },
+    showObjectInspector: true
+  }), /*#__PURE__*/React.createElement(Node, {
+    value: {
+      hello: 'world',
+      arr: [1, 2, 3],
+      more: true,
+      regex: /regex/,
+      class: /*#__PURE__*/_createClass(function DummyClass() {
+        _classCallCheck(this, DummyClass);
+      }),
+      fn: function fn() {
+        return 123;
+      },
+      asyncFn: function () {
+        var _asyncFn = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+          return regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  return _context.abrupt("return", 'hello');
+
+                case 1:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function asyncFn() {
+          return _asyncFn.apply(this, arguments);
+        }
+
+        return asyncFn;
+      }()
+    },
+    showObjectInspector: true
   }), /*#__PURE__*/React.createElement(Node, {
     value: new FooBar()
   }), /*#__PURE__*/React.createElement(Node, {

package/dist/modern/components/MatcherResult.js

@@ -33,6 +33,7 @@ export const Received = ({
   value,
   parsed
 }) => parsed ? /*#__PURE__*/React.createElement(Node, {
+  showObjectInspector: true,
   value: value,
   style: {
     color: '#D43900'
@@ -43,8 +44,12 @@ export const Expected = ({
   parsed
 }) => {
   if (parsed) {
-    if (typeof value === 'string' && value.startsWith('called with')) return /*#__PURE__*/React.createElement(React.Fragment, null, value);
+    if (typeof value === 'string' && value.startsWith('called with')) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, value);
+    }
+
     return /*#__PURE__*/React.createElement(Node, {
+      showObjectInspector: true,
       value: value,
       style: {
         color: '#16B242'

package/dist/modern/components/MethodCall.js

@@ -1,4 +1,4 @@
-const _excluded = ["value", "nested", "callsById"],
+const _excluded = ["value", "nested", "showObjectInspector", "callsById"],
       _excluded2 = ["value"],
       _excluded3 = ["value"],
       _excluded4 = ["value"];
@@ -8,6 +8,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+import { ObjectInspector } from '@devtools-ds/object-inspector';
 import { useTheme } from '@storybook/theming';
 import React, { Fragment } from 'react';
 const colorsLight = {
@@ -102,6 +103,7 @@ export const Node = _ref => {
 
   let {
     value,
+    showObjectInspector,
     callsById
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -173,7 +175,8 @@ export const Node = _ref => {
 
     case Object.prototype.toString.call(value) === '[object Object]':
       return /*#__PURE__*/React.createElement(ObjectNode, _extends({
-        value: value
+        value: value,
+        showInspector: showObjectInspector
       }, props));
 
     default:
@@ -273,11 +276,22 @@ export const ArrayNode = ({
   }, "(", value.length, ") [", nodelist, ", \u2026]");
 };
 export const ObjectNode = ({
+  showInspector,
   value,
   nested = false
 }) => {
+  const isDarkMode = useTheme().base === 'dark';
   const colors = useThemeColors();
 
+  if (showInspector) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObjectInspector, {
+      id: "interactions-object-inspector",
+      data: value,
+      includePrototypes: false,
+      colorScheme: isDarkMode ? 'dark' : 'light'
+    }));
+  }
+
   if (nested) {
     return /*#__PURE__*/React.createElement("span", {
       style: {
@@ -286,7 +300,7 @@ export const ObjectNode = ({
     }, '{…}');
   }
 
-  const nodelist = interleave(Object.entries(value).slice(0, 1).map(([k, v]) => /*#__PURE__*/React.createElement(Fragment, {
+  const nodelist = interleave(Object.entries(value).slice(0, 2).map(([k, v]) => /*#__PURE__*/React.createElement(Fragment, {
     key: k
   }, /*#__PURE__*/React.createElement("span", {
     style: {

package/dist/modern/components/MethodCall.stories.js

@@ -59,8 +59,26 @@ export const Args = () => /*#__PURE__*/React.createElement("div", {
   value: {
     hello: 'world',
     arr: [1, 2, 3],
-    more: 1
+    more: true
   }
+}), /*#__PURE__*/React.createElement(Node, {
+  value: {
+    hello: 'world',
+    arr: [1, 2, 3],
+    more: true
+  },
+  showObjectInspector: true
+}), /*#__PURE__*/React.createElement(Node, {
+  value: {
+    hello: 'world',
+    arr: [1, 2, 3],
+    more: true,
+    regex: /regex/,
+    class: class DummyClass {},
+    fn: () => 123,
+    asyncFn: async () => 'hello'
+  },
+  showObjectInspector: true
 }), /*#__PURE__*/React.createElement(Node, {
   value: new FooBar()
 }), /*#__PURE__*/React.createElement(Node, {

package/dist/ts3.4/Tool.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Tool: () => JSX.Element;

package/dist/ts3.4/components/Interaction/Interaction.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Call, ControlStates } from '@storybook/instrumenter';
 import { Controls } from '../../Panel';
 export declare const Interaction: ({ call, callsById, controls, controlStates, }: {

package/dist/ts3.4/components/MatcherResult.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Received: ({ value, parsed }: {
     value: any;
     parsed?: boolean;

package/dist/ts3.4/components/MethodCall.d.ts

@@ -1,8 +1,14 @@
+/// <reference types="react" />
 import { Call, ElementRef } from '@storybook/instrumenter';
-export declare const Node: ({ value, nested, callsById, ...props }: {
+export declare const Node: ({ value, nested, showObjectInspector, callsById, ...props }: {
     [props: string]: any;
     value: any;
     nested?: boolean;
+    /**
+     * Shows an object inspector instead of just printing the object.
+     * Only available for Objects
+     */
+    showObjectInspector?: boolean;
     callsById?: Map<Call['id'], Call>;
 }) => JSX.Element;
 export declare const NullNode: (props: object) => JSX.Element;
@@ -20,7 +26,8 @@ export declare const ArrayNode: ({ value, nested }: {
     value: any[];
     nested?: boolean;
 }) => JSX.Element;
-export declare const ObjectNode: ({ value, nested }: {
+export declare const ObjectNode: ({ showInspector, value, nested, }: {
+    showInspector?: boolean;
     value: object;
     nested?: boolean;
 }) => JSX.Element;

package/dist/ts3.9/Tool.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Tool: () => JSX.Element;

package/dist/ts3.9/components/Interaction/Interaction.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Call, ControlStates } from '@storybook/instrumenter';
 import { Controls } from '../../Panel';
 export declare const Interaction: ({ call, callsById, controls, controlStates, }: {

package/dist/ts3.9/components/MatcherResult.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Received: ({ value, parsed }: {
     value: any;
     parsed?: boolean;

package/dist/ts3.9/components/MethodCall.d.ts

@@ -1,8 +1,14 @@
+/// <reference types="react" />
 import { Call, ElementRef } from '@storybook/instrumenter';
-export declare const Node: ({ value, nested, callsById, ...props }: {
+export declare const Node: ({ value, nested, showObjectInspector, callsById, ...props }: {
     [props: string]: any;
     value: any;
     nested?: boolean;
+    /**
+     * Shows an object inspector instead of just printing the object.
+     * Only available for Objects
+     */
+    showObjectInspector?: boolean;
     callsById?: Map<Call['id'], Call>;
 }) => JSX.Element;
 export declare const NullNode: (props: object) => JSX.Element;
@@ -20,7 +26,8 @@ export declare const ArrayNode: ({ value, nested }: {
     value: any[];
     nested?: boolean;
 }) => JSX.Element;
-export declare const ObjectNode: ({ value, nested }: {
+export declare const ObjectNode: ({ showInspector, value, nested, }: {
+    showInspector?: boolean;
     value: object;
     nested?: boolean;
 }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "6.5.0-alpha.61",
+  "version": "6.5.0-alpha.64",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -41,15 +41,16 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.61",
-    "@storybook/api": "6.5.0-alpha.61",
-    "@storybook/client-logger": "6.5.0-alpha.61",
-    "@storybook/components": "6.5.0-alpha.61",
-    "@storybook/core-common": "6.5.0-alpha.61",
-    "@storybook/core-events": "6.5.0-alpha.61",
+    "@devtools-ds/object-inspector": "^1.1.2",
+    "@storybook/addons": "6.5.0-alpha.64",
+    "@storybook/api": "6.5.0-alpha.64",
+    "@storybook/client-logger": "6.5.0-alpha.64",
+    "@storybook/components": "6.5.0-alpha.64",
+    "@storybook/core-common": "6.5.0-alpha.64",
+    "@storybook/core-events": "6.5.0-alpha.64",
     "@storybook/csf": "0.0.2--canary.7c6c115.0",
-    "@storybook/instrumenter": "6.5.0-alpha.61",
-    "@storybook/theming": "6.5.0-alpha.61",
+    "@storybook/instrumenter": "6.5.0-alpha.64",
+    "@storybook/theming": "6.5.0-alpha.64",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
@@ -76,7 +77,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed6c89be975f7cd6ea28605efbb5597685b68d40",
+  "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Interactions",