React-styleguidist: Document usage with styling libraries

[sapegin]

I’m sue Styleguidist works with most of CSS in JS and styling libraries our of the box but set up could be not obvious. Would be nice to try all of them, find a working set up and document it.

• [x] [Styled Components](https://www.styled-components.com/) (already documented but could be improved, see also https://github.com/reactjs/react-docgen/issues/187 and https://github.com/styled-components/styled-components/issues/945)
• [ ] [react-jss](https://github.com/cssinjs/react-jss)
• [x] [Fela](https://github.com/rofrischmann/fela) (should be similar to SC, see also #478)
• [x] [react-css-modules](https://github.com/gajus/react-css-modules) (named export of the base component works, see #501)
• [ ] [Glamorous](https://github.com/paypal/glamorous)
• [ ] [Aphrodite](https://github.com/Khan/aphrodite)
• [ ] [Radium](https://github.com/FormidableLabs/radium)
• [x] [Styletron](https://github.com/rtsao/styletron)

[n1313]

I'm using CSS Modules together with themr, I'll try to find time to write a few words about my setup.

[sapegin]

I’ve added a new guide to the docs to document usage with third-party libraries. Feel free to submit a pull request if you have experience with libraries not described in the guide yet.

https://react-styleguidist.js.org/docs/thirdparties.html

[a-ignatov-parc]

We are using react-jss and there is no extra setup needed. At least for current release. There is refactoring in progress to fix SSR issues in JSS but I don't think that it will change something in configuration.

[sapegin]

Fela has an official example now: https://react-styleguidist.js.org/docs/thirdparties.html#fela

[aaronjensen]

@sapegin I don't think that the example for styled-components is actually a great way of doing it. It adds another component to the tree that does nothing but pass things on to the styled component. It also adds quite a bit of verbosity to every file.

Is there a way to convince react-docgen that it's actually a component?

[sapegin]

@aaronjensen Sure, it can be improved. But that’s the best possible solution for now as much as I know.

There are couple of issues in react-docgen repo couple of unfinished PRs:

• https://github.com/reactjs/react-docgen/pull/195
• https://github.com/reactjs/react-docgen/pull/198

Also there’s some unfinished work here:

• https://github.com/Jmeyering/react-docgen-annotation-resolver

[daphnesmit]

How about glamorous? Anybody know a way to work around the fact that it shows ALL glamorous properties not only my interface for a button.

screenshot:

[tizmagik]

We're planning on using Styleguidist for a new shared component repo we're working on at NYT. We're looking to use emotion (which is built on/shares an API with glamor) so I'd be happy to contribute docs back for that.

However, I share @aaronjensen concern about the verbosity required to document these special styled components. Is it just a matter of trying to push this through react-docgen? Or do you think there's anything we could do on Styleguidist side? Maybe Styleguidist could even transparently/automagikally wrap these components with this extra layer before passing through to react-docgen?

Happy to open a separate issue to discuss this further...

[sapegin]

@tizmagik I agree that it could be better ;-) But I‘m not sure we can significantly improve that on our side.

Maybe Styleguidist could even transparently/automagikally wrap these components with this extra layer before passing through to react-docgen?

Do you have any ideas how that could work? And how that would be better than react-docgen handlers?

[tizmagik]

Was thinking maybe a babel-plugin to add an extra export with the syntax that react-docgen is looking for, but you're right a react-docgen plugin/handler would be better. Any thoughts on how we could best move those forward? They seemed to have stalled upstream...

[schnubor]

@n1313 would love to see the CSS modules + themr example.

[kossel]

will it support emotion js?

[sapegin]

@kossel Please open a new issue if you have any _actual_ problems with Emotion.

[sapegin]

Closing this for now, feel free to send more pull requests with documentation!