storybook-addon-rem/dist/esm/Tool.js

A storybook addon which helps you to test how your REM sized components behave.

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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) 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; }
import { useParameter } from '@storybook/api';
import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { DOCS_RENDERED } from '@storybook/core-events';
import React, { useEffect } from 'react';
import { ADDON_ID, ON_REM_UPDATE } from './constants';
import Rem from './icons/Rem';

/**
 * Update the preview iframe class
 */

var updatePreview = function updatePreview() {
  var _iframe$contentWindow;
  var iframe = document.getElementById('storybook-preview-iframe');
  if (!iframe) return;
  var iframeDocument = iframe.contentDocument || ((_iframe$contentWindow = iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : _iframe$contentWindow.document);
  var root = iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.querySelector(':root');
  if (!root) return;
  var style = window.getComputedStyle(root, null).getPropertyValue('font-size');

  // const fontSize = parseFloat(style);
  // root.style.fontSize = `${ fontSize - 2 }px`;
  if (state.fontSize !== null) {
    root.style.fontSize = "".concat(state.fontSize, "px");
  } else {
    root.style.fontSize = "";
  }

  // Remove rem padding from iframe body

  var body = root.querySelector('.sb-main-padded');
  if (body && !state.canvasRemPadding) body.style.padding = "16px";

  // Remove rem padding from docs wrapper

  var sbDocsWrapper = root.querySelector('.sbdocs-wrapper');
  if (sbDocsWrapper && !state.docsRemPadding) {
    sbDocsWrapper.style.paddingTop = "64px";
    sbDocsWrapper.style.paddingBottom = "64px";
  }
};
var createList = function createList(onCallback, state) {
  var resetLink = {
    active: false,
    id: "rem-reset",
    onClick: function onClick() {
      state.fontSize = null;
      onCallback();
    },
    right: "",
    title: "Reset"
  };
  return [resetLink].concat(_toConsumableArray(state.sizes.map(function (size) {
    return {
      id: "rem-".concat(size.value),
      title: /*#__PURE__*/React.createElement("div", null, size.title),
      right: /*#__PURE__*/React.createElement("div", null, size.value, "px"),
      active: state.fontSize === size.value,
      onClick: function onClick() {
        state.fontSize = size.value;
        onCallback();
      }
    };
  })));
};
var state = {
  canvasRemPadding: false,
  docsRemPadding: false,
  fontSize: 16,
  sizes: [{
    value: 8,
    title: 'Extra Small'
  }, {
    value: 12,
    title: 'Small'
  }, {
    value: 16,
    title: 'Default'
  }, {
    value: 24,
    title: 'Large'
  }, {
    value: 48,
    title: 'Extra Large'
  }]
};
var defaultParams = {
  canvasRemPadding: false,
  docsRemPadding: false,
  sizes: []
};
var Tool = function Tool(_ref) {
  var api = _ref.api;
  var params = useParameter('rem', defaultParams);
  state.canvasRemPadding = params.canvasRemPadding ? true : false;
  state.docsRemPadding = params.docsRemPadding ? true : false;
  state.sizes = Array.isArray(params.sizes) && params.sizes.length ? params.sizes : state.sizes;
  state.sizes = state.sizes.filter(function (size) {
    return size.title && size.value;
  });
  if (!state.sizes.length) throw new Error("No or wrong sizes provided as parameter in ".concat(ADDON_ID, "."));
  state.fontSize = Array.isArray(params.sizes) && params.sizes.length ? params.sizes[Math.round((params.sizes.length - 1) / 2)].value : 16;
  var channel = api.getChannel();
  useEffect(function () {
    channel.addListener(DOCS_RENDERED, updatePreview);
    return function () {
      channel.removeListener(DOCS_RENDERED, updatePreview);
    };
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithTooltip, {
    placement: "top",
    trigger: "click",
    tooltip: function tooltip(_ref2) {
      var onHide = _ref2.onHide;
      var list = createList(function () {
        onHide();
        updatePreview();
        channel.emit(ON_REM_UPDATE, state.sizes.find(function (size) {
          return size.value === state.fontSize;
        }));
      }, state);
      return /*#__PURE__*/React.createElement(TooltipLinkList, {
        links: list
      });
    },
    closeOnClick: true
  }, /*#__PURE__*/React.createElement(IconButton, {
    title: "Change root font size"
  }, /*#__PURE__*/React.createElement(Rem, null))));
};
export default Tool;