JSS theming addon for storybook.js.org
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
example
src
.babelrc
.eslintrc
.flowconfig
.gitignore
.npmignore
LICENSE
README.md
jest.config.js
package.json
yarn.lock

README.md

storybook-addon-jss-theme

Installation

yarn add -D storybook-addon-jss-theme

Configure storybook

To get this addon in your story book you have to register the panel and add story decorator

Registering the panel

Add to .storybook/addons.js

import 'storybook-addon-jss-theme/dist/register';

Adding story decorator

addDecorator to .storybook/config.js

import {addDecorator} from '@storybook/react';
import {withThemesProvider} from 'storybook-addon-jss-theme';

const themes = [theme1, theme2];
addDecorator(withThemesProvider(themes));

or

addDecorator to particular stories

import {withThemesProvider} from 'storybook-addon-jss-theme';

const themes = [theme1, theme2];

storiesOf("demo", module)
  .addDecorator(withThemesProvider(themes))
  .add("themed component", () => <JSSThemedComponent />);

Example

To run provided example execute following command, storybook will run on port 3000

yarn example

API

Theme object

Theme object must contain two fields

  • name (string): This contains the theme name displayed in Themes panel
  • variables (object): This object holds all theme variables

Example

const defaultTheme = {
    name: 'DEFAULT',
    variables: {
        backgroundColor: 'lightgrey',
        textColor: 'black',
        borderRadius: '30px'
    }
};

withThemesProvider

withThemesProvider decorator takes one required argument which is an array of themes (look above for shape of theme object) and second (optional) which is a ThemeProvider component for custom theme providers created with JSS's createTheme function

withThemesProvider(themes[, ThemeProvider])