From 415d349c087075afc9618b760420acb283cdadf3 Mon Sep 17 00:00:00 2001 From: Jeff Date: Wed, 18 May 2016 20:42:21 -0600 Subject: [PATCH 1/2] Cleaning up example and renaming Root to ReactCardsRoot --- examples/main.js | 21 +++++++++++---------- package.json | 3 ++- src/index.js | 2 +- test/cards.test.js | 14 +++++++------- 4 files changed, 21 insertions(+), 19 deletions(-) diff --git a/examples/main.js b/examples/main.js index 04c1065..79ba0ce 100644 --- a/examples/main.js +++ b/examples/main.js @@ -1,9 +1,10 @@ -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() @@ -11,9 +12,9 @@ if (module.hot) { window.it = (text, fn) => fn() } -const renderCards = () => - render(, window.mountNode) - -const run = renderCards - -run() +render( + + + , + window.mountNode +) diff --git a/package.json b/package.json index 594eaec..988e722 100644 --- a/package.json +++ b/package.json @@ -38,5 +38,6 @@ "react-dom": "^15.0.2", "react-hot-loader": "^3.0.0-alpha.8", "showdown": "^1.3.0" - } + }, + "main": "src/index.js" } diff --git a/src/index.js b/src/index.js index 5dcd93c..749a3e5 100644 --- a/src/index.js +++ b/src/index.js @@ -31,7 +31,7 @@ class HotNotify extends Component { } // initialize... -export const Root = ({ history }) => ( +export const ReactCardsRoot = ({ history }) => (
{ main(store.get(), history) } diff --git a/test/cards.test.js b/test/cards.test.js index c4bd2db..a190c23 100644 --- a/test/cards.test.js +++ b/test/cards.test.js @@ -2,7 +2,7 @@ import React from 'react' import { mount, shallow } from 'enzyme' import { assert, expect } from 'chai' import createHistory from 'history/lib/createMemoryHistory' -import ReactCards, { Root } from '../src/index' +import ReactCards, { ReactCardsRoot } from '../src/index' let rc let history @@ -25,14 +25,14 @@ describe('Test React Cards', () => { it('Should display the namespace in menu', () => { rc.card(, 'here is a simple example') - const root = mount() + const root = mount() expect(root.html()).to.contain('foo') }) it('Should display the card if namespace is selected', () => { rc.card(, 'here is a simple example') history.push('/#/foo') - const root = mount() + const root = mount() expect(root.html()).to.contain('hello this is a test') }) @@ -40,7 +40,7 @@ describe('Test React Cards', () => { rc.card(, 'here is a simple example') rc.card(, 'here is a simple example') history.push('/#/foo') - const root = mount() + const root = mount() expect(root.html()).to.contain('hello this is a test') expect(root.html()).to.contain('hello this is another test') }) @@ -57,7 +57,7 @@ describe('Test React Cards', () => { } ) history.push('/#/foo') - const root = mount() + const root = mount() expect(root.find('button')).to.be.length(2) expect(root.find('#model').text()).to.be.equal('123') @@ -66,7 +66,7 @@ describe('Test React Cards', () => { it('Should display a markdown card if namespace is selected', () => { rc.markdown('_test some random markdown_') history.push('/#/foo') - const root = mount() + const root = mount() expect(root.html()).to.contain('test some random markdown') }) @@ -74,7 +74,7 @@ describe('Test React Cards', () => { const assertSomething = () => assert.equals(1, 1) rc.test({ assertSomething }, {title:'some random test'}) history.push('/#/foo') - const root = mount() + const root = mount() expect(root.html()).to.contain('some random test') expect(root.html()).to.contain('assertSomething') }) From cabb86a17d4b8e416ddcdfce0a311b0cf7746c6a Mon Sep 17 00:00:00 2001 From: Jeff Date: Wed, 18 May 2016 20:42:39 -0600 Subject: [PATCH 2/2] fixing a bunch of spacing --- examples/cards.js | 198 +++++++++++++------------- examples/test/advanced.js | 36 ++--- examples/test/components.js | 4 +- examples/webpack.config.js | 74 +++++----- examples/webpack.production.config.js | 81 +++++------ 5 files changed, 194 insertions(+), 199 deletions(-) diff --git a/examples/cards.js b/examples/cards.js index 0d5fa6d..c6d76d6 100644 --- a/examples/cards.js +++ b/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(, 'here is a simple example') - -demo.card( - `## markdown doc - you can use markdown for card documentation - - foo - - bar`, - -) - -demo.card() - -demo.card(, {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.`, - - -) - -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) => - 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) => - 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) => - 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(, 'here is a simple example') + + demo.card( + `## markdown doc + you can use markdown for card documentation + - foo + - bar`, + + ) + + demo.card() + + demo.card(, {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.`, + + + ) + + 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) => + 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) => + 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) => + 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' }) +} diff --git a/examples/test/advanced.js b/examples/test/advanced.js index 770376f..fecef35 100644 --- a/examples/test/advanced.js +++ b/examples/test/advanced.js @@ -4,29 +4,29 @@ import { shallow } from 'enzyme' import { Foo, Bar } from '../components' export function testBarAdvancedComponent() { - describe('Test ', () => { - it('should display a bar. drink up!', () => { - const wrapper = shallow() - assert.equal(wrapper.text(), 'a bar. drink up!') - }) + describe('Test ', () => { + it('should display a bar. drink up!', () => { + const wrapper = shallow() + assert.equal(wrapper.text(), 'a bar. drink up!') + }) - it('should contain class bar', () => { - const wrapper = shallow() - assert.equal(wrapper.find('.bar').length, 1) - }) + it('should contain class bar', () => { + const wrapper = shallow() + assert.equal(wrapper.find('.bar').length, 1) }) + }) } export function testFooAdvancedComponent() { - describe('Test ', () => { - it('should display Foo says \'testing\'', () => { - const wrapper = shallow() - assert.equal(wrapper.text(), "Foo says 'testing.'") - }) + describe('Test ', () => { + it('should display Foo says \'testing\'', () => { + const wrapper = shallow() + assert.equal(wrapper.text(), "Foo says 'testing.'") + }) - it('should contain class foo', () => { - const wrapper = shallow() - assert.equal(wrapper.find('.foo').length, 1) - }) + it('should contain class foo', () => { + const wrapper = shallow() + assert.equal(wrapper.find('.foo').length, 1) }) + }) } diff --git a/examples/test/components.js b/examples/test/components.js index 5146a4c..4a003d6 100644 --- a/examples/test/components.js +++ b/examples/test/components.js @@ -4,8 +4,8 @@ import {shallow} from 'enzyme' import {Foo, Bar} from '../components' export function testBarComponent() { - const wrapper = shallow() - assert.equal(wrapper.text(), 'a bar. drink up!') + const wrapper = shallow() + assert.equal(wrapper.text(), 'a bar. drink up!') } export function testFooComponent() { diff --git a/examples/webpack.config.js b/examples/webpack.config.js index ee4e553..e7a7ad3 100644 --- a/examples/webpack.config.js +++ b/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, + }, }; diff --git a/examples/webpack.production.config.js b/examples/webpack.production.config.js index ab063b0..c2d7349 100644 --- a/examples/webpack.production.config.js +++ b/examples/webpack.production.config.js @@ -1,48 +1,45 @@ var path = require('path') module.exports = { - context: path.join(__dirname, ""), - entry: [ - './main' - ], - output: { - filename: "app.js", - path: path.join(__dirname, "dist") - }, + context: path.join(__dirname, ""), + entry: [ + './main' + ], + output: { + filename: "app.js", + path: path.join(__dirname, "dist") + }, - 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" - }, - { test: /\.(gif|jpg|jpeg|png)(\?]?.*)?$/, - loader: 'url-loader?limit=1024' - }, - { test: /\.json$/, - loader: 'json', exclude: /node_modules/ - } - ] - }, + 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" + }, { + test: /\.(gif|jpg|jpeg|png)(\?]?.*)?$/, + loader: 'url-loader?limit=1024' + }, { + test: /\.json$/, + loader: 'json', + exclude: /node_modules/ + }] + }, - 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 + } };