Storybook: Request: Don't Show Wrapper Components In Story Source

Created on 19 Sep 2018 · 11Comments · Source: storybookjs/storybook

Currently any layout component used to wrap the Component will be included in the story Source, for example:

storiesOf(`Component`, module)
  .add(``, () => (
    <Wrapper>
      <Component />
    </Wrapper>
  ))

Will result in the following in the Story Source:

<Wrapper>
  <Component />
</Wrapper>

However this wrapper is only there for laying out the Component. It shouldn't appear in the story source as it has nothing to do with the story and is confusing for anybody reading the docs.

The Story Source should look like this:

<Component />

Source

Undistraction

👍2

Most helpful comment

@samuelfullerthomas Create a decorator that wraps your component with whatever element(s) you need, then use addDecorator to apply it.

I'm using Styled Components.

DefaultLayoutDecorator

import React from 'react'
import styled from 'styled-components'
import VLayout from '../../components/layouts/VLayout'

const Layout = styled(VLayout).attrs({ spacing: 1 })``

const DefaultLayoutDecorator = storyFn => <Layout>{storyFn()}</Layout>

export default DefaultLayoutDecorator

storiesOf(`Example`, module)
  .addDecorator(DefaultLayoutDecorator)
  .add(`Default`, () => (
    <React.Fragment>
      <Example value={0} />
    </React.Fragment>
  ))

Undistraction on 8 Oct 2018

🎉3 👍2

All 11 comments

Looks like you can get round this by using a decorator.

Undistraction on 19 Sep 2018

would you mind tell me how you solved this @Undistraction ? I want to do the same thing 😃

samuelfullerthomas on 8 Oct 2018

@samuelfullerthomas Create a decorator that wraps your component with whatever element(s) you need, then use addDecorator to apply it.

I'm using Styled Components.

DefaultLayoutDecorator

import React from 'react'
import styled from 'styled-components'
import VLayout from '../../components/layouts/VLayout'

const Layout = styled(VLayout).attrs({ spacing: 1 })``

const DefaultLayoutDecorator = storyFn => <Layout>{storyFn()}</Layout>

export default DefaultLayoutDecorator

storiesOf(`Example`, module)
  .addDecorator(DefaultLayoutDecorator)
  .add(`Default`, () => (
    <React.Fragment>
      <Example value={0} />
    </React.Fragment>
  ))

Undistraction on 8 Oct 2018

🎉3 👍2

Thanks so much @Undistraction!

samuelfullerthomas on 9 Oct 2018

👍1

@Undistraction Your solution is not working for me. The decorator is added to the source as well :( Any idea why?