@atlaskit/storybook-addon-design-system/dist/esm/decorator.js

Design token storybook addon

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { Fragment } from 'react';
import { useEffect } from '@storybook/preview-api';
import { setGlobalTheme } from '@atlaskit/tokens/set-global-theme';
var splitColumnStyles = {
  position: 'absolute',
  boxSizing: 'border-box',
  width: '50vw',
  height: '100vh',
  overflow: 'auto',
  padding: '10px',
  background: "var(--ds-surface, #FFFFFF)",
  color: "var(--ds-text, #292A2E)"
};
var stackColumnStyles = {
  position: 'absolute',
  boxSizing: 'border-box',
  width: '100%',
  height: '50%',
  overflow: 'auto',
  padding: '10px',
  background: "var(--ds-surface, #FFFFFF)",
  color: "var(--ds-text, #292A2E)"
};
var withDesignTokens = function withDesignTokens(StoryFn, context) {
  var theme = context.globals.adsTheme || 'auto';

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(function () {
    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _t;
      return _regeneratorRuntime.wrap(function (_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _t = theme;
            _context.next = _t === 'light' ? 1 : _t === 'dark' ? 1 : _t === 'auto' ? 1 : _t === 'split' ? 3 : _t === 'stack' ? 3 : _t === 'none' ? 5 : 6;
            break;
          case 1:
            _context.next = 2;
            return setGlobalTheme({
              colorMode: theme,
              spacing: 'spacing',
              shape: 'shape',
              typography: 'typography',
              motion: 'motion'
            });
          case 2:
            return _context.abrupt("continue", 7);
          case 3:
            _context.next = 4;
            return setGlobalTheme({
              colorMode: 'auto',
              spacing: 'spacing',
              shape: 'shape',
              typography: 'typography',
              motion: 'motion'
            });
          case 4:
            document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
              var clone = el.cloneNode(true);
              clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
              // HACK: re-target theme selectors to split div containers
              clone.textContent = clone.textContent.replace(/html\[/g, '[');
              document.head.append(clone);
            });
            return _context.abrupt("continue", 7);
          case 5:
            delete document.documentElement.dataset.theme;
            delete document.documentElement.dataset.colorMode;
            document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
              return el.remove();
            });
            return _context.abrupt("continue", 7);
          case 6:
            return _context.abrupt("continue", 7);
          case 7:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }))();
  }, [context.id, theme]);
  function renderStory() {
    var story = StoryFn(_objectSpread(_objectSpread({}, context), {}, {
      globals: _objectSpread(_objectSpread({}, context.globals), {}, {
        adsTheme: theme
      })
    }));
    if (theme === 'split' || theme === 'stack') {
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
        "data-theme": "light:light",
        "data-color-mode": "light"
        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
        ,
        style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
          inset: '0px 50vw 0px 0px'
        }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
          inset: '0px 0px 50% 0px'
        })
      }, story), /*#__PURE__*/React.createElement("div", {
        "data-theme": "dark:dark",
        "data-color-mode": "dark"
        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
        ,
        style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
          inset: '0px 0px 0px 50vw'
        }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
          inset: '50% 0px 0px 0px'
        })
      }, story));
    }
    return /*#__PURE__*/React.createElement("div", null, story);
  }
  return renderStory();
};
export default withDesignTokens;