Storybook Addon @ React Theming

npm i --save-dev @react-theming/storybook-addon

Features 💫

Usage

// .storybook/main.jsmodule.exports={stories:['../src/**/*.stories.js'],addons:['@react-theming/storybook-addon'],};

import'@react-theming/storybook-addon/register';

importThemeProviderfrom'library-of-your-choice';import{withThemes}from'@react-theming/storybook-addon';import{theme}from'../src/theme';// create decoratorconstthemingDecorator=withThemes(ThemeProvider,[theme]);

constproviderFn=({ theme, children})=>{return<ThemeProvidertheme={muTheme}>{children}</ThemeProvider>;};constthemingDecorator=withThemes(null,[theme],{ providerFn});

Use your output of the selected value

// .storybook/preview.jsimport{ThemeProvider}from'styled-components';import{addDecorator}from'@storybook/react';import{withThemes}from'@react-theming/storybook-addon';import{theme}from'../src/theme';

Example getCustomFieldSnippet

constselectedValue={name:"accent5",namespace:["palette","colors"],type:"color",value:"#ac924d"}constgetCustomFieldSnippet=selectedValue=>{const{ namespace, name}=selectedValue;constpath=namespace.join('.');constfullPath=`${path}.${name}`;constthemeProp=`\${({ theme }) => theme.${fullPath}}`;returnthemeProp;};// The snippet Func function takes the SelectedValue parameter and returns a stringaddDecorator(withThemes(ThemeProvider,[theme],{ getCustomFieldSnippet}));

Example getCustomValueSnippet

constgetCustomValueSnippet=({value, name, type})=>{// Here is your codereturnvalue};// The colorSnipept function accepts an object consisting of { value : HEX, name: string, type: color}addDecorator(withThemes(ThemeProvider,[theme],{ getCustomValueSnippet}));

exportconstonThemeSwitch=context=>{const{ theme}=context;constbackground=theme.name==='Dark theme' ?'#2c2f33' :'white';constparameters={backgrounds:{default:background,},// Pass backgrounds: null to disable background switching at all};return{    parameters,};};constthemingDecorator=withThemes(null,[theme],{ onThemeSwitch});

Using with Emotion

// .storybook/preview.jsimport{ThemeProvider}from'@emotion/react';import{addDecorator}from'@storybook/react';import{withThemes}from'@react-theming/storybook-addon';import{theme}from'../src/theme';// pass ThemeProvider and array of your themes to decoratoraddDecorator(withThemes(ThemeProvider,[theme]));

💅 Using with Styled Components

// .storybook/preview.jsimport{ThemeProvider}from'styled-components';import{addDecorator}from'@storybook/react';import{withThemes}from'@react-theming/storybook-addon';import{theme}from'../src/theme';// pass ThemeProvider and array of your themes to decoratoraddDecorator(withThemes(ThemeProvider,[theme]));

Using with Material-UI

// theme.jsimport{red}from'@material-ui/core/colors';// A custom theme for this appconsttheme={palette:{primary:{main:'#556cd6',},secondary:{main:'#19857b',},error:{main:red.A400,},background:{default:'#fff',},},};exportdefaulttheme;

// .storybook/preview.jsimport{ThemeProvider}from'@material-ui/core';import{createMuiTheme}from'@material-ui/core/styles';import{addDecorator}from'@storybook/react';import{withThemes}from'@react-theming/storybook-addon';importthemefrom'../src/theme';constproviderFn=({ theme, children})=>{constmuTheme=createMuiTheme(theme);return<ThemeProvidertheme={muTheme}>{children}</ThemeProvider>;};// pass ThemeProvider and array of your themes to decoratoraddDecorator(withThemes(null,[theme],{ providerFn}));

// index.jsimportReactfrom'react';importReactDOMfrom'react-dom';import{ThemeProvider}from'@material-ui/core/styles';import{createMuiTheme}from'@material-ui/core/styles';importAppfrom'./App';importthemefrom'./theme';ReactDOM.render(<ThemeProvidertheme={createMuiTheme(theme)}><App/></ThemeProvider>,document.querySelector('#root'),);

Credits