@saas-ui/storybook-addon 7.0.0-next.0 → 7.0.0-next.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Eelco Wiersma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/ChakraProviderDecorator.cjs

@@ -0,0 +1,2 @@
+'use strict';var c=require('react'),react=require('@chakra-ui/react'),chakraPreset=require('@saas-ui/chakra-preset'),previewApi=require('storybook/preview-api'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var c__namespace=/*#__PURE__*/_interopNamespace(c);var m="@saas-ui/storybook-addon2",i=`${m}/direction-tool`,n={TOGGLE_COLOR_MODE:`${m}/toggleColorMode`,TOGGLE_DIRECTION:`${m}/toggleDirection`,SET_THEME:`${m}/setTheme`};function l(){return c.useEffect(()=>{let o=previewApi.addons.getChannel(),t=e=>{let r=e==="dark";document.documentElement.classList.toggle("dark",r),document.documentElement.style.colorScheme=r?"dark":"light";};return o.on(n.TOGGLE_COLOR_MODE,t),()=>{o.removeListener(n.TOGGLE_COLOR_MODE,t);}},[]),null}var E=(o="ltr")=>{let[t,e]=c.useState(o.toLowerCase());return c.useEffect(()=>{document.documentElement.dir=t;},[t]),c.useEffect(()=>{let r=previewApi.addons.getChannel(),s=a=>e(a);return r.on(n.TOGGLE_DIRECTION,s),()=>{r.removeListener(n.TOGGLE_DIRECTION,s);}},[e]),t};function f(o){return typeof o=="object"&&o!==null&&"css"in o&&"token"in o}function I(){let[o,t]=c__namespace.useState(()=>typeof window>"u"?"1":window.localStorage.getItem("storybook.theme")??"1");return c__namespace.useEffect(()=>{let e=previewApi.addons.getChannel(),r=s=>{window.localStorage.setItem("storybook.theme",s),t(s);};return e.on(n.SET_THEME,r),()=>e.removeListener(n.SET_THEME,r)},[]),o}var B=previewApi.makeDecorator({name:"ChakraProviderDecorator",parameterName:"chakra",skipIfNoParametersOrOptions:false,wrapper:(o,t)=>{let{parameters:{saasui:e={}},globals:{[i]:r}}=t;I(),E(r==="rtl"?"rtl":"ltr");let s=typeof e.system=="function"?e.system(t):e.system,a=typeof e.theme=="function"?e.theme(t):e.theme,u=f(s)?s:f(a)?a:chakraPreset.defaultSystem,O=o(t);return jsxRuntime.jsxs(react.ChakraProvider,{value:u,children:[jsxRuntime.jsx(l,{}),O]})}});exports.ChakraProviderDecorator=B;//# sourceMappingURL=ChakraProviderDecorator.cjs.map
+//# sourceMappingURL=ChakraProviderDecorator.cjs.map

package/dist/ChakraProviderDecorator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/color-mode/ColorModeSync.tsx","../src/direction/useDirection.tsx","../src/ChakraProviderDecorator.tsx"],"names":["ADDON_ID","DIRECTION_TOOL_ID","EVENTS","ColorModeSync","useEffect","channel","addons","colorModeToolCallback","value","dark","useDirection","initialDirection","direction","setDirection","useState","callback","isSystemContext","useThemeSync","themeId","setThemeId","c","setTheme","ChakraProviderDecorator","makeDecorator","getStory","context","saasuiParams","globalDirection","configuredSystem","legacyTheme","system","defaultSystem","story","jsxs","ChakraProvider","jsx"],"mappings":"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","file":"ChakraProviderDecorator.cjs","sourcesContent":["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 { useEffect } from 'react'\n\nimport { addons } from 'storybook/preview-api'\n\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => {\n      const dark = value === 'dark'\n      document.documentElement.classList.toggle('dark', dark)\n      document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n    }\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [])\n\n  return null\n}\n","import { useEffect, useState } from 'react'\nimport { addons } from 'storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n","import * as React from 'react'\n\nimport { ChakraProvider } from '@chakra-ui/react'\nimport { defaultSystem } from '@saas-ui/chakra-preset'\nimport { addons, makeDecorator } from 'storybook/preview-api'\n\nimport { ColorModeSync } from './color-mode/ColorModeSync'\nimport { DIRECTION_TOOL_ID, EVENTS } from './constants'\nimport { useDirection } from './direction/useDirection'\n\nfunction isSystemContext(value: unknown): value is typeof defaultSystem {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'css' in value &&\n    'token' in value\n  )\n}\n\nfunction useThemeSync() {\n  const [themeId, setThemeId] = React.useState(() => {\n    if (typeof window === 'undefined') return '1'\n    return window.localStorage.getItem('storybook.theme') ?? '1'\n  })\n\n  React.useEffect(() => {\n    const channel = addons.getChannel()\n    const setTheme = (value: string) => {\n      window.localStorage.setItem('storybook.theme', value)\n      setThemeId(value)\n    }\n    channel.on(EVENTS.SET_THEME, setTheme)\n    return () => channel.removeListener(EVENTS.SET_THEME, setTheme)\n  }, [])\n\n  return themeId\n}\n\n/**\n * Chakra v3 decorator backed by the published Saas UI preset.\n *\n * `parameters.saasui.system` is the preferred custom-system override. For\n * compatibility, `parameters.saasui.theme` is also accepted when it is a\n * Chakra v3 SystemContext or a function returning one.\n */\nexport const ChakraProviderDecorator = makeDecorator({\n  name: 'ChakraProviderDecorator',\n  parameterName: 'chakra',\n  skipIfNoParametersOrOptions: false,\n  wrapper: (getStory, context) => {\n    const {\n      parameters: { saasui: saasuiParams = {} },\n      globals: { [DIRECTION_TOOL_ID]: globalDirection },\n    } = context\n\n    useThemeSync()\n    useDirection(globalDirection === 'rtl' ? 'rtl' : 'ltr')\n\n    const configuredSystem =\n      typeof saasuiParams.system === 'function'\n        ? saasuiParams.system(context)\n        : saasuiParams.system\n    const legacyTheme =\n      typeof saasuiParams.theme === 'function'\n        ? saasuiParams.theme(context)\n        : saasuiParams.theme\n    const system = isSystemContext(configuredSystem)\n      ? configuredSystem\n      : isSystemContext(legacyTheme)\n        ? legacyTheme\n        : defaultSystem\n    const story = getStory(context) as React.ReactNode\n\n    return (\n      <ChakraProvider value={system}>\n        <ColorModeSync />\n        {story}\n      </ChakraProvider>\n    )\n  },\n})\n"]}

package/dist/ChakraProviderDecorator.d.cts

@@ -0,0 +1,10 @@
+/**
+ * Chakra v3 decorator backed by the published Saas UI preset.
+ *
+ * `parameters.saasui.system` is the preferred custom-system override. For
+ * compatibility, `parameters.saasui.theme` is also accepted when it is a
+ * Chakra v3 SystemContext or a function returning one.
+ */
+declare const ChakraProviderDecorator: (...args: any) => any;
+
+export { ChakraProviderDecorator };

package/dist/ChakraProviderDecorator.d.ts

@@ -1,5 +1,10 @@
-import * as _storybook_preview_api_dist_addons from '@storybook/preview-api/dist/addons';
-
-declare const ChakraProviderDecorator: _storybook_preview_api_dist_addons.MakeDecoratorResult;
+/**
+ * Chakra v3 decorator backed by the published Saas UI preset.
+ *
+ * `parameters.saasui.system` is the preferred custom-system override. For
+ * compatibility, `parameters.saasui.theme` is also accepted when it is a
+ * Chakra v3 SystemContext or a function returning one.
+ */
+declare const ChakraProviderDecorator: (...args: any) => any;
 
 export { ChakraProviderDecorator };