Create global control shared by all stories

[ayush-shta]

Is your feature request related to a problem? Please describe.

We have a global decorator that wraps all the stories with a "ThemeProvider" wrapper, something like this:

export const decorators = [
  (Story) => (
    <ThemeProvider theme={"light"}>
        <Story />
    </ThemeProvider>
  ),
];

The problem is that I can't find a way to provide control or anything to update the theme from each story.

Describe the solution you'd like
I would want to be able to provide args, argTypes, or anything to the global decorator that allows me to update this theme prop for every story.

Describe alternatives you've considered

1. I've looked into storybook documentation for React that allows us to define args at the global level in preview.js, but this does not seem to work with storybook version of react-native
   https://storybook.js.org/docs/6.5/react/writing-stories/args#global-args

2. Also according to the React storybook documentation, we are able to specify "global types" in our toolbar, but seems like this addon is not supported in storybook react-native
   https://storybook.js.org/docs/6.5/react/essentials/toolbars-and-globals#globals

Are you able to assist bring the feature to reality?
no

Additional context
For context, I'm on storybook 6.5.6

[dannyhw]

@ayush-shta thanks for the feedback, I think it would be good to add this feature, I'll look into it.

[mljlynch]

You should be able to do something like

export const decorators = [
  (Story , { parameters }) => (
    const themeDetails = parameters.themeDetails
    <ThemeProvider theme={themeDetails}>
        <Story />
    </ThemeProvider>
  ),
];

To customize the theme per story.

[YOEL311]

what about the toolbar,
Why can't it be used in react-native?

[dannyhw]

@YOEL311 I'm not sure what toolbar your are referring to.

Also I've actually thought more about this and the solution provided by @mljlynch should actually be a good fit for whats mentioned in this issue.

My response about adding the feature was more about specifically supporting global args. However I believe that will work out of the box in version 7.

[fabioatcorreia]

I think they were referring to the @storybook/addon-toolbars addon, which does not seem to work in Storybook for React Native (as stated on point 2 from the issue description).

Are there any plans to have something similar working?

[jimpala]

FWIW this does now work for me with RN Storybook v7 such that theme will always appear in the controls panel:

import type { Preview } from '@storybook/react';

const preview: Preview = {
  // ...
  argTypes: {
    theme: {
      options: ['light', 'dark'],
      control: { type: 'radio' },
    },
  },
  args: {
    // Set the default value
    theme: 'light',
  },
  decorators: [
    (Story, { args }) => (
      <ThemeProvider theme={args?.theme === 'dark' ? darkTheme : lightTheme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

export default preview;

Only wrinkle is that this won't preserve theme globally - it will reset to its default whenever you switch between stories.

[praveenpuglia]

FWIW this does now work for me with RN Storybook v7 such that theme will always appear in the controls panel:

import type { Preview } from '@storybook/react';

const preview: Preview = {
// ...
argTypes: {
theme: {
options: ['light', 'dark'],
control: { type: 'radio' },
},
},
args: {
// Set the default value
theme: 'light',
},
decorators: [
(Story, { args }) => (
<ThemeProvider theme={args?.theme === 'dark' ? darkTheme : lightTheme}>


),
],
};

export default preview;
Only wrinkle is that this won't preserve theme globally - it will reset to its default whenever you switch between stories.

I am on Storybook v8 and although changing the arg value works and changes the theme, it does't show up in story controls!

here's my config.

import React from 'react';
import type {Preview} from '@storybook/react';
import ThemeChooserWrapper from '../storybook/ThemeChooserWrapper';
const preview: Preview = {
  tags: ['autodocs'],
  argTypes: {
    isDarkTheme: {control: {type: 'boolean'}},
  },
  args: {
    isDarkTheme: false
  },
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (Story, {args}) => {
      return (
        <ThemeChooserWrapper isDarkTheme={args.isDarkTheme}>
          <Story />
        </ThemeChooserWrapper>
      );
    },
  ],
};

export default preview;

[wolfgang42]

I dug into creating an ondevice-globals addon, but was stymied by useGlobals() (from storybook/manager-api) not working. It seems like globals are stored in something called a “ManagerContext” for which you need a “ManagerProvider”; @storybook/react-native simply doesn’t have a ManagerProvider anywhere, and it seems like this whole API is heavily tied to the browser (it also manages the UI layout and routing, and wants to do things like document.addEventListener for keyboard shortcuts), so unfortunately I don’t think this feature is possible without some significant refactors to Storybook internals.

[dannyhw]

@wolfgang42 yeah im also trying to tackle this problem im planning to have useglobals working for v11

[dannyhw]

So I've been testing a bit and it seems like you can use globals, we just don't have a way to surface tool bars yet

heres a small test I did

const preview: Preview = {
  initialGlobals: {
    overlay: false,
  },
 decorators: [
    (Story, { globals }) => {
      return (
        <View style={{ flex: 1 }}>

          {globals.overlay && (
            <View
              style={{
                backgroundColor: 'red', position: 'absolute', top: 100, left: 24, right: 0, height: 100, width: 100, zIndex: 1000,
              }}
            />
          )}

          <Story />
        </View>
      );
    },
  ],
}

then here this story would show a red square on it

export const Basic: Story = {
  globals: {
    overlay: true,
  },
};

the point being you can control per story with a global, we just need a way to add 'toolbars'