@saas-ui/storybook-addon 2.0.2 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. package/CHANGELOG.md +10 -529
  2. package/dist/ChakraProviderDecorator.cjs +33 -0
  3. package/dist/ChakraProviderDecorator.cjs.map +1 -0
  4. package/dist/ChakraProviderDecorator.d.cts +3 -0
  5. package/dist/ChakraProviderDecorator.d.ts +1 -3
  6. package/dist/ChakraProviderDecorator.js +8 -47
  7. package/dist/ChakraProviderDecorator.js.map +1 -1
  8. package/dist/{arg-types.mjs → arg-types.cjs} +4 -2
  9. package/dist/arg-types.cjs.map +1 -0
  10. package/dist/arg-types.d.cts +52 -0
  11. package/dist/arg-types.d.ts +1 -1
  12. package/dist/arg-types.js +1 -3
  13. package/dist/arg-types.js.map +1 -1
  14. package/dist/color-mode/ColorModeSync.cjs +11 -0
  15. package/dist/color-mode/ColorModeSync.cjs.map +1 -0
  16. package/dist/color-mode/ColorModeSync.d.cts +6 -0
  17. package/dist/color-mode/ColorModeSync.js +5 -7
  18. package/dist/color-mode/ColorModeSync.js.map +1 -1
  19. package/dist/color-mode/ColorModeTool.cjs +32 -0
  20. package/dist/color-mode/ColorModeTool.cjs.map +1 -0
  21. package/dist/color-mode/ColorModeTool.d.cts +5 -0
  22. package/dist/color-mode/ColorModeTool.js +6 -28
  23. package/dist/color-mode/ColorModeTool.js.map +1 -1
  24. package/dist/{constants.mjs → constants.cjs} +8 -2
  25. package/dist/constants.cjs.map +1 -0
  26. package/dist/constants.d.cts +11 -0
  27. package/dist/constants.js +1 -7
  28. package/dist/constants.js.map +1 -1
  29. package/dist/direction/DirectionTool.cjs +12 -0
  30. package/dist/direction/DirectionTool.cjs.map +1 -0
  31. package/dist/direction/DirectionTool.d.cts +8 -0
  32. package/dist/direction/DirectionTool.js +6 -8
  33. package/dist/direction/DirectionTool.js.map +1 -1
  34. package/dist/direction/useDirection.cjs +10 -0
  35. package/dist/direction/useDirection.cjs.map +1 -0
  36. package/dist/direction/useDirection.d.cts +6 -0
  37. package/dist/direction/useDirection.js +4 -6
  38. package/dist/direction/useDirection.js.map +1 -1
  39. package/dist/{index.mjs → index.cjs} +9 -2
  40. package/dist/index.cjs.map +1 -0
  41. package/dist/index.d.cts +4 -0
  42. package/dist/index.js +1 -8
  43. package/dist/index.js.map +1 -1
  44. package/dist/manager.cjs +31 -0
  45. package/dist/manager.cjs.map +1 -0
  46. package/dist/manager.d.cts +2 -0
  47. package/dist/manager.d.ts +1 -1
  48. package/dist/manager.js +8 -31
  49. package/dist/manager.js.map +1 -1
  50. package/dist/preview.cjs +33 -0
  51. package/dist/preview.cjs.map +1 -0
  52. package/dist/preview.d.cts +5 -0
  53. package/dist/preview.js +8 -47
  54. package/dist/preview.js.map +1 -1
  55. package/dist/theme/ThemeTool.cjs +12 -0
  56. package/dist/theme/ThemeTool.cjs.map +1 -0
  57. package/dist/theme/ThemeTool.d.cts +8 -0
  58. package/dist/theme/ThemeTool.js +6 -29
  59. package/dist/theme/ThemeTool.js.map +1 -1
  60. package/package.json +26 -31
  61. package/dist/ChakraProviderDecorator.mjs +0 -30
  62. package/dist/ChakraProviderDecorator.mjs.map +0 -1
  63. package/dist/arg-types.mjs.map +0 -1
  64. package/dist/color-mode/ColorModeSync.mjs +0 -9
  65. package/dist/color-mode/ColorModeSync.mjs.map +0 -1
  66. package/dist/color-mode/ColorModeTool.mjs +0 -10
  67. package/dist/color-mode/ColorModeTool.mjs.map +0 -1
  68. package/dist/constants.mjs.map +0 -1
  69. package/dist/direction/DirectionTool.mjs +0 -10
  70. package/dist/direction/DirectionTool.mjs.map +0 -1
  71. package/dist/direction/useDirection.mjs +0 -8
  72. package/dist/direction/useDirection.mjs.map +0 -1
  73. package/dist/index.mjs.map +0 -1
  74. package/dist/manager.mjs +0 -12
  75. package/dist/manager.mjs.map +0 -1
  76. package/dist/preview.mjs +0 -30
  77. package/dist/preview.mjs.map +0 -1
  78. package/dist/theme/ThemeTool.mjs +0 -12
  79. package/dist/theme/ThemeTool.mjs.map +0 -1
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ var components = require('@storybook/components');
4
+ var previewApi = require('@storybook/preview-api');
5
+ var managerApi = require('@storybook/manager-api');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+
8
+ var t="@saas-ui/storybook-addon2",s={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};var I={0:"Chakra UI",1:"Saas UI",2:"Glass"},$=()=>{let n=localStorage.getItem("saas-ui-theme"),[l,c]=managerApi.useAddonState(`${t}/theme`,n),r=previewApi.addons.getChannel(),e=o=>{r.emit(s.SET_THEME,o||"1"),c(o);};return jsxRuntime.jsx(components.WithTooltip,{placement:"top",closeOnOutsideClick:!0,trigger:"click",tooltip:({onHide:o})=>jsxRuntime.jsx(components.TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{e("0"),o();}},{id:"1",title:"Saas UI",onClick:()=>{e("1"),o();}},{id:"2",title:"Glass",onClick:()=>{e("2"),o();}}]}),children:jsxRuntime.jsxs(components.IconButton,{title:"Select theme",children:[jsxRuntime.jsx(components.Icons,{icon:"eye"})," ",I[l||"1"]]})})};
9
+
10
+ exports.ThemeTool = $;
11
+ //# sourceMappingURL=out.js.map
12
+ //# sourceMappingURL=ThemeTool.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/theme/ThemeTool.tsx","../../src/constants.ts"],"names":["IconButton","WithTooltip","TooltipLinkList","Icons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","addons","useAddonState","jsx","jsxs","themes","ThemeTool","themeId","theme","setTheme","channel","setActiveTheme","onHide"],"mappings":"AAAA,OACE,cAAAA,EACA,eAAAC,EACA,mBAAAC,EACA,SAAAC,MACK,wBCLA,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,EDFA,OAAS,UAAAK,MAAc,yBACvB,OAAS,iBAAAC,MAAqB,yBA4BtB,cAAAC,EA8BF,QAAAC,MA9BE,oBA1BR,IAAMC,EAAiC,CACrC,EAAG,YACH,EAAG,UACH,EAAG,OACL,EAKaC,EAAY,IAAM,CAC7B,IAAMC,EAAU,aAAa,QAAQ,eAAe,EAC9C,CAACC,EAAOC,CAAQ,EAAIP,EAAc,GAAGN,CAAQ,SAAUW,CAAO,EAE9DG,EAAUT,EAAO,WAAW,EAE5BU,EAAkBJ,GAAoB,CAC1CG,EAAQ,KAAKV,EAAO,UAAYO,GAAU,GAAa,EACvDE,EAASF,CAAO,CAClB,EAEA,OACEJ,EAACV,EAAA,CACC,UAAU,MACV,oBAAmB,GACnB,QAAQ,QACR,QAAS,CAAC,CAAE,OAAAmB,CAAO,IACjBT,EAACT,EAAA,CACC,MAAO,CACL,CACE,GAAI,IACJ,MAAO,YACP,QAAS,IAAM,CACbiB,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,EACA,CACE,GAAI,IACJ,MAAO,UACP,QAAS,IAAM,CACbD,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,EACA,CACE,GAAI,IACJ,MAAO,QACP,QAAS,IAAM,CACbD,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,CACF,EACF,EAGF,SAAAR,EAACZ,EAAA,CAAW,MAAM,eAChB,UAAAW,EAACR,EAAA,CAAM,KAAK,MAAM,EAAE,IAAEU,EAAOG,GAAS,GAAG,GAC3C,EACF,CAEJ","sourcesContent":["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","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"]}
@@ -0,0 +1,8 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ /**
4
+ * This component is rendered in the Storybook toolbar
5
+ */
6
+ declare const ThemeTool: () => react_jsx_runtime.JSX.Element;
7
+
8
+ export { ThemeTool };
@@ -1,33 +1,10 @@
1
- 'use strict';
1
+ import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
2
+ import { addons } from '@storybook/preview-api';
3
+ import { useAddonState } from '@storybook/manager-api';
4
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
5
 
