Proptypes doesn't generated with emotionjs

[kossel]

My previous issue #1017

With emotion js (https://emotion.sh) I can't get prop-types generated in styleguidist without tricking it into a stateless component.

demo: https://github.com/kossel/example

Look at https://github.com/kossel/example/blob/master/src/components/EmotionStyledButton.js

export it in a normal way will not get prop types generated (line 13 - 16). my work around is to wrap it into a stateless component (uncomment line 20 - 24 see)

Tried with @component as https://react-styleguidist.js.org/docs/thirdparties.html says doen't help either.

is there a more elegant way without having to wrap it into another Component?

[sapegin]

It does work when you use a template literal:

const EmotionStyledButton = styled(Button)`
    color: red;
`;

And when you don't, there's a warning:

Warning: Cannot parse src/components/EmotionStyledButton.js: TypeError: Got unsupported definition type. Definition must be one of ObjectExpression, ClassDeclaration, ClassExpression,VariableDeclaration, ArrowFunctionExpression, FunctionExpression, TaggedTemplateExpression or FunctionDeclaration. Got "CallExpression"instead.

So likely react-docgen doesn't support object notation.

[kossel]

yup that worked! thanks! maybe this can added to the https://react-styleguidist.js.org/docs/thirdparties.html page as a caveat when using emotion js

[sapegin]

That's a great idea for a pull request ;-)

[stepancar]

hm... looks like it should be documented in react-docgent but not in RSG.

[sapegin]

We have a page about third-party libraries, it could be a good place.

[styleguidist-bot]

:tada: This issue has been resolved in version 7.2.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: