@storybook/addon-backgrounds 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/cjs/components/ColorIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorIcon = void 0;
+
+var _theming = require("@storybook/theming");
+
+var ColorIcon = _theming.styled.span(function (_ref) {
+  var background = _ref.background;
+  return {
+    borderRadius: '1rem',
+    display: 'block',
+    height: '1rem',
+    width: '1rem',
+    background: background
+  };
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset")
+  };
+});
+
+exports.ColorIcon = ColorIcon;

package/dist/cjs/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EVENTS = exports.GRID_PARAM_KEY = exports.PARAM_KEY = exports.ADDON_ID = void 0;
+var ADDON_ID = 'storybook/background';
+exports.ADDON_ID = ADDON_ID;
+var PARAM_KEY = 'backgrounds';
+exports.PARAM_KEY = PARAM_KEY;
+var GRID_PARAM_KEY = 'grid';
+exports.GRID_PARAM_KEY = GRID_PARAM_KEY;
+var EVENTS = {
+  UPDATE: "".concat(ADDON_ID, "/update")
+};
+exports.EVENTS = EVENTS;

package/dist/cjs/containers/BackgroundSelector.js

@@ -0,0 +1,174 @@
+"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.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BackgroundSelector = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _memoizerific = _interopRequireDefault(require("memoizerific"));
+
+var _api = require("@storybook/api");
+
+var _clientLogger = require("@storybook/client-logger");
+
+var _components = require("@storybook/components");
+
+var _constants = require("../constants");
+
+var _ColorIcon = require("../components/ColorIcon");
+
+var _helpers = require("../helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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; }
+
+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."); }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; 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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var createBackgroundSelectorItem = (0, _memoizerific.default)(1000)(function (id, name, value, hasSwatch, change, active) {
+  return {
+    id: id || name,
+    title: name,
+    onClick: function onClick() {
+      change({
+        selected: value,
+        name: name
+      });
+    },
+    value: value,
+    right: hasSwatch ? /*#__PURE__*/_react.default.createElement(_ColorIcon.ColorIcon, {
+      background: value
+    }) : undefined,
+    active: active
+  };
+});
+var getDisplayedItems = (0, _memoizerific.default)(10)(function (backgrounds, selectedBackgroundColor, change) {
+  var backgroundSelectorItems = backgrounds.map(function (_ref) {
+    var name = _ref.name,
+        value = _ref.value;
+    return createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor);
+  });
+
+  if (selectedBackgroundColor !== 'transparent') {
+    return [createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false)].concat(_toConsumableArray(backgroundSelectorItems));
+  }
+
+  return backgroundSelectorItems;
+});
+var DEFAULT_BACKGROUNDS_CONFIG = {
+  default: null,
+  disable: true,
+  values: []
+};
+var BackgroundSelector = /*#__PURE__*/(0, _react.memo)(function () {
+  var _globals$BACKGROUNDS_;
+
+  var backgroundsConfig = (0, _api.useParameter)(_constants.PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
+
+  var _useGlobals = (0, _api.useGlobals)(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 2),
+      globals = _useGlobals2[0],
+      updateGlobals = _useGlobals2[1];
+
+  var globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
+  var selectedBackgroundColor = (0, _react.useMemo)(function () {
+    return (0, _helpers.getBackgroundColorByName)(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
+  }, [backgroundsConfig, globalsBackgroundColor]);
+
+  if (Array.isArray(backgroundsConfig)) {
+    _clientLogger.logger.warn('Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md');
+  }
+
+  var onBackgroundChange = (0, _react.useCallback)(function (value) {
+    updateGlobals(_defineProperty({}, _constants.PARAM_KEY, Object.assign({}, globals[_constants.PARAM_KEY], {
+      value: value
+    })));
+  }, [backgroundsConfig, globals, updateGlobals]);
+
+  if (backgroundsConfig.disable) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
+    placement: "top",
+    trigger: "click",
+    closeOnClick: true,
+    tooltip: function tooltip(_ref2) {
+      var onHide = _ref2.onHide;
+      return /*#__PURE__*/_react.default.createElement(_components.TooltipLinkList, {
+        links: getDisplayedItems(backgroundsConfig.values, selectedBackgroundColor, function (_ref3) {
+          var selected = _ref3.selected;
+
+          if (selectedBackgroundColor !== selected) {
+            onBackgroundChange(selected);
+          }
+
+          onHide();
+        })
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_components.IconButton, {
+    key: "background",
+    title: "Change the background of the preview",
+    active: selectedBackgroundColor !== 'transparent'
+  }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
+    icon: "photo"
+  }))));
+});
+exports.BackgroundSelector = BackgroundSelector;

