Docz: SyntaxError when exporting a component in mdx file

[ilyanoskov]

Bug Report

Describe the bug
I have tried to create a provider component to use with emotion-theming, but I get a syntax error.

Enviroment

• OS: OSX 10.13.5
• Node/npm version: 10.1

Additional context/Screenshots

[Swapnull]

Just a guess but does wrapping your JSX in parens fix it?
eg.

export default ({ children }) => (
  <ThemeProvider theme={standard} >
      { children }
  </ThemeProvider>
)

[ilyanoskov]

@Swapnull

I have tried it as well, I still get this error

[Swapnull]

Ooh interesting, it seems like it may be having issues with your line break characters. If you put it all on one line does it work? I am just taking shots at the air, if not then I will maybe get time to look into this later.

[ilyanoskov]

@Swapnull it worked! Would never think of such thing. Thank you very much for help!

I face the other issue now, it seems that the theme does not get passed the correctly. The button is supposed to be blue but it's grey instead.
Is it possible for ThemeProvider to interfere with Docz theming somehow?

When I put ThemeProvider directly above Button component, everything works and the button is blue. I have tried creating a wrapper, and now I have tried default export, both times the button is grey instead.

once again, thank you very much for your time! We are considering to use this for our component library at SumUp. If we manage to get through some hurdles we will use it :)

[Swapnull]

So there is definitely an issue with line endings. What line endings are you using? @pedronauck this probably needs a 'bug' label.

As for the actual styling of the button, I think you are using the theme wrong. As far as I understand, the theme is the actual look and feel of the site, the colour of the side bar, etc.

If I am understanding correctly, you are trying to style your component with a theme, whereas you should be applying those styles in your button component.
To actually make your button blue, you should do something like.

// Button.js
export default ( { color, children } )  => 
    ( <button style={{ backgroundColor: color }}> { children } </button> )

// Button.mdx
import Button from './button.js';
import Playground from 'docz';

<Playground>
   <Button color="blue">Click Me</Button>
</Playground>

[ilyanoskov]

@Swapnull I use vim, nothing fancy in terms of line endings.

I don't try to modify a theme for docz, I am trying to use themes for my components.
I believe my issue with stylings and context providers has something to do with #75. My Button component has a context consumer and is supposed to hide all the logic you have described.

[pedronauck]

@ilyanoskov I released a wrapper property for <Playground> on v0.7.1, update and let me know if your issue is fixed, please 🙏

[ilyanoskov]

@pedronauck thanks for asking. Unfortunately the issue was not solved, we are also using react-emotion for theming in our project and it requires <ThemeProvider> for components. The wrapper prop that you provided wraps the whole playground component. Our <ThemeProvider> seems to interfere with docz's theming (name collision for values like color, etc). Projects that use react-emotion theming for their components will have this issue.

The alternative solution would be to have Wrapper.js to wrap only children, not the entire playground. This way there will be no conflict with theming and playground components can get rendered.

Side Note:
We are also wondering how this is also going to affect docz if we decide to customize it with our own components that require our <ThemeProvider>. Will there be collision again?

[pedronauck]

Right @ilyanoskov, I was thinking about that and I figured out that we could have problems. Will be nice if we have some option to change the default theme property passed by context on <ThemeProvider>, maybe this could fix this issue. And yes, if you use your ThemeProvider as a wrapper for entire application will collide with our ThemeProvider.

I'll do two things:

1. Find a way to change the default theme property passed by our ThemeProvider
2. Put <Playground> wrapper just around the children instead of entire component.

Thanks the help ✌️

[ilyanoskov]

@pedronauck I can help with the second part if you need it? Can I make a pull request or you are pretty much done with it by now? I suppose it's a trivial change.

[pedronauck]

I'm releasing a new v0.9.0 with this fix right now @ilyanoskov, but thanks 🙏

[ilyanoskov]

@pedronauck that's great! I tried to use the changes in the beta version, but it does not work with babel6 docz plugin and I get an error saying I need babel 7. Just a heads up for the future 0.9.0 release ;)

[pedronauck]

For sure @ilyanoskov, I'm testing the new v0.9 yet, because will have a lot of changes on the release... but I think that in few days are ready, I made a lot of good improvements ✌️

[pedronauck]

Fixed on v0.9.0 🚀