@stevendejong/storybook-stylesheet-toggle 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Storybook contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# Storybook Addon Stylesheet Toggle
+Simple toggle to load stylesheets

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: {};
+
+export { _default as default };

package/dist/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var e={};
+
+module.exports = e;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["src_default"],"mappings":"AACA,IAAOA,EAAQ,CAAC","sourcesContent":["// make it work with --isolatedModules\nexport default {};\n"]}

package/dist/index.mjs

@@ -0,0 +1,5 @@
+var e={};
+
+export { e as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["src_default"],"mappings":"AACA,IAAOA,EAAQ,CAAC","sourcesContent":["// make it work with --isolatedModules\nexport default {};\n"]}

package/dist/manager.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/manager.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var r = require('react');
+var managerApi = require('@storybook/manager-api');
+var components = require('@storybook/components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var r__default = /*#__PURE__*/_interopDefault(r);
+
+var l="stylesheetToggle",n=`${l}/tool`,e="stylesheetToggle";var c={default:""};var A=({stylesheets:o})=>{let[a]=managerApi.useGlobals(),u=[!0,"true"].includes(a[e]);if(o===null)return null;let g={...c,...o},s=localStorage.getItem(e,"default"),f=t=>{localStorage.setItem(e,t),window.location.reload();},i=[];for(let[t,S]of Object.entries(g))i.push({id:t,title:t,onClick:()=>f(t),active:!s&&t==="default"||s===t});return r__default.default.createElement(components.WithTooltip,{placement:"top",trigger:"click",tooltip:r__default.default.createElement(components.TooltipLinkList,{links:i}),closeOnOutsideClick:!0},r__default.default.createElement(components.IconButton,{key:n,active:u,title:"Activate Stylesheet"},r__default.default.createElement(components.Icons,{icon:"paintbrush"})))},p=A;managerApi.addons.register(l,()=>{managerApi.addons.add(l,{title:"Stylesheet Toggle",type:managerApi.types.TOOL,render:()=>{let o=managerApi.useParameter(e,null);return r__default.default.createElement(p,{stylesheets:o})}});});
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/manager.tsx","../src/constants.ts","../src/Tool.tsx","../src/defaults.ts"],"names":["React","addons","types","useParameter","ADDON_ID","TOOL_ID","PARAM_KEY","useGlobals","Icons","IconButton","WithTooltip","TooltipLinkList","defaultStylesheets","Tool","stylesheets","globals","isActive","mapping","active","toggleStylesheet","sheet","items","name","url","Tool_default"],"mappings":"AAAA,OAAOA,MAAW,QAClB,OAAS,UAAAC,EAAQ,SAAAC,EAAO,gBAAAC,MAAoB,yBCDrC,IAAMC,EAAW,mBACXC,EAAU,GAAGD,SACbE,EAAY,mBCFzB,OAAON,MAAW,QAClB,OAAS,cAAAO,MAAkB,yBAC3B,OAAS,SAAAC,EAAO,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,MAAuB,wBCFzD,IAAMC,EAA8C,CACzD,QAAW,EACb,EDKA,IAAMC,EAAO,CAAC,CAAE,YAAAC,CAAY,IAA+B,CACzD,GAAM,CAACC,CAAO,EAAIR,EAAW,EACvBS,EAAW,CAAC,GAAM,MAAM,EAAE,SAASD,EAAQT,CAAS,CAAC,EAE3D,GAAIQ,IAAgB,KAClB,OAAO,KAGT,IAAMG,EAAU,CACd,GAAGL,EACH,GAAGE,CACL,EAEMI,EAAS,aAAa,QAAQZ,EAAW,SAAS,EAElDa,EAAoBC,GAAkB,CAC1C,aAAa,QAAQd,EAAWc,CAAK,EACrC,OAAO,SAAS,OAAO,CACzB,EAEMC,EAAQ,CAAC,EACf,OAAW,CAACC,EAAMC,CAAG,IAAK,OAAO,QAAQN,CAAO,EAC9CI,EAAM,KAAK,CACT,GAAIC,EACJ,MAAOA,EACP,QAAS,IAAMH,EAAiBG,CAAI,EACpC,OAAU,CAACJ,GAAUI,IAAS,WAAcJ,IAAWI,CACzD,CAAC,EAGH,OACEtB,EAAA,cAACU,EAAA,CACC,UAAU,MACV,QAAQ,QACR,QAASV,EAAA,cAACW,EAAA,CAAgB,MAAOU,EAAO,EACxC,oBAAmB,IAEnBrB,EAAA,cAACS,EAAA,CACC,IAAKJ,EACL,OAAQW,EACR,MAAM,uBAENhB,EAAA,cAACQ,EAAA,CAAM,KAAK,aAAa,CAC3B,CACF,CAEJ,EAEOgB,EAAQX,EFlDfZ,EAAO,SAASG,EAAU,IAAM,CAC9BH,EAAO,IAAIG,EAAU,CACnB,MAAO,oBACP,KAAMF,EAAM,KACZ,OAAQ,IAAM,CACZ,IAAMY,EAAcX,EAClBG,EACA,IACF,EAEA,OAAON,EAAA,cAACwB,EAAA,CAAK,YAAaV,EAAa,CACzC,CACF,CAAC,CACH,CAAC","sourcesContent":["import React from \"react\";\nimport { addons, types, useParameter } from \"@storybook/manager-api\";\nimport { ADDON_ID, PARAM_KEY } from \"./constants\";\nimport Tool from './Tool'\n\naddons.register(ADDON_ID, () => {\n  addons.add(ADDON_ID, {\n    title: 'Stylesheet Toggle',\n    type: types.TOOL,\n    render: () => {\n      const stylesheets = useParameter(\n        PARAM_KEY,\n        null,\n      );\n\n      return <Tool stylesheets={stylesheets} />\n    },\n  });\n});\n","export const ADDON_ID = \"stylesheetToggle\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = `stylesheetToggle`;\n\n","import React from \"react\";\nimport { useGlobals } from \"@storybook/manager-api\";\nimport { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';\nimport { PARAM_KEY, TOOL_ID } from \"./constants\";\nimport { defaultStylesheets } from './defaults'\n\n\nconst Tool = ({ stylesheets }: {[key: string]: string}) => {\n  const [globals] = useGlobals();\n  const isActive = [true, \"true\"].includes(globals[PARAM_KEY]);\n\n  if (stylesheets === null) {\n    return null;\n  }\n\n  const mapping = {\n    ...defaultStylesheets,\n    ...stylesheets,\n  };\n\n  const active = localStorage.getItem(PARAM_KEY, 'default');\n\n  const toggleStylesheet = (sheet: string) => {\n    localStorage.setItem(PARAM_KEY, sheet)\n    window.location.reload()\n  }\n\n  const items = [];\n  for (const [name, url] of Object.entries(mapping)) {\n    items.push({\n      id: name,\n      title: name,\n      onClick: () => toggleStylesheet(name),\n      active: ((!active && name === 'default') || active === name)\n    })\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      trigger=\"click\"\n      tooltip={<TooltipLinkList links={items} />}\n      closeOnOutsideClick\n    >\n      <IconButton\n        key={TOOL_ID}\n        active={isActive}\n        title=\"Activate Stylesheet\"\n      >\n        <Icons icon=\"paintbrush\" />\n      </IconButton>\n    </WithTooltip>\n  );\n};\n\nexport default Tool\n","export const defaultStylesheets: {[key: string]: string} = {\n  \"default\": ''\n}\n"]}

package/dist/manager.mjs

@@ -0,0 +1,7 @@
+import r from 'react';
+import { addons, types, useParameter, useGlobals } from '@storybook/manager-api';
+import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
+
+var l="stylesheetToggle",n=`${l}/tool`,e="stylesheetToggle";var c={default:""};var A=({stylesheets:o})=>{let[a]=useGlobals(),u=[!0,"true"].includes(a[e]);if(o===null)return null;let g={...c,...o},s=localStorage.getItem(e,"default"),f=t=>{localStorage.setItem(e,t),window.location.reload();},i=[];for(let[t,S]of Object.entries(g))i.push({id:t,title:t,onClick:()=>f(t),active:!s&&t==="default"||s===t});return r.createElement(WithTooltip,{placement:"top",trigger:"click",tooltip:r.createElement(TooltipLinkList,{links:i}),closeOnOutsideClick:!0},r.createElement(IconButton,{key:n,active:u,title:"Activate Stylesheet"},r.createElement(Icons,{icon:"paintbrush"})))},p=A;addons.register(l,()=>{addons.add(l,{title:"Stylesheet Toggle",type:types.TOOL,render:()=>{let o=useParameter(e,null);return r.createElement(p,{stylesheets:o})}});});
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=manager.mjs.map

package/dist/manager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/manager.tsx","../src/constants.ts","../src/Tool.tsx","../src/defaults.ts"],"names":["React","addons","types","useParameter","ADDON_ID","TOOL_ID","PARAM_KEY","useGlobals","Icons","IconButton","WithTooltip","TooltipLinkList","defaultStylesheets","Tool","stylesheets","globals","isActive","mapping","active","toggleStylesheet","sheet","items","name","url","Tool_default"],"mappings":"AAAA,OAAOA,MAAW,QAClB,OAAS,UAAAC,EAAQ,SAAAC,EAAO,gBAAAC,MAAoB,yBCDrC,IAAMC,EAAW,mBACXC,EAAU,GAAGD,SACbE,EAAY,mBCFzB,OAAON,MAAW,QAClB,OAAS,cAAAO,MAAkB,yBAC3B,OAAS,SAAAC,EAAO,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,MAAuB,wBCFzD,IAAMC,EAA8C,CACzD,QAAW,EACb,EDKA,IAAMC,EAAO,CAAC,CAAE,YAAAC,CAAY,IAA+B,CACzD,GAAM,CAACC,CAAO,EAAIR,EAAW,EACvBS,EAAW,CAAC,GAAM,MAAM,EAAE,SAASD,EAAQT,CAAS,CAAC,EAE3D,GAAIQ,IAAgB,KAClB,OAAO,KAGT,IAAMG,EAAU,CACd,GAAGL,EACH,GAAGE,CACL,EAEMI,EAAS,aAAa,QAAQZ,EAAW,SAAS,EAElDa,EAAoBC,GAAkB,CAC1C,aAAa,QAAQd,EAAWc,CAAK,EACrC,OAAO,SAAS,OAAO,CACzB,EAEMC,EAAQ,CAAC,EACf,OAAW,CAACC,EAAMC,CAAG,IAAK,OAAO,QAAQN,CAAO,EAC9CI,EAAM,KAAK,CACT,GAAIC,EACJ,MAAOA,EACP,QAAS,IAAMH,EAAiBG,CAAI,EACpC,OAAU,CAACJ,GAAUI,IAAS,WAAcJ,IAAWI,CACzD,CAAC,EAGH,OACEtB,EAAA,cAACU,EAAA,CACC,UAAU,MACV,QAAQ,QACR,QAASV,EAAA,cAACW,EAAA,CAAgB,MAAOU,EAAO,EACxC,oBAAmB,IAEnBrB,EAAA,cAACS,EAAA,CACC,IAAKJ,EACL,OAAQW,EACR,MAAM,uBAENhB,EAAA,cAACQ,EAAA,CAAM,KAAK,aAAa,CAC3B,CACF,CAEJ,EAEOgB,EAAQX,EFlDfZ,EAAO,SAASG,EAAU,IAAM,CAC9BH,EAAO,IAAIG,EAAU,CACnB,MAAO,oBACP,KAAMF,EAAM,KACZ,OAAQ,IAAM,CACZ,IAAMY,EAAcX,EAClBG,EACA,IACF,EAEA,OAAON,EAAA,cAACwB,EAAA,CAAK,YAAaV,EAAa,CACzC,CACF,CAAC,CACH,CAAC","sourcesContent":["import React from \"react\";\nimport { addons, types, useParameter } from \"@storybook/manager-api\";\nimport { ADDON_ID, PARAM_KEY } from \"./constants\";\nimport Tool from './Tool'\n\naddons.register(ADDON_ID, () => {\n  addons.add(ADDON_ID, {\n    title: 'Stylesheet Toggle',\n    type: types.TOOL,\n    render: () => {\n      const stylesheets = useParameter(\n        PARAM_KEY,\n        null,\n      );\n\n      return <Tool stylesheets={stylesheets} />\n    },\n  });\n});\n","export const ADDON_ID = \"stylesheetToggle\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = `stylesheetToggle`;\n\n","import React from \"react\";\nimport { useGlobals } from \"@storybook/manager-api\";\nimport { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';\nimport { PARAM_KEY, TOOL_ID } from \"./constants\";\nimport { defaultStylesheets } from './defaults'\n\n\nconst Tool = ({ stylesheets }: {[key: string]: string}) => {\n  const [globals] = useGlobals();\n  const isActive = [true, \"true\"].includes(globals[PARAM_KEY]);\n\n  if (stylesheets === null) {\n    return null;\n  }\n\n  const mapping = {\n    ...defaultStylesheets,\n    ...stylesheets,\n  };\n\n  const active = localStorage.getItem(PARAM_KEY, 'default');\n\n  const toggleStylesheet = (sheet: string) => {\n    localStorage.setItem(PARAM_KEY, sheet)\n    window.location.reload()\n  }\n\n  const items = [];\n  for (const [name, url] of Object.entries(mapping)) {\n    items.push({\n      id: name,\n      title: name,\n      onClick: () => toggleStylesheet(name),\n      active: ((!active && name === 'default') || active === name)\n    })\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      trigger=\"click\"\n      tooltip={<TooltipLinkList links={items} />}\n      closeOnOutsideClick\n    >\n      <IconButton\n        key={TOOL_ID}\n        active={isActive}\n        title=\"Activate Stylesheet\"\n      >\n        <Icons icon=\"paintbrush\" />\n      </IconButton>\n    </WithTooltip>\n  );\n};\n\nexport default Tool\n","export const defaultStylesheets: {[key: string]: string} = {\n  \"default\": ''\n}\n"]}

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import { ProjectAnnotations, Renderer } from '@storybook/types';
+
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var previewApi = require('@storybook/preview-api');
+
+var t="stylesheetToggle";var c={default:""};var y=(o,r)=>{let [s]=previewApi.useGlobals(),n=s[t],{theme:e}=r.globals,l=r.parameters[t];({...c,...l});let i=localStorage.getItem(t,"default"),m=l[i];return previewApi.useEffect(()=>{g(m);},[n,e]),o()};function g(o){let r=document.querySelector("#stylesheetToggle"),s=document.querySelector("#storybook-root"),n=document.querySelector("body"),e=document.createElement("link");console.log("stylesheet",o),e.setAttribute("id","stylesheetToggle"),e.setAttribute("rel","stylesheet"),e.setAttribute("href",o),r?.remove(),n.insertBefore(e,s);}var f={decorators:[y],globals:{[t]:!1}},k=f;
+
+module.exports = k;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/withGlobals.ts","../src/defaults.ts","../src/preview.ts"],"names":["ADDON_ID","TOOL_ID","PARAM_KEY","useEffect","useGlobals","defaultStylesheets","withGlobals","StoryFn","context","globals","stylesheetToggle","theme","stylesheets","mapping","active","stylesheet","injectStylesheet","previousStylesheet","beforeElement","bodyElement","stylesheetElement","preview","preview_default"],"mappings":"AAAO,IAAMA,EAAW,mBACXC,EAAU,GAAGD,SACbE,EAAY,mBCGzB,OAAS,aAAAC,EAAW,cAAAC,MAAkB,yBCL/B,IAAMC,EAA8C,CACzD,QAAW,EACb,EDQO,IAAMC,EAAc,CACzBC,EACAC,IACG,CACH,GAAM,CAACC,CAAO,EAAIL,EAAW,EACvBM,EAAmBD,EAAQP,CAAS,EAEpC,CAAE,MAAAS,CAAM,EAAIH,EAAQ,QACpBI,EAAcJ,EAAQ,WAAWN,CAAS,EAC1CW,EAAU,CACd,GAAGR,EACH,GAAGO,CACL,EACME,EAAS,aAAa,QAAQZ,EAAW,SAAS,EAClDa,EAAaH,EAAYE,CAAM,EAErC,OAAAX,EAAU,IAAM,CACda,EAAiBD,CAAU,CAC7B,EAAG,CAACL,EAAkBC,CAAK,CAAC,EAErBJ,EAAQ,CACjB,EAEA,SAASS,EAAiBD,EAAoB,CAC5C,IAAME,EAAqB,SAAS,cAAc,mBAAmB,EAC/DC,EAAgB,SAAS,cAAc,iBAAiB,EACxDC,EAAc,SAAS,cAAc,MAAM,EAC3CC,EAAoB,SAAS,cAAc,MAAM,EAEvD,QAAQ,IAAI,aAAcL,CAAU,EAEpCK,EAAkB,aAAa,KAAM,kBAAkB,EACvDA,EAAkB,aAAa,MAAO,YAAY,EAClDA,EAAkB,aAAa,OAAQL,CAAU,EAEjDE,GAAoB,OAAO,EAC3BE,EAAY,aAAaC,EAAmBF,CAAa,CAC3D,CE1CA,IAAMG,EAAwC,CAC5C,WAAY,CAACf,CAAW,EACxB,QAAS,CACP,CAACJ,CAAS,EAAG,EACf,CACF,EAEOoB,EAAQD","sourcesContent":["export const ADDON_ID = \"stylesheetToggle\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = `stylesheetToggle`;\n\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\";\nimport { defaultStylesheets } from './defaults'\n\n\nexport const withGlobals = (\n  StoryFn: StoryFunction<Renderer>,\n  context: StoryContext<Renderer>\n) => {\n  const [globals] = useGlobals();\n  const stylesheetToggle = globals[PARAM_KEY];\n  \n  const { theme } = context.globals;\n  const stylesheets = context.parameters[PARAM_KEY];\n  const mapping = {\n    ...defaultStylesheets,\n    ...stylesheets,\n  };\n  const active = localStorage.getItem(PARAM_KEY, 'default');\n  const stylesheet = stylesheets[active]\n\n  useEffect(() => {\n    injectStylesheet(stylesheet);\n  }, [stylesheetToggle, theme]);\n\n  return StoryFn();\n};\n\nfunction injectStylesheet(stylesheet: string) {\n  const previousStylesheet = document.querySelector('#stylesheetToggle');\n  const beforeElement = document.querySelector('#storybook-root');\n  const bodyElement = document.querySelector('body');\n  const stylesheetElement = document.createElement('link');\n\n  console.log('stylesheet', stylesheet)\n\n  stylesheetElement.setAttribute('id', 'stylesheetToggle');\n  stylesheetElement.setAttribute('rel', 'stylesheet');\n  stylesheetElement.setAttribute('href', stylesheet);\n\n  previousStylesheet?.remove();\n  bodyElement.insertBefore(stylesheetElement, beforeElement);\n}\n","export const defaultStylesheets: {[key: string]: string} = {\n  \"default\": ''\n}\n","import type { Renderer, ProjectAnnotations } from \"@storybook/types\";\nimport { PARAM_KEY } from \"./constants\";\nimport { withGlobals } from \"./withGlobals\";\n\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withGlobals],\n  globals: {\n    [PARAM_KEY]: false,\n  },\n};\n\nexport default preview;\n"]}

