@saas-ui/storybook-addon 3.0.1 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @saas-ui/storybook-addon
 
+## 4.0.0
+
+### Minor Changes
+
+- 2ac496a: Upgraded to Chakra UI v2.9.3
+
+### Patch Changes
+
+- Updated dependencies [2ac496a]
+  - @saas-ui/react@2.9.0
+
+## 3.0.2
+
+### Patch Changes
+
+- 1cc49dc: Removed logs
+  - @saas-ui/react@2.8.8
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/direction/useDirection.d.cts

@@ -1,6 +1,6 @@
 /**
  * Sync the layout direction to the html element
  */
-declare const useDirection: (initialDirection?: 'ltr' | 'rtl') => string;
+declare const useDirection: (initialDirection?: "ltr" | "rtl") => string;
 
 export { useDirection };

package/dist/direction/useDirection.d.ts

@@ -1,6 +1,6 @@
 /**
  * Sync the layout direction to the html element
  */
-declare const useDirection: (initialDirection?: 'ltr' | 'rtl') => string;
+declare const useDirection: (initialDirection?: "ltr" | "rtl") => string;
 
 export { useDirection };

package/dist/manager.cjs

@@ -26,6 +26,6 @@ function _interopNamespace(e) {
 
 var g__namespace = /*#__PURE__*/_interopNamespace(g);
 
-var c="@saas-ui/storybook-addon2",T=`${c}/color-mode-tool`,a=`${c}/direction-tool`,O=`${c}/theme-tool`,h={TOGGLE_COLOR_MODE:`${c}/toggleColorMode`,TOGGLE_DIRECTION:`${c}/toggleDirection`,SET_THEME:`${c}/setTheme`};var M=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),k=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5"}),jsxRuntime.jsx("path",{d:"M12 1v2"}),jsxRuntime.jsx("path",{d:"M12 21v2"}),jsxRuntime.jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M1 12h2"}),jsxRuntime.jsx("path",{d:"M21 12h2"}),jsxRuntime.jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsxRuntime.jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),E=()=>{let l=localStorage.getItem("chakra-ui-color-mode")==="dark",[t,e]=g__namespace.useState(l),i=managerApi.addons.getChannel();return jsxRuntime.jsx(components.IconButton,{title:`Set color mode to ${t?"light":"dark"}`,active:t,onClick:()=>{i.emit(h.TOGGLE_COLOR_MODE,t?"light":"dark"),e(r=>!r);},children:t?jsxRuntime.jsx(k,{}):jsxRuntime.jsx(M,{})})};var N=l=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...l,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),y=l=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...l,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),I=()=>{let[l,t]=managerApi.useGlobals(),[e,i]=managerApi.useAddonState(a,l[a]||"ltr"),n=e!=="ltr"?"ltr":"rtl";g.useEffect(()=>{t({[a]:e});},[e,t]);let r=g.useCallback(()=>{managerApi.addons.getChannel().emit(h.TOGGLE_DIRECTION,n),i(n);},[i,n]);return jsxRuntime.jsx(components.IconButton,{active:e==="rtl",title:`Set layout direction to ${n}`,onClick:r,children:n==="ltr"?jsxRuntime.jsx(N,{}):jsxRuntime.jsx(y,{})})};var w={0:"Chakra UI",1:"Saas UI",2:"Glass"},D=()=>{let l=localStorage.getItem("saas-ui-theme"),[t,e]=managerApi.useAddonState(`${c}/theme`,l),i=previewApi.addons.getChannel(),n=r=>{i.emit(h.SET_THEME,r||"1"),e(r);};return jsxRuntime.jsx(components.WithTooltip,{placement:"top",closeOnOutsideClick:!0,trigger:"click",tooltip:({onHide:r})=>jsxRuntime.jsx(components.TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{n("0"),r();}},{id:"1",title:"Saas UI",onClick:()=>{n("1"),r();}},{id:"2",title:"Glass",onClick:()=>{n("2"),r();}}]}),children:jsxRuntime.jsxs(components.IconButton,{title:"Select theme",children:[jsxRuntime.jsx(components.Icons,{icon:"eye"})," ",w[t||"1"]]})})};console.log("REGISTER");managerApi.addons.register(c,l=>{console.log("REGISTER");let t=({viewMode:e})=>!!(e&&e.match(/^(story|docs)$/));managerApi.addons.add(a,{type:managerApi.types.TOOL,title:"Direction",render:I,match:t}),managerApi.addons.add(T,{type:managerApi.types.TOOL,title:"Color Mode",render:E,match:t}),managerApi.addons.add(O,{type:managerApi.types.TOOL,title:"Theme",render:D,match:t});});
+var c="@saas-ui/storybook-addon2",T=`${c}/color-mode-tool`,a=`${c}/direction-tool`,O=`${c}/theme-tool`,h={TOGGLE_COLOR_MODE:`${c}/toggleColorMode`,TOGGLE_DIRECTION:`${c}/toggleDirection`,SET_THEME:`${c}/setTheme`};var M=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),k=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5"}),jsxRuntime.jsx("path",{d:"M12 1v2"}),jsxRuntime.jsx("path",{d:"M12 21v2"}),jsxRuntime.jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M1 12h2"}),jsxRuntime.jsx("path",{d:"M21 12h2"}),jsxRuntime.jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsxRuntime.jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),C=()=>{let n=localStorage.getItem("chakra-ui-color-mode")==="dark",[o,e]=g__namespace.useState(n),s=managerApi.addons.getChannel();return jsxRuntime.jsx(components.IconButton,{title:`Set color mode to ${o?"light":"dark"}`,active:o,onClick:()=>{s.emit(h.TOGGLE_COLOR_MODE,o?"light":"dark"),e(r=>!r);},children:o?jsxRuntime.jsx(k,{}):jsxRuntime.jsx(M,{})})};var N=n=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...n,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),y=n=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...n,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),I=()=>{let[n,o]=managerApi.useGlobals(),[e,s]=managerApi.useAddonState(a,n[a]||"ltr"),l=e!=="ltr"?"ltr":"rtl";g.useEffect(()=>{o({[a]:e});},[e,o]);let r=g.useCallback(()=>{managerApi.addons.getChannel().emit(h.TOGGLE_DIRECTION,l),s(l);},[s,l]);return jsxRuntime.jsx(components.IconButton,{active:e==="rtl",title:`Set layout direction to ${l}`,onClick:r,children:l==="ltr"?jsxRuntime.jsx(N,{}):jsxRuntime.jsx(y,{})})};var w={0:"Chakra UI",1:"Saas UI",2:"Glass"},E=()=>{let n=localStorage.getItem("saas-ui-theme"),[o,e]=managerApi.useAddonState(`${c}/theme`,n),s=previewApi.addons.getChannel(),l=r=>{s.emit(h.SET_THEME,r||"1"),e(r);};return jsxRuntime.jsx(components.WithTooltip,{placement:"top",closeOnOutsideClick:!0,trigger:"click",tooltip:({onHide:r})=>jsxRuntime.jsx(components.TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{l("0"),r();}},{id:"1",title:"Saas UI",onClick:()=>{l("1"),r();}},{id:"2",title:"Glass",onClick:()=>{l("2"),r();}}]}),children:jsxRuntime.jsxs(components.IconButton,{title:"Select theme",children:[jsxRuntime.jsx(components.Icons,{icon:"eye"})," ",w[o||"1"]]})})};managerApi.addons.register(c,n=>{let o=({viewMode:e})=>!!(e&&e.match(/^(story|docs)$/));managerApi.addons.add(a,{type:managerApi.types.TOOL,title:"Direction",render:I,match:o}),managerApi.addons.add(T,{type:managerApi.types.TOOL,title:"Color Mode",render:C,match:o}),managerApi.addons.add(O,{type:managerApi.types.TOOL,title:"Theme",render:E,match:o});});
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=manager.cjs.map

