@storybook/addon-themes 8.2.0-alpha.8 → 8.2.0-beta.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Renderer, DecoratorFunction, StoryContext } from '@storybook/types';
+import { Renderer, DecoratorFunction, StoryContext } from 'storybook/internal/types';
 
 interface ClassNameStrategyConfiguration {
     themes: Record<string, string>;

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var previewApi = require('@storybook/preview-api');
+var previewApi = require('storybook/internal/preview-api');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useParameter, addons, useEffect, useMemo } from '@storybook/preview-api';
+import { useParameter, addons, useEffect, useMemo } from 'storybook/internal/preview-api';
 import React from 'react';
 
 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,parentSelector]),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,parentSelector,attributeName]),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]},[themes,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={};

package/dist/manager.js

@@ -1,7 +1,7 @@
-import { useParameter, useGlobals, addons, useAddonState, useChannel, types } from '@storybook/manager-api';
+import { useParameter, useGlobals, addons, useAddonState, useChannel, types } from 'storybook/internal/manager-api';
 import React, { useMemo, Fragment } from 'react';
-import { styled } from '@storybook/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { styled } from 'storybook/internal/theming';
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
 import { PaintBrushIcon } from '@storybook/icons';
 
 var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`;var 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}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=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);useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let label=useMemo(()=>{if(themeOverride)return React.createElement(React.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&React.createElement(React.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);if(hasTwoThemes(themesList)){let currentTheme=selected||themeDefault,alternateTheme=themesList.find(theme=>theme!==currentTheme);return React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme",onClick:()=>{updateGlobals({theme:alternateTheme});}},React.createElement(PaintBrushIcon,null),label&&React.createElement(IconButtonLabel,null,label))}return hasMultipleThemes(themesList)?React.createElement(Fragment,null,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"},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

@@ -1,4 +1,4 @@
-import { ProjectAnnotations, Renderer } from '@storybook/types';
+import { ProjectAnnotations, Renderer } from 'storybook/internal/types';
 
 declare const globals: ProjectAnnotations<Renderer>['globals'];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.2.0-alpha.8",
+  "version": "8.2.0-beta.0",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
@@ -60,16 +60,12 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/client-logger": "8.2.0-alpha.8",
-    "@storybook/components": "8.2.0-alpha.8",
-    "@storybook/core-events": "8.2.0-alpha.8",
     "@storybook/icons": "^1.2.5",
-    "@storybook/manager-api": "8.2.0-alpha.8",
-    "@storybook/preview-api": "8.2.0-alpha.8",
-    "@storybook/theming": "8.2.0-alpha.8",
-    "@storybook/types": "8.2.0-alpha.8",
     "typescript": "^5.3.2"
   },
+  "peerDependencies": {
+    "storybook": "^8.2.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
   },