Storybook-readme: error when using withInfo

Created on 20 Mar 2019  路  5Comments  路  Source: tuchk4/storybook-readme

Hey thanks for this addon, it's really handy. But could you provide an example of how to use it withInfo... no matter which way i do it trying to set both info and readme on the same story throws errors

bug depends on storybook

Most helpful comment

Hope there are no changes in storybook-readme to fix this.
We should wait storybook dev's answer.

All 5 comments

@PaulieScanlon it should work without problems.

  • Can you show en example how did you try it?
  • And what errors you saw?
  • Which version of storybook and storybook-readme are installed?

@tuchk4 Hey. Ok, i'll do my best to give you everything.

I only need to add a readme to one or two stories but am adding a global decorator for withInfo so it needs to be disabled on the story that will use readme instead.

> "@storybook/react": "^5.0.3",
> "storybook-readme": "^5.0.0",
> "@storybook/addon-info": "^5.0.3",

_addons.js_

import '@storybook/addon-info'
import 'storybook-readme/register'

_config.js_

addDecorator(
  withInfo({
    header: false,
    inline: true,
    source: true,
    styles: {
      infoStory: {
        marginTop: '20px',
        height: '64px'
      },
      infoBody: {
        padding: '10px'
      }
    }
  })
)

_snacks.stories.tsx_

import { addReadme } from 'storybook-readme'
const snackReadme = require('./snack.readme.md')

const stories = storiesOf('Snacks', module).addDecorator(addReadme).addParameters({
  readme: {
    content: snackReadme
  }
})

stories.add(
  'usage',
  () => (
      <ButtonMain
        onClick={() => {
          snack.info({
            message: 'I love snacks'
          })
        }}
      >
        click me
      </ButtonMain>
  )
)

The error i get is Cannot convert a Symbol value to a string

if i disabled info it works ok

stories.add(
  'usage',
  () => (
      <ButtonMain
        onClick={() => {
          snack.info({
            message: 'I love snacks'
          })
        }}
      >
        click me
      </ButtonMain>
  ),
  {
    info: {
      disable: true
    }
  }
)

I will try to reproduce issue tomorrow and give a feedback

@PaulieScanlon Seems this is storybook issue https://github.com/storybooks/addon-jsx/issues/34 or https://github.com/storybooks/storybook/issues/6147

This fix really helps https://github.com/storybooks/addon-jsx/issues/34#issuecomment-377270299 but this is not the best solution. It should work out of the box without errors.

going to investigate more deeply.

Hope there are no changes in storybook-readme to fix this.
We should wait storybook dev's answer.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

JamesBliss picture JamesBliss  路  5Comments

gargantuan picture gargantuan  路  5Comments

deehuey picture deehuey  路  3Comments

janusch picture janusch  路  4Comments

mktrue picture mktrue  路  3Comments