3
- var f = require('@storybook/manager-api');
4
- var components = require('@storybook/components');
5
- require('@storybook/types');
6
- require('@storybook/preview-api/dist/addons');
7
- var jsxRuntime = require('react/jsx-runtime');
6
+ var t="@saas-ui/storybook-addon2",s={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};var I={0:"Chakra UI",1:"Saas UI",2:"Glass"},$=()=>{let n=localStorage.getItem("saas-ui-theme"),[l,c]=useAddonState(`${t}/theme`,n),r=addons.getChannel(),e=o=>{r.emit(s.SET_THEME,o||"1"),c(o);};return jsx(WithTooltip,{placement:"top",closeOnOutsideClick:!0,trigger:"click",tooltip:({onHide:o})=>jsx(TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{e("0"),o();}},{id:"1",title:"Saas UI",onClick:()=>{e("1"),o();}},{id:"2",title:"Glass",onClick:()=>{e("2"),o();}}]}),children:jsxs(IconButton,{title:"Select theme",children:[jsx(Icons,{icon:"eye"})," ",I[l||"1"]]})})};
8
7
 
9
- function _interopNamespace(e) {
10
- if (e && e.__esModule) return e;
11
- var n = Object.create(null);
12
- if (e) {
13
- Object.keys(e).forEach(function (k) {
14
- if (k !== 'default') {
15
- var d = Object.getOwnPropertyDescriptor(e, k);
16
- Object.defineProperty(n, k, d.get ? d : {
17
- enumerable: true,
18
- get: function () { return e[k]; }
19
- });
20
- }
21
- });
22
- }
23
- n.default = e;
24
- return Object.freeze(n);
25
- }
26
-
27
- var f__namespace = /*#__PURE__*/_interopNamespace(f);
28
-
29
- var E=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var a=(s,o,r,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of u(o))!h.call(s,t)&&t!==r&&E(s,t,{get:()=>o[t],enumerable:!(c=O(o,t))||c.enumerable});return s},m=(s,o,r)=>(a(s,o,"default"),r&&a(r,o,"default"));var l={};m(l,f__namespace);var e="@saas-ui/storybook-addon2",T={TOGGLE_COLOR_MODE:`${e}/toggleColorMode`,TOGGLE_DIRECTION:`${e}/toggleDirection`,SET_THEME:`${e}/setTheme`};var D={0:"Chakra UI",1:"Saas UI",2:"Glass"},j=()=>{let s=localStorage.getItem("saas-ui-theme"),[o,r]=(0, l.useAddonState)(`${e}/theme`,s),c=f.addons.getChannel(),t=n=>{c.emit(T.SET_THEME,n||"1"),r(n);};return jsxRuntime.jsx(components.WithTooltip,{placement:"top",closeOnClick:!0,trigger:"click",tooltip:({onHide:n})=>jsxRuntime.jsx(components.TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{t("0"),n();}},{id:"1",title:"Saas UI",onClick:()=>{t("1"),n();}},{id:"2",title:"Glass",onClick:()=>{t("2"),n();}}]}),children:jsxRuntime.jsxs(components.IconButton,{title:"Select theme",children:[jsxRuntime.jsx(components.Icons,{icon:"eye"})," ",D[o||"1"]]})})};
30
-
31
- exports.ThemeTool = j;
8
+ export { $ as ThemeTool };
32
9
  //# sourceMappingURL=out.js.map
