re-indentation also added editor config and eslint

.editorconfig

@@ -0,0 +1,13 @@
+# This file is for unifying the coding style for different editors and IDEs.
+# More information at http://EditorConfig.org
+
+# No .editorconfig files above the root directory
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 2

.eslintrc

@@ -0,0 +1,43 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "jasmine": true,
+    "es6": true,
+    "node": true
+  },
+  "rules": {
+    "react/jsx-uses-react": [1],
+    "camelcase": [0, {"properties": "always"}],
+    "indent": [2, 2], // 2 spaces indentation
+    "semi": [2, "always"],
+    "keyword-spacing": [2],
+    "space-before-function-paren": [2, "never"],
+    "space-before-blocks": [2, "always"],
+    "space-infix-ops": [2, {"int32Hint": false}],
+    "quotes": [1, "single", "avoid-escape"],
+    "max-len": [2, 100, 4],
+    "eqeqeq": [2, "allow-null"],
+    "strict": 0,
+    "no-nested-ternary": [2],
+    "no-underscore-dangle": 0,
+    "comma-style": [2],
+    "one-var": [2, "never"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "consistent-this": [0, "self"]
+  },
+  "plugins": [
+    "react"
+  ],
+  "globals": {
+    "jest": true,
+    "React": true
+  }
+}

package.json

@@ -16,6 +16,8 @@
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
     "css-loader": "^0.23.1",
+    "eslint": "^2.11.1",
+    "eslint-plugin-react": "^5.1.1",
     "istanbul": "^1.0.0-alpha",
     "jsdom": "^9.1.0",
     "less": "^2.7.1",
@@ -32,6 +34,7 @@
     "deep-equal": "^1.0.1",
     "enzyme": "^2.3.0",
     "history": "^2.1.1",
+    "lodash": "^4.12.0",
     "myro": "^0.6.2",
     "react": "^15.0.2",
     "react-addons-test-utils": "^15.0.2",

src/Container.js

@@ -8,61 +8,63 @@ import style from './style.less'
 export default class Container extends Component {
 
     constructor(props) {
-        super(props)
-        this.state = { activeNamespace : null, routes: this.createRoutes() }
-        this.unlisten = null
+      super(props)
+      this.state = { activeNamespace : null, routes: this.createRoutes() }
+      this.unlisten = null
     }
 
     componentWillMount() {
-        const history = this.props.history? this.props.history : createHistory()
-        this.unlisten = history.listen((location) => {
-            this.setState({activeNamespace: location.hash.replace('#/', '')})
-        })
+      const history = this.props.history? this.props.history : createHistory()
+      this.unlisten = history.listen((location) => {
+        this.setState({activeNamespace: location.hash.replace('#/', '')})
+      })
     }
 
     componentWillUnmount() {
-        this.unlisten()
+      this.unlisten()
     }
 
     createRoutes() {
-        return myro({
-            '#': {
-                name: 'index'
-            },
-            '#/:namespace': {
-                name: 'namespace'
-            }
-        })
+      return myro({
+        '#': {
+          name: 'index'
+        },
+        '#/:namespace': {
+          name: 'namespace'
+        }
+      })
     }
 
     render() {
         const { namespaces } = this.props
         const { routes, activeNamespace } = this.state
         const cards = namespaces[activeNamespace]
         const navCard = this.renderNavCard(routes, activeNamespace)
-        return <div className={style.container}>
-            <h1>React Cards</h1>
-            {cards
-                ? <div className='react-cards-namespace-cards'>
-                    <CardList namespace={ activeNamespace }>{ [navCard, ...cards] }</CardList>
-                </div>
-                : <div className="react-cards-menu">
-                    <CardList>
-                    {map(namespaces, (namespace, key) => (
-                        <Card key={key}>
-                            <a className={style.nav} href={ routes.namespace({ namespace: key }) }>
-                                { key }
-                            </a>
-                        </Card>
-                    ))}
-                    </CardList>
-                </div>
-            }
-        </div>
+        return (
+          <div className={style.container}>
+              <h1>React Cards</h1>
+              {cards
+                  ? <div className='react-cards-namespace-cards'>
+                      <CardList namespace={ activeNamespace }>{ [navCard, ...cards] }</CardList>
+                  </div>
+                  : <div className="react-cards-menu">
+                      <CardList>
+                      {map(namespaces, (namespace, key) => (
+                          <Card key={key} noframe>
+                              <a className={style.nav} href={ routes.namespace({ namespace: key }) }>
+                                  { key }
+                              </a>
+                          </Card>
+                      ))}
+                      </CardList>
+                  </div>
+              }
+          </div>
+        )
     }
     renderNavCard(routes, ns) {
       return (
-        <Card key='navcard'>
+        <Card key='navcard' noframe>
           <div className={style.navCrumbs}>
             <a href={ routes.index() }>home</a>
             &nbsp;/&nbsp;

src/components.js

@@ -1,6 +1,10 @@
-import React from 'react'
+import React ,{Component} from 'react'
+import ReactDOM from 'react-dom'
 import showdown from 'showdown'
 import style from './style.less'
+import Frame from 'react-frame-component'
+import {iframeResizer} from 'iframe-resizer'
+import iframeResizerContentWindow from 'raw!iframe-resizer/js/iframeResizer.contentWindow.min'
 
 const markdownToHtml = str => {
   const conv = new showdown.Converter()
@@ -20,13 +24,48 @@ export const CardList = (props) => (
   </div>
 )
 
-export const Card = (props) => (
-  <div className={"reactcards-card "+style.card}>
-  {props.title ? <CardHeader>{props.title}</CardHeader> : null}
-  {props.doc ? <Markdown className={style.markdownDoc}>{props.doc}</Markdown> : null}
-  {props.children}
-  </div>
+export const MarkdownCard = (props) => (
+  <Card noframe><Markdown>{props.children}</Markdown></Card>
 )
 
-export const MarkdownCard = (props) =>
-  <Card><Markdown>{props.children}</Markdown></Card>
+export class Card extends Component {
+  constructor(props) {
+      super(props)
+  }
+
+  componentDidMount() {
+    if (!this.props.noframe) {
+      this.iframeNode = ReactDOM.findDOMNode(this.refs.iframe)
+      iframeResizer({checkOrigin:false},this.iframeNode)
+    }
+  }
+
+  componentWillUnmount(){
+    if (!this.props.noframe) {
+      this.iframeNode.iFrameResizer.close()
+    }
+  }
+
+  render() {
+    const props = this.props;
+    const iframeContent = `<!DOCTYPE html>
+      <html>
+        <head><script>${iframeResizerContentWindow}</script></head>
+        <body><div id="content"></div></body>
+      </html>`
+    return (
+      <div className={"reactcards-card "+style.card}>
+        {props.title ? <CardHeader>{props.title}</CardHeader> : null}
+        {props.doc ? <Markdown className={style.markdownDoc}>{props.doc}</Markdown> : null}
+        {props.noframe ?
+          <div>{props.children}</div> :
+          <Frame ref="iframe"
+            initialContent={iframeContent}
+            mountTarget="#content">
+            {props.children}
+          </Frame>
+        }
+      </div>
+    );
+  }
+}

src/namespaceStore.js

@@ -1,25 +1,25 @@
 // a simplified example for handling namespaces and their corresponding changes
 const namespaceStore = (initialState = {}) => ({
-    namespaces: initialState,
-    listeners: [],
-    get(namespace) {
-        return namespace? this.namespaces[namespace] : this.namespaces
-    },
-    set(namespace, cards) {
-        this.namespaces[namespace] = cards
-        this.notify()
-    },
-    subscribe(f) {
-        this.listeners.push(f)
-        return () => {
-            this.listeners = this.listeners.filter(l => {
-                return l !== f
-            })
-        }
-    },
-    notify() {
-        this.listeners.map(l => l(this.namespaces))
+  namespaces: initialState,
+  listeners: [],
+  get(namespace) {
+    return namespace? this.namespaces[namespace] : this.namespaces
+  },
+  set(namespace, cards) {
+    this.namespaces[namespace] = cards
+    this.notify()
+  },
+  subscribe(f) {
+    this.listeners.push(f)
+    return () => {
+      this.listeners = this.listeners.filter(l => {
+        return l !== f
+      })
     }
+  },
+  notify() {
+    this.listeners.map(l => l(this.namespaces))
+  }
 })
 
 export default namespaceStore