Addon Themes: deprecate useThemeParameters

storybookjs · Dec 19, 2024 · 191ca46 · 191ca46
1 parent 3d2eaaf
commit 191ca46
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md
@@ -109,6 +109,9 @@ export const myCustomDecorator =
 
 ### `useThemeParameters`
 
+(⛔️ **Deprecated**)
+_Do not use this hook anymore. Access the theme directly via the context instead e.g. `context.parameters.themes`_
+
 Returns the theme parameters for this addon.
 
 ```js
@@ -152,14 +155,14 @@ Let's use Vuetify as an example. Vuetify uses it's own global state to know whic
 import { DecoratorHelpers } from '@storybook/addon-themes';
 import { useTheme } from 'vuetify';
 
-const { initializeThemeState, pluckThemeFromContext, useThemeParameters } = DecoratorHelpers;
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
 
 export const withVuetifyTheme = ({ themes, defaultTheme }) => {
   initializeThemeState(Object.keys(themes), defaultTheme);
 
   return (story, context) => {
     const selectedTheme = pluckThemeFromContext(context);
-    const { themeOverride } = useThemeParameters();
+    const { themeOverride } = context.parameters.themes ?? {};
 
     const selected = themeOverride || selectedTheme || defaultTheme;
 

diff --git a/code/addons/themes/src/decorators/helpers.ts b/code/addons/themes/src/decorators/helpers.ts
@@ -1,6 +1,9 @@
-import { addons } from 'storybook/internal/preview-api';
+import { deprecate } from 'storybook/internal/client-logger';
+import { addons, useParameter } from 'storybook/internal/preview-api';
 import type { StoryContext } from 'storybook/internal/types';
 
+import dedent from 'ts-dedent';
+
 import type { ThemeParameters } from '../constants';
 import { DEFAULT_THEME_PARAMETERS, GLOBAL_KEY, PARAM_KEY, THEMING_EVENTS } from '../constants';
 
@@ -13,7 +16,17 @@ export function pluckThemeFromContext({ globals }: StoryContext): string {
 }
 
 export function useThemeParameters(context: StoryContext): ThemeParameters {
-  return context.parameters[PARAM_KEY] || DEFAULT_THEME_PARAMETERS;
+  if (!context) {
+    deprecate(
+      dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
+      - const { themeOverride } = context.parameters.themes ?? {};
+      `
+    );
+
+    return useParameter<ThemeParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters;
+  }
+
+  return context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS;
 }
 
 export function initializeThemeState(themeNames: string[], defaultTheme: string) {