package/dist/preview.mjs

@@ -0,0 +1,7 @@
+import { useGlobals, useEffect } from '@storybook/preview-api';
+
+var t="stylesheetToggle";var c={default:""};var y=(o,r)=>{let [s]=useGlobals(),n=s[t],{theme:e}=r.globals,l=r.parameters[t];({...c,...l});let i=localStorage.getItem(t,"default"),m=l[i];return useEffect(()=>{g(m);},[n,e]),o()};function g(o){let r=document.querySelector("#stylesheetToggle"),s=document.querySelector("#storybook-root"),n=document.querySelector("body"),e=document.createElement("link");console.log("stylesheet",o),e.setAttribute("id","stylesheetToggle"),e.setAttribute("rel","stylesheet"),e.setAttribute("href",o),r?.remove(),n.insertBefore(e,s);}var f={decorators:[y],globals:{[t]:!1}},k=f;
+
+export { k as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=preview.mjs.map

package/dist/preview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/withGlobals.ts","../src/defaults.ts","../src/preview.ts"],"names":["ADDON_ID","TOOL_ID","PARAM_KEY","useEffect","useGlobals","defaultStylesheets","withGlobals","StoryFn","context","globals","stylesheetToggle","theme","stylesheets","mapping","active","stylesheet","injectStylesheet","previousStylesheet","beforeElement","bodyElement","stylesheetElement","preview","preview_default"],"mappings":"AAAO,IAAMA,EAAW,mBACXC,EAAU,GAAGD,SACbE,EAAY,mBCGzB,OAAS,aAAAC,EAAW,cAAAC,MAAkB,yBCL/B,IAAMC,EAA8C,CACzD,QAAW,EACb,EDQO,IAAMC,EAAc,CACzBC,EACAC,IACG,CACH,GAAM,CAACC,CAAO,EAAIL,EAAW,EACvBM,EAAmBD,EAAQP,CAAS,EAEpC,CAAE,MAAAS,CAAM,EAAIH,EAAQ,QACpBI,EAAcJ,EAAQ,WAAWN,CAAS,EAC1CW,EAAU,CACd,GAAGR,EACH,GAAGO,CACL,EACME,EAAS,aAAa,QAAQZ,EAAW,SAAS,EAClDa,EAAaH,EAAYE,CAAM,EAErC,OAAAX,EAAU,IAAM,CACda,EAAiBD,CAAU,CAC7B,EAAG,CAACL,EAAkBC,CAAK,CAAC,EAErBJ,EAAQ,CACjB,EAEA,SAASS,EAAiBD,EAAoB,CAC5C,IAAME,EAAqB,SAAS,cAAc,mBAAmB,EAC/DC,EAAgB,SAAS,cAAc,iBAAiB,EACxDC,EAAc,SAAS,cAAc,MAAM,EAC3CC,EAAoB,SAAS,cAAc,MAAM,EAEvD,QAAQ,IAAI,aAAcL,CAAU,EAEpCK,EAAkB,aAAa,KAAM,kBAAkB,EACvDA,EAAkB,aAAa,MAAO,YAAY,EAClDA,EAAkB,aAAa,OAAQL,CAAU,EAEjDE,GAAoB,OAAO,EAC3BE,EAAY,aAAaC,EAAmBF,CAAa,CAC3D,CE1CA,IAAMG,EAAwC,CAC5C,WAAY,CAACf,CAAW,EACxB,QAAS,CACP,CAACJ,CAAS,EAAG,EACf,CACF,EAEOoB,EAAQD","sourcesContent":["export const ADDON_ID = \"stylesheetToggle\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = `stylesheetToggle`;\n\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\";\nimport { defaultStylesheets } from './defaults'\n\n\nexport const withGlobals = (\n  StoryFn: StoryFunction<Renderer>,\n  context: StoryContext<Renderer>\n) => {\n  const [globals] = useGlobals();\n  const stylesheetToggle = globals[PARAM_KEY];\n  \n  const { theme } = context.globals;\n  const stylesheets = context.parameters[PARAM_KEY];\n  const mapping = {\n    ...defaultStylesheets,\n    ...stylesheets,\n  };\n  const active = localStorage.getItem(PARAM_KEY, 'default');\n  const stylesheet = stylesheets[active]\n\n  useEffect(() => {\n    injectStylesheet(stylesheet);\n  }, [stylesheetToggle, theme]);\n\n  return StoryFn();\n};\n\nfunction injectStylesheet(stylesheet: string) {\n  const previousStylesheet = document.querySelector('#stylesheetToggle');\n  const beforeElement = document.querySelector('#storybook-root');\n  const bodyElement = document.querySelector('body');\n  const stylesheetElement = document.createElement('link');\n\n  console.log('stylesheet', stylesheet)\n\n  stylesheetElement.setAttribute('id', 'stylesheetToggle');\n  stylesheetElement.setAttribute('rel', 'stylesheet');\n  stylesheetElement.setAttribute('href', stylesheet);\n\n  previousStylesheet?.remove();\n  bodyElement.insertBefore(stylesheetElement, beforeElement);\n}\n","export const defaultStylesheets: {[key: string]: string} = {\n  \"default\": ''\n}\n","import type { Renderer, ProjectAnnotations } from \"@storybook/types\";\nimport { PARAM_KEY } from \"./constants\";\nimport { withGlobals } from \"./withGlobals\";\n\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withGlobals],\n  globals: {\n    [PARAM_KEY]: false,\n  },\n};\n\nexport default preview;\n"]}

