flare-storybook-addon-data-theme-switcher/dist/preview.cjs.map

A Storybook addon to switch the data-theme attribute on the html element

{"version":3,"sources":["../src/withGlobals.ts","../src/constants.ts","../src/preset/preview.ts"],"names":["useEffect","useGlobals","ADDON_ID","TOOL_ID","PARAM_KEY","withGlobals","StoryFn","globals","updateGlobals","dataTheme","dataAttribute","preview","preview_default"],"mappings":"AACA,OAAS,aAAAA,EAAW,cAAAC,MAAkB,yBCD/B,IAAMC,EAAW,sCACXC,EAAU,GAAGD,CAAQ,QACrBE,EAAY,YDOlB,IAAMC,EAAeC,GAAqC,CAC/D,GAAM,CAACC,EAASC,CAAa,EAAIP,EAAW,EACtCQ,EAAYF,EAAQH,CAAS,EAC7BM,EAAgBH,EAAQ,WAAW,eAAiB,aAC1D,OAAAP,EAAU,IAAM,CACVS,IAAc,QAChB,SAAS,gBAAgB,gBAAgBC,CAAa,EACtD,OAAO,aAAa,WAAWA,CAAa,IAE5C,SAAS,gBAAgB,aAAaA,EAAeD,CAAS,EAC9D,OAAO,aAAa,QAAQC,EAAeD,CAAS,EAExD,EAAG,CAACA,EAAWD,EAAeE,CAAa,CAAC,EAErCJ,EAAQ,CACjB,EELA,IAAMK,EAAwC,CAC5C,WAAY,CAACN,CAAW,EACxB,YAAa,CACX,UAAW,CACT,aAAc,MAChB,CACF,CACF,EAEOO,EAAQD","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { useEffect, useGlobals } from \"@storybook/preview-api\";\nimport type {\n  Renderer,\n  PartialStoryFn as StoryFunction,\n} from \"@storybook/types\";\n\nimport { PARAM_KEY } from \"@/constants\";\n\nexport const withGlobals = (StoryFn: StoryFunction<Renderer>) => {\n  const [globals, updateGlobals] = useGlobals();\n  const dataTheme = globals[PARAM_KEY];\n  const dataAttribute = globals.dataThemes.dataAttribute || \"data-theme\";\n  useEffect(() => {\n    if (dataTheme === \"none\") {\n      document.documentElement.removeAttribute(dataAttribute);\n      window.localStorage.removeItem(dataAttribute);\n    } else {\n      document.documentElement.setAttribute(dataAttribute, dataTheme);\n      window.localStorage.setItem(dataAttribute, dataTheme);\n    }\n  }, [dataTheme, updateGlobals, dataAttribute]);\n\n  return StoryFn();\n};\n","export const ADDON_ID = \"storybook/addon-data-theme-switcher\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = \"dataTheme\";\n","/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\nimport type { ProjectAnnotations, Renderer } from \"@storybook/types\";\n\nimport { withGlobals } from \"@/withGlobals\";\n\n/**\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\n */\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withGlobals],\n  globalTypes: {\n    dataTheme: {\n      defaultValue: \"none\",\n    },\n  },\n};\n\nexport default preview;\n"]}