docs: added live examples to migration from docz

examples/stories/src/blogs/docz-migration.mdx

@@ -9,6 +9,9 @@ tags:
   - docz
   - gatsby
 ---
+import { Playground, Props, Story } from '@component-controls/blocks';
+import { Button } from '../components/Button'
+
 
 # Migration
 
@@ -101,10 +104,6 @@ The **files** field is mapped to the **stories** configuration field
 
 component-controls provides a similar component to docz's `<Playground />` and it can be imported from the `@component-controls/blocks` 
 
-```
-import { Playground } from '@component-controls/blocks';
-```
-
 ```js:title=playground.mdx
 ---
 name: Playground
@@ -116,23 +115,48 @@ import { Button } from '../src/components/Button'
 
 # Button
 
-## Basic usage
+<Playground>
+  <Button kind="secondary">Click me</Button>
+</Playground>
+```
+live example:
 
 <Playground>
   <Button>Click me</Button>
-  <Button kind="secondary">Click me</Button>
+</Playground>
+
+You can also wrap the component code in a `<Story />` component in order to display the source code
+
+```js:title=playground.mdx
+---
+name: Playground
+menu: Components
+---
+
+import { Playground, Story } from '@component-controls/blocks';
+import { Button } from '../src/components/Button'
+
+# Button
+
+<Playground>
+  <Story name='example'>
+    <Button kind="secondary">Click me</Button>
+  </Story>  
 </Playground>
 ```
+live example:
+
+<Playground>
+  <Story name='example'>
+    <Button kind="secondary">Click me</Button>
+  </Story>  
+</Playground>
 
 
 ## Props
 
 component-controls provides a similar component to docz's `<Props />` and it can be imported from the `@component-controls/blocks` 
 
-```
-import { Props } from '@component-controls/blocks';
-```
-
 ```js:title=props.mdx
 ---
 name: Props
@@ -145,3 +169,7 @@ import { Button } from '../src/components/Button'
 # Button
 
 <Props of={Button} />
+```
+live example:
+
+<Props of={Button} />

ui/blocks/src/Playground/BasePlayground.tsx

@@ -37,11 +37,13 @@ export type PlaygroundProps = PlaygroundOwnProps &
 
 export type BasePlaygroundProps = PlaygroundProps & {
   story?: Story;
+  wrapper?: boolean;
 };
 
 export const BasePlayground: FC<BasePlaygroundProps> = ({
   children,
   story,
+  wrapper = true,
   ...props
 }) => {
   const custom = useCustomProps<PlaygroundProps>(NAME, props);
@@ -132,7 +134,11 @@ export const BasePlayground: FC<BasePlaygroundProps> = ({
       >
         <Zoom scale={scale || 1}>
           <PlaygroundContext.Provider value={{ useDescription: true }}>
-            <Box variant="playground.container">{children}</Box>
+            {wrapper ? (
+              <Box variant="playground.container">{children}</Box>
+            ) : (
+              children
+            )}
           </PlaygroundContext.Provider>
         </Zoom>
       </PanelContainer>

ui/blocks/src/Playground/StoryPlayground.tsx

@@ -50,5 +50,11 @@ export const StoryPlayground: FC<StoryPlaygroundProps> = ({
       />
     ),
   });
-  return <BasePlayground actions={[...actions, ...storyActions]} {...props} />;
+  return (
+    <BasePlayground
+      wrapper={false}
+      actions={[...actions, ...storyActions]}
+      {...props}
+    />
+  );
 };