Merge pull request #7 from jhicken/master

cleaning up example and some spacing issues

examples/cards.js

@@ -5,101 +5,103 @@ import * as testSimple from './test/simple'
 import * as testComponents from './test/components'
 import * as advancedTestComponents from './test/advanced'
 
-const demo = cards('demo')
-const abc = cards('ABC')
-
-abc.card(<Foo message="yo" />, 'here is  a simple example')
-
-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
-
-  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.`,
-
-  <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.`,
-
-  (state) =>
-    <StatelessCounter
-      value={state.get()}
-      inc={() => state.update(x => x + 1)}
-      dec={() => state.update(x => x - 1)}/>,
-  {
-    init: 23,
-    inspect: true,
-  }
-)
-
-demo.card(
-  `## Undo/Redo
-  Same example as before but with undo/redo controls added by the card.`,
-
-  (state) =>
-    <StatelessCounter
-      value={state.get()}
-      inc={() => state.update(x => x + 1)}
-      dec={() => state.update(x => x - 1)}/>,
-  {
-    init: 1337,
-    history:true,
-  }
-)
-
-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}])}
-      onToggleItem={(index) => state.update(items => [
-        ...items.slice(0, index),
-        {...items[index], done: !items[index].done},
-        ...items.slice(index + 1)
-      ])}/>,
-  {
-    init: [],
-    history: true,
-    inspect: true,
-  }
-)
-
-demo.markdown(`
-# 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.`,
-  testComponents
-)
-
-demo.test(advancedTestComponents, { title: 'advanced component tests' })
+export function buildCards() {
+  const demo = cards('demo')
+  const abc = cards('ABC')
+
+  abc.card(<Foo message="yo" />, 'here is  a simple example')
+
+  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
+
+    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.`,
+
+    <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.`,
+
+    (state) =>
+      <StatelessCounter
+        value={state.get()}
+        inc={() => state.update(x => x + 1)}
+        dec={() => state.update(x => x - 1)}/>,
+    {
+      init: 23,
+      inspect: true,
+    }
+  )
+
+  demo.card(
+    `## Undo/Redo
+    Same example as before but with undo/redo controls added by the card.`,
+
+    (state) =>
+      <StatelessCounter
+        value={state.get()}
+        inc={() => state.update(x => x + 1)}
+        dec={() => state.update(x => x - 1)}/>,
+    {
+      init: 1337,
+      history:true,
+    }
+  )
+
+  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}])}
+        onToggleItem={(index) => state.update(items => [
+          ...items.slice(0, index),
+          {...items[index], done: !items[index].done},
+          ...items.slice(index + 1)
+        ])}/>,
+    {
+      init: [],
+      history: true,
+      inspect: true,
+    }
+  )
+
+  demo.markdown(`
+  # 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.`,
+    testComponents
+  )
+
+  demo.test(advancedTestComponents, { title: 'advanced component tests' })
+}

examples/main.js

@@ -1,19 +1,20 @@
-import React, {Component} from 'react'
+import React from 'react'
 import {render} from 'react-dom'
-import {} from './cards'
-import {CardList} from '../src/components'
+import {buildCards} from './cards'
 import {AppContainer} from 'react-hot-loader'
-import { Root } from '../src/'
+import { ReactCardsRoot } from '../src'
+
+buildCards();
 
 if (module.hot) {
   module.hot.accept()
   window.describe = (text, fn) => fn()
   window.it = (text, fn) => fn()
 }
 
-const renderCards = () =>
-  render(<AppContainer><Root /></AppContainer>, window.mountNode)
-
-const run = renderCards
-
-run()
+render(
+  <AppContainer>
+    <ReactCardsRoot />
+  </AppContainer>,
+  window.mountNode
+)

examples/test/advanced.js

