modified to formidable labs

Author: prasanna1211

docs/client/components/AppNavbar/styles.scss

@@ -7,6 +7,7 @@ body {
 }
 
 :local(.navbar) {
+  z-index: 10;
   position: fixed;
   min-height: 75px;
   width: 100%;

docs/client/components/PlaygroundPage/PlaygroundWithPreview/Playground.js

@@ -1,20 +1,14 @@
 import React from 'react';
-import Preview from './Preview';
-import Playground from './Playground';
+import {
+  LiveProvider,
+  LiveEditor,
+  LiveError,
+  LivePreview
+} from 'react-live';
+import Switch from 'react-switch';
+import components from '../../../../../src';
 import styles from './styles.scss';
-
-const defaultCode = `
-  class Example extends React.Component {
-    render() {
-      return (
-        <div>
-          Example
-        </div>
-      )
-    }
-  }
-  return <Example />;
-`;
+import theme from '../../../components/common/DefaultCode/theme.scss';
 
 class PlaygroundWithPreview extends React.Component {
   constructor(props) {
@@ -24,12 +18,6 @@ class PlaygroundWithPreview extends React.Component {
     };
   }
 
-  handleOnChangeCode = (code) => {
-    this.setState({
-      code,
-    });
-  }
-
   render() {
     const {
       activeComponent,
@@ -42,20 +30,30 @@ class PlaygroundWithPreview extends React.Component {
         <div className="header">
           Playground
         </div>
-        <div>
-          <Playground
-            code={this.props.defaultCode}
-            onChange={this.handleOnChangeCode}
-            activeComponent={activeComponent}
-            expandDocumentation={expandDocumentation}
-            isDocumentationOn={isDocumentationOn}
-          />
-          
-          <Preview
-            code={this.state.code}
-          />
-        </div>
-
+        <LiveProvider 
+          scope={{ ...components, theme }}
+          code={this.props.defaultCode}
+        >
+          <div className="code-editor">
+            <LiveEditor />
+            <div className="doc-enabler">
+              <label htmlFor="normal-switch">
+                <div>Show Docs</div>
+                <Switch
+                  onChange={expandDocumentation}
+                  checked={isDocumentationOn}
+                  className="switch"
+                />
+              </label>
+            </div>
+          </div>
+          <div className="code-preview">
+            <LivePreview />
+            <div className="error">
+              <LiveError />
+            </div>
+          </div>
+        </LiveProvider>
       </div>
     );
   }

docs/client/components/PlaygroundPage/PlaygroundWithPreview/Preview.js

@@ -1,40 +1,23 @@
 :local(.playground-preview) {
-  position: fixed;
-  height: 100%;
-  width: 60%;
-  .header {
-    font-size: 24px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    margin: 10px 25px;
+  .prism-code {
+    white-space: pre-wrap !important;
   }
-}
-
-:local(.playground) {
-  position: fixed;
-  left: 15%;
-  width: 40%;
-  height: 100%;
-  .doc-enabler {
-    margin: 40px auto;
-    width: 40%;
-    .switch {
-      margin-left: 10px;
-      margin-top: 10px;
-    }
+  .code-editor {
+    width: 50%;
+    float: left;
   }
-}
 
-:local(.preview) {
-  .header {
-    font-size: 24px;
-    font-weight: bold;
+  .code-preview {
+    width: 45%;
+    float: left;
+    margin-left: 15px;
+    .error {
+      color: red;  
+    }
   }
-  position: fixed;
-  left: 60%;
-  width: 35%;
-  height: 100%;
-  .error {
-    color: red;
+  
+  .doc-enabler {
+    text-align: center;
+    margin-top: 40px;
   }
-}
+}

docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

@@ -32,6 +32,4 @@ class Demo extends React.Component {
     )
   }
 }
-
-return <Demo />;
 `;

docs/client/components/PlaygroundPage/PlaygroundWithPreview/styles.scss

@@ -11,6 +11,4 @@ class Demo extends React.Component {
     )
   }
 }
-
-return <Demo />;
 `;

docs/client/components/common/DefaultCode/Button/index.js

@@ -53,6 +53,7 @@
     "ramda": "^0.25.0",
     "react": "^16.3.2",
     "react-css-themr": "^2.1.2",
-    "react-dom": "^16.3.2"
+    "react-dom": "^16.3.2",
+    "react-live": "^1.11.0"
   }
 }