@storybook/components 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/cjs/blocks/Preview.stories.js

@@ -0,0 +1,338 @@
+"use strict";
+
+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); }
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithAdditionalActions = exports.WithCenteredMulti = exports.WithCenteredSingle = exports.WithFullscreenMulti = exports.WithFullscreenSingle = exports.WithToolbarMulti = exports.Wide = exports.WithToolbar = exports.GridWith3Columns = exports.Column = exports.Row = exports.Single = exports.CodeError = exports.CodeExpanded = exports.CodeCollapsed = exports.default = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _global = _interopRequireDefault(require("global"));
+
+var _Spaced = require("../spaced/Spaced");
+
+var _Preview = require("./Preview");
+
+var _Story = require("./Story");
+
+var _Button = require("../Button/Button");
+
+var Source = _interopRequireWildcard(require("./Source.stories"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var globalWindow = _global.default.window;
+var _default = {
+  title: 'Docs/Preview',
+  component: _Preview.Preview
+};
+exports.default = _default;
+
+var CodeCollapsed = function CodeCollapsed() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    isExpanded: false,
+    withSource: Source.JSX.args
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"));
+};
+
+exports.CodeCollapsed = CodeCollapsed;
+CodeCollapsed.displayName = "CodeCollapsed";
+
+var CodeExpanded = function CodeExpanded() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    isExpanded: true,
+    withSource: Source.JSX.args
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"));
+};
+
+exports.CodeExpanded = CodeExpanded;
+CodeExpanded.displayName = "CodeExpanded";
+
+var CodeError = function CodeError() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    isExpanded: true,
+    withSource: Source.SourceUnavailable.args
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"));
+};
+
+exports.CodeError = CodeError;
+CodeError.displayName = "CodeError";
+
+var Single = function Single() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"));
+};
+
+exports.Single = Single;
+Single.displayName = "Single";
+
+var Row = function Row() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 2"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 3"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 4"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 5"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 6"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 7"));
+};
+
+exports.Row = Row;
+Row.displayName = "Row";
+
+var Column = function Column() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    isColumn: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 2"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 3"));
+};
+
+exports.Column = Column;
+Column.displayName = "Column";
+
+var GridWith3Columns = function GridWith3Columns() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    columns: 3
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 2"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 3"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 4"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 5"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 6"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 7 long long long long long title"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 8"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 9"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 10"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 11"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 12"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 13"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 14"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 15"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 16"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 17"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 18"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 19"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 20"));
+};
+
+exports.GridWith3Columns = GridWith3Columns;
+GridWith3Columns.displayName = "GridWith3Columns";
+
+var buttonFn = function buttonFn() {
+  return /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Hello Button");
+};
+
+buttonFn.displayName = "buttonFn";
+
+var WithToolbar = function WithToolbar() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "with toolbar"
+  }));
+};
+
+exports.WithToolbar = WithToolbar;
+WithToolbar.displayName = "WithToolbar";
+var Horizontal = (0, _theming.styled)(function (props) {
+  return /*#__PURE__*/_react.default.createElement(_Spaced.Spaced, _extends({
+    col: 1
+  }, props));
+})({
+  display: 'grid',
+  gridTemplateColumns: '100px calc(100vw + 100px) 100px'
+});
+
+var Wide = function Wide() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(Horizontal, null, /*#__PURE__*/_react.default.createElement("div", null, "START"), /*#__PURE__*/_react.default.createElement("div", null, "middle"), /*#__PURE__*/_react.default.createElement("div", null, "END")));
+};
+
+exports.Wide = Wide;
+Wide.displayName = "Wide";
+
+var WithToolbarMulti = function WithToolbarMulti() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story1"
+  }), /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story2"
+  }));
+};
+
+exports.WithToolbarMulti = WithToolbarMulti;
+WithToolbarMulti.displayName = "WithToolbarMulti";
+
+var WithFullscreenSingle = function WithFullscreenSingle() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story1",
+    parameters: {
+      layout: 'fullscreen'
+    }
+  }));
+};
+
+exports.WithFullscreenSingle = WithFullscreenSingle;
+WithFullscreenSingle.displayName = "WithFullscreenSingle";
+
+var WithFullscreenMulti = function WithFullscreenMulti() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story1",
+    parameters: {
+      layout: 'fullscreen'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story2",
+    parameters: {
+      layout: 'fullscreen'
+    }
+  }));
+};
+
+exports.WithFullscreenMulti = WithFullscreenMulti;
+WithFullscreenMulti.displayName = "WithFullscreenMulti";
+
+var WithCenteredSingle = function WithCenteredSingle() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story1",
+    parameters: {
+      layout: 'centered'
+    }
+  }));
+};
+
+exports.WithCenteredSingle = WithCenteredSingle;
+WithCenteredSingle.displayName = "WithCenteredSingle";
+
+var WithCenteredMulti = function WithCenteredMulti() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story1",
+    parameters: {
+      layout: 'centered'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    inline: true,
+    storyFn: buttonFn,
+    title: "story2",
+    parameters: {
+      layout: 'centered'
+    }
+  }));
+};
+
+exports.WithCenteredMulti = WithCenteredMulti;
+WithCenteredMulti.displayName = "WithCenteredMulti";
+
+var WithAdditionalActions = function WithAdditionalActions() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
+    additionalActions: [{
+      title: 'Open on GitHub',
+      onClick: function onClick() {
+        globalWindow.location.href = 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/Preview.stories.tsx#L140-L147';
+      }
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Button 1"));
+};
+
+exports.WithAdditionalActions = WithAdditionalActions;
+WithAdditionalActions.displayName = "WithAdditionalActions";

package/dist/cjs/blocks/Source.js

@@ -0,0 +1,94 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSyntaxHighlighter = exports.Source = exports.SourceError = void 0;
+
+require("core-js/modules/es.object.keys.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _EmptyBlock = require("./EmptyBlock");
+
+var _lazySyntaxhighlighter = require("../syntaxhighlighter/lazy-syntaxhighlighter");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+var StyledSyntaxHighlighter = (0, _theming.styled)(_lazySyntaxhighlighter.SyntaxHighlighter)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    // DocBlocks-specific styling and overrides
+    fontSize: "".concat(theme.typography.size.s2 - 1, "px"),
+    lineHeight: '19px',
+    margin: '25px 0 40px',
+    borderRadius: theme.appBorderRadius,
+    boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+    'pre.prismjs': {
+      padding: 20,
+      background: 'inherit'
+    }
+  };
+});
+exports.StyledSyntaxHighlighter = StyledSyntaxHighlighter;
+var SourceError;
+exports.SourceError = SourceError;
+
+(function (SourceError) {
+  SourceError["NO_STORY"] = "There\u2019s no story here.";
+  SourceError["SOURCE_UNAVAILABLE"] = "Oh no! The source is not available.";
+})(SourceError || (exports.SourceError = SourceError = {}));
+
+/**
+ * Syntax-highlighted source code for a component (or anything!)
+ */
+var Source = function Source(props) {
+  var _ref2 = props,
+      error = _ref2.error;
+
+  if (error) {
+    return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, error);
+  }
+
+  var _ref3 = props,
+      language = _ref3.language,
+      code = _ref3.code,
+      dark = _ref3.dark,
+      format = _ref3.format,
+      rest = _objectWithoutProperties(_ref3, ["language", "code", "dark", "format"]);
+
+  var syntaxHighlighter = /*#__PURE__*/_react.default.createElement(StyledSyntaxHighlighter, _extends({
+    bordered: true,
+    copyable: true,
+    format: format,
+    language: language,
+    className: "docblock-source"
+  }, rest), code);
+
+  if (typeof dark === 'undefined') {
+    return syntaxHighlighter;
+  }
+
+  var overrideTheme = dark ? _theming.themes.dark : _theming.themes.light;
+  return /*#__PURE__*/_react.default.createElement(_theming.ThemeProvider, {
+    theme: (0, _theming.convert)(overrideTheme)
+  }, syntaxHighlighter);
+};
+
+exports.Source = Source;
+Source.displayName = "Source";
+Source.defaultProps = {
+  format: false
+};