@@ -4,29 +4,29 @@ import { shallow } from 'enzyme'
 import { Foo, Bar } from '../components'
 
 export function testBarAdvancedComponent() {
-    describe('Test <Bar />', () => {
-        it('should display a bar. drink up!', () => {
-            const wrapper = shallow(<Bar/>)
-            assert.equal(wrapper.text(), 'a bar. drink up!')
-        })
+  describe('Test <Bar />', () => {
+    it('should display a bar. drink up!', () => {
+      const wrapper = shallow(<Bar/>)
+      assert.equal(wrapper.text(), 'a bar. drink up!')
+    })
 
-        it('should contain class bar', () => {
-            const wrapper = shallow(<Bar />)
-            assert.equal(wrapper.find('.bar').length, 1)
-        })
+    it('should contain class bar', () => {
+      const wrapper = shallow(<Bar />)
+      assert.equal(wrapper.find('.bar').length, 1)
     })
+  })
 }
 
 export function testFooAdvancedComponent() {
-    describe('Test <Foo />', () => {
-        it('should display Foo says \'testing\'', () => {
-            const wrapper = shallow(<Foo message="testing"/>)
-            assert.equal(wrapper.text(), "Foo says 'testing.'")
-        })
+  describe('Test <Foo />', () => {
+    it('should display Foo says \'testing\'', () => {
+      const wrapper = shallow(<Foo message="testing"/>)
+      assert.equal(wrapper.text(), "Foo says 'testing.'")
+    })
 
-        it('should contain class foo', () => {
-            const wrapper = shallow(<Foo message="testing"/>)
-            assert.equal(wrapper.find('.foo').length, 1)
-        })
+    it('should contain class foo', () => {
+      const wrapper = shallow(<Foo message="testing"/>)
+      assert.equal(wrapper.find('.foo').length, 1)
     })
+  })
 }

examples/test/components.js

@@ -4,8 +4,8 @@ import {shallow} from 'enzyme'
 import {Foo, Bar} from '../components'
 
 export function testBarComponent() {
-    const wrapper = shallow(<Bar/>)
-    assert.equal(wrapper.text(), 'a bar. drink up!')
+  const wrapper = shallow(<Bar/>)
+  assert.equal(wrapper.text(), 'a bar. drink up!')
 }
 
 export function testFooComponent() {

examples/webpack.config.js

@@ -1,45 +1,41 @@
 var path = require('path')
 module.exports = {
-    //devtool: 'source-map',
-    context: path.join(__dirname, ""),
-    entry: [
-      'webpack/hot/only-dev-server',
-      'react-hot-loader/patch',
-      './main',
-    ],
-    output: {
-        filename: "app.js",
-        path: path.join(__dirname, "public"),
-    },
+  //devtool: 'source-map',
+  context: path.join(__dirname, ""),
+  entry: [
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './main',
+  ],
+  output: {
+    filename: "app.js",
+    path: path.join(__dirname, "public"),
+  },
 
-    module: {
-        loaders: [
-            {
-                test: /\.js$/,
-                exclude: /node_modules/,
-                loaders: ['babel?{presets:["es2015", "react", "stage-2"], plugins:["react-hot-loader/babel"]}'],
-            },
-            {
-              test: /\.css$/,
-              loader: "style-loader!css-loader"
-            },
-            {
-                test: /\.less$/,
-                loader: "style-loader!css-loader!less-loader"
-            }
-        ],
-    },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      exclude: /node_modules/,
+      loaders: ['babel?{presets:["es2015", "react", "stage-2"], plugins:["react-hot-loader/babel"]}'],
+    }, {
+      test: /\.css$/,
+      loader: "style-loader!css-loader"
+    }, {
+      test: /\.less$/,
+      loader: "style-loader!css-loader!less-loader"
+    }],
+  },
 
-    node: {
-      fs: "empty",
-    },
+  node: {
+    fs: "empty",
+  },
 
-    // we need this because of enzyme
-    // see https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md
-    externals: {
-      'cheerio': 'window',
-      'react/addons': true,
-      'react/lib/ExecutionEnvironment': true,
-      'react/lib/ReactContext': true,
-    },
+  // we need this because of enzyme
+  // see https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md
+  externals: {
+    'cheerio': 'window',
+    'react/addons': true,
+    'react/lib/ExecutionEnvironment': true,
+    'react/lib/ReactContext': true,
+  },
 };