@storybook/addon-themes 8.5.0-alpha.21 → 8.5.0-alpha.22
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/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +2 -2
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ interface ThemeParameters {
|
|
|
35
35
|
* @returns The global theme name set for your stories
|
|
36
36
|
*/
|
|
37
37
|
declare function pluckThemeFromContext({ globals }: StoryContext): string;
|
|
38
|
-
declare function useThemeParameters(): ThemeParameters;
|
|
38
|
+
declare function useThemeParameters(context: StoryContext): ThemeParameters;
|
|
39
39
|
declare function initializeThemeState(themeNames: string[], defaultTheme: string): void;
|
|
40
40
|
|
|
41
41
|
declare const helpers_initializeThemeState: typeof initializeThemeState;
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
9
9
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
11
11
|
|
|
12
|
-
var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`,GLOBAL_KEY="theme";var DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(){return
|
|
12
|
+
var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`,GLOBAL_KEY="theme";var DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(context){return context.parameters[PARAM_KEY]||DEFAULT_THEME_PARAMETERS}function initializeThemeState(themeNames,defaultTheme){previewApi.addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES,{defaultTheme,themes:themeNames});}var DEFAULT_ELEMENT_SELECTOR="html",classStringToArray=classString=>classString.split(" ").filter(Boolean),withThemeByClassName=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(context),selected=pluckThemeFromContext(context);return previewApi.useEffect(()=>{let selectedThemeName=themeOverride||selected||defaultTheme,parentElement=document.querySelector(parentSelector);if(!parentElement)return;Object.entries(themes).filter(([themeName])=>themeName!==selectedThemeName).forEach(([themeName,className])=>{let classes=classStringToArray(className);classes.length>0&&parentElement.classList.remove(...classes);});let newThemeClasses=classStringToArray(themes[selectedThemeName]);newThemeClasses.length>0&&parentElement.classList.add(...newThemeClasses);},[themeOverride,selected]),storyFn()});var DEFAULT_ELEMENT_SELECTOR2="html",DEFAULT_DATA_ATTRIBUTE="data-theme",withThemeByDataAttribute=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR2,attributeName=DEFAULT_DATA_ATTRIBUTE})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(context),selected=pluckThemeFromContext(context);return previewApi.useEffect(()=>{let parentElement=document.querySelector(parentSelector),themeKey=themeOverride||selected||defaultTheme;parentElement&&parentElement.setAttribute(attributeName,themes[themeKey]);},[themeOverride,selected]),storyFn()});var pluckThemeFromKeyPairTuple=([_,themeConfig])=>themeConfig,withThemeFromJSXProvider=({Provider,GlobalStyles,defaultTheme,themes={}})=>{let themeNames=Object.keys(themes),initialTheme=defaultTheme||themeNames[0];return initializeThemeState(themeNames,initialTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(context),selected=pluckThemeFromContext(context),theme=previewApi.useMemo(()=>{let selectedThemeName=themeOverride||selected||initialTheme,pairs=Object.entries(themes);return pairs.length===1?pluckThemeFromKeyPairTuple(pairs[0]):themes[selectedThemeName]},[selected,themeOverride]);return Provider?React__default.default.createElement(Provider,{theme},GlobalStyles&&React__default.default.createElement(GlobalStyles,null),storyFn()):React__default.default.createElement(React__default.default.Fragment,null,GlobalStyles&&React__default.default.createElement(GlobalStyles,null),storyFn())}};var src_default={};
|
|
13
13
|
|
|
14
14
|
exports.DecoratorHelpers = helpers_exports;
|
|
15
15
|
exports.default = src_default;
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { addons, useEffect, useMemo } from 'storybook/internal/preview-api';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
|
-
var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`,GLOBAL_KEY="theme";var DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(){return
|
|
4
|
+
var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`,GLOBAL_KEY="theme";var DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(context){return context.parameters[PARAM_KEY]||DEFAULT_THEME_PARAMETERS}function initializeThemeState(themeNames,defaultTheme){addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES,{defaultTheme,themes:themeNames});}var DEFAULT_ELEMENT_SELECTOR="html",classStringToArray=classString=>classString.split(" ").filter(Boolean),withThemeByClassName=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(context),selected=pluckThemeFromContext(context);return useEffect(()=>{let selectedThemeName=themeOverride||selected||defaultTheme,parentElement=document.querySelector(parentSelector);if(!parentElement)return;Object.entries(themes).filter(([themeName])=>themeName!==selectedThemeName).forEach(([themeName,className])=>{let classes=classStringToArray(className);classes.length>0&&parentElement.classList.remove(...classes);});let newThemeClasses=classStringToArray(themes[selectedThemeName]);newThemeClasses.length>0&&parentElement.classList.add(...newThemeClasses);},[themeOverride,selected]),storyFn()});var DEFAULT_ELEMENT_SELECTOR2="html",DEFAULT_DATA_ATTRIBUTE="data-theme",withThemeByDataAttribute=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR2,attributeName=DEFAULT_DATA_ATTRIBUTE})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(context),selected=pluckThemeFromContext(context);return useEffect(()=>{let parentElement=document.querySelector(parentSelector),themeKey=themeOverride||selected||defaultTheme;parentElement&&parentElement.setAttribute(attributeName,themes[themeKey]);},[themeOverride,selected]),storyFn()});var pluckThemeFromKeyPairTuple=([_,themeConfig])=>themeConfig,withThemeFromJSXProvider=({Provider,GlobalStyles,defaultTheme,themes={}})=>{let themeNames=Object.keys(themes),initialTheme=defaultTheme||themeNames[0];return initializeThemeState(themeNames,initialTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(context),selected=pluckThemeFromContext(context),theme=useMemo(()=>{let selectedThemeName=themeOverride||selected||initialTheme,pairs=Object.entries(themes);return pairs.length===1?pluckThemeFromKeyPairTuple(pairs[0]):themes[selectedThemeName]},[selected,themeOverride]);return Provider?React.createElement(Provider,{theme},GlobalStyles&&React.createElement(GlobalStyles,null),storyFn()):React.createElement(React.Fragment,null,GlobalStyles&&React.createElement(GlobalStyles,null),storyFn())}};var src_default={};
|
|
5
5
|
|
|
6
6
|
export { helpers_exports as DecoratorHelpers, src_default as default, withThemeByClassName, withThemeByDataAttribute, withThemeFromJSXProvider };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-themes",
|
|
3
|
-
"version": "8.5.0-alpha.
|
|
3
|
+
"version": "8.5.0-alpha.22",
|
|
4
4
|
"description": "Switch between multiple themes for you components in Storybook",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"typescript": "^5.3.2"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
|
-
"storybook": "^8.5.0-alpha.
|
|
66
|
+
"storybook": "^8.5.0-alpha.22"
|
|
67
67
|
},
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|