@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.
- package/CHANGELOG.md +22 -0
- package/dist/ChakraProviderDecorator.d.ts +3 -1
- package/dist/ChakraProviderDecorator.js +47 -8
- package/dist/ChakraProviderDecorator.js.map +1 -1
- package/dist/ChakraProviderDecorator.mjs +30 -0
- package/dist/ChakraProviderDecorator.mjs.map +1 -0
- package/dist/arg-types.d.ts +1 -1
- package/dist/arg-types.js +3 -1
- package/dist/arg-types.js.map +1 -1
- package/dist/{arg-types.cjs → arg-types.mjs} +2 -4
- package/dist/arg-types.mjs.map +1 -0
- package/dist/color-mode/ColorModeSync.js +7 -5
- package/dist/color-mode/ColorModeSync.js.map +1 -1
- package/dist/color-mode/ColorModeSync.mjs +9 -0
- package/dist/color-mode/ColorModeSync.mjs.map +1 -0
- package/dist/color-mode/ColorModeTool.js +28 -6
- package/dist/color-mode/ColorModeTool.js.map +1 -1
- package/dist/color-mode/ColorModeTool.mjs +10 -0
- package/dist/color-mode/ColorModeTool.mjs.map +1 -0
- package/dist/constants.js +7 -1
- package/dist/constants.js.map +1 -1
- package/dist/{constants.cjs → constants.mjs} +2 -8
- package/dist/constants.mjs.map +1 -0
- package/dist/direction/DirectionTool.js +8 -6
- package/dist/direction/DirectionTool.js.map +1 -1
- package/dist/direction/DirectionTool.mjs +10 -0
- package/dist/direction/DirectionTool.mjs.map +1 -0
- package/dist/direction/useDirection.js +6 -4
- package/dist/direction/useDirection.js.map +1 -1
- package/dist/direction/useDirection.mjs +8 -0
- package/dist/direction/useDirection.mjs.map +1 -0
- package/dist/index.js +8 -1
- package/dist/index.js.map +1 -1
- package/dist/{index.cjs → index.mjs} +2 -9
- package/dist/index.mjs.map +1 -0
- package/dist/manager.d.ts +1 -1
- package/dist/manager.js +31 -8
- package/dist/manager.js.map +1 -1
- package/dist/manager.mjs +12 -0
- package/dist/manager.mjs.map +1 -0
- package/dist/preview.js +47 -8
- package/dist/preview.js.map +1 -1
- package/dist/preview.mjs +30 -0
- package/dist/preview.mjs.map +1 -0
- package/dist/theme/ThemeTool.js +29 -6
- package/dist/theme/ThemeTool.js.map +1 -1
- package/dist/theme/ThemeTool.mjs +12 -0
- package/dist/theme/ThemeTool.mjs.map +1 -0
- package/package.json +12 -13
- package/dist/ChakraProviderDecorator.cjs +0 -33
- package/dist/ChakraProviderDecorator.cjs.map +0 -1
- package/dist/ChakraProviderDecorator.d.cts +0 -3
- package/dist/arg-types.cjs.map +0 -1
- package/dist/arg-types.d.cts +0 -52
- package/dist/color-mode/ColorModeSync.cjs +0 -11
- package/dist/color-mode/ColorModeSync.cjs.map +0 -1
- package/dist/color-mode/ColorModeSync.d.cts +0 -6
- package/dist/color-mode/ColorModeTool.cjs +0 -32
- package/dist/color-mode/ColorModeTool.cjs.map +0 -1
- package/dist/color-mode/ColorModeTool.d.cts +0 -5
- package/dist/constants.cjs.map +0 -1
- package/dist/constants.d.cts +0 -11
- package/dist/direction/DirectionTool.cjs +0 -12
- package/dist/direction/DirectionTool.cjs.map +0 -1
- package/dist/direction/DirectionTool.d.cts +0 -8
- package/dist/direction/useDirection.cjs +0 -10
- package/dist/direction/useDirection.cjs.map +0 -1
- package/dist/direction/useDirection.d.cts +0 -6
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -4
- package/dist/manager.cjs +0 -31
- package/dist/manager.cjs.map +0 -1
- package/dist/manager.d.cts +0 -2
- package/dist/preview.cjs +0 -33
- package/dist/preview.cjs.map +0 -1
- package/dist/preview.d.cts +0 -5
- package/dist/theme/ThemeTool.cjs +0 -12
- package/dist/theme/ThemeTool.cjs.map +0 -1
- package/dist/theme/ThemeTool.d.cts +0 -8
package/dist/preview.d.cts
DELETED
package/dist/theme/ThemeTool.cjs
DELETED
|
@@ -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"]}
|