@atlaskit/storybook-addon-design-system/dist/cjs/tool.js

Design token storybook addon

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _components = require("@storybook/components");
var _icons = require("@storybook/icons");
var _managerApi = require("@storybook/manager-api");
var _constants = require("./constants");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var themeOptions = [{
  id: 'auto',
  title: 'Same as system',
  icon: /*#__PURE__*/_react.default.createElement(_icons.MirrorIcon, null)
}, {
  id: 'light',
  title: 'Light theme',
  icon: /*#__PURE__*/_react.default.createElement(_icons.CircleHollowIcon, null)
}, {
  id: 'dark',
  title: 'Dark theme',
  icon: /*#__PURE__*/_react.default.createElement(_icons.CircleIcon, null)
}, {
  id: 'split',
  title: 'Side by side',
  icon: /*#__PURE__*/_react.default.createElement(_icons.SidebarIcon, null)
}, {
  id: 'stack',
  title: 'Stacked',
  icon: /*#__PURE__*/_react.default.createElement(_icons.BottomBarIcon, null)
}, {
  id: 'none',
  title: 'Disable (Unsafe)',
  icon: /*#__PURE__*/_react.default.createElement(_icons.CrossIcon, null)
}];

/**
 * __Tool__
 *
 * ADS Toolbar UI, visible in the topbar of the storybook UI.
 */
var Tool = function Tool() {
  var _themeOptions$find;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isVisible = _useState2[0],
    setIsVisible = _useState2[1];
  var _useGlobals = (0, _managerApi.useGlobals)(),
    _useGlobals2 = (0, _slicedToArray2.default)(_useGlobals, 2),
    originalAdsTheme = _useGlobals2[0].adsTheme,
    updateGlobals = _useGlobals2[1];
  var adsTheme = (0, _managerApi.useParameter)('adsTheme', originalAdsTheme || 'auto');
  (0, _react.useEffect)(function () {
    updateGlobals({
      adsTheme: adsTheme
    });
  }, [adsTheme, updateGlobals]);
  var setTheme = (0, _react.useCallback)(function (theme) {
    return updateGlobals({
      adsTheme: theme
    });
  }, [updateGlobals]);
  return /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
    placement: "top",
    trigger: "click"
    // closeOnClick
    ,
    onVisibleChange: setIsVisible,
    tooltip: function tooltip(_ref) {
      var onHide = _ref.onHide;
      return /*#__PURE__*/_react.default.createElement(_components.TooltipLinkList, {
        links: themeOptions.map(function (_ref2) {
          var id = _ref2.id,
            title = _ref2.title,
            icon = _ref2.icon;
          return {
            id: id,
            title: title,
            active: adsTheme === id,
            icon: icon,
            onClick: function onClick() {
              setTheme(id);
              onHide();
            }
          };
        })
      });
    }
  }, /*#__PURE__*/_react.default.createElement(_components.IconButton, {
    key: _constants.TOOL_ID,
    active: isVisible,
    title: "Apply ADS themes to your story"
  }, (_themeOptions$find = themeOptions.find(function (_ref3) {
    var id = _ref3.id;
    return adsTheme === id;
  })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon, '\xa0ADS Theme'));
};
var _default = exports.default = Tool;