@storybook/addon-viewport
Advanced tools
@storybook/addon-viewport - npm Package Compare versions
Comparing version 4.1.0-alpha.10 to 4.1.0-alpha.11
@@ -1,46 +0,54 @@ | ||
| "use strict"; | ||
| import "core-js/modules/es7.symbol.async-iterator"; | ||
| import "core-js/modules/es6.symbol"; | ||
| import "core-js/modules/es6.array.is-array"; | ||
| import "core-js/modules/es6.object.create"; | ||
| import "core-js/modules/es6.object.set-prototype-of"; | ||
| import "core-js/modules/es6.object.define-property"; | ||
| import "core-js/modules/es6.function.name"; | ||
| import "core-js/modules/es7.object.entries"; | ||
| import "core-js/modules/es6.array.map"; | ||
| import "core-js/modules/es6.array.for-each"; | ||
| import "core-js/modules/web.dom.iterable"; | ||
| import "core-js/modules/es6.array.iterator"; | ||
| import "core-js/modules/es6.object.keys"; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); | ||
| function _typeof(obj) { 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); } | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.Panel = void 0; | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } | ||
| var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")); | ||
| 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); } } | ||
| var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); | ||
| function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
| var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); | ||
| function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
| var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); | ||
| function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
| var _react = _interopRequireWildcard(require("react")); | ||
| function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
| var _propTypes = _interopRequireDefault(require("prop-types")); | ||
| function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| var _global = require("global"); | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var _styled = _interopRequireDefault(require("@emotion/styled")); | ||
| var _components = require("@storybook/components"); | ||
| var _viewportInfo = require("./viewportInfo"); | ||
| var _shared = require("../../shared"); | ||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { document } from 'global'; | ||
| import styled from '@emotion/styled'; | ||
| import { ActionBar, ActionButton, Button, Select, Field } from '@storybook/components'; | ||
| import { resetViewport, viewportsTransformer } from './viewportInfo'; | ||
| import { SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, CONFIGURE_VIEWPORT_EVENT_ID, UPDATE_VIEWPORT_EVENT_ID, VIEWPORT_CHANGED_EVENT_ID, INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../../shared'; | ||
| var storybookIframe = 'storybook-preview-iframe'; | ||
| var Container = | ||
| /*#__PURE__*/ | ||
| (0, _styled.default)("div", { | ||
| styled("div", { | ||
| target: "ejagn3f0" | ||
@@ -61,9 +69,9 @@ })({ | ||
| var getViewports = function getViewports(viewports) { | ||
| return Object.keys(viewports).length > 0 ? viewports : _shared.INITIAL_VIEWPORTS; | ||
| return Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS; | ||
| }; | ||
| var Panel = | ||
| export var Panel = | ||
| /*#__PURE__*/ | ||
| function (_Component) { | ||
| (0, _inherits2.default)(Panel, _Component); | ||
| _inherits(Panel, _Component); | ||
@@ -75,3 +83,3 @@ function Panel() { | ||
| (0, _classCallCheck2.default)(this, Panel); | ||
| _classCallCheck(this, Panel); | ||
@@ -82,12 +90,16 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Panel)).call.apply(_getPrototypeOf2, [this].concat(args))); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "iframe", undefined); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "previousViewport", _shared.DEFAULT_VIEWPORT); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", { | ||
| viewport: _shared.DEFAULT_VIEWPORT, | ||
| defaultViewport: _shared.DEFAULT_VIEWPORT, | ||
| viewports: (0, _viewportInfo.viewportsTransformer)(_shared.INITIAL_VIEWPORTS), | ||
| _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Panel)).call.apply(_getPrototypeOf2, [this].concat(args))); | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "iframe", undefined); | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "previousViewport", DEFAULT_VIEWPORT); | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { | ||
| viewport: DEFAULT_VIEWPORT, | ||
| defaultViewport: DEFAULT_VIEWPORT, | ||
| viewports: viewportsTransformer(INITIAL_VIEWPORTS), | ||
| isLandscape: false | ||
| }); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setStoryDefaultViewport", function (viewport) { | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setStoryDefaultViewport", function (viewport) { | ||
| var viewports = _this.state.viewports; | ||
@@ -102,3 +114,4 @@ var defaultViewport = getDefaultViewport(viewports, viewport); | ||
| }); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "configure", function () { | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "configure", function () { | ||
| var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Panel.defaultOptions; | ||
@@ -111,6 +124,7 @@ var viewports = getViewports(options.viewports || {}); | ||
| viewport: defaultViewport, | ||
| viewports: (0, _viewportInfo.viewportsTransformer)(viewports) | ||
| viewports: viewportsTransformer(viewports) | ||
| }, _this.updateIframe); | ||
| }); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeViewport", function (viewport) { | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "changeViewport", function (viewport) { | ||
| var previousViewport = _this.state.viewport; | ||
@@ -129,3 +143,4 @@ | ||
| }); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "emitViewportChanged", function () { | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "emitViewportChanged", function () { | ||
| var channel = _this.props.channel; | ||
@@ -141,11 +156,13 @@ var _this$state = _this.state, | ||
| _this.previousViewport = viewport; | ||
| channel.emit(_shared.VIEWPORT_CHANGED_EVENT_ID, { | ||
| channel.emit(VIEWPORT_CHANGED_EVENT_ID, { | ||
| viewport: viewports[viewport] | ||
| }); | ||
| }); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "shouldNotify", function () { | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shouldNotify", function () { | ||
| var viewport = _this.state.viewport; | ||
| return _this.previousViewport !== viewport; | ||
| }); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleLandscape", function () { | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleLandscape", function () { | ||
| var isLandscape = _this.state.isLandscape; | ||
@@ -157,3 +174,4 @@ | ||
| }); | ||
| (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "updateIframe", function () { | ||
| _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateIframe", function () { | ||
| var _this$state2 = _this.state, | ||
@@ -163,3 +181,3 @@ viewports = _this$state2.viewports, | ||
| isLandscape = _this$state2.isLandscape; | ||
| var viewport = viewports[viewportKey] || _viewportInfo.resetViewport; | ||
| var viewport = viewports[viewportKey] || resetViewport; | ||
@@ -179,6 +197,7 @@ if (!_this.iframe) { | ||
| }); | ||
| return _this; | ||
| } | ||
| (0, _createClass2.default)(Panel, [{ | ||
| _createClass(Panel, [{ | ||
| key: "componentDidMount", | ||
@@ -191,6 +210,6 @@ value: function componentDidMount() { | ||
| api = _this$props.api; | ||
| this.iframe = _global.document.getElementById(storybookIframe); | ||
| channel.on(_shared.UPDATE_VIEWPORT_EVENT_ID, this.changeViewport); | ||
| channel.on(_shared.CONFIGURE_VIEWPORT_EVENT_ID, this.configure); | ||
| channel.on(_shared.SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport); | ||
| this.iframe = document.getElementById(storybookIframe); | ||
| channel.on(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport); | ||
| channel.on(CONFIGURE_VIEWPORT_EVENT_ID, this.configure); | ||
| channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport); | ||
| this.unsubscribeFromOnStory = api.onStory(function () { | ||
@@ -211,5 +230,5 @@ var defaultViewport = _this2.state.defaultViewport; | ||
| channel.removeListener(_shared.UPDATE_VIEWPORT_EVENT_ID, this.changeViewport); | ||
| channel.removeListener(_shared.CONFIGURE_VIEWPORT_EVENT_ID, this.configure); | ||
| channel.removeListener(_shared.SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport); | ||
| channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport); | ||
| channel.removeListener(CONFIGURE_VIEWPORT_EVENT_ID, this.configure); | ||
| channel.removeListener(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport); | ||
| } | ||
@@ -230,5 +249,5 @@ }, { | ||
| var isResponsive = viewport === storyDefaultViewport; | ||
| return active ? _react.default.createElement(Container, null, _react.default.createElement(_components.Field, { | ||
| return active ? React.createElement(Container, null, React.createElement(Field, { | ||
| label: "Device" | ||
| }, _react.default.createElement(_components.Select, { | ||
| }, React.createElement(Select, { | ||
| value: viewport, | ||
@@ -240,17 +259,17 @@ onChange: function onChange(e) { | ||
| }, Object.entries(viewports).map(function (_ref) { | ||
| var _ref2 = (0, _slicedToArray2.default)(_ref, 2), | ||
| var _ref2 = _slicedToArray(_ref, 2), | ||
| key = _ref2[0], | ||
| name = _ref2[1].name; | ||
| return _react.default.createElement("option", { | ||
| return React.createElement("option", { | ||
| value: key, | ||
| key: key | ||
| }, key === defaultViewport ? "".concat(name, " (Default)") : name); | ||
| }))), !isResponsive ? _react.default.createElement(_components.Field, { | ||
| }))), !isResponsive ? React.createElement(Field, { | ||
| label: "Rotate" | ||
| }, _react.default.createElement(_components.Button, { | ||
| }, React.createElement(Button, { | ||
| onClick: this.toggleLandscape, | ||
| active: isLandscape, | ||
| size: "flex" | ||
| }, isLandscape ? 'rotate to portrait' : 'rotate to landscape')) : null, _react.default.createElement(_components.ActionBar, null, _react.default.createElement(_components.ActionButton, { | ||
| }, isLandscape ? 'rotate to portrait' : 'rotate to landscape')) : null, React.createElement(ActionBar, null, React.createElement(ActionButton, { | ||
| onClick: function onClick() { | ||
@@ -263,20 +282,21 @@ return _this3.changeViewport(storyDefaultViewport); | ||
| }]); | ||
| return Panel; | ||
| }(_react.Component); | ||
| }(Component); | ||
| exports.Panel = Panel; | ||
| (0, _defineProperty2.default)(Panel, "defaultOptions", { | ||
| viewports: _shared.INITIAL_VIEWPORTS, | ||
| defaultViewport: _shared.DEFAULT_VIEWPORT | ||
| _defineProperty(Panel, "defaultOptions", { | ||
| viewports: INITIAL_VIEWPORTS, | ||
| defaultViewport: DEFAULT_VIEWPORT | ||
| }); | ||
| (0, _defineProperty2.default)(Panel, "propTypes", { | ||
| active: _propTypes.default.bool.isRequired, | ||
| api: _propTypes.default.shape({ | ||
| selectStory: _propTypes.default.func.isRequired | ||
| _defineProperty(Panel, "propTypes", { | ||
| active: PropTypes.bool.isRequired, | ||
| api: PropTypes.shape({ | ||
| selectStory: PropTypes.func.isRequired | ||
| }).isRequired, | ||
| channel: _propTypes.default.shape({ | ||
| on: _propTypes.default.func, | ||
| emit: _propTypes.default.func, | ||
| removeListener: _propTypes.default.func | ||
| channel: PropTypes.shape({ | ||
| on: PropTypes.func, | ||
| emit: PropTypes.func, | ||
| removeListener: PropTypes.func | ||
| }).isRequired | ||
| }); |
@@ -1,22 +0,18 @@ | ||
| "use strict"; | ||
| import "core-js/modules/es6.array.for-each"; | ||
| import "core-js/modules/es6.array.filter"; | ||
| import "core-js/modules/es6.object.define-property"; | ||
| import "core-js/modules/web.dom.iterable"; | ||
| import "core-js/modules/es6.array.iterator"; | ||
| import "core-js/modules/es6.object.keys"; | ||
| import "core-js/modules/es6.array.reduce"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.applyStyles = applyStyles; | ||
| exports.applyDefaultStyles = applyDefaultStyles; | ||
| exports.viewportsTransformer = exports.transformViewports = exports.resetViewport = exports.configuredStyles = void 0; | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread")); | ||
| var configuredStyles = { | ||
| export var configuredStyles = { | ||
| display: 'flex', | ||
| boxShadow: 'rgba(0,0,0,0.2) 0px 0px 60px 12px' | ||
| }; | ||
| exports.configuredStyles = configuredStyles; | ||
| var resetViewport = { | ||
| export var resetViewport = { | ||
| name: 'Reset', | ||
@@ -31,25 +27,19 @@ styles: { | ||
| }; | ||
| exports.resetViewport = resetViewport; | ||
| export function applyStyles(viewport, styles) { | ||
| var mixedStyles = _objectSpread({}, styles, viewport.styles); | ||
| function applyStyles(viewport, styles) { | ||
| var mixedStyles = (0, _objectSpread3.default)({}, styles, viewport.styles); | ||
| return (0, _objectSpread3.default)({}, viewport, { | ||
| return _objectSpread({}, viewport, { | ||
| styles: mixedStyles | ||
| }); | ||
| } | ||
| function applyDefaultStyles(viewport) { | ||
| export function applyDefaultStyles(viewport) { | ||
| return applyStyles(viewport, configuredStyles); | ||
| } | ||
| var transformViewports = function transformViewports(transformer) { | ||
| export var transformViewports = function transformViewports(transformer) { | ||
| return function (viewports) { | ||
| return Object.keys(viewports).reduce(function (all, key) { | ||
| return (0, _objectSpread3.default)({}, all, (0, _defineProperty2.default)({}, key, transformer(viewports[key]))); | ||
| return _objectSpread({}, all, _defineProperty({}, key, transformer(viewports[key]))); | ||
| }, {}); | ||
| }; | ||
| }; | ||
| exports.transformViewports = transformViewports; | ||
| var viewportsTransformer = transformViewports(applyDefaultStyles); | ||
| exports.viewportsTransformer = viewportsTransformer; | ||
| export var viewportsTransformer = transformViewports(applyDefaultStyles); |
@@ -1,22 +0,9 @@ | ||
| "use strict"; | ||
| import React from 'react'; | ||
| import addons from '@storybook/addons'; | ||
| import { Panel } from './components/Panel'; | ||
| import { ADDON_ID, PANEL_ID } from '../shared'; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.addChannel = exports.init = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _addons = _interopRequireDefault(require("@storybook/addons")); | ||
| var _Panel = require("./components/Panel"); | ||
| var _shared = require("../shared"); | ||
| var addChannel = function addChannel(api) { | ||
| var channel = _addons.default.getChannel(); | ||
| _addons.default.addPanel(_shared.PANEL_ID, { | ||
| var channel = addons.getChannel(); | ||
| addons.addPanel(PANEL_ID, { | ||
| title: 'Viewport', | ||
@@ -26,3 +13,3 @@ // eslint-disable-next-line react/prop-types | ||
| var active = _ref.active; | ||
| return _react.default.createElement(_Panel.Panel, { | ||
| return React.createElement(Panel, { | ||
| channel: channel, | ||
@@ -36,8 +23,6 @@ api: api, | ||
| exports.addChannel = addChannel; | ||
| var init = function init() { | ||
| _addons.default.register(_shared.ADDON_ID, addChannel); | ||
| addons.register(ADDON_ID, addChannel); | ||
| }; | ||
| exports.init = init; | ||
| export { init, addChannel }; |
@@ -1,50 +0,12 @@ | ||
| "use strict"; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.configureViewport = configureViewport; | ||
| Object.defineProperty(exports, "INITIAL_VIEWPORTS", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _shared.INITIAL_VIEWPORTS; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "DEFAULT_VIEWPORT", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _shared.DEFAULT_VIEWPORT; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "withViewport", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _withViewport.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "Viewport", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _withViewport.Viewport; | ||
| } | ||
| }); | ||
| var _addons = _interopRequireDefault(require("@storybook/addons")); | ||
| var _shared = require("../shared"); | ||
| var _withViewport = _interopRequireWildcard(require("./withViewport")); | ||
| function configureViewport() { | ||
| import addons from '@storybook/addons'; | ||
| import { CONFIGURE_VIEWPORT_EVENT_ID } from '../shared'; | ||
| export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../shared'; | ||
| export { default as withViewport, Viewport } from './withViewport'; | ||
| export function configureViewport() { | ||
| var configs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var channel = addons.getChannel(); | ||
| var channel = _addons.default.getChannel(); | ||
| if (channel) { | ||
| channel.emit(_shared.CONFIGURE_VIEWPORT_EVENT_ID, configs); | ||
| channel.emit(CONFIGURE_VIEWPORT_EVENT_ID, configs); | ||
| } | ||
| } |
@@ -1,22 +0,16 @@ | ||
| "use strict"; | ||
| import "core-js/modules/es6.array.index-of"; | ||
| import "core-js/modules/web.dom.iterable"; | ||
| import "core-js/modules/es6.array.iterator"; | ||
| import "core-js/modules/es6.object.keys"; | ||
| import "core-js/modules/es6.function.name"; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); | ||
| 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; } | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| 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; } | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.Viewport = exports.default = void 0; | ||
| import addons, { makeDecorator } from '@storybook/addons'; | ||
| import CoreEvents from '@storybook/core-events'; | ||
| import deprecate from 'util-deprecate'; | ||
| import { SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, VIEWPORT_CHANGED_EVENT_ID, DEFAULT_VIEWPORT } from '../shared'; | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
| var _addons = _interopRequireWildcard(require("@storybook/addons")); | ||
| var _coreEvents = _interopRequireDefault(require("@storybook/core-events")); | ||
| var _utilDeprecate = _interopRequireDefault(require("util-deprecate")); | ||
| var _shared = require("../shared"); | ||
| function noop() {} | ||
@@ -31,7 +25,6 @@ | ||
| var subscription = function subscription() { | ||
| var channel = _addons.default.getChannel(); | ||
| channel.on(_shared.VIEWPORT_CHANGED_EVENT_ID, callHandler); | ||
| var channel = addons.getChannel(); | ||
| channel.on(VIEWPORT_CHANGED_EVENT_ID, callHandler); | ||
| return function () { | ||
| return channel.removeListener(_shared.VIEWPORT_CHANGED_EVENT_ID, callHandler); | ||
| return channel.removeListener(VIEWPORT_CHANGED_EVENT_ID, callHandler); | ||
| }; | ||
@@ -42,15 +35,13 @@ }; | ||
| var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var channel = _addons.default.getChannel(); | ||
| var channel = addons.getChannel(); | ||
| handler = options.onViewportChange || noop; | ||
| if (options.onViewportChange) { | ||
| channel.emit(_coreEvents.default.REGISTER_SUBSCRIPTION, subscription); | ||
| channel.emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription); | ||
| } | ||
| channel.emit(_shared.SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, options.name || _shared.DEFAULT_VIEWPORT); | ||
| channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, options.name || DEFAULT_VIEWPORT); | ||
| }; | ||
| var withViewport = (0, _addons.makeDecorator)({ | ||
| var withViewport = makeDecorator({ | ||
| name: 'withViewport', | ||
@@ -74,10 +65,9 @@ parameterName: 'viewport', | ||
| }); | ||
| var _default = withViewport; | ||
| exports.default = _default; | ||
| var Viewport = (0, _utilDeprecate.default)(function (_ref2) { | ||
| export default withViewport; | ||
| export var Viewport = deprecate(function (_ref2) { | ||
| var children = _ref2.children, | ||
| options = (0, _objectWithoutProperties2.default)(_ref2, ["children"]); | ||
| options = _objectWithoutProperties(_ref2, ["children"]); | ||
| applyViewportOptions(options); | ||
| return children; | ||
| }, "<Viewport> usage is deprecated, use .addParameters({ viewport }) instead"); | ||
| exports.Viewport = Viewport; | ||
| }, "<Viewport> usage is deprecated, use .addParameters({ viewport }) instead"); |
@@ -1,20 +0,8 @@ | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.DEFAULT_VIEWPORT = exports.INITIAL_VIEWPORTS = exports.VIEWPORT_CHANGED_EVENT_ID = exports.SET_STORY_DEFAULT_VIEWPORT_EVENT_ID = exports.CONFIGURE_VIEWPORT_EVENT_ID = exports.UPDATE_VIEWPORT_EVENT_ID = exports.PANEL_ID = exports.ADDON_ID = void 0; | ||
| var ADDON_ID = 'storybook-addon-viewport'; | ||
| exports.ADDON_ID = ADDON_ID; | ||
| var PANEL_ID = "".concat(ADDON_ID, "/addon-panel"); | ||
| exports.PANEL_ID = PANEL_ID; | ||
| var UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update'; | ||
| exports.UPDATE_VIEWPORT_EVENT_ID = UPDATE_VIEWPORT_EVENT_ID; | ||
| var CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure'; | ||
| exports.CONFIGURE_VIEWPORT_EVENT_ID = CONFIGURE_VIEWPORT_EVENT_ID; | ||
| var SET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:setStoryDefaultViewport'; | ||
| exports.SET_STORY_DEFAULT_VIEWPORT_EVENT_ID = SET_STORY_DEFAULT_VIEWPORT_EVENT_ID; | ||
| var VIEWPORT_CHANGED_EVENT_ID = 'addon:viewport:viewportChanged'; | ||
| exports.VIEWPORT_CHANGED_EVENT_ID = VIEWPORT_CHANGED_EVENT_ID; | ||
| var INITIAL_VIEWPORTS = { | ||
| export var ADDON_ID = 'storybook-addon-viewport'; | ||
| export var PANEL_ID = "".concat(ADDON_ID, "/addon-panel"); | ||
| export var UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update'; | ||
| export var CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure'; | ||
| export var SET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:setStoryDefaultViewport'; | ||
| export var VIEWPORT_CHANGED_EVENT_ID = 'addon:viewport:viewportChanged'; | ||
| export var INITIAL_VIEWPORTS = { | ||
| responsive: { | ||
@@ -160,4 +148,2 @@ name: 'Responsive', | ||
| }; | ||
| exports.INITIAL_VIEWPORTS = INITIAL_VIEWPORTS; | ||
| var DEFAULT_VIEWPORT = 'responsive'; | ||
| exports.DEFAULT_VIEWPORT = DEFAULT_VIEWPORT; | ||
| export var DEFAULT_VIEWPORT = 'responsive'; |
| { | ||
| "name": "@storybook/addon-viewport", | ||
| "version": "4.1.0-alpha.10", | ||
| "version": "4.1.0-alpha.11", | ||
| "description": "Storybook addon to change the viewport size to mobile", | ||
@@ -10,5 +10,2 @@ "keywords": [ | ||
| "homepage": "https://github.com/storybooks/storybook/tree/master/addons/viewport", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "bugs": { | ||
@@ -28,5 +25,5 @@ "url": "https://github.com/storybooks/storybook/issues" | ||
| "@emotion/styled": "^0.10.6", | ||
| "@storybook/addons": "4.1.0-alpha.10", | ||
| "@storybook/components": "4.1.0-alpha.10", | ||
| "@storybook/core-events": "4.1.0-alpha.10", | ||
| "@storybook/addons": "4.1.0-alpha.11", | ||
| "@storybook/components": "4.1.0-alpha.11", | ||
| "@storybook/core-events": "4.1.0-alpha.11", | ||
| "global": "^4.3.2", | ||
@@ -39,3 +36,6 @@ "prop-types": "^15.6.2", | ||
| }, | ||
| "gitHead": "3cd3ae347e7bc1edbf70fcc8dfb4959430dc9bed" | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "gitHead": "1e9e66bd9d89584aa39470e20e49d176962ef082" | ||
| } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.23%
266197
Worsened metrics
- Lines of code
- decreased by-2.16%
1813
- Published versions last week
- decreased by-10%
9
Dependency changes
+ Added@storybook/addons@4.1.0-alpha.11(transitive)
+ Added@storybook/channels@4.1.0-alpha.11(transitive)
+ Added@storybook/components@4.1.0-alpha.11(transitive)
+ Added@storybook/core-events@4.1.0-alpha.11(transitive)
- Removed@storybook/addons@4.1.0-alpha.10(transitive)
- Removed@storybook/channels@4.1.0-alpha.10(transitive)
- Removed@storybook/components@4.1.0-alpha.10(transitive)
- Removed@storybook/core-events@4.1.0-alpha.10(transitive)