Merge pull request #23 from Codebrahma/docs-fixes

prasanna1211 · web-flow · commit a97f6c3414fb · 2018-07-06T16:21:32.000+05:30
Docs fixes
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# How to include in playground
+
+Once the component is added in the ```src``` folder,
+
+1. Add default code in ```client/common/DefaultCode```
+2. Import it in the ```index.js``` file of ```DefaultCode folder```
+3. Import these components in the ```common/componentList.js```
diff --git a/docs/client/components/PlaygroundPage/PlaygroundWithPreview/Preview.js b/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);
@@ -54,31 +55,47 @@ class Preview extends React.Component {
   executeCode () {
     const mountNode = this.refs.mount;
     const scope = this.buildScope(mountNode);
-
+    if (this.state.error) {
+      this.setState({ error: null });
+    }
+    
     try {
       ReactDOM.unmountComponentAtNode(mountNode);
     } catch (e) {
-      console.log(e);
+      
     }
+
     try {
-      
       const x = eval(this.compileCode())(...scope);
       ReactDOM.render(x, mountNode);
       if (this.state.error) {
         this.setState({ error: null });
       }
     } catch (err) {
-      console.log(err);
-      this.setTimeout(() => {
-        this.setState({ error: err.toString() });
-      }, 500);
+        this.setTimeout(() => {
+          this.setState({
+            error: err.message,
+          });
+        }, 100);
     }
   }
 
   render () {
-    console.log('theme ', theme);
+
     return (
       <div className={styles.preview}>
+        {
+          this.state.error !== null ? (
+            <React.Fragment>
+              <div className="header">
+                Error
+              </div>
+              <div className="error">
+                {this.state.error}
+              </div>
+            </React.Fragment>
+          ) : null
+        }
         <div ref="mount" />
       </div>
     );
@@ -91,7 +108,11 @@ Preview.propTypes = {
 };
 
 Preview.defaultProps = {
-  scope: { React, Card, Button, theme },
+  scope: { 
+    React, 
+    ...components,
+    theme,
+  },
 };
 
 export default Preview;
diff --git a/docs/client/components/PlaygroundPage/PlaygroundWithPreview/styles.scss b/docs/client/components/PlaygroundPage/PlaygroundWithPreview/styles.scss
@@ -34,4 +34,7 @@
   left: 60%;
   width: 35%;
   height: 100%;
-}
+  .error {
+    color: red;
+  }
+}
diff --git a/docs/client/styles.scss b/docs/client/styles.scss
@@ -1,6 +1,6 @@
 :local(.app-wrapper) {
   width: 100%;
   .content-wrapper {
-    margin-top: 75px;
+    margin-top: 100px;
   }
 }
diff --git a/docs/public/index.html b/docs/public/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="./docs.js"></script>
+    <script src="/docs.js"></script>
   </body>
 </html>
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
@@ -55,10 +55,6 @@ module.exports = {
   },
   plugins: [
     new ExtractTextPlugin('docs.css', { allChunks: true }),
-    new TransferWebpackPlugin([{
-      from: 'public/images',
-      to: 'images'
-    }], path.resolve(__dirname, './')),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development')
diff --git a/src/card/index.js b/src/card/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import defaultTheme from './defaultTheme.scss';
+import defaultTheme from './theme.scss';
 
 const Card = ({
   children,
diff --git a/src/card/theme.scss b/src/card/theme.scss
diff --git a/src/index.js b/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,
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`:local(.app-wrapper) {`
`2`	`2`	`width: 100%;`
`3`	`3`	`.content-wrapper {`
`4`		`- margin-top: 75px;`
	`4`	`+ margin-top: 100px;`
`5`	`5`	`}`
`6`	`6`	`}`