33
10
  //# sourceMappingURL=ThemeTool.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../node_modules/@storybook/api/dist/entry.mjs","../../src/theme/ThemeTool.tsx","../../../../node_modules/@storybook/addons/dist/index.mjs","../../src/constants.ts"],"names":["entry_exports","__reExport","manager_api_star","IconButton","WithTooltip","TooltipLinkList","Icons","Addon_TypesEnum","addons","mockChannel","HooksContext","applyHooks","makeDecorator","useArgs","useCallback","useChannel","useEffect","useGlobals","useMemo","useParameter","useReducer","useRef","useState","useStoryContext","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","jsx","jsxs","themes","ThemeTool","themeId","theme","setTheme","channel","setActiveTheme","onHide"],"mappings":"wWAAA,IAAAA,EAAA,GACAC,EAAAD,EAAAE,GAAA,UAAAA,MAAc,yBCAd,OACE,cAAAC,EACA,eAAAC,EACA,mBAAAC,EACA,SAAAC,MACK,wBCNP,OAA4B,mBAAnBC,MAAgC,mBACzC,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,yBACpC,OAAS,gBAAAC,EAAc,cAAAC,EAAY,iBAAAC,EAAe,WAAAC,EAAS,eAAAC,EAAa,cAAAC,EAAY,aAAAC,EAAW,cAAAC,EAAY,WAAAC,EAAS,gBAAAC,EAAc,cAAAC,EAAY,UAAAC,EAAQ,YAAAC,EAAU,mBAAAC,MAAuB,qCCFhL,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EF2BQ,cAAAK,EA8BF,QAAAC,MA9BE,oBA1BR,IAAMC,EAAiC,CACrC,EAAG,YACH,EAAG,UACH,EAAG,OACL,EAKaC,EAAY,IAAM,CAC7B,IAAMC,EAAU,aAAa,QAAQ,eAAe,EAC9C,CAACC,EAAOC,CAAQ,KAAI,iBAAc,GAAGX,UAAkBS,CAAO,EAE9DG,EAAU5B,EAAO,WAAW,EAE5B6B,EAAkBJ,GAAoB,CAC1CG,EAAQ,KAAKR,EAAO,UAAYK,GAAU,GAAa,EACvDE,EAASF,CAAO,CAClB,EAEA,OACEJ,EAACzB,EAAA,CACC,UAAU,MACV,aAAY,GACZ,QAAQ,QACR,QAAS,CAAC,CAAE,OAAAkC,CAAO,IACjBT,EAACxB,EAAA,CACC,MAAO,CACL,CACE,GAAI,IACJ,MAAO,YACP,QAAS,IAAM,CACbgC,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,EACA,CACE,GAAI,IACJ,MAAO,UACP,QAAS,IAAM,CACbD,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,EACA,CACE,GAAI,IACJ,MAAO,QACP,QAAS,IAAM,CACbD,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,CACF,EACF,EAGF,SAAAR,EAAC3B,EAAA,CAAW,MAAM,eAChB,UAAA0B,EAACvB,EAAA,CAAM,KAAK,MAAM,EAAE,IAAEyB,EAAOG,GAAS,GAAG,GAC3C,EACF,CAEJ","sourcesContent":["// shim-mmode\nexport * from '@storybook/manager-api';","import { useAddonState } from '@storybook/api'\nimport {\n IconButton,\n WithTooltip,\n TooltipLinkList,\n Icons,\n} from '@storybook/components'\nimport { addons } from '@storybook/addons'\nimport { ADDON_ID, EVENTS } from '../constants'\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 closeOnClick\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","export { Addon_TypesEnum as types } from '@storybook/types';\nexport { addons, mockChannel } from '@storybook/manager-api';\nexport { HooksContext, applyHooks, makeDecorator, useArgs, useCallback, useChannel, useEffect, useGlobals, useMemo, useParameter, useReducer, useRef, useState, useStoryContext } from '@storybook/preview-api/dist/addons';\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"]}
