storybook-addon-valkyrie-theme/dist/preview.mjs.map

{"version":3,"sources":["../src/constants.ts","../src/withGlobals.ts","../src/preview.ts"],"names":["ADDON_ID","TOOL_ID","PARAM_KEY","EVENTS","useEffect","useGlobals","withGlobals","StoryFn","context","globals","state","theme","applyToolState","preview","preview_default"],"mappings":"AAAO,IAAMA,EAAW,8CACXC,EAAU,GAAGD,SACbE,EAAY,gBAEZC,EAAS,CACpB,OAAQ,GAAGH,WACX,QAAS,GAAGA,YACZ,MAAO,GAAGA,SACZ,ECHA,OAAS,aAAAI,EAAW,cAAAC,MAAkB,yBAG/B,IAAMC,EAAc,CACzBC,EACAC,IACG,CACH,GAAM,CAACC,CAAO,EAAIJ,EAAW,EACvBK,EAAQD,EAAQP,CAAS,EACzB,CAAE,MAAAS,CAAM,EAAIH,EAAQ,QAE1B,OAAAJ,EAAU,IAAM,CACdQ,EAAeF,CAAK,CACtB,EAAG,CAACA,EAAOC,CAAK,CAAC,EAEVJ,EAAQ,CACjB,EAEA,SAASK,EAAeF,EAAuB,CACzCA,EACF,SAAS,gBAAgB,QAAQ,aAAeA,EAEhD,OAAO,SAAS,gBAAgB,QAAQ,YAE5C,CCVA,IAAMG,EAAwC,CAC5C,WAAY,CAACP,CAAW,EACxB,QAAS,CACP,CAACJ,CAAS,EAAG,EACf,CACF,EAEOY,EAAQD","sourcesContent":["export const ADDON_ID = \"valkyriecoms/storybook-addon-valkyrie-theme\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = `valkyrieTheme`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n  CLEAR: `${ADDON_ID}/clear`,\n};","import type {\n  Renderer,\n  PartialStoryFn as StoryFunction,\n  StoryContext,\n} from \"@storybook/types\";\nimport { useEffect, useGlobals } from \"@storybook/preview-api\";\nimport { PARAM_KEY } from \"./constants\";\n\nexport const withGlobals = (\n  StoryFn: StoryFunction<Renderer>,\n  context: StoryContext<Renderer>\n) => {\n  const [globals] = useGlobals();\n  const state = globals[PARAM_KEY];\n  const { theme } = context.globals;\n\n  useEffect(() => {\n    applyToolState(state);\n  }, [state, theme]);\n\n  return StoryFn();\n};\n\nfunction applyToolState(state: string | false) {\n  if (state) {\n    document.documentElement.dataset.misskeyTheme = state;\n  } else {\n    delete document.documentElement.dataset.misskeyTheme;\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 { Renderer, ProjectAnnotations } from \"@storybook/types\";\nimport { PARAM_KEY } from \"./constants\";\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  globals: {\n    [PARAM_KEY]: false,\n  },\n};\n\nexport default preview;"]}