package/dist/cjs/containers/GridSelector.js

@@ -0,0 +1,95 @@
+"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.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.symbol.iterator.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.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridSelector = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _api = require("@storybook/api");
+
+var _components = require("@storybook/components");
+
+var _constants = require("../constants");
+
+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 _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; }
+
+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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; 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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var GridSelector = /*#__PURE__*/(0, _react.memo)(function () {
+  var _globals$BACKGROUNDS_;
+
+  var _useGlobals = (0, _api.useGlobals)(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 2),
+      globals = _useGlobals2[0],
+      updateGlobals = _useGlobals2[1];
+
+  var _useParameter = (0, _api.useParameter)(_constants.PARAM_KEY, {
+    grid: {
+      disable: false
+    }
+  }),
+      grid = _useParameter.grid;
+
+  if (grid !== null && grid !== void 0 && grid.disable) {
+    return null;
+  }
+
+  var isActive = ((_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) || false;
+  return /*#__PURE__*/_react.default.createElement(_components.IconButton, {
+    key: "background",
+    active: isActive,
+    title: "Apply a grid to the preview",
+    onClick: function onClick() {
+      return updateGlobals(_defineProperty({}, _constants.PARAM_KEY, Object.assign({}, globals[_constants.PARAM_KEY], {
+        grid: !isActive
+      })));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
+    icon: "grid"
+  }));
+});
+exports.GridSelector = GridSelector;

package/dist/cjs/decorators/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _withBackground = require("./withBackground");
+
+Object.keys(_withBackground).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _withBackground[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _withBackground[key];
+    }
+  });
+});
+
+var _withGrid = require("./withGrid");
+
+Object.keys(_withGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _withGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _withGrid[key];
+    }
+  });
+});

