Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create global control shared by all stories #511

Open
ayush-shta opened this issue Sep 6, 2023 · 6 comments
Open

Create global control shared by all stories #511

ayush-shta opened this issue Sep 6, 2023 · 6 comments

Comments

@ayush-shta
Copy link

ayush-shta commented Sep 6, 2023

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
Copy link
Member

dannyhw commented Sep 6, 2023

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

@mljlynch
Copy link

mljlynch commented Nov 8, 2023

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
Copy link

YOEL311 commented Nov 14, 2023

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

@dannyhw
Copy link
Member

dannyhw commented Nov 15, 2023

@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
Copy link
Contributor

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
Copy link

jimpala commented Jul 30, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants