modularized components to load

Author: prasanna1211

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

@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { transform } from 'babel-standalone';
-import Card from '../../../../../src/card';
-import Button from '../../../../../src/button';
+import components from '../../../../../src';
 import theme from '../../../components/common/DefaultCode/theme.scss';
 import styles from './styles.scss';
 
+console.log('components ', components);
+
 class Preview extends React.Component {
   constructor(props) {
     super(props);
@@ -85,9 +86,14 @@ class Preview extends React.Component {
       <div className={styles.preview}>
         {
           this.state.error !== null ? (
-            <div className="error">
-              {this.state.error}
-            </div>
+            <React.Fragment>
+              <div className="header">
+                Error
+              </div>
+              <div className="error">
+                {this.state.error}
+              </div>
+            </React.Fragment>
           ) : null
         }
         <div ref="mount" />
@@ -102,7 +108,11 @@ Preview.propTypes = {
 };
 
 Preview.defaultProps = {
-  scope: { React, Card, Button, theme },
+  scope: { 
+    React, 
+    ...components,
+    theme,
+  },
 };
 
 export default Preview;

src/index.js

@@ -1,14 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import Button from './button';
+import Card from './card';
 
-import CardExample from './examples/card';
-import ButtonExample from './examples/button';
-
-const Index = () => (
-  <div>
-    <CardExample />
-    <ButtonExample />
-  </div>
-);
-
-ReactDOM.render(<Index />, document.getElementById('index'));
+export default {
+  Button,
+  Card,
+}