marc-rutkowski/storybook-addon-props

Addon with injectstyles - not showing the props

Opened this issue · 4 comments

If we inject styles in our component we are not available to see the props. Is there any workaround?

import styles from "./styles.js";
class test extends Component {
    constructor(props) {
    }
    static propTypes = {
        test: PropTypes.string
    };

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}
export default injectSheet(styles)(test);

image

Hi @DuarteAppical,
I think it doesn't work because your component is now wrapped with styles.
Try to also export the original component class :

export class test extends Component {

then use it into your stories like this:

import {test}, StyledTest from 'test';

storiesOf('test', module).addWithDoc(
  'default',
  test, // <- pass the original component to let react-docgen get the props
  'it should render my test component',
  () => <StyledTest test="something" />
);

Let me know if it works!

Hi @marc-rutkowski

I was suspecting... but the way you are suggesting is to export 2 times right?

Like:
export class test extends Component {
constructor(props) {
}
static propTypes = {
test: PropTypes.string
};

render() {
    return (
        <h1>Hello</h1>
    );
}

}
export default injectSheet(styles)(test);

But then I question about performance. Being exporting 2 elements... What do you think?

That's right, you need to export the original component and the wrapped version.
But I don't think there is any noticeable impact on performance by doing this.

Closing this for now.
Feel free to re-open if u have other questions.