SB7: useGlobals() missing | Storybook | Page 1

stuck heron Mar 16, 2023, 5:58 PM

#

Hi, I wanted to know if there is a way of changing the globals from Stories?

Example.
The defaultValue for the global theme is set to Dark , but one story needs the light theme to be the default one for it.

I used to use import { useGlobals } from '@storybook/client-api'; but there isn't one there anymore.

Can you help me with it?

young narwhal Mar 16, 2023, 7:50 PM

#

Hi! Looks like that one's in the @storybook/manager-api package:

import { useGlobals } from '@storybook/manager-api';

https://storybook.js.org/docs/7.0/react/addons/addons-api#useglobals

Did you find it imported from @storybook/client-api somewhere in the docs?

stuck heron Mar 17, 2023, 11:05 AM

#

Thanks for the fast reply!

No, I didn't see it in the docs. I saw it here: https://github.com/storybookjs/storybook/issues/13634#issuecomment-1255441670

GitHub

Is it possible to set a Global variable (`globalTypes`) from within...

I managed to add a toolbar icon that sets my locale for my Storybook app, thanks to https://storybook.js.org/docs/react/essentials/toolbars-and-globals#gatsby-focus-wrapper documentation 🎉 But, whe...

#

When I try to import from manager-api this is the error I get.

young narwhal Mar 17, 2023, 2:05 PM

#

Can you share what your code looks like please?

stuck heron Mar 17, 2023, 2:59 PM

#

Yes, this is in preview.tsx

    const { title } = context;
    const [globals, updateGlobals] = useGlobals();

    useEffect(() => {
        if (!title.includes('Components')) {
            updateGlobals({ theme: 'light' });
        } else {
            updateGlobals({ theme: 'both' });
        }
    }, [title]);

    if (['light', 'dark'].includes(globals.theme)) {
        return (
            <Theme theme={globals.theme}>
                <Story {...context} />
            </Theme>
        );
    }

    return (
        <BothThemes>
            <Story {...context} />
        </BothThemes>
    );
};

#

If the title includes Components then have the theme set as both, if not set it as light. That is the logic behind the updating globals I am trying to have

young narwhal Mar 17, 2023, 3:05 PM

#

Hmm... can you try this:

import { useGlobals } from '@storybook/preview-api';

The docs say it's in manager-api, but your code pertains to the Preview (where stories are rendered), not the Manager (the Storybook UI). So I'm curious if it's available in preview-api.

stuck heron Mar 17, 2023, 3:13 PM

#

Yes, that worked! But there is some rendering issue with the Docs now, Playground works, but autodocs are broken. I might disable them just for now, but you might know the root of the issue?

young narwhal Mar 17, 2023, 3:22 PM

#

Hmm... no, that's a new one for me. Does it happen for every story?

stuck heron Mar 17, 2023, 3:22 PM

#

Yes, for every story. I tried restarting it, and it still happens.

young narwhal Mar 17, 2023, 3:24 PM

#

Hmm... I'm really not sure, sorry.

stuck heron Mar 17, 2023, 3:37 PM

#

No worries, any tips on how could I change the theme inside Stories or Preview?

young narwhal Mar 17, 2023, 3:42 PM

#

I think that's the only API available to do it. The flickering you're seeing is a bug. If you can create a simplified reproduction, submitting an issue would be appreciated.

#SB7: useGlobals() missing