React-styleguidist: Integration with other CSSinJS libraries like fela

[aga5tya]

I'm trying to get styleguidist integrated to render fela derived components. What i have now is that i could get the components to render styles by injecting custom template and an alias that has fela's provider component wrapping children.(ref to cookbook redux example)

I'm stuck with the following:
1) When i export a component created by react-fela binding, it says no components are exported by the matched files.

// src/components/Button/Button.js
import React from 'react';
import { createComponent } from 'react-fela'


const BtnStyle = (props) => ({
    width : '300px',
    height : '50px',
    color : (props.color || 'white'),
    border : 'none',
    borderRadius : '3px',
    background : '#888'
})

const Button = createComponent(BtnStyle, 'button')

export default Button

However this works when i wrap it onto another stateless component and then export, also this creates an <undefined __source="[object Object]"><button class="bms-a bms-b bms-c bms-d bms-e bms-f bms-g">Hello</button></undefined> wrap when seen in react tools, but issue 2 exists.

2) For some reason the styles generated by fela is always the last variant (props's state) called in the markdown files. I'm mounting the style node using the wrapper that has fela provider via aliasing.
for.e.g. if i have <Button/> and <Button color="white" /> its always white (above sample) instead of variants.

However, when i go to isolation mode, it renders its state just fine but can't exit the isolation mode, gives me main.bundle.js:44380 Uncaught TypeError: Cannot read property 'type' of undefined from the playground component.

Could someone please point me in the right direction.

@rofrischmann @sapegin your thoughts on this?

[raavanan]

I am facing the Same issues

[Guru107]

I tried integrating with glamor getting the same issue

[sapegin]

Could you please make an example as described here? It will require some debugging ;-)

[aga5tya]

@sapegin , I'm on it, will push to a repo in some time.

[aga5tya]

@sapegin I have pushed the repo sample. Also missed out to add an important info, i have been setting this up with preact-compact. Not sure if this issue depends on it.

https://github.com/aga5tya/styleguidist-fela/tree/master

Would be happy to share any further info needed, kindly let me know.

[aga5tya]

@sapegin,, the see that aliasing the wrapper isn't injecting the context. It's always undefined and fela needs this context to render components created or to render style classNames. Doesn't the wrapper enclose each component or am i missing something ? Took similar approach to the redux example from cookbook.

[sapegin]

That’s how it supposed to work ;-| I’ll try to debug it a bit later.

[aga5tya]

@sapegin ,, second point i mentioned, was because the fela renderer was reinitialized on each component mount. Making it a single instance fixes the issue and different styles/states are injected. Still wondering why first point is happening. I'l update the sample repo in a moment. Updated.

Also unable to edit the code on playground. Gives an error, this.setState is not defined in code mirror lib. Any idea what's going wrong ?

Edit:
@sapegin , for point one, mostly its caused since fela wraps the components via functions and react-docgen isn't able to parse the properties. Possibly related #143, #422, #445.
Right now i get this error, and styleguidist does not render the component at al.
_Warning: src/components/Button/Button.js matches a pattern defined in ”components” or “s
ections” options in your style guide config but doesn’t export a component._

[aga5tya]

@sapegin I have pushed the code that replicates this at https://github.com/aga5tya/styleguidist-fela/tree/export-fela-components, kindly let me know what i am doing wrong, whenever you are free and time permits. For now i am wrapping them and using these.

[sapegin]

@aga5tya It works for me without any warnings and I see some styled components. Am I missing something?

[sapegin]

@Guru107 Could you please make an example as described here for Glamor?

[sapegin]

@aga5tya I think you’re doing the right thing now, that’s the recommended way of using Styled components as well: https://react-styleguidist.js.org/docs/cookbook#how-to-use-react-styleguidist-with-styled-components

[aga5tya]

@sapegin Awesome. Thanks for documenting this. 👍 🎉

[sapegin]

I’ve linked your example from the docs — https://react-styleguidist.js.org/docs/thirdparties.html#fela

Thank you very much!