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/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx index 7e44306b9173..42b403a5b382 100644 --- 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; @@ -22,7 +23,7 @@ export const withThemeByClassName = ({ 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 index ec5e0d909538..55e4f258bfd2 100644 --- 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; @@ -22,7 +23,7 @@ export const withThemeByDataAttribute = ({ }: DataAttributeStrategyConfiguration): DecoratorFunction => { 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 index 0dd8c007ec7f..97c70dd1f0a4 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'; @@ -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(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 index f1214f69f992..41964e7afcfc 100644 --- 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; type ThemeMap = Record; @@ -32,7 +33,8 @@ export const withThemeFromJSXProvider = ({ // 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(() => {