package/dist/cjs/blocks/Source.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourceUnavailable = exports.NoStory = exports.CSS = exports.JSX = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Source = require("./Source");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Docs/Source',
+  component: _Source.Source
+};
+exports.default = _default;
+var jsxCode = "\n<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>\n  <SomeOtherComponent funcProp={(a) => a.id} />\n</MyComponent>\n";
+
+var JSX = function JSX(args) {
+  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
+};
+
+exports.JSX = JSX;
+JSX.displayName = "JSX";
+JSX.args = {
+  code: jsxCode,
+  language: 'jsx',
+  format: false
+};
+var cssCode = "\n@-webkit-keyframes blinker {\n  from { opacity: 1.0; }\n  to { opacity: 0.0; }\n}\n\n.waitingForConnection {\n  -webkit-animation-name: blinker;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);\n  -webkit-animation-duration: 1.7s;\n}\n";
+
+var CSS = function CSS(args) {
+  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
+};
+
+exports.CSS = CSS;
+CSS.displayName = "CSS";
+CSS.args = {
+  code: cssCode,
+  language: 'css',
+  format: false
+};
+
+var NoStory = function NoStory(args) {
+  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
+};
+
+exports.NoStory = NoStory;
+NoStory.displayName = "NoStory";
+NoStory.args = {
+  error: _Source.SourceError.NO_STORY,
+  format: false
+};
+
+var SourceUnavailable = function SourceUnavailable(args) {
+  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
+};
+
+exports.SourceUnavailable = SourceUnavailable;
+SourceUnavailable.displayName = "SourceUnavailable";
+SourceUnavailable.args = {
+  error: _Source.SourceError.SOURCE_UNAVAILABLE,
+  format: false
+};

