@saas-ui/storybook-addon 3.0.2 → 4.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/ChakraProviderDecorator.d.ts +3 -1
  3. package/dist/ChakraProviderDecorator.js +47 -8
  4. package/dist/ChakraProviderDecorator.js.map +1 -1
  5. package/dist/ChakraProviderDecorator.mjs +30 -0
  6. package/dist/ChakraProviderDecorator.mjs.map +1 -0
  7. package/dist/arg-types.d.ts +1 -1
  8. package/dist/arg-types.js +3 -1
  9. package/dist/arg-types.js.map +1 -1
  10. package/dist/{arg-types.cjs → arg-types.mjs} +2 -4
  11. package/dist/arg-types.mjs.map +1 -0
  12. package/dist/color-mode/ColorModeSync.js +7 -5
  13. package/dist/color-mode/ColorModeSync.js.map +1 -1
  14. package/dist/color-mode/ColorModeSync.mjs +9 -0
  15. package/dist/color-mode/ColorModeSync.mjs.map +1 -0
  16. package/dist/color-mode/ColorModeTool.js +28 -6
  17. package/dist/color-mode/ColorModeTool.js.map +1 -1
  18. package/dist/color-mode/ColorModeTool.mjs +10 -0
  19. package/dist/color-mode/ColorModeTool.mjs.map +1 -0
  20. package/dist/constants.js +7 -1
  21. package/dist/constants.js.map +1 -1
  22. package/dist/{constants.cjs → constants.mjs} +2 -8
  23. package/dist/constants.mjs.map +1 -0
  24. package/dist/direction/DirectionTool.js +8 -6
  25. package/dist/direction/DirectionTool.js.map +1 -1
  26. package/dist/direction/DirectionTool.mjs +10 -0
  27. package/dist/direction/DirectionTool.mjs.map +1 -0
  28. package/dist/direction/useDirection.js +6 -4
  29. package/dist/direction/useDirection.js.map +1 -1
  30. package/dist/direction/useDirection.mjs +8 -0
  31. package/dist/direction/useDirection.mjs.map +1 -0
  32. package/dist/index.js +8 -1
  33. package/dist/index.js.map +1 -1
  34. package/dist/{index.cjs → index.mjs} +2 -9
  35. package/dist/index.mjs.map +1 -0
  36. package/dist/manager.d.ts +1 -1
  37. package/dist/manager.js +31 -8
  38. package/dist/manager.js.map +1 -1
  39. package/dist/manager.mjs +12 -0
  40. package/dist/manager.mjs.map +1 -0
  41. package/dist/preview.js +47 -8
  42. package/dist/preview.js.map +1 -1
  43. package/dist/preview.mjs +30 -0
  44. package/dist/preview.mjs.map +1 -0
  45. package/dist/theme/ThemeTool.js +29 -6
  46. package/dist/theme/ThemeTool.js.map +1 -1
  47. package/dist/theme/ThemeTool.mjs +12 -0
  48. package/dist/theme/ThemeTool.mjs.map +1 -0
  49. package/package.json +12 -13
  50. package/dist/ChakraProviderDecorator.cjs +0 -33
  51. package/dist/ChakraProviderDecorator.cjs.map +0 -1
  52. package/dist/ChakraProviderDecorator.d.cts +0 -3
  53. package/dist/arg-types.cjs.map +0 -1
  54. package/dist/arg-types.d.cts +0 -52
  55. package/dist/color-mode/ColorModeSync.cjs +0 -11
  56. package/dist/color-mode/ColorModeSync.cjs.map +0 -1
  57. package/dist/color-mode/ColorModeSync.d.cts +0 -6
  58. package/dist/color-mode/ColorModeTool.cjs +0 -32
  59. package/dist/color-mode/ColorModeTool.cjs.map +0 -1
  60. package/dist/color-mode/ColorModeTool.d.cts +0 -5
  61. package/dist/constants.cjs.map +0 -1
  62. package/dist/constants.d.cts +0 -11
  63. package/dist/direction/DirectionTool.cjs +0 -12
  64. package/dist/direction/DirectionTool.cjs.map +0 -1
  65. package/dist/direction/DirectionTool.d.cts +0 -8
  66. package/dist/direction/useDirection.cjs +0 -10
  67. package/dist/direction/useDirection.cjs.map +0 -1
  68. package/dist/direction/useDirection.d.cts +0 -6
  69. package/dist/index.cjs.map +0 -1
  70. package/dist/index.d.cts +0 -4
  71. package/dist/manager.cjs +0 -31
  72. package/dist/manager.cjs.map +0 -1
  73. package/dist/manager.d.cts +0 -2
  74. package/dist/preview.cjs +0 -33
  75. package/dist/preview.cjs.map +0 -1
  76. package/dist/preview.d.cts +0 -5
  77. package/dist/theme/ThemeTool.cjs +0 -12
  78. package/dist/theme/ThemeTool.cjs.map +0 -1
  79. package/dist/theme/ThemeTool.d.cts +0 -8
@@ -1,5 +0,0 @@
1
- import { ProjectAnnotations, Renderer } from '@storybook/types';
2
-
3
- declare const preview: ProjectAnnotations<Renderer>;
4
-
5
- export { preview as default };
@@ -1,12 +0,0 @@
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
@@ -1 +0,0 @@
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"]}
@@ -1,8 +0,0 @@
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 };