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

Design token storybook addon

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useEffect, useState } from 'react';
import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
import { BottomBarIcon, CircleHollowIcon, CircleIcon, CrossIcon, MirrorIcon, SidebarIcon } from '@storybook/icons';
import { useGlobals, useParameter } from '@storybook/manager-api';
import { TOOL_ID } from './constants';
var themeOptions = [{
  id: 'auto',
  title: 'Same as system',
  icon: /*#__PURE__*/React.createElement(MirrorIcon, null)
}, {
  id: 'light',
  title: 'Light theme',
  icon: /*#__PURE__*/React.createElement(CircleHollowIcon, null)
}, {
  id: 'dark',
  title: 'Dark theme',
  icon: /*#__PURE__*/React.createElement(CircleIcon, null)
}, {
  id: 'split',
  title: 'Side by side',
  icon: /*#__PURE__*/React.createElement(SidebarIcon, null)
}, {
  id: 'stack',
  title: 'Stacked',
  icon: /*#__PURE__*/React.createElement(BottomBarIcon, null)
}, {
  id: 'none',
  title: 'Disable (Unsafe)',
  icon: /*#__PURE__*/React.createElement(CrossIcon, null)
}];

/**
 * __Tool__
 *
 * ADS Toolbar UI, visible in the topbar of the storybook UI.
 */
var Tool = function Tool() {
  var _themeOptions$find;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isVisible = _useState2[0],
    setIsVisible = _useState2[1];
  var _useGlobals = useGlobals(),
    _useGlobals2 = _slicedToArray(_useGlobals, 2),
    originalAdsTheme = _useGlobals2[0].adsTheme,
    updateGlobals = _useGlobals2[1];
  var adsTheme = useParameter('adsTheme', originalAdsTheme || 'auto');
  useEffect(function () {
    updateGlobals({
      adsTheme: adsTheme
    });
  }, [adsTheme, updateGlobals]);
  var setTheme = useCallback(function (theme) {
    return updateGlobals({
      adsTheme: theme
    });
  }, [updateGlobals]);
  return /*#__PURE__*/React.createElement(WithTooltip, {
    placement: "top",
    trigger: "click"
    // closeOnClick
    ,
    onVisibleChange: setIsVisible,
    tooltip: function tooltip(_ref) {
      var onHide = _ref.onHide;
      return /*#__PURE__*/React.createElement(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.createElement(IconButton, {
    key: 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'));
};
export default Tool;