package/dist/cjs/decorators/withBackground.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withBackground = void 0;
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _addons = require("@storybook/addons");
+
+var _constants = require("../constants");
+
+var _helpers = require("../helpers");
+
+var withBackground = function withBackground(StoryFn, context) {
+  var _globals$BACKGROUNDS_;
+
+  var globals = context.globals,
+      parameters = context.parameters;
+  var globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
+  var backgroundsConfig = parameters[_constants.PARAM_KEY];
+  var selectedBackgroundColor = (0, _addons.useMemo)(function () {
+    if (backgroundsConfig.disable) {
+      return 'transparent';
+    }
+
+    return (0, _helpers.getBackgroundColorByName)(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
+  }, [backgroundsConfig, globalsBackgroundColor]);
+  var isActive = (0, _addons.useMemo)(function () {
+    return selectedBackgroundColor && selectedBackgroundColor !== 'transparent';
+  }, [selectedBackgroundColor]);
+  var selector = context.viewMode === 'docs' ? "#anchor--".concat(context.id, " .docs-story") : '.sb-show-main';
+  var backgroundStyles = (0, _addons.useMemo)(function () {
+    var transitionStyle = 'transition: background-color 0.3s;';
+    return "\n      ".concat(selector, " {\n        background: ").concat(selectedBackgroundColor, " !important;\n        ").concat((0, _helpers.isReduceMotionEnabled)() ? '' : transitionStyle, "\n      }\n    ");
+  }, [selectedBackgroundColor, selector]);
+  (0, _addons.useEffect)(function () {
+    var selectorId = context.viewMode === 'docs' ? "addon-backgrounds-docs-".concat(context.id) : "addon-backgrounds-color";
+
+    if (!isActive) {
+      (0, _helpers.clearStyles)(selectorId);
+      return;
+    }
+
+    (0, _helpers.addBackgroundStyle)(selectorId, backgroundStyles, context.viewMode === 'docs' ? context.id : null);
+  }, [isActive, backgroundStyles, context]);
+  return StoryFn();
+};
+
+exports.withBackground = withBackground;

package/dist/cjs/decorators/withGrid.js

@@ -0,0 +1,77 @@
+"use strict";
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.object.freeze.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withGrid = void 0;
+
+require("core-js/modules/es.array.join.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
+
+var _addons = require("@storybook/addons");
+
+var _helpers = require("../helpers");
+
+var _constants = require("../constants");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var deprecatedCellSizeWarning = (0, _utilDeprecate.default)(function () {}, (0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    Backgrounds Addon: The cell size parameter has been changed.\n\n    - parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize\n    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter\n  "]))));
+
+var withGrid = function withGrid(StoryFn, context) {
+  var _globals$BACKGROUNDS_, _parameters$grid, _gridParameters$offse, _gridParameters$offse2;
+
+  var globals = context.globals,
+      parameters = context.parameters;
+  var gridParameters = parameters[_constants.PARAM_KEY].grid;
+  var isActive = ((_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) === true && gridParameters.disable !== true;
+  var cellAmount = gridParameters.cellAmount,
+      cellSize = gridParameters.cellSize,
+      opacity = gridParameters.opacity;
+  var isInDocs = context.viewMode === 'docs';
+  var gridSize;
+
+  if ((_parameters$grid = parameters.grid) !== null && _parameters$grid !== void 0 && _parameters$grid.cellSize) {
+    gridSize = parameters.grid.cellSize;
+    deprecatedCellSizeWarning();
+  } else {
+    gridSize = cellSize;
+  }
+
+  var isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded'; // 16px offset in the grid to account for padded layout
+
+  var defaultOffset = isLayoutPadded ? 16 : 0;
+  var offsetX = (_gridParameters$offse = gridParameters.offsetX) !== null && _gridParameters$offse !== void 0 ? _gridParameters$offse : isInDocs ? 20 : defaultOffset;
+  var offsetY = (_gridParameters$offse2 = gridParameters.offsetY) !== null && _gridParameters$offse2 !== void 0 ? _gridParameters$offse2 : isInDocs ? 20 : defaultOffset;
+  var gridStyles = (0, _addons.useMemo)(function () {
+    var selector = context.viewMode === 'docs' ? "#anchor--".concat(context.id, " .docs-story") : '.sb-show-main';
+    var backgroundSize = ["".concat(gridSize * cellAmount, "px ").concat(gridSize * cellAmount, "px"), "".concat(gridSize * cellAmount, "px ").concat(gridSize * cellAmount, "px"), "".concat(gridSize, "px ").concat(gridSize, "px"), "".concat(gridSize, "px ").concat(gridSize, "px")].join(', ');
+    return "\n      ".concat(selector, " {\n        background-size: ").concat(backgroundSize, " !important;\n        background-position: ").concat(offsetX, "px ").concat(offsetY, "px, ").concat(offsetX, "px ").concat(offsetY, "px, ").concat(offsetX, "px ").concat(offsetY, "px, ").concat(offsetX, "px ").concat(offsetY, "px !important;\n        background-blend-mode: difference !important;\n        background-image: linear-gradient(rgba(130, 130, 130, ").concat(opacity, ") 1px, transparent 1px),\n         linear-gradient(90deg, rgba(130, 130, 130, ").concat(opacity, ") 1px, transparent 1px),\n         linear-gradient(rgba(130, 130, 130, ").concat(opacity / 2, ") 1px, transparent 1px),\n         linear-gradient(90deg, rgba(130, 130, 130, ").concat(opacity / 2, ") 1px, transparent 1px) !important;\n      }\n    ");
+  }, [gridSize]);
+  (0, _addons.useEffect)(function () {
+    var selectorId = context.viewMode === 'docs' ? "addon-backgrounds-grid-docs-".concat(context.id) : "addon-backgrounds-grid";
+
+    if (!isActive) {
+      (0, _helpers.clearStyles)(selectorId);
+      return;
+    }
+
+    (0, _helpers.addGridStyle)(selectorId, gridStyles);
+  }, [isActive, gridStyles, context]);
+  return StoryFn();
+};
+
+exports.withGrid = withGrid;

package/dist/cjs/helpers/index.js

@@ -0,0 +1,134 @@
+"use strict";
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.object.freeze.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addBackgroundStyle = exports.addGridStyle = exports.clearStyles = exports.getBackgroundColorByName = exports.isReduceMotionEnabled = void 0;
+
+require("core-js/modules/es.array.find.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.join.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+var _global = _interopRequireDefault(require("global"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _clientLogger = require("@storybook/client-logger");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var document = _global.default.document,
+    window = _global.default.window;
+
+var isReduceMotionEnabled = function isReduceMotionEnabled() {
+  var prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  return prefersReduceMotion.matches;
+};
+
+exports.isReduceMotionEnabled = isReduceMotionEnabled;
+
+var getBackgroundColorByName = function getBackgroundColorByName(currentSelectedValue) {
+  var backgrounds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var defaultName = arguments.length > 2 ? arguments[2] : undefined;
+
+  if (currentSelectedValue === 'transparent') {
+    return 'transparent';
+  }
+
+  if (backgrounds.find(function (background) {
+    return background.value === currentSelectedValue;
+  })) {
+    return currentSelectedValue;
+  }
+
+  var defaultBackground = backgrounds.find(function (background) {
+    return background.name === defaultName;
+  });
+
+  if (defaultBackground) {
+    return defaultBackground.value;
+  }
+
+  if (defaultName) {
+    var availableColors = backgrounds.map(function (background) {
+      return background.name;
+    }).join(', ');
+
+    _clientLogger.logger.warn((0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        Backgrounds Addon: could not find the default color \"", "\".\n        These are the available colors for your story based on your configuration:\n        ", ".\n      "])), defaultName, availableColors));
+  }
+
+  return 'transparent';
+};
+
+exports.getBackgroundColorByName = getBackgroundColorByName;
+
+var clearStyles = function clearStyles(selector) {
+  var selectors = Array.isArray(selector) ? selector : [selector];
+  selectors.forEach(clearStyle);
+};
+
+exports.clearStyles = clearStyles;
+
+var clearStyle = function clearStyle(selector) {
+  var element = document.getElementById(selector);
+
+  if (element) {
+    element.parentElement.removeChild(element);
+  }
+};
+
+var addGridStyle = function addGridStyle(selector, css) {
+  var existingStyle = document.getElementById(selector);
+
+  if (existingStyle) {
+    if (existingStyle.innerHTML !== css) {
+      existingStyle.innerHTML = css;
+    }
+  } else {
+    var style = document.createElement('style');
+    style.setAttribute('id', selector);
+    style.innerHTML = css;
+    document.head.appendChild(style);
+  }
+};
+
+exports.addGridStyle = addGridStyle;
+
+var addBackgroundStyle = function addBackgroundStyle(selector, css, storyId) {
+  var existingStyle = document.getElementById(selector);
+
+  if (existingStyle) {
+    if (existingStyle.innerHTML !== css) {
+      existingStyle.innerHTML = css;
+    }
+  } else {
+    var style = document.createElement('style');
+    style.setAttribute('id', selector);
+    style.innerHTML = css;
+    var gridStyleSelector = "addon-backgrounds-grid".concat(storyId ? "-docs-".concat(storyId) : ''); // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
+
+    var existingGridStyle = document.getElementById(gridStyleSelector);
+
+    if (existingGridStyle) {
+      existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
+    } else {
+      document.head.appendChild(style);
+    }
+  }
+};
+
+exports.addBackgroundStyle = addBackgroundStyle;

package/dist/cjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+} // make it work with --isolatedModules
+
+
+var _default = {};
+exports.default = _default;

package/dist/cjs/preset/addDecorator.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decorators = void 0;
+
+var _decorators = require("../decorators");
+
+var decorators = [_decorators.withGrid, _decorators.withBackground];
+exports.decorators = decorators;

package/dist/cjs/preset/addParameter.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parameters = void 0;
+var parameters = {
+  backgrounds: {
+    grid: {
+      cellSize: 20,
+      opacity: 0.5,
+      cellAmount: 5
+    },
+    values: [{
+      name: 'light',
+      value: '#F8F8F8'
+    }, {
+      name: 'dark',
+      value: '#333333'
+    }]
+  }
+};
+exports.parameters = parameters;