storybook-addon-themes icon indicating copy to clipboard operation
storybook-addon-themes copied to clipboard

Add selected `theme` to `globals`

Open nickofthyme opened this issue 3 years ago • 0 comments

Pass selected theme to globals as is done in @storybook/addon-backgrounds. This way we can access the theme automatically in a decorator without having to use withTheme along with a custom theme Decorator prop.

See example from backgrounds addon here

// snippet from storybook/addons/backgrounds/src/containers/BackgroundSelector.tsx
// ...
  const [globals, updateGlobals] = useGlobals();

  const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;

  const selectedBackgroundColor = useMemo(() => {
    return getBackgroundColorByName(
      globalsBackgroundColor,
      backgroundsConfig.values,
      backgroundsConfig.default
    );
  }, [backgroundsConfig, globalsBackgroundColor]);

  if (Array.isArray(backgroundsConfig)) {
    logger.warn(
      'Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md'
    );
  }

  const onBackgroundChange = useCallback(
    (value: string) => {
      updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
    },
    [backgroundsConfig, globals, updateGlobals]
  );
// ...

nickofthyme avatar Jul 12 '21 17:07 nickofthyme