package/dist/manager.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../src/theme/ThemeTool.tsx"],"names":["addons","types","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","React","IconButton","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev","useCallback","useEffect","useAddonState","useGlobals","LTRIcon","props","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection","WithTooltip","TooltipLinkList","Icons","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","onHide","api","match","viewMode"],"mappings":"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","sourcesContent":["import { addons, types } from '@storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\nconsole.log('REGISTER')\n\naddons.register(ADDON_ID, (api) => {\n  console.log('REGISTER')\n\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","import {\n  IconButton,\n  WithTooltip,\n  TooltipLinkList,\n  Icons,\n} from '@storybook/components'\nimport { ADDON_ID, EVENTS } from '../constants'\nimport { addons } from '@storybook/preview-api'\nimport { useAddonState } from '@storybook/manager-api'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <Icons icon=\"eye\" /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}
+{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../src/theme/ThemeTool.tsx"],"names":["addons","types","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","React","IconButton","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev","useCallback","useEffect","useAddonState","useGlobals","LTRIcon","props","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection","WithTooltip","TooltipLinkList","Icons","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","onHide","api","match","viewMode"],"mappings":"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","sourcesContent":["import { addons, types } from '@storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\naddons.register(ADDON_ID, (api) => {\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","import {\n  IconButton,\n  WithTooltip,\n  TooltipLinkList,\n  Icons,\n} from '@storybook/components'\nimport { ADDON_ID, EVENTS } from '../constants'\nimport { addons } from '@storybook/preview-api'\nimport { useAddonState } from '@storybook/manager-api'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <Icons icon=\"eye\" /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}

package/dist/manager.js

@@ -5,6 +5,6 @@ import { IconButton, WithTooltip, TooltipLinkList, Icons } from '@storybook/comp
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { addons as addons$1 } from '@storybook/preview-api';
 
-var c="@saas-ui/storybook-addon2",T=`${c}/color-mode-tool`,a=`${c}/direction-tool`,O=`${c}/theme-tool`,h={TOGGLE_COLOR_MODE:`${c}/toggleColorMode`,TOGGLE_DIRECTION:`${c}/toggleDirection`,SET_THEME:`${c}/setTheme`};var M=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),k=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2"}),jsx("path",{d:"M12 21v2"}),jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsx("path",{d:"M1 12h2"}),jsx("path",{d:"M21 12h2"}),jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),E=()=>{let l=localStorage.getItem("chakra-ui-color-mode")==="dark",[t,e]=g.useState(l),i=addons.getChannel();return jsx(IconButton,{title:`Set color mode to ${t?"light":"dark"}`,active:t,onClick:()=>{i.emit(h.TOGGLE_COLOR_MODE,t?"light":"dark"),e(r=>!r);},children:t?jsx(k,{}):jsx(M,{})})};var N=l=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...l,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),y=l=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...l,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),I=()=>{let[l,t]=useGlobals(),[e,i]=useAddonState(a,l[a]||"ltr"),n=e!=="ltr"?"ltr":"rtl";useEffect(()=>{t({[a]:e});},[e,t]);let r=useCallback(()=>{addons.getChannel().emit(h.TOGGLE_DIRECTION,n),i(n);},[i,n]);return jsx(IconButton,{active:e==="rtl",title:`Set layout direction to ${n}`,onClick:r,children:n==="ltr"?jsx(N,{}):jsx(y,{})})};var w={0:"Chakra UI",1:"Saas UI",2:"Glass"},D=()=>{let l=localStorage.getItem("saas-ui-theme"),[t,e]=useAddonState(`${c}/theme`,l),i=addons$1.getChannel(),n=r=>{i.emit(h.SET_THEME,r||"1"),e(r);};return jsx(WithTooltip,{placement:"top",closeOnOutsideClick:!0,trigger:"click",tooltip:({onHide:r})=>jsx(TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{n("0"),r();}},{id:"1",title:"Saas UI",onClick:()=>{n("1"),r();}},{id:"2",title:"Glass",onClick:()=>{n("2"),r();}}]}),children:jsxs(IconButton,{title:"Select theme",children:[jsx(Icons,{icon:"eye"})," ",w[t||"1"]]})})};console.log("REGISTER");addons.register(c,l=>{console.log("REGISTER");let t=({viewMode:e})=>!!(e&&e.match(/^(story|docs)$/));addons.add(a,{type:types.TOOL,title:"Direction",render:I,match:t}),addons.add(T,{type:types.TOOL,title:"Color Mode",render:E,match:t}),addons.add(O,{type:types.TOOL,title:"Theme",render:D,match:t});});
+var c="@saas-ui/storybook-addon2",T=`${c}/color-mode-tool`,a=`${c}/direction-tool`,O=`${c}/theme-tool`,h={TOGGLE_COLOR_MODE:`${c}/toggleColorMode`,TOGGLE_DIRECTION:`${c}/toggleDirection`,SET_THEME:`${c}/setTheme`};var M=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),k=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2"}),jsx("path",{d:"M12 21v2"}),jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsx("path",{d:"M1 12h2"}),jsx("path",{d:"M21 12h2"}),jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),C=()=>{let n=localStorage.getItem("chakra-ui-color-mode")==="dark",[o,e]=g.useState(n),s=addons.getChannel();return jsx(IconButton,{title:`Set color mode to ${o?"light":"dark"}`,active:o,onClick:()=>{s.emit(h.TOGGLE_COLOR_MODE,o?"light":"dark"),e(r=>!r);},children:o?jsx(k,{}):jsx(M,{})})};var N=n=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...n,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),y=n=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...n,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),I=()=>{let[n,o]=useGlobals(),[e,s]=useAddonState(a,n[a]||"ltr"),l=e!=="ltr"?"ltr":"rtl";useEffect(()=>{o({[a]:e});},[e,o]);let r=useCallback(()=>{addons.getChannel().emit(h.TOGGLE_DIRECTION,l),s(l);},[s,l]);return jsx(IconButton,{active:e==="rtl",title:`Set layout direction to ${l}`,onClick:r,children:l==="ltr"?jsx(N,{}):jsx(y,{})})};var w={0:"Chakra UI",1:"Saas UI",2:"Glass"},E=()=>{let n=localStorage.getItem("saas-ui-theme"),[o,e]=useAddonState(`${c}/theme`,n),s=addons$1.getChannel(),l=r=>{s.emit(h.SET_THEME,r||"1"),e(r);};return jsx(WithTooltip,{placement:"top",closeOnOutsideClick:!0,trigger:"click",tooltip:({onHide:r})=>jsx(TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{l("0"),r();}},{id:"1",title:"Saas UI",onClick:()=>{l("1"),r();}},{id:"2",title:"Glass",onClick:()=>{l("2"),r();}}]}),children:jsxs(IconButton,{title:"Select theme",children:[jsx(Icons,{icon:"eye"})," ",w[o||"1"]]})})};addons.register(c,n=>{let o=({viewMode:e})=>!!(e&&e.match(/^(story|docs)$/));addons.add(a,{type:types.TOOL,title:"Direction",render:I,match:o}),addons.add(T,{type:types.TOOL,title:"Color Mode",render:C,match:o}),addons.add(O,{type:types.TOOL,title:"Theme",render:E,match:o});});
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../src/theme/ThemeTool.tsx"],"names":["addons","types","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","React","IconButton","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev","useCallback","useEffect","useAddonState","useGlobals","LTRIcon","props","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection","WithTooltip","TooltipLinkList","Icons","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","onHide","api","match","viewMode"],"mappings":"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","sourcesContent":["import { addons, types } from '@storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\nconsole.log('REGISTER')\n\naddons.register(ADDON_ID, (api) => {\n  console.log('REGISTER')\n\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","import {\n  IconButton,\n  WithTooltip,\n  TooltipLinkList,\n  Icons,\n} from '@storybook/components'\nimport { ADDON_ID, EVENTS } from '../constants'\nimport { addons } from '@storybook/preview-api'\nimport { useAddonState } from '@storybook/manager-api'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <Icons icon=\"eye\" /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}
+{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../src/theme/ThemeTool.tsx"],"names":["addons","types","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","React","IconButton","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev","useCallback","useEffect","useAddonState","useGlobals","LTRIcon","props","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection","WithTooltip","TooltipLinkList","Icons","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","onHide","api","match","viewMode"],"mappings":"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","sourcesContent":["import { addons, types } from '@storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\naddons.register(ADDON_ID, (api) => {\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","import {\n  IconButton,\n  WithTooltip,\n  TooltipLinkList,\n  Icons,\n} from '@storybook/components'\nimport { ADDON_ID, EVENTS } from '../constants'\nimport { addons } from '@storybook/preview-api'\nimport { useAddonState } from '@storybook/manager-api'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <Icons icon=\"eye\" /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/storybook-addon",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "The official Storybook Addon for Saas UI",
   "type": "module",
   "main": "dist/index.js",
@@ -64,24 +64,24 @@
   },
   "homepage": "https://github.com/saas-ui/saas-ui#readme",
   "devDependencies": {
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^2.9.3",
     "@emotion/react": ">=11.1.5",
     "@emotion/styled": ">=11.1.5",
-    "@saas-ui/react": "2.8.7",
-    "@saas-ui/theme-glass": "0.5.5",
-    "@storybook/types": "^8.1.10",
-    "framer-motion": ">=10",
+    "@saas-ui/react": "2.9.0",
+    "@saas-ui/theme-glass": "0.6.0",
+    "@storybook/types": "^8.3.4",
+    "framer-motion": "^11.9.0",
     "react": "^18.3.1",
-    "tsup": "^8.1.0"
+    "tsup": "^8.3.0"
   },
   "dependencies": {
-    "@storybook/components": "^8.1.10",
-    "@storybook/manager-api": "^8.1.10",
-    "@storybook/preview-api": "^8.1.10"
+    "@storybook/components": "^8.3.4",
+    "@storybook/manager-api": "^8.3.4",
+    "@storybook/preview-api": "^8.3.4"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.0.0",
-    "@saas-ui/react": ">=2.8.7",
+    "@saas-ui/react": ">=2.9.0",
     "@storybook/components": ">=8.0.0",
     "@storybook/manager-api": ">=8.0.0",
     "@storybook/preview-api": ">=8.0.0",