1
+ {"version":3,"sources":["../../src/theme/ThemeTool.tsx","../../src/constants.ts"],"names":["IconButton","WithTooltip","TooltipLinkList","Icons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","addons","useAddonState","jsx","jsxs","themes","ThemeTool","themeId","theme","setTheme","channel","setActiveTheme","onHide"],"mappings":"AAAA,OACE,cAAAA,EACA,eAAAC,EACA,mBAAAC,EACA,SAAAC,MACK,wBCLA,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,EDFA,OAAS,UAAAK,MAAc,yBACvB,OAAS,iBAAAC,MAAqB,yBA4BtB,cAAAC,EA8BF,QAAAC,MA9BE,oBA1BR,IAAMC,EAAiC,CACrC,EAAG,YACH,EAAG,UACH,EAAG,OACL,EAKaC,EAAY,IAAM,CAC7B,IAAMC,EAAU,aAAa,QAAQ,eAAe,EAC9C,CAACC,EAAOC,CAAQ,EAAIP,EAAc,GAAGN,CAAQ,SAAUW,CAAO,EAE9DG,EAAUT,EAAO,WAAW,EAE5BU,EAAkBJ,GAAoB,CAC1CG,EAAQ,KAAKV,EAAO,UAAYO,GAAU,GAAa,EACvDE,EAASF,CAAO,CAClB,EAEA,OACEJ,EAACV,EAAA,CACC,UAAU,MACV,oBAAmB,GACnB,QAAQ,QACR,QAAS,CAAC,CAAE,OAAAmB,CAAO,IACjBT,EAACT,EAAA,CACC,MAAO,CACL,CACE,GAAI,IACJ,MAAO,YACP,QAAS,IAAM,CACbiB,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,EACA,CACE,GAAI,IACJ,MAAO,UACP,QAAS,IAAM,CACbD,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,EACA,CACE,GAAI,IACJ,MAAO,QACP,QAAS,IAAM,CACbD,EAAe,GAAG,EAClBC,EAAO,CACT,CACF,CACF,EACF,EAGF,SAAAR,EAACZ,EAAA,CAAW,MAAM,eAChB,UAAAW,EAACR,EAAA,CAAM,KAAK,MAAM,EAAE,IAAEU,EAAOG,GAAS,GAAG,GAC3C,EACF,CAEJ","sourcesContent":["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","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"]}
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@saas-ui/storybook-addon",
3
- "version": "2.0.2",
3
+ "version": "3.0.0",
4
4
  "description": "The official Storybook Addon for Saas UI",
