@storybook/addon-themes 8.5.0-alpha.9 → 8.5.0-beta.1
Sign up to get free protection for your applications and to get access to all the features.
- 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-
|
|
3
|
+
"version": "8.5.0-beta.1",
|
|
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-
|
|
66
|
+
"storybook": "^8.5.0-beta.1"
|
|
67
67
|
},
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|