@stevendejong/storybook-stylesheet-toggle 0.0.10 → 0.0.11

package/dist/index.cjs

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

package/dist/index.d.cts

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

package/dist/index.js

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

package/dist/manager.js

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

package/dist/manager.js.map

@@ -1 +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"]}
+{"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","IconButton","TooltipLinkList","WithTooltip","PaintBrushIcon","defaultStylesheets","Tool","stylesheets","globals","isActive","mapping","name","url","active","toggleStylesheet","sheet","items","Tool_default"],"mappings":"AAAA,OAAOA,MAAW,QAClB,OAAS,UAAAC,EAAQ,SAAAC,EAAO,gBAAAC,MAAoB,yBCDrC,IAAMC,EAAW,mBACXC,EAAU,GAAGD,CAAQ,QACrBE,EAAY,mBCFzB,OAAON,MAAW,QAClB,OAAS,cAAAO,MAAkB,yBAC3B,OAAS,cAAAC,EAAY,mBAAAC,EAAiB,eAAAC,MAAmB,wBACzD,OAAS,kBAAAC,MAAsB,mBCHxB,IAAMC,EAA8C,CACzD,QAAW,EACb,EDMA,IAAMC,EAAO,CAAC,CAAE,YAAAC,CAAY,IAAiC,CAC3D,GAAM,CAACC,CAAO,EAAIR,EAAW,EACvBS,EAAW,CAAC,GAAM,MAAM,EAAE,SAASD,EAAQT,CAAS,CAAC,EAE3D,GAAIQ,IAAgB,KAClB,OAAO,KAGT,IAAMG,EAAmC,CAAC,EAC1C,OAAW,CAACC,EAAMC,CAAG,IAAK,OAAO,QAAQP,CAAkB,EACzDK,EAAQC,CAAI,EAAIC,EAElB,OAAW,CAACD,EAAMC,CAAG,IAAK,OAAO,QAAQL,CAAW,EAClDG,EAAQC,CAAI,EAAIC,EAGlB,IAAMC,EAAS,aAAa,QAAQd,CAAS,EACxCc,GACH,aAAa,QAAQd,EAAW,SAAS,EAG3C,IAAMe,EAAoBC,GAAkB,CAC1C,aAAa,QAAQhB,EAAWgB,CAAK,EACrC,OAAO,SAAS,OAAO,CACzB,EAEMC,EAAQ,CAAC,EACf,OAAW,CAACL,EAAMC,CAAG,IAAK,OAAO,QAAQF,CAAO,EAC9CM,EAAM,KAAK,CACT,GAAIL,EACJ,MAAOA,EACP,QAAS,IAAMG,EAAiBH,CAAI,EACpC,OAAU,CAACE,GAAUF,IAAS,WAAcE,IAAWF,CACzD,CAAC,EAGH,OACElB,EAAA,cAACU,EAAA,CACC,UAAU,MACV,QAAQ,QACR,QAASV,EAAA,cAACS,EAAA,CAAgB,MAAOc,EAAO,EACxC,oBAAmB,IAEnBvB,EAAA,cAACQ,EAAA,CACC,IAAKH,EACL,OAAQW,EACR,MAAM,uBAENhB,EAAA,cAACW,EAAA,IAAe,CAClB,CACF,CAEJ,EAEOa,EAAQX,EFzDfZ,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 { IconButton, TooltipLinkList, WithTooltip } from \"@storybook/components\";\nimport { PaintBrushIcon } from \"@storybook/icons\";\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: {[key: string]: string} = {};\n  for (const [name, url] of Object.entries(defaultStylesheets)) {\n    mapping[name] = url;\n  }\n  for (const [name, url] of Object.entries(stylesheets)) {\n    mapping[name] = url;\n  }\n\n  const active = localStorage.getItem(PARAM_KEY);\n  if (!active) {\n    localStorage.setItem(PARAM_KEY, \"default\");\n  }\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        <PaintBrushIcon />\n      </IconButton>\n    </WithTooltip>\n  );\n};\n\nexport default Tool;\n","export const defaultStylesheets: {[key: string]: string} = {\n  \"default\": ''\n}\n"]}

package/dist/preset.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var e=async n=>(console.log("This addon is augmenting the Vite config"),n),o=async n=>(console.log("This addon is augmenting the Webpack config"),n);
+
+exports.viteFinal = e;
+exports.webpack = o;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=preset.cjs.map

package/dist/preset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset.ts"],"names":["viteFinal","config","webpack"],"mappings":"AAKO,IAAMA,EAAY,MAAOC,IAC9B,QAAQ,IAAI,0CAA0C,EAC/CA,GAGIC,EAAU,MAAOD,IAC5B,QAAQ,IAAI,6CAA6C,EAClDA","sourcesContent":["// You can use presets to augment the Storybook configuration\n// You rarely want to do this in addons,\n// so often you want to delete this file and remove the reference to it in package.json#exports and package.json#bunder.nodeEntries\n// Read more about presets at https://storybook.js.org/docs/addons/writing-presets\n\nexport const viteFinal = async (config: any) => {\n  console.log(\"This addon is augmenting the Vite config\");\n  return config;\n};\n\nexport const webpack = async (config: any) => {\n  console.log(\"This addon is augmenting the Webpack config\");\n  return config;\n};"]}

package/dist/preview.js

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

package/dist/preview.js.map