package/dist/cjs/blocks/Story.js

@@ -0,0 +1,129 @@
+"use strict";
+
+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); }
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Story = exports.StoryError = void 0;
+
+require("core-js/modules/es.array.concat.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _IFrame = require("./IFrame");
+
+var _EmptyBlock = require("./EmptyBlock");
+
+var _ZoomContext = require("./ZoomContext");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+var BASE_URL = 'iframe.html';
+var StoryError;
+/** error message for Story with null storyFn
+ * if the story id exists, it must be pointing to a non-existing story
+ *  if there is assigned story id, the story must be empty
+ */
+
+exports.StoryError = StoryError;
+
+(function (StoryError) {
+  StoryError["NO_STORY"] = "No component or story to display";
+})(StoryError || (exports.StoryError = StoryError = {}));
+
+var MISSING_STORY = function MISSING_STORY(id) {
+  return id ? "Story \"".concat(id, "\" doesn't exist.") : StoryError.NO_STORY;
+};
+
+var InlineStory = function InlineStory(_ref) {
+  var storyFn = _ref.storyFn,
+      height = _ref.height,
+      id = _ref.id;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, height ? /*#__PURE__*/_react.default.createElement("style", null, "#story--".concat(id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, storyFn ? /*#__PURE__*/(0, _react.createElement)(storyFn) : /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, MISSING_STORY(id))));
+};
+
+InlineStory.displayName = "InlineStory";
+
+var IFrameStory = function IFrameStory(_ref2) {
+  var id = _ref2.id,
+      title = _ref2.title,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? '500px' : _ref2$height;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ZoomContext.ZoomContext.Consumer, null, function (_ref3) {
+    var scale = _ref3.scale;
+    return /*#__PURE__*/_react.default.createElement(_IFrame.IFrame, {
+      key: "iframe",
+      id: "iframe--".concat(id),
+      title: title,
+      src: "".concat(BASE_URL, "?id=").concat(id, "&viewMode=story"),
+      allowFullScreen: true,
+      scale: scale,
+      style: {
+        width: '100%',
+        height: '100%',
+        border: '0 none'
+      }
+    });
+  }));
+};
+
+IFrameStory.displayName = "IFrameStory";
+
+/**
+ * A story element, either rendered inline or in an iframe,
+ * with configurable height.
+ */
+var Story = function Story(_ref4) {
+  var children = _ref4.children,
+      error = _ref4.error,
+      inline = _ref4.inline,
+      props = _objectWithoutProperties(_ref4, ["children", "error", "inline"]);
+
+  var id = props.id,
+      title = props.title,
+      height = props.height;
+
+  if (error) {
+    return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, error);
+  }
+
+  return inline ? /*#__PURE__*/_react.default.createElement(InlineStory, props) : /*#__PURE__*/_react.default.createElement(IFrameStory, {
+    id: id,
+    title: title,
+    height: height
+  });
+};
+
+exports.Story = Story;