Is it possible to avoid clash with info addon?

[acomito]

Issue:

Which version are you using?

CNA

  "devDependencies": {
    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-info": "^3.4.10",
    "@storybook/addon-knobs": "^3.4.10",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/react": "^3.4.10",
    "apollo-cache-inmemory": "^1.3.0-beta.6",
    "apollo-client": "^2.3.7",
    "apollo-link": "^1.2.2",
    "apollo-link-http": "^1.5.4",
    "apollo-storybook-react": "^0.1.5",
    "babel-eslint": "^8.2.6",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "color": "^3.0.0",
    "cross-fetch": "^2.2.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.9.1",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "luxon": "^1.3.0",
    "postcss-syntax": "^0.3.1",
    "query-string": "5",
    "react-app-rewire-styled-components": "^3.0.2",
    "react-app-rewired": "^1.5.2",
    "react-slick": "^0.23.1",
    "react-styled-flexboxgrid": "^2.4.0",
    "react-window-size": "^1.2.0",
    "recompose": "^0.28.0",
    "storybook-react-router": "^1.0.1",
    "styled-components": "^3.3.3",
    "styled-normalize": "^4.0.0",
    "stylelint": "^9.3.0",
    "stylelint-config-recommended": "^2.1.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.3.1"
  },

Are you using storybook-router with a react based project or a vue one?

react

Please describe the problem:

I am using the info addon to see prop information etc.

using the storybook-react decorator and I unfortunately see the router props instead of the underlying component's props:

import React from 'react';
import StoryRouter from 'storybook-react-router';
import { storiesOf } from '@storybook/react';

import HealthGauge from './index';

import ChromeLayout from 'components/common/ChromeLayout';

storiesOf('HealthGauge', module)
  .addDecorator(StoryRouter())
  .add('default', () => (
    <ChromeLayout>
      <HealthGauge />
    </ChromeLayout>
  ));

should be something like this:

but I see this:

Please explain how to reproduce the issue or (better) provide an example to do it.

config

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import theme from '../src/lib/theme';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import StoryRouter from 'storybook-react-router';

const req = require.context('../src', true, /stories\.(js)$/);

function loadStories() {
  req.keys().forEach(req);
}

addDecorator((story, context) => withInfo()(story)(context));
//addDecorator((story, context) => withKnobs(story)(context));
addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);
//addDecorator(StoryRouter());

configure(loadStories, module);

[gvaldambrini]

Hi @acomito, I'll have a look ASAP, which probably means at least 3-4 weeks (sorry, it's vacation time 😄). Of course a contribution would be welcome.

[acomito]

No problem at all @gvaldambrini. I was just throwing it out there in case I was missing something simple. I'll report back if I solve it (or determine that it requires a PR of some sort).

[gvaldambrini]

I'm working on this, and I have a first rough prototype that seems to work fine with the info addon. Hopefully in few days I will be able to release a new version fixing this problem. Thanks for the report 😄

[acomito]

amazing thank you

[gvaldambrini]

I'm sorry, but after more tests I need to say that is not possible being completely transparent to other decorators (in this case the problem is with the story source). The workaround I can offer you is to put StoryRouter after the info addon, and everything works as expected.