How to pass my components theme through storybook?

@larissa 

To pass your component's theme through Storybook, you can follow these steps:

1. Install the @storybook/addon-docs addon by running the following command:

1

npm install --save-dev @storybook/addon-docs

1. Import the ThemeProvider from your component's library in your Storybook story file. For example:

1

import { ThemeProvider } from 'my-component-library';

1. Wrap your component with the ThemeProvider and pass your theme as a prop. For example:

1
2
3
4
5
6
7
8

export const MyComponentStory = () => (
  <ThemeProvider theme={{ 
    primaryColor: 'blue',
    secondaryColor: 'green'
  }}>
    <MyComponent />
  </ThemeProvider>
);

1. Register the ThemeProvider as a decorator in your Storybook configuration file. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import { ThemeProvider } from 'my-component-library';

addDecorator((story) => (
  <ThemeProvider theme={{ 
    primaryColor: 'blue',
    secondaryColor: 'green'
  }}>
    {story()}
  </ThemeProvider>
));

1. Run your Storybook server to see your component with the theme applied. You should now be able to pass your component's theme through Storybook successfully.

By following these steps, you should be able to pass your component's theme through Storybook and easily view your component in different themes and variations.