Allow `<Playground>` inside elements

Feature Request

To hide the required context for my element, I’ld like to write the following mdx:

<Provider store={createStore(() => ({}))}>
  <Playground>
    <MyButton />
  </Playground>
</Provider>

But in that case, the Playground component doesn’t work. It forces me to put the context inside playground, which leads to large example code with unrelated elements.

<Playground>
  <Provider store={createStore(() => ({}))}>
    <MyButton />
  </Provider>
</Playground>

I know I can define a wrapper inside doczrc.js, but I’m documenting a large project with several different contexts, so a single wrapper is not an option.

Somehow related to #68.

[jonathancopperstone]

hey @huchenme, this is my setup:

I set up a component file which has the wrapper:

export default ({ children }) => (
  <MyComponentOrPlayground prop={ any }>
    { children }
  </MyComponentOrPlayground>
)

and reference this in your doczrc

export default {
  ...,
  wrapper: 'path/to/my/playground/wrapper'
}

[victorcabeceira]

Hi, in case it helps anyone, that’s how I got around.

doczrc.js configuration

//doczrc.js (on root)

export default {
  src: './src',
  wrapper: 'src/wrapper',
  ...
}

wrapper file

// wrapper.js (on ./src)

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';


export default ({ children }) => (
  <Provider store={createStore()}>
    { children }
  </Provider>
);

Then, just proceed with your docz documentation

// component.mdx

import { Playground, Props } from 'docz';
import Component from './path-to-component';

<Playground>
  <Component />
</Playground>