{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/ThemeSwitcher.tsx","../src/helpers.ts"],"names":["addons","types","ADDON_ID","TOOL_ID","React","useEffect","useState","useGlobals","useStorybookApi","WithTooltip","TooltipLinkList","loadStylesheet","href","storybookIFrameElement","link","removeCurrentStylesheet","stylesheetElements","element","changeStylesheet","currentHref","previousHref","PaintBrushIcon","getTooltipLinks","themes","setTheme","close","i","getTheme","stylesheets","themeID","id","getInitialTheme","themeParam","_","theme","ThemeSwitcher","api","updateGlobals","selectedThemeID","setSelectedThemeID","prevThemeHref","setPrevThemeHref","prevThemeID","url","onHide","viewMode"],"mappings":"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","sourcesContent":["import { addons, types } from \"@storybook/manager-api\";\nimport { ADDON_ID, TOOL_ID } from \"./constants\";\nimport { ThemeSwitcher } from \"./ThemeSwitcher\";\n\naddons.register(ADDON_ID, () => {\n  addons.add(TOOL_ID, {\n    type: types.TOOL,\n    title: \"Theme switcher\",\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: ThemeSwitcher,\n  });\n});\n","export const ADDON_ID = \"storybook/theme-switch-addon\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = \"theme\";\n","import React, { useEffect, useState } from \"react\";\nimport { useGlobals, useStorybookApi } from \"@storybook/manager-api\";\nimport { WithTooltip, TooltipLinkList } from \"@storybook/components\";\nimport { changeStylesheet } from \"./helpers\";\nimport { GlobalTypes, Theme } from \"./preview\";\nimport { PaintBrushIcon } from \"@storybook/icons\";\n\ntype ThemeID = Theme[\"id\"];\n\nconst getTooltipLinks = (\n  themes: any[], // Link interface not accessible\n  setTheme: (id: ThemeID) => void,\n  close: () => void\n) => {\n  return themes.map((i) => ({\n    ...i,\n    onClick: () => {\n      setTheme(i.id);\n      close();\n    },\n  }));\n};\n\nconst getTheme = (\n  stylesheets: GlobalTypes[\"stylesheets\"],\n  themeID: ThemeID\n) => {\n  const { themes } = stylesheets;\n  const selectedTheme = themes.find(({ id }) => id === themeID);\n  return selectedTheme || themes[0];\n};\n\nconst getInitialTheme = () => {\n  const themeParam = new URLSearchParams(window.location.href).get(\"globals\");\n  if (themeParam) {\n    const [_, theme] = themeParam.split(\":\");\n    return theme;\n  }\n};\n\nexport const ThemeSwitcher = () => {\n  const api = useStorybookApi();\n  const [_, updateGlobals] = useGlobals();\n  const [selectedThemeID, setSelectedThemeID] = useState(getInitialTheme);\n  const [prevThemeHref, setPrevThemeHref] = useState<Theme[\"url\"]>();\n\n  const { stylesheets } = api.getGlobalTypes() as GlobalTypes;\n\n  useEffect(() => {\n    if (stylesheets) {\n      const { url: currentHref, id } = getTheme(stylesheets, selectedThemeID);\n      changeStylesheet(currentHref, prevThemeHref);\n      updateGlobals({ theme: id });\n    }\n  }, [selectedThemeID]);\n\n  useEffect(() => {\n    if (stylesheets) {\n      const { url: currentHref } = getTheme(stylesheets, selectedThemeID);\n      changeStylesheet(currentHref, prevThemeHref);\n    }\n  }, [stylesheets]);\n\n  const setTheme = (id: ThemeID) => {\n    if (id !== selectedThemeID) {\n      setSelectedThemeID((prevThemeID) => {\n        const { url } = getTheme(stylesheets, prevThemeID);\n        setPrevThemeHref(url);\n        return id;\n      });\n    }\n  };\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      trigger=\"click\"\n      tooltip={({ onHide }: any) => {\n        if (stylesheets) {\n          const { themes } = stylesheets;\n          return (\n            <TooltipLinkList\n              links={getTooltipLinks(themes, setTheme, onHide)}\n            />\n          );\n        }\n      }}\n    >\n      <PaintBrushIcon />\n    </WithTooltip>\n  );\n};\n","const loadStylesheet = (href: string) => {\n  if (typeof window !== \"undefined\") {\n    const storybookIFrameElement = document.querySelector(\n      \"#storybook-preview-iframe\"\n    ) as HTMLIFrameElement;\n\n    const link = document.createElement(\"link\");\n\n    link.setAttribute(\"rel\", \"stylesheet\");\n    link.setAttribute(\"type\", \"text/css\");\n    link.setAttribute(\"href\", href);\n\n    const storybookHead =\n      storybookIFrameElement.contentDocument.querySelector(\"head\");\n\n    storybookHead.appendChild(link);\n  }\n};\n\nconst removeCurrentStylesheet = (href: string) => {\n  if (typeof window !== \"undefined\") {\n    const storybookIFrameElement = document.querySelector(\n      \"#storybook-preview-iframe\"\n    ) as HTMLIFrameElement;\n\n    const stylesheetElements =\n      storybookIFrameElement.contentDocument.querySelectorAll(\n        `head link[href='${href}']`\n      );\n\n    if (stylesheetElements) {\n      stylesheetElements.forEach((element) => {\n        element.remove();\n      });\n    }\n  }\n};\n\nexport const changeStylesheet = (currentHref: string, previousHref: string) => {\n  removeCurrentStylesheet(previousHref);\n  loadStylesheet(currentHref);\n};\n"]}