Merge pull request #30111 from storybookjs/fix-addon-themes-issue

Addon Themes: Deprecate useThemeParameters
storybookjs · Dec 20, 2024 · 5f2a0e1 · 5f2a0e1
2 parents eeb7001 + 1ded935
commit 5f2a0e1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 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/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 export interface ClassNameStrategyConfiguration {
   themes: Record<string, string>;
@@ -22,7 +23,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
   initializeThemeState(Object.keys(themes), defaultTheme);
 
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters(context);
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     useEffect(() => {

diff --git a/code/addons/themes/src/decorators/data-attribute.decorator.tsx b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 export interface DataAttributeStrategyConfiguration {
   themes: Record<string, string>;
@@ -22,7 +23,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
 }: DataAttributeStrategyConfiguration): DecoratorFunction<TRenderer> => {
   initializeThemeState(Object.keys(themes), defaultTheme);
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters(context);
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     useEffect(() => {

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';
 
@@ -12,8 +15,18 @@ export function pluckThemeFromContext({ globals }: StoryContext): string {
   return globals[GLOBAL_KEY] || '';
 }
 
-export function useThemeParameters(context: StoryContext): ThemeParameters {
-  return context.parameters[PARAM_KEY] || DEFAULT_THEME_PARAMETERS;
+export function useThemeParameters(context?: StoryContext): ThemeParameters {
+  deprecate(
+    dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
+    - const { themeOverride } = context.parameters.themes ?? {};
+    `
+  );
+
+  if (!context) {
+    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) {

diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx
@@ -4,7 +4,8 @@ import React from 'react';
 import { useMemo } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 type Theme = Record<string, any>;
 type ThemeMap = Record<string, Theme>;
@@ -32,7 +33,8 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
 
   // eslint-disable-next-line react/display-name
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters(context);
+    // eslint-disable-next-line react/destructuring-assignment
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     const theme = useMemo(() => {