5
+ "type": "module",
5
6
  "main": "dist/index.js",
6
7
  "module": "dist/index.mjs",
7
8
  "types": "dist/index.d.ts",
@@ -12,19 +13,19 @@
12
13
  "exports": {
13
14
  ".": {
14
15
  "types": "./dist/index.d.ts",
15
- "import": "./dist/index.mjs",
16
- "require": "./dist/index.js"
16
+ "import": "./dist/index.js",
17
+ "require": "./dist/index.cjs"
17
18
  },
18
19
  "./*": "./*",
19
20
  "./manager": {
20
21
  "types": "./dist/manager.d.ts",
21
- "require": "./dist/manager.js",
22
- "import": "./dist/manager.mjs"
22
+ "require": "./dist/manager.cjs",
23
+ "import": "./dist/manager.js"
23
24
  },
24
25
  "./preview": {
25
26
  "types": "./dist/preview.d.ts",
26
- "require": "./dist/preview.js",
27
- "import": "./dist/preview.mjs"
27
+ "require": "./dist/preview.cjs",
28
+ "import": "./dist/preview.js"
28
29
  }
29
30
  },
30
31
  "typesVersions": {
@@ -63,36 +64,30 @@
63
64
  },
64
65
  "homepage": "https://github.com/saas-ui/saas-ui#readme",
65
66
  "devDependencies": {
66
- "@chakra-ui/react": "^2.8.1",
67
+ "@chakra-ui/react": "^2.8.2",
67
68
  "@emotion/react": ">=11.1.5",
68
69
  "@emotion/styled": ">=11.1.5",
69
- "@saas-ui/react": "2.4.4",
70
- "@saas-ui/theme": "2.2.3",
71
- "@saas-ui/theme-glass": "0.5.1",
72
- "@storybook/api": "^7.5.3",
73
- "@storybook/components": "^7.5.3",
74
- "@storybook/manager-api": "^7.5.3",
75
- "@storybook/preview-api": "^7.5.3",
76
- "@storybook/types": "^7.3.2",
77
- "framer-motion": ">=4.1.17",
70
+ "@saas-ui/react": "2.8.0",
71
+ "@saas-ui/theme-glass": "0.5.5",
72
+ "@storybook/types": "^8.0.8",
73
+ "framer-motion": ">=10",
78
74
  "react": "^18.2.0",
79
- "tsup": "^6.7.0"
75
+ "tsup": "^8.0.2"
76
+ },
77
+ "dependencies": {
78
+ "@storybook/components": "^8.0.8",
79
+ "@storybook/manager-api": "^8.0.8",
80
+ "@storybook/preview-api": "^8.0.8"
80
81
  },
81
82
  "peerDependencies": {
82
83
  "@chakra-ui/react": ">=2.0.0",
83
- "@storybook/components": ">=7.0.12",
84
- "@storybook/manager-api": ">=7.0.12",
85
- "@storybook/preview-api": ">=7.0.12",
86
- "@storybook/types": ">=7.0.24",
87
- "react": ">=16.8.x"
88
- },
89
- "peerDependenciesMeta": {
90
- "react": {
91
- "optional": true
92
- },
93
- "react-dom": {
94
- "optional": true
95
- }
84
+ "@saas-ui/react": ">=2.8.0",
85
+ "@storybook/components": ">=8.0.0",
86
+ "@storybook/manager-api": ">=8.0.0",
87
+ "@storybook/preview-api": ">=8.0.0",
88
+ "@storybook/types": ">=8.0.0",
89
+ "react": ">=18.x",
90
+ "react-dom": ">=18.x"
96
91
  },
97
92
  "publishConfig": {
98
93
  "access": "public"