integrating theme-ui with storybook in a gatsby project

[dennyabrain]

Hi,

I have a gatsby project where I have integrated theme-ui. Now i am trying to incorporate storybook in the project so I can develop a component library for my project.

I want my components to rely on theme-ui and the sx prop for styling but when i write stories, they render in the storybook UI without the style applied.

I am a bit lost on how to debug this.

this is what the relevant portion of my .storybook/config.js file looks like

import { configure, addDecorator } from '@storybook/react';
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from '../src/gatsby-plugin-theme-ui/index'

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator((story) => (
  <ThemeProvider theme={theme}>
    {story()}
  </ThemeProvider>
))

configure(loadStories, module);

Any help on where to start debugging this are appreciated.

[jxnblk]

Hi! Not entirely sure what's going wrong here, but be sure you have Storybook set up for use with Emotion (you'll have to consult their docs for that) - I suspect it might have something to do with how Storybook's iframes work

[dennyabrain]

Oh i see. Right! i only looked at gatsby, theme-ui and storybook documentation so far.
I will look into emotion now. thanks

[dennyabrain]

I have two observations to share

1. I dont find any documentation on setting up storybook for emotion.
2. I am trying to test storybook and theme-ui with a dummy react component that looks like this

const SearchInput = (props) => {
    return(
        <div sx={{
            background: 'gray.2'
        }}>
            <h3> Search </h3>
        </div>
    )
}

I notice that not only does this render in storybook without the style applied. but also when I inspect the component, i see its background property to be this :
background: gray.2

This indicates some issue with babel, doesnt it?

my webpack config for storybook looks like this

module.exports = ({ config }) => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
  
    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve("babel-loader")
  
    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve("@babel/preset-react"),
      require.resolve("@babel/preset-env"),
      require.resolve("@emotion/babel-preset-css-prop")
    ]
  
    config.module.rules[0].use[0].options.plugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve("@babel/plugin-proposal-class-properties"),
      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
      require.resolve("babel-plugin-remove-graphql-queries"),
    ]
  
    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ["browser", "module", "main"]

    return config
  }

I see that there's nothing that indicates any loader/preset for theme-ui or emotion.
Emotion's documentation talks about a plugin 'babel-plugin-emotion', maybe i should add this here?

Another concern, if i am not wrong, i think emotion adds the css prop but its actually theme-ui that adds the sx prop, right? so to support that do we need some other babel plugin?

Sorry if this sounds scattered. I am new to the theme-ui, emotion, gatsby eco system and trying to piece together all moving parts to make sense of it.

[johno]

Since the css is being applied to your dummy component, it seems to indicate that theme-ui's custom pragma is working but it's missing context from Theme UI's ThemeProvider.

[dennyabrain]

i see. what could be causing that? is there any additional information i could provide to make it easier for you to assess this?

[johno]

The first think I'd try is manually wrapping your test component to see if the styles are picked up:

import { ThemeProvider } from 'theme-ui'
import theme from './some/place'

const SearchInput = (props) => {
    return(
      <ThemeProvider theme={theme}>
        <div sx={{
            background: 'gray.2'
        }}>
          <h3> Search </h3>
        </div>
      </ThemeProvider>
    )
}

[dennyabrain]

I did. the style isn't picked up.

[johno]

To clarify, it does still show background: 'gray.2' being applied to the div in dev tools?

[dennyabrain]

Yes. i should have been clearer. in the inspector the style is still background: gray.2

not sure if this is significant but its actually gray.2 and not 'gray.2'

[johno]

Hmmm, yeah it's odd. Could you provide a reproduction? Seems like provider context is being lost in Storybook but I have no idea how/why.

[dennyabrain]

I had a functioning gatsby site with theme-ui and typography.js configured. I am able to use the sx prop to set style and all the items in the theme object are available to me.

First i tried to setup storybook in my project.
cd <project-dir>
npx -p @storybook/cli sb init

which created a .storybook directory in my gatsby project. this is the content of my .storybook/config.js file

import { configure, addDecorator } from '@storybook/react';
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from '../src/gatsby-plugin-theme-ui/index'


// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {},
}
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = ""
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
  action("NavigateTo:")(pathname)
}

addDecorator((story) => (
  <ThemeProvider theme={theme}>
    {story()}
  </ThemeProvider>
))

configure(loadStories, module);

I think the only thing of relevance is the addDecorator function here, which i learnt is how storybook wants you to wrap your components. its also how you would implement something like redux into storybook.

this is the basic setup. i'll also post somethings i tried after this.

[dennyabrain]

here's a webpack config file i found online meant for gatsby to work with storybook. though i am not sure if its relevant. pasting here regardless

it goes in /storybook/webpack.config.js

module.exports = ({ config }) => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
  
    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve("babel-loader")
  
    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve("@babel/preset-react"),
      require.resolve("@babel/preset-env"),
      require.resolve("@emotion/babel-preset-css-prop")
    ]
  
    config.module.rules[0].use[0].options.plugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve("@babel/plugin-proposal-class-properties"),
      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
      require.resolve("babel-plugin-remove-graphql-queries"),
    ]
  
    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ["browser", "module", "main"]

    return config
  }

[dennyabrain]

is that helpful?

[dennyabrain]

looks like its some kind of a known bug with no known solution so far
storybookjs/storybook#7325

[dennyabrain]

ok this has been a weird journey :P

i just realized that the issue only happened if i set the style as background: gray.2. if i set the style as backgroundColor: gray.2, it works as expected. I will paste my ./storybook/config.js here for anyone who is trying to get storybook working with theme-ui and typography.js.

closing my issue since its resolved for me i think.

import { configure, addDecorator, addParameters } from '@storybook/react';
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from '../src/gatsby-plugin-theme-ui/index'
import typography from '../src/gatsby-plugin-typography'

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator((story) => (
  <ThemeProvider theme={theme}>
    {story()}
  </ThemeProvider>
))

configure(loadStories, module);
typography.injectStyles()