@@ -1 +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,EAElDL,IAILK,EAAkB,aAAa,KAAM,kBAAkB,EACvDA,EAAkB,aAAa,MAAO,YAAY,EAClDA,EAAkB,aAAa,OAAQL,CAAU,EAEjDE,GAAoB,OAAO,EAC3BE,EAAY,aAAaC,EAAmBF,CAAa,EAC3D,CE5CA,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  if (!stylesheet) {\n    return\n  }\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"]}
+{"version":3,"sources":["../src/constants.ts","../src/withGlobals.ts","../src/preview.ts"],"names":["ADDON_ID","TOOL_ID","PARAM_KEY","useEffect","useGlobals","withGlobals","StoryFn","context","globals","stylesheetToggle","theme","stylesheets","active","stylesheet","injectStylesheet","previousStylesheet","beforeElement","bodyElement","stylesheetElement","preview","preview_default"],"mappings":"AAAO,IAAMA,EAAW,mBACXC,EAAU,GAAGD,CAAQ,QACrBE,EAAY,mBCDzB,OAAS,aAAAC,EAAW,cAAAC,MAAkB,yBAI/B,IAAMC,EAAc,CACzBC,EACAC,IACG,CACH,GAAM,CAACC,CAAO,EAAIJ,EAAW,EACvBK,EAAmBD,EAAQN,CAAS,EAEpC,CAAE,MAAAQ,CAAM,EAAIH,EAAQ,QACpBI,EAAcJ,EAAQ,WAAWL,CAAS,EAE1CU,EAAS,aAAa,QAAQV,CAAS,EACxCU,GACH,aAAa,QAAQV,EAAW,SAAS,EAE3C,IAAMW,EAAaF,EAAYC,CAAM,EAErC,OAAAT,EAAU,IAAM,CACdW,EAAiBD,CAAU,CAC7B,EAAG,CAACJ,EAAkBC,CAAK,CAAC,EAErBJ,EAAQ,CACjB,EAEA,SAASQ,EAAiBD,EAAoB,CAC5C,IAAME,EAAqB,SAAS,cAAc,mBAAmB,EAC/DC,EAAgB,SAAS,cAAc,iBAAiB,EACxDC,EAAc,SAAS,cAAc,MAAM,EAC3CC,EAAoB,SAAS,cAAc,MAAM,EAElDL,IAILK,EAAkB,aAAa,KAAM,kBAAkB,EACvDA,EAAkB,aAAa,MAAO,YAAY,EAClDA,EAAkB,aAAa,OAAQL,CAAU,EAEjDE,GAAoB,OAAO,EAC3BE,EAAY,aAAaC,EAAmBF,CAAa,EAC3D,CCvCA,IAAMG,EAAwC,CAC5C,WAAY,CAACd,CAAW,EACxB,QAAS,CACP,CAACH,CAAS,EAAG,EACf,CACF,EAEOkB,EAAQD","sourcesContent":["export const ADDON_ID = \"stylesheetToggle\";\nexport const TOOL_ID = `${ADDON_ID}/tool`;\nexport const PARAM_KEY = `stylesheetToggle`;\n\n","import type { PartialStoryFn as StoryFunction, Renderer, StoryContext } from \"@storybook/types\";\nimport { useEffect, useGlobals } from \"@storybook/preview-api\";\nimport { PARAM_KEY } from \"./constants\";\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\n  const active = localStorage.getItem(PARAM_KEY);\n  if (!active) {\n    localStorage.setItem(PARAM_KEY, \"default\");\n  }\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  if (!stylesheet) {\n    return;\n  }\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","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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevendejong/storybook-stylesheet-toggle",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "The Storybook Stylesheet Toggle addon is a simple and convenient tool for changing stylesheets on the fly.",
   "keywords": [
     "storybook-addons"
@@ -9,29 +9,24 @@
     "type": "git",
     "url": "git+https://github.com/stevendejongnl/storybook-stylesheet-toggle.git"
   },
-  "author": "Steven de Jong <steven@steven-dejong.nl>",
+  "type": "module",
   "license": "MIT",
+  "author": "Steven de Jong <steven@steven-dejong.nl>",
   "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"
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     },
     "./preview": {
-      "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/preview.js",
+      "require": "./dist/preview.js"
     },
+    "./preset": "./dist/preset.cjs",
+    "./manager": "./dist/manager.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -45,64 +40,54 @@
     "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",
+    "prerelease": "zx scripts/prepublish-checks.js",
     "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",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-mdx-gfm": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@types/node": "^20.11.26",
+    "@types/react": "^18.2.65",
+    "@vitejs/plugin-react": "^4.2.1",
+    "auto": "^11.1.1",
+    "boxen": "^7.1.1",
+    "dedent": "^1.5.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.1",
+    "prettier": "^3.2.5",
     "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"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "storybook": "^8.0.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "zx": "^7.2.3"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
+  "bundler": {
+    "exportEntries": [
+      "src/index.ts"
+    ],
+    "managerEntries": [
+      "src/manager.tsx"
+    ],
+    "previewEntries": [
+      "src/preview.ts"
+    ],
+    "nodeEntries": [
+      "src/preset.ts"
+    ]
+  },
   "storybook": {
     "displayName": "Stylesheet Toggle",
     "supportedFrameworks": [
@@ -117,5 +102,6 @@
       "react-native"
     ],
     "icon": "https://github.com/stevendejongnl/storybook-stylesheet-toggle/blob/main/icon.png?raw=true"
-  }
+  },
+  "dependencies": {}
 }

package/dist/index.mjs

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

package/dist/manager.d.ts

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

package/dist/manager.mjs

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.mjs

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

package/dist/preview.mjs.map

@@ -1 +0,0 @@
-{"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,EAElDL,IAILK,EAAkB,aAAa,KAAM,kBAAkB,EACvDA,EAAkB,aAAa,MAAO,YAAY,EAClDA,EAAkB,aAAa,OAAQL,CAAU,EAEjDE,GAAoB,OAAO,EAC3BE,EAAY,aAAaC,EAAmBF,CAAa,EAC3D,CE5CA,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  if (!stylesheet) {\n    return\n  }\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"]}