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

Design token storybook addon

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';
const 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.
 */
const Tool = () => {
  var _themeOptions$find;
  const [isVisible, setIsVisible] = useState(false);
  const [{
    adsTheme: originalAdsTheme
  }, updateGlobals] = useGlobals();
  const adsTheme = useParameter('adsTheme', originalAdsTheme || 'auto');
  useEffect(() => {
    updateGlobals({
      adsTheme
    });
  }, [adsTheme, updateGlobals]);
  const setTheme = useCallback(theme => updateGlobals({
    adsTheme: theme
  }), [updateGlobals]);
  return /*#__PURE__*/React.createElement(WithTooltip, {
    placement: "top",
    trigger: "click"
    // closeOnClick
    ,
    onVisibleChange: setIsVisible,
    tooltip: ({
      onHide
    }) => /*#__PURE__*/React.createElement(TooltipLinkList, {
      links: themeOptions.map(({
        id,
        title,
        icon
      }) => ({
        id,
        title,
        active: adsTheme === id,
        icon: icon,
        onClick: () => {
          setTheme(id);
          onHide();
        }
      }))
    })
  }, /*#__PURE__*/React.createElement(IconButton, {
    key: TOOL_ID,
    active: isVisible,
    title: "Apply ADS themes to your story"
  }, (_themeOptions$find = themeOptions.find(({
    id
  }) => adsTheme === id)) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon, '\xa0ADS Theme'));
};
export default Tool;