Rebass: Using rebass with storybook in a full project.

[GStaroz]

Hello, i'm currently trying to use the rebass components in my project, but i cannot for the life of me make them work with storybook.
I am quite new at this and struggling with understanding if this issue concerns the storybook config or if i should just preview the components via rebass directly.
If someone could provide an example of a project with these two working together it would be much appreciated.
Thanks in advance.

[gilesbutler]

Hey @GStaroz,

You need to add a storybook decorator to load the Rebass theme.

Here's a copy of my config.js from .storybook...

import React from "react";
import { configure, addDecorator } from "@storybook/react";
import { Provider } from "rebass";

// By importing your application's CSS here, we ensure it's included
// for each story
// import '../src/styles/index.css';

// A decorator is a way to wrap a story with a common set of component(s).
// Here we add the theme decorator to incoporate the Rebass and our custom theme
const ThemeDecorator = storyFn => <Provider>{storyFn()}</Provider>;
addDecorator(ThemeDecorator);

// Loading stories dynamically
// https://storybook.js.org/basics/writing-stories/#loading-stories-dynamically
const req = require.context("../src/components", true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Note: I like to keep my stories alongside my components as .stories.js files and load them dynamically. If this isn't your cup of tea and you use the default setup then you will need to remove everything below // Loading stories dynamically and replace with...

function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
}

configure(loadStories, module);

Hope that helps :)

[romainquellec]

Got an example with Storybook right here : https://github.com/romainquellec/cuistot-renew

[maxdeviant]

@GStaroz If you are satisfied with the answers provided, would you mind closing out this issue?

[jxnblk]

Seems like this is resolved, but feel free to reopen if needed

[mblarsen]

Seems Provider has been removed. How do you go about using it with storybook now? @gilesbutler would you happen to know?

[maxdeviant]

@mblarsen You can just use the ThemeProvider from styled-components. See the theming docs for more info.

[gilesbutler]

@mblarsen I'm not using Rebass anymore but like @maxdeviant said, the ThemeProvider from Styled Components would be the way to go.

[mblarsen]

@maxdeviant @gilesbutler yes it works as instructed. Thanks 👍