storybook-react-live-decorator/lib/index.js

react-live decorator for Storybook 6+ | renders story as react-live with given code

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ReactLiveDecorator = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactLive = require("react-live");
var _prismReactRenderer = require("prism-react-renderer");
var _excluded = ["code", "scope", "fontFamily", "theme", "debug", "errorPosition"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 ReactLiveDecorator = function ReactLiveDecorator(_ref) {
  var code = _ref.code,
    scope = _ref.scope,
    _ref$fontFamily = _ref.fontFamily,
    fontFamily = _ref$fontFamily === void 0 ? 'monospace' : _ref$fontFamily,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? _prismReactRenderer.themes.nightOwl : _ref$theme,
    debug = _ref.debug,
    _ref$errorPosition = _ref.errorPosition,
    errorPosition = _ref$errorPosition === void 0 ? 'top' : _ref$errorPosition,
    rest = _objectWithoutProperties(_ref, _excluded);
  return function (story, context) {
    var _context$parameters, _context$parameters2, _context$parameters3, _context$parameters4, _context$parameters5, _context$parameters6;
    if (context !== null && context !== void 0 && (_context$parameters = context.parameters) !== null && _context$parameters !== void 0 && (_context$parameters = _context$parameters.reactLive) !== null && _context$parameters !== void 0 && _context$parameters.debug) {
      // eslint-disable-next-line no-console
      console.log("%c \u03BB ReactLiveDecorator log for: \"".concat(context.name, "\" story "), 'background: salmon; font-size: 14px; color: #555; font-weight: 700', {
        code: code,
        scope: scope,
        story: story,
        context: context
      });
    }
    return /*#__PURE__*/_react["default"].createElement(_reactLive.LiveProvider, _extends({
      code: code,
      scope: scope || (context === null || context === void 0 || (_context$parameters2 = context.parameters) === null || _context$parameters2 === void 0 || (_context$parameters2 = _context$parameters2.reactLive) === null || _context$parameters2 === void 0 ? void 0 : _context$parameters2.scope),
      theme: theme || (context === null || context === void 0 || (_context$parameters3 = context.parameters) === null || _context$parameters3 === void 0 || (_context$parameters3 = _context$parameters3.reactLive) === null || _context$parameters3 === void 0 ? void 0 : _context$parameters3.theme)
    }, rest), /*#__PURE__*/_react["default"].createElement(_reactLive.LivePreview, null), errorPosition === 'top' || (context === null || context === void 0 || (_context$parameters4 = context.parameters) === null || _context$parameters4 === void 0 || (_context$parameters4 = _context$parameters4.reactLive) === null || _context$parameters4 === void 0 ? void 0 : _context$parameters4.errorPosition) === 'top' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactLive.LiveError, null), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        fontFamily: fontFamily || (context === null || context === void 0 || (_context$parameters5 = context.parameters) === null || _context$parameters5 === void 0 || (_context$parameters5 = _context$parameters5.reactLive) === null || _context$parameters5 === void 0 ? void 0 : _context$parameters5.fontFamily)
      }
    }, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactLive.LiveEditor, null)), errorPosition === 'bottom' || (context === null || context === void 0 || (_context$parameters6 = context.parameters) === null || _context$parameters6 === void 0 || (_context$parameters6 = _context$parameters6.reactLive) === null || _context$parameters6 === void 0 ? void 0 : _context$parameters6.errorPosition) === 'bottom' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactLive.LiveError, null)));
  };
};
exports.ReactLiveDecorator = ReactLiveDecorator;