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/constants.ts","../src/withGlobals.ts","../src/preset/preview.ts"],"names":["DATA_THEME_KEY","DATA_THEMES_KEY","withGlobals","StoryFn","globals","updateGlobals","useGlobals","dataTheme","dataAttribute","useEffect","preview","preview_default"],"mappings":"6DAAO,IAEMA,EAAiB,WACjBC,CAAAA,CAAAA,CAAkB,aCMxB,IAAMC,CAAAA,CAAeC,GAAqC,CAC/D,GAAM,CAACC,CAAAA,CAASC,CAAa,CAAIC,CAAAA,qBAAAA,GAE3BC,CAAYH,CAAAA,CAAAA,CAAQJ,CAAc,CAClCQ,CAAAA,CAAAA,CAAgBJ,EAAQH,CAAe,CAAA,CAAE,eAAiB,YAEhE,CAAA,OAAAQ,qBAAU,IAAM,CACVF,IAAc,MAChB,EAAA,QAAA,CAAS,eAAgB,CAAA,eAAA,CAAgBC,CAAa,CACtD,CAAA,MAAA,CAAO,aAAa,UAAWA,CAAAA,CAAa,IAE5C,QAAS,CAAA,eAAA,CAAgB,aAAaA,CAAeD,CAAAA,CAAS,EAC9D,MAAO,CAAA,YAAA,CAAa,QAAQC,CAAeD,CAAAA,CAAS,GAExD,CAAG,CAAA,CAACC,CAAeD,CAAAA,CAAAA,CAAWF,CAAa,CAAC,CAAA,CAErCF,GACT,CAAA,KCPMO,CAAwC,CAAA,CAC5C,WAAY,CAACR,CAAW,EACxB,cAAgB,CAAA,CACd,UAAW,MACb,CACF,EAEOS,CAAQD,CAAAA","file":"preview.cjs","sourcesContent":["export const ADDON_ID = \"storybook/addon-data-theme-switcher\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const DATA_THEME_KEY = \"dataTheme\";\nexport const DATA_THEMES_KEY = \"dataThemes\";\n","/* 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/internal/types\";\n\nimport { DATA_THEME_KEY, DATA_THEMES_KEY } from \"@/constants\";\n\nexport const withGlobals = (StoryFn: StoryFunction<Renderer>) => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const dataTheme = globals[DATA_THEME_KEY];\n  const dataAttribute = globals[DATA_THEMES_KEY].dataAttribute || \"data-theme\";\n\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  }, [dataAttribute, dataTheme, updateGlobals]);\n\n  return StoryFn();\n};\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/internal/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  initialGlobals: {\n    dataTheme: \"none\",\n  },\n};\n\nexport default preview;\n"]}