diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md index a45818ab724e..d9c2d2285fc1 100644 --- 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 index 0dd8c007ec7f..8c74dfec51e3 100644 --- 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(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters; + } + + return context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS; } export function initializeThemeState(themeNames: string[], defaultTheme: string) {