Support for Storybook v7

[kirandash]

In storybook v7, addDecorator has been removed.

[VincentVW]

For anyone hitting this issue, I tried the new way of adding decorators as described here but its throwing errors so this library does not work with storybook 7 yet.

As alternative, you could look into this styled components recipe on storybook documentation, where they use @storybook/addon-styling to add a styled components theme:

Add a decorator to stories in .storybook/preview.js

import { Preview } from '@storybook/react';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import { theme1, theme2 } from './themes';


const GlobalStyles = createGlobalStyle`
  // some global style if needed
`;

const preview: Preview = {
  decorators: [
    withThemeFromJSXProvider({
      themes: {
        theme1,
        theme2,
      },
      defaultTheme: 'theme1',
      Provider: ThemeProvider,
      GlobalStyles,
    }),
  ],
};

export default preview;

Add to .storybook/main.js

module.exports = {
  ...
  addons: [
    ...
    "@storybook/addon-styling"
  ]
};

[arange]

For anyone hitting this issue, I tried the new way of adding decorators as described here but its throwing errors so this library does not work with storybook 7 yet.

As alternative, you could look into this styled components recipe on storybook documentation, where they use @storybook/addon-styling to add a styled components theme:

Add a decorator to stories in .storybook/preview.js

import { Preview } from '@storybook/react';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import { theme1, theme2 } from './themes';


const GlobalStyles = createGlobalStyle`
  // some global style if needed
`;

const preview: Preview = {
  decorators: [
    withThemeFromJSXProvider({
      themes: {
        theme1,
        theme2,
      },
      defaultTheme: 'theme1',
      Provider: ThemeProvider,
      GlobalStyles,
    }),
  ],
};

export default preview;

Add to .storybook/main.js

module.exports = {
  ...
  addons: [
    ...
    "@storybook/addon-styling"
  ]
};

That is awesome, thanks Vincent you saved my day!