iframing things up

.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,41 @@
+{
+  "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
+    "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"],
+    "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
+  }
+}

examples/cards.js

@@ -11,37 +11,39 @@ export function buildCards() {
 
   abc.card(<Foo message="yo" />, 'here is  a simple example')
 
-  demo.card(
-    `## markdown doc
-    you can use markdown for card documentation
-    - foo
-    - bar`,
+  demo.card(`
+## markdown doc
+you can use markdown for card documentation
+- foo
+- bar
+    `,
     <Foo message="hello"/>
   )
 
   demo.card(<Foo message="hello world"/>)
 
   demo.card(<Bar/>, {title: 'a bar card'})
 
-  demo.card(
-    `## Counter
+  demo.card(`
+## Counter
 
-    This is a stateful counter. If you change the value prop
-    in the source file it will not update because the new prop will be ignored
-    and instead the component local state is rendered.
+This is a stateful counter. If you change the value prop
+in the source file it will not update because the new prop will be ignored
+and instead the component local state is rendered.
 
-    Implement *componentWillReceiveProps* and override the component local state
-    if you want this to work as expected.`,
+Implement *componentWillReceiveProps* and override the component local state
+if you want this to work as expected.
+    `,
 
     <StatefulCounter value={42}/>
   )
 
-  demo.card(
-    `## Stateless Counter
-    This example shows how to manage state when you have a stateless
-    component. The card can also dump the current state as JSON if
-    you set the *inspect* flag to true.`,
-
+  demo.card(`
+## Stateless Counter
+This example shows how to manage state when you have a stateless
+component. The card can also dump the current state as JSON if
+you set the *inspect* flag to true.
+    `,
     (state) =>
       <StatelessCounter
         value={state.get()}
@@ -53,10 +55,10 @@ export function buildCards() {
     }
   )
 
-  demo.card(
-    `## Undo/Redo
-    Same example as before but with undo/redo controls added by the card.`,
-
+  demo.card(`
+## Undo/Redo
+Same example as before but with undo/redo controls added by the card.
+    `,
     (state) =>
       <StatelessCounter
         value={state.get()}
@@ -68,11 +70,11 @@ export function buildCards() {
     }
   )
 
-  demo.card(
-    `## TodoList
-    A simple todo list showing history and inspect feature
-    with a little more interesting model than just a simple number.`,
-
+  demo.card(`
+## TodoList
+A simple todo list showing history and inspect feature
+with a little more interesting model than just a simple number.
+    `,
     (state) =>
       <TodoList items={state.get()}
         onSubmit={(text) => state.update(items => [...items, {text, done: false}])}
@@ -89,17 +91,18 @@ export function buildCards() {
   )
 
   demo.markdown(`
-  # a markdown card
-  this is a simple markdown card
-  - lorem
-  - ipsum
+# a markdown card
+this is a simple markdown card
+- lorem
+- ipsum
   `)
 
   demo.test(testSimple, {title:'simple tests'})
 
-  demo.test(
-    `## component tests
-    Here you can see the results of some component tests.`,
+  demo.test(`
+## component tests
+Here you can see the results of some component tests.
+    `,
     testComponents
   )
 

examples/webpack.production.config.js

@@ -1,12 +1,12 @@
 var path = require('path')
 module.exports = {
-  context: path.join(__dirname, ""),
+  context: path.join(__dirname, ''),
   entry: [
     './main'
   ],
   output: {
-    filename: "app.js",
-    path: path.join(__dirname, "dist")
+    filename: 'app.js',
+    path: path.join(__dirname, 'dist')
   },
 
   module: {
@@ -16,10 +16,10 @@ module.exports = {
       loaders: ['babel?{presets:["es2015", "react", "stage-2"], plugins:["react-hot-loader/babel"]}']
     }, {
       test: /\.css$/,
-      loader: "style-loader!css-loader"
+      loader: 'style-loader!css-loader'
     }, {
       test: /\.less$/,
-      loader: "style-loader!css-loader!less-loader"
+      loader: 'style-loader!css-loader!less-loader'
     }, {
       test: /\.(gif|jpg|jpeg|png)(\?]?.*)?$/,
       loader: 'url-loader?limit=1024'
@@ -31,7 +31,7 @@ module.exports = {
   },
 
   node: {
-    fs: "empty"
+    fs: 'empty'
   },
 
   // we need this because of enzyme

package.json

@@ -16,11 +16,14 @@
     "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",
     "less-loader": "^2.2.3",
     "mocha": "^2.4.5",
+    "raw-loader": "^0.5.1",
     "sinon": "^1.17.4",
     "style-loader": "^0.13.1",
     "tape": "^4.5.1",
@@ -32,10 +35,13 @@
     "deep-equal": "^1.0.1",
     "enzyme": "^2.3.0",
     "history": "^2.1.1",
+    "lodash": "^4.12.0",
+    "iframe-resizer": "^3.5.3",
     "myro": "^0.6.2",
     "react": "^15.0.2",
     "react-addons-test-utils": "^15.0.2",
     "react-dom": "^15.0.2",
+    "react-frame-component": "^0.6.1",
     "react-hot-loader": "^3.0.0-alpha.8",
     "showdown": "^1.3.0"
   },

public/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>React Cards</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>React Cards</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 

src/Container.js

@@ -7,68 +7,70 @@ 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
-    }
+  constructor(props) {
+    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('#/', '')})
-        })
-    }
+  componentWillMount() {
+    const history = this.props.history ? this.props.history : createHistory()
+    this.unlisten = history.listen((location) => {
+      this.setState({activeNamespace: location.hash.replace('#/', '')})
+    })
+  }
 
-    componentWillUnmount() {
-        this.unlisten()
-    }
+  componentWillUnmount() {
+    this.unlisten()
+  }
 
-    createRoutes() {
-        return myro({
-            '#': {
-                name: 'index'
-            },
-            '#/:namespace': {
-                name: 'namespace'
-            }
-        })
-    }
+  createRoutes() {
+    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>
-    }
-    renderNavCard(routes, ns) {
-      return (
-        <Card key='navcard'>
-          <div className={style.navCrumbs}>
-            <a href={ routes.index() }>home</a>
-            &nbsp;/&nbsp;
-            {ns}
+  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} noframe>
+                  <a className={style.nav} href={ routes.namespace({ namespace: key }) }>
+                    { key }
+                  </a>
+                </Card>
+              ))}
+            </CardList>
           </div>
-        </Card>
-      )
-    }
+        }
+      </div>
+    )
+  }
+  renderNavCard(routes, ns) {
+    return (
+      <Card key='navcard' noframe>
+        <div className={style.navCrumbs}>
+          <a href={ routes.index() }>home</a>
+          &nbsp;/&nbsp;
+          {ns}
+        </div>
+      </Card>
+    )
+  }
 }