@storybook/addon-themes 8.3.0-alpha.1 → 8.3.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +4 -10
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/manager.js +3 -3
- package/dist/preview.d.ts +2 -2
- package/dist/preview.js +2 -2
- package/dist/preview.mjs +2 -2
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -45,11 +45,8 @@ import { Button } from './Button';
|
|
|
45
45
|
export default {
|
|
46
46
|
title: 'Example/Button',
|
|
47
47
|
component: Button,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
themeOverride: 'light', // component level override
|
|
51
|
-
},
|
|
52
|
-
},
|
|
48
|
+
// meta level override
|
|
49
|
+
globals: { theme: 'dark' },
|
|
53
50
|
};
|
|
54
51
|
|
|
55
52
|
export const Primary = {
|
|
@@ -64,10 +61,7 @@ export const PrimaryDark = {
|
|
|
64
61
|
primary: true,
|
|
65
62
|
label: 'Button',
|
|
66
63
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
themeOverride: 'dark', // Story level override
|
|
70
|
-
},
|
|
71
|
-
},
|
|
64
|
+
// story level override
|
|
65
|
+
globals: { theme: 'dark' },
|
|
72
66
|
};
|
|
73
67
|
```
|
package/dist/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ interface ClassNameStrategyConfiguration {
|
|
|
5
5
|
defaultTheme: string;
|
|
6
6
|
parentSelector?: string;
|
|
7
7
|
}
|
|
8
|
-
declare const withThemeByClassName: <TRenderer extends Renderer =
|
|
8
|
+
declare const withThemeByClassName: <TRenderer extends Renderer = Renderer>({ themes, defaultTheme, parentSelector, }: ClassNameStrategyConfiguration) => DecoratorFunction<TRenderer>;
|
|
9
9
|
|
|
10
10
|
interface DataAttributeStrategyConfiguration {
|
|
11
11
|
themes: Record<string, string>;
|
|
@@ -27,10 +27,10 @@ declare const withThemeFromJSXProvider: <TRenderer extends Renderer = any>({ Pro
|
|
|
27
27
|
|
|
28
28
|
interface ThemeParameters {
|
|
29
29
|
themeOverride?: string;
|
|
30
|
+
disable?: boolean;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
/**
|
|
33
|
-
*
|
|
34
34
|
* @param StoryContext
|
|
35
35
|
* @returns The global theme name set for your stories
|
|
36
36
|
*/
|
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 previewApi.useParameter(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(),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
|
|
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 previewApi.useParameter(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(),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(),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(),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
1
|
import { useParameter, 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 useParameter(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(),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
|
|
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 useParameter(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(),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(),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(),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/dist/manager.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useParameter, useGlobals, addons, useAddonState, useChannel, types } from 'storybook/internal/manager-api';
|
|
2
|
-
import React
|
|
3
|
-
import { styled } from 'storybook/internal/theming';
|
|
2
|
+
import React from 'react';
|
|
4
3
|
import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
|
|
4
|
+
import { styled } from 'storybook/internal/theming';
|
|
5
5
|
import { PaintBrushIcon } from '@storybook/icons';
|
|
6
6
|
|
|
7
|
-
var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}
|
|
7
|
+
var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`,GLOBAL_KEY="theme",THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`,DEFAULT_ADDON_STATE={themesList:[],themeDefault:void 0},DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1})),hasMultipleThemes=themesList=>themesList.length>1,hasTwoThemes=themesList=>themesList.length===2,ThemeSwitcher=React.memo(function(){let{themeOverride,disable}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals,storyGlobals]=useGlobals(),fromLast=addons.getChannel().last(THEMING_EVENTS.REGISTER_THEMES),initializeThemeState=Object.assign({},DEFAULT_ADDON_STATE,{themesList:fromLast?.[0]?.themes||[],themeDefault:fromLast?.[0]?.defaultTheme||""}),[{themesList,themeDefault},updateState]=useAddonState(THEME_SWITCHER_ID,initializeThemeState),isLocked=GLOBAL_KEY in storyGlobals||!!themeOverride;useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let themeName=selected||themeDefault,label="";if(isLocked?label="Story override":themeName&&(label=`${themeName} theme`),disable)return null;if(hasTwoThemes(themesList)){let currentTheme=selected||themeDefault,alternateTheme=themesList.find(theme=>theme!==currentTheme);return React.createElement(IconButton,{disabled:isLocked,key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme",onClick:()=>{updateGlobals({theme:alternateTheme});}},React.createElement(PaintBrushIcon,null),label?React.createElement(IconButtonLabel,null,label):null)}return hasMultipleThemes(themesList)?React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide();}}))})},React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme",disabled:isLocked},React.createElement(PaintBrushIcon,null),label&&React.createElement(IconButtonLabel,null,label))):null});addons.register(ADDON_ID,()=>{addons.add(THEME_SWITCHER_ID,{title:"Themes",type:types.TOOL,match:({viewMode,tabId})=>!!(viewMode&&viewMode.match(/^(story|docs)$/))&&!tabId,render:ThemeSwitcher,paramKey:PARAM_KEY});});
|
package/dist/preview.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ProjectAnnotations, Renderer } from 'storybook/internal/types';
|
|
2
2
|
|
|
3
|
-
declare const
|
|
3
|
+
declare const initialGlobals: ProjectAnnotations<Renderer>['initialGlobals'];
|
|
4
4
|
|
|
5
|
-
export {
|
|
5
|
+
export { initialGlobals };
|
package/dist/preview.js
CHANGED
package/dist/preview.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var GLOBAL_KEY="theme";var
|
|
1
|
+
var GLOBAL_KEY="theme";var initialGlobals={[GLOBAL_KEY]:""};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { initialGlobals };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-themes",
|
|
3
|
-
"version": "8.3.0-alpha.
|
|
3
|
+
"version": "8.3.0-alpha.10",
|
|
4
4
|
"description": "Switch between multiple themes for you components in Storybook",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"exports": {
|
|
30
30
|
".": {
|
|
31
31
|
"types": "./dist/index.d.ts",
|
|
32
|
-
"node": "./dist/index.js",
|
|
33
32
|
"import": "./dist/index.mjs",
|
|
34
|
-
"require": "./dist/index.js"
|
|
33
|
+
"require": "./dist/index.js",
|
|
34
|
+
"node": "./dist/index.js"
|
|
35
35
|
},
|
|
36
36
|
"./preview": {
|
|
37
37
|
"types": "./dist/preview.d.ts",
|
|
@@ -53,18 +53,18 @@
|
|
|
53
53
|
"!src/**/*"
|
|
54
54
|
],
|
|
55
55
|
"scripts": {
|
|
56
|
-
"check": "
|
|
57
|
-
"prep": "
|
|
56
|
+
"check": "jiti ../../../scripts/prepare/check.ts",
|
|
57
|
+
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"ts-dedent": "^2.0.0"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@storybook/icons": "^1.2.
|
|
63
|
+
"@storybook/icons": "^1.2.10",
|
|
64
64
|
"typescript": "^5.3.2"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
|
-
"storybook": "^8.3.0-alpha.
|
|
67
|
+
"storybook": "^8.3.0-alpha.10"
|
|
68
68
|
},
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|