Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/morewings/storybook-addon-theme-provider
Storybook addon to manage global themes provided by Styled components, Emotion or any other solution based on React component. Compatible with Storybook version 7 and 8
https://github.com/morewings/storybook-addon-theme-provider
emotion react-theming storybook styled-components theme-provider theming tokens
Last synced: about 1 month ago
JSON representation
Storybook addon to manage global themes provided by Styled components, Emotion or any other solution based on React component. Compatible with Storybook version 7 and 8
- Host: GitHub
- URL: https://github.com/morewings/storybook-addon-theme-provider
- Owner: morewings
- License: mit
- Created: 2023-04-04T20:09:58.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-14T23:37:45.000Z (2 months ago)
- Last Synced: 2024-12-01T09:15:22.524Z (about 2 months ago)
- Topics: emotion, react-theming, storybook, styled-components, theme-provider, theming, tokens
- Language: TypeScript
- Homepage:
- Size: 2.45 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon Theme Provider
[](https://storybook.js.org/addons/storybook-addon-theme-provider)
[](https://www.npmjs.com/package/storybook-addon-theme-provider)
[](http://npm-stats.org/#/storybook-addon-theme-provider)
[](https://github.com/morewings/storybook-addon-theme-provider)
[](https://github.com/morewings/storybook-addon-theme-provider)
> **Maintainer's personal appeal to the users**
>
> Hi, my name is Dima. I created this Storybook add-on. Thanks for choosing it for your project. Hope it helps you to achieve your goals and implement your ideas.
>
> At this moment I'm looking for as job as a **Lead/Senior Front Developer in Berlin, Germany**. So I would like to ask you to **refer me to your company** if this is relevant to your case. Here you can find my [CV and portfolio](https://linktr.ee/morewings). In case it is not relevant, giving a star 🌟 to add-on [repo](https://github.com/morewings/storybook-addon-theme-provider) is also appreciated. I believe that having a popular open source project is helpful for a job search.
>
> Thanks and happy coding!
Addon to manage global themes provided by Styled components, Emotion or any other solution based on React component, which receives prop `theme?: Record` and children node(s). This addon is compatible with **Storybook versions 7 and 8**.
Inspired by [storybook-addon-themes](https://github.com/tonai/storybook-addon-themes).
## Install
1. Install addon with the package manager of your choice.
```shell
npm i -D storybook-addon-theme-provider
yarn add -D storybook-addon-theme-provider
pnpm i -D storybook-addon-theme-provider
```
2. Register addon in `.storybook/main.(js|ts)`
```js
export default {
//...
addons: [
//...
"storybook-addon-theme-provider",
//...
],
};
```
## Use themes
Add decorator `withThemeProvider` to `.storybook/preview.(js|ts)`. This applies theme settings on **global level**.
```js
import {withThemeProvider} from 'storybook-addon-theme-provider';
import {Provider} from './Provider';
export default {
//...
decorators:[
withThemeProvider(Provider),
///...
],
globals: {
// Set initially selected theme name
selectedTheme: 'foo',
// Provide a list of available themes
themes: [
{
// Provide a name for the theme.
name: 'foo',
// Set a color to display after theme name
color: 'red',
// Provide object with foo theme data
themeObject: {
baseColor: 'red',
//...
}
},
{
name: 'bar',
color: '#AAAAAA',
themeObject: {
baseColor: 'green',
}
}
]
},
//...
}
```
It's also possible to enable decorator on story level.
```js
// some CSF story file
export const story = {
decorators: [withThemeProvider(Provider)]
};
```
## Use `Provider` component
`Provider` is a React component which receives `theme` prop, containing selected theme object, and `children` nodes. See [Styled component theming](https://styled-components.com/docs/advanced#theming) or [Emotion
ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype).
Developer can use custom `Provider` component as well.
```tsx
import React, {ReactNode} from 'react';
export const Provider = ({children, theme}: {children?: ReactNode; theme?: TTheme}) => {
// apply theme somehow
console.log('theme', theme)
return
{children}
}
```