package/manager.js

@@ -0,0 +1 @@
+export * from "./dist/manager";

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@stevendejong/storybook-stylesheet-toggle",
+  "version": "0.0.0",
+  "description": "Simple toggle to load stylesheets",
+  "keywords": [
+    "storybook-addons"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stevendejongnl/storybook-stylesheet-toggle.git"
+  },
+  "author": "Steven de Jong <steven@steven-dejong.nl>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "prebuild": "yarn clean",
+    "build": "tsup",
+    "build:watch": "yarn build --watch",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "run-p build:watch 'storybook --quiet'",
+    "prerelease": "zx scripts/prepublish-checks.mjs",
+    "release": "yarn build && auto shipit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-mdx-gfm": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-vite": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "@types/node": "^18.15.0",
+    "@types/react": "^18.0.34",
+    "@vitejs/plugin-react": "^3.1.0",
+    "auto": "^10.3.0",
+    "boxen": "^5.0.1",
+    "dedent": "^0.7.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.3.1",
+    "prompts": "^2.4.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "storybook": "^7.4.5",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "zx": "^1.14.1"
+  },
+  "peerDependencies": {
+    "@storybook/blocks": "^7.0.0",
+    "@storybook/components": "^7.0.0",
+    "@storybook/core-events": "^7.0.0",
+    "@storybook/manager-api": "^7.0.0",
+    "@storybook/preview-api": "^7.0.0",
+    "@storybook/theming": "^7.0.0",
+    "@storybook/types": "^7.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "storybook": {
+    "displayName": "Stylesheet Toggle",
+    "supportedFrameworks": [
+      "web-components"
+    ],
+    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
+  }
+}

package/preview.js

@@ -0,0 +1 @@
+export * from "./dist/preview";