28 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/containers/App/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import DocumentMeta from 'react-document-meta';
4 | import { isLoaded as isInfoLoaded, load as loadInfo } from 'redux/modules/info';
5 | import { isLoaded as isAuthLoaded, load as loadAuth, logout } from 'redux/modules/auth';
6 | import { pushState } from 'redux-router';
7 | import config from '../../config';
8 |
9 | @connect(
10 | state => ({user: state.auth.user}),
11 | {logout, pushState})
12 | export default class App extends Component {
13 | static propTypes = {
14 | children: PropTypes.object.isRequired,
15 | user: PropTypes.object,
16 | logout: PropTypes.func.isRequired,
17 | pushState: PropTypes.func.isRequired
18 | };
19 |
20 | static contextTypes = {
21 | store: PropTypes.object.isRequired
22 | };
23 |
24 | componentWillReceiveProps(nextProps) {
25 | if (!this.props.user && nextProps.user) {
26 | // login
27 | this.props.pushState(null, '/loginSuccess');
28 | } else if (this.props.user && !nextProps.user) {
29 | // logout
30 | this.props.pushState(null, '/');
31 | }
32 | }
33 |
34 | static fetchData(getState, dispatch) {
35 | const promises = [];
36 | if (!isInfoLoaded(getState())) {
37 | promises.push(dispatch(loadInfo()));
38 | }
39 | if (!isAuthLoaded(getState())) {
40 | promises.push(dispatch(loadAuth()));
41 | }
42 | return Promise.all(promises);
43 | }
44 |
45 | handleLogout(event) {
46 | event.preventDefault();
47 | this.props.logout();
48 | }
49 |
50 | render() {
51 | return (
52 | Login
30 | {!user && 31 |
32 |
37 |
39 | }
40 | {user &&
41 | This will "log you in" as this user, storing the username in the session of the API server.
38 |
42 |
48 | }
49 | You are currently logged in as {user.name}.
43 | 44 |
45 |
46 |
47 |
53 |
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/__tests__/InfoBar-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import {renderIntoDocument} from 'react-addons-test-utils';
4 | import { expect} from 'chai';
5 | import { InfoBar } from 'components';
6 | import { Provider } from 'react-redux';
7 | import {reduxReactRouter} from 'redux-router';
8 | import createHistory from 'history/lib/createMemoryHistory';
9 | import createStore from 'redux/create';
10 | import ApiClient from 'helpers/ApiClient';
11 | const client = new ApiClient();
12 |
13 | describe('InfoBar', () => {
14 | const mockStore = {
15 | info: {
16 | load: () => {},
17 | loaded: true,
18 | loading: false,
19 | data: {
20 | message: 'This came from the api server',
21 | time: Date.now()
22 | }
23 | }
24 | };
25 |
26 | const store = createStore(reduxReactRouter, null, createHistory, client, mockStore);
27 | const renderer = renderIntoDocument(
28 |
55 | {this.props.children}
56 |
57 |
19 | 
}
48 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/theme/bootstrap.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Bootstrap configuration for bootstrap-sass-loader
3 | *
4 | * Scripts are disabled to not load jQuery.
5 | * If you depend on Bootstrap scripts consider react-bootstrap instead.
6 | * https://github.com/react-bootstrap/react-bootstrap
7 | *
8 | * In order to keep the bundle size low in production
9 | * disable components you don't use.
10 | *
11 | */
12 |
13 | module.exports = {
14 | preBootstrapCustomizations: './src/theme/variables.scss',
15 | mainSass: './src/theme/bootstrap.overrides.scss',
16 | verbose: false,
17 | debug: false,
18 | scripts: {
19 | transition: false,
20 | alert: false,
21 | button: false,
22 | carousel: false,
23 | collapse: false,
24 | dropdown: false,
25 | modal: false,
26 | tooltip: false,
27 | popover: false,
28 | scrollspy: false,
29 | tab: false,
30 | affix: false
31 | },
32 | styles: {
33 | mixins: true,
34 | normalize: true,
35 | print: true,
36 | glyphicons: true,
37 | scaffolding: true,
38 | type: true,
39 | code: true,
40 | grid: true,
41 | tables: true,
42 | forms: true,
43 | buttons: true,
44 | 'component-animations': true,
45 | dropdowns: true,
46 | 'button-groups': true,
47 | 'input-groups': true,
48 | navs: true,
49 | navbar: true,
50 | breadcrumbs: true,
51 | pagination: true,
52 | pager: true,
53 | labels: true,
54 | badges: true,
55 | jumbotron: true,
56 | thumbnails: true,
57 | alerts: true,
58 | 'progress-bars': true,
59 | media: true,
60 | 'list-group': true,
61 | panels: true,
62 | wells: true,
63 | 'responsive-embed': true,
64 | close: true,
65 | modals: true,
66 | tooltip: true,
67 | popovers: true,
68 | carousel: true,
69 | utilities: true,
70 | 'responsive-utilities': true
71 | }
72 | };
73 |
--------------------------------------------------------------------------------
/src/utils/validation.js:
--------------------------------------------------------------------------------
1 | const isEmpty = value => value === undefined || value === null || value === '';
2 | const join = (rules) => (value, data) => rules.map(rule => rule(value, data)).filter(error => !!error)[0 /* first error */ ];
3 |
4 | export function email(value) {
5 | // Let's not start a debate on email regex. This is just for an example app!
6 | if (!isEmpty(value) && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
7 | return 'Invalid email address';
8 | }
9 | }
10 |
11 | export function required(value) {
12 | if (isEmpty(value)) {
13 | return 'Required';
14 | }
15 | }
16 |
17 | export function minLength(min) {
18 | return value => {
19 | if (!isEmpty(value) && value.length < min) {
20 | return `Must be at least ${min} characters`;
21 | }
22 | };
23 | }
24 |
25 | export function maxLength(max) {
26 | return value => {
27 | if (!isEmpty(value) && value.length > max) {
28 | return `Must be no more than ${max} characters`;
29 | }
30 | };
31 | }
32 |
33 | export function integer(value) {
34 | if (!Number.isInteger(Number(value))) {
35 | return 'Must be an integer';
36 | }
37 | }
38 |
39 | export function oneOf(enumeration) {
40 | return value => {
41 | if (!~enumeration.indexOf(value)) {
42 | return `Must be one of: ${enumeration.join(', ')}`;
43 | }
44 | };
45 | }
46 |
47 | export function match(field) {
48 | return (value, data) => {
49 | if (data) {
50 | if (value !== data[field]) {
51 | return 'Do not match';
52 | }
53 | }
54 | };
55 | }
56 |
57 | export function createValidator(rules) {
58 | return (data = {}) => {
59 | const errors = {};
60 | Object.keys(rules).forEach((key) => {
61 | const rule = join([].concat(rules[key])); // concat enables both functions and arrays of functions
62 | const error = rule(data[key], data);
63 | if (error) {
64 | errors[key] = error;
65 | }
66 | });
67 | return errors;
68 | };
69 | }
70 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 |
3 | module.exports = function (config) {
4 | config.set({
5 |
6 | browsers: ['PhantomJS'],
7 |
8 | singleRun: !!process.env.CONTINUOUS_INTEGRATION,
9 |
10 | frameworks: [ 'mocha' ],
11 |
12 | files: [
13 | './node_modules/phantomjs-polyfill/bind-polyfill.js',
14 | 'tests.webpack.js'
15 | ],
16 |
17 | preprocessors: {
18 | 'tests.webpack.js': [ 'webpack', 'sourcemap' ]
19 | },
20 |
21 | reporters: [ 'mocha' ],
22 |
23 | plugins: [
24 | require("karma-webpack"),
25 | require("karma-mocha"),
26 | require("karma-mocha-reporter"),
27 | require("karma-phantomjs-launcher"),
28 | require("karma-sourcemap-loader")
29 | ],
30 |
31 | webpack: {
32 | devtool: 'inline-source-map',
33 | module: {
34 | loaders: [
35 | { test: /\.(jpe?g|png|gif|svg)$/, loader: 'url', query: {limit: 10240} },
36 | { test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
37 | { test: /\.json$/, loader: 'json-loader' },
38 | { test: /\.less$/, loader: 'style!css!less' },
39 | { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }
40 | ]
41 | },
42 | resolve: {
43 | modulesDirectories: [
44 | 'src',
45 | 'node_modules'
46 | ],
47 | extensions: ['', '.json', '.js']
48 | },
49 | plugins: [
50 | new webpack.IgnorePlugin(/\.json$/),
51 | new webpack.NoErrorsPlugin(),
52 | new webpack.DefinePlugin({
53 | __CLIENT__: true,
54 | __SERVER__: false,
55 | __DEVELOPMENT__: true,
56 | __DEVTOOLS__: false // <-------- DISABLE redux-devtools HERE
57 | })
58 | ]
59 | },
60 |
61 | webpackServer: {
62 | noInfo: true
63 | }
64 |
65 | });
66 | };
67 |
--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
1 | /**
2 | * THIS IS THE ENTRY POINT FOR THE CLIENT, JUST LIKE server.js IS THE ENTRY POINT FOR THE SERVER.
3 | */
4 | import 'babel-core/polyfill';
5 | import React from 'react';
6 | import ReactDOM from 'react-dom';
7 | import createHistory from 'history/lib/createBrowserHistory';
8 | import createStore from './redux/create';
9 | import ApiClient from './helpers/ApiClient';
10 | import io from 'socket.io-client';
11 | import {Provider} from 'react-redux';
12 | import {reduxReactRouter, ReduxRouter} from 'redux-router';
13 |
14 | import getRoutes from './routes';
15 | import makeRouteHooksSafe from './helpers/makeRouteHooksSafe';
16 |
17 | const client = new ApiClient();
18 |
19 | const dest = document.getElementById('content');
20 | const store = createStore(reduxReactRouter, makeRouteHooksSafe(getRoutes), createHistory, client, window.__data);
21 |
22 | function initSocket() {
23 | const socket = io('', {path: '/api/ws', transports: ['polling']});
24 | socket.on('news', (data) => {
25 | console.log(data);
26 | socket.emit('my other event', { my: 'data from client' });
27 | });
28 | socket.on('msg', (data) => {
29 | console.log(data);
30 | });
31 |
32 | return socket;
33 | }
34 |
35 | global.socket = initSocket();
36 |
37 | const component = (
38 | About Us
20 |This project was orginally created by Erik Rasmussen 23 | (@erikras), but has since seen many contributions 24 | from the open source community. Thank you to all the contributors. 27 |
28 | 29 |Mini Bar (not that kind)
30 | 31 |Hey! You found the mini info bar! The following component is display-only. Note that it shows the same 32 | time as the info bar.
33 | 34 |Images
37 | 38 |39 | Psst! Would you like to see a kitten? 40 | 41 | 45 |
46 | 47 | {showKitten &&
61 | {component}
62 |
64 |
60 |
81 | );
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/helpers/Html.js:
--------------------------------------------------------------------------------
1 | import React, {Component, PropTypes} from 'react';
2 | import ReactDOM from 'react-dom/server';
3 | import serialize from 'serialize-javascript';
4 | import DocumentMeta from 'react-document-meta';
5 |
6 | /**
7 | * Wrapper component containing HTML metadata and boilerplate tags.
8 | * Used in server-side code only to wrap the string output of the
9 | * rendered route component.
10 | *
11 | * The only thing this component doesn't (and can't) include is the
12 | * HTML doctype declaration, which is added to the rendered output
13 | * by the server.js file.
14 | */
15 | export default class Html extends Component {
16 | static propTypes = {
17 | assets: PropTypes.object,
18 | component: PropTypes.node,
19 | store: PropTypes.object
20 | }
21 |
22 | render() {
23 | const {assets, component, store} = this.props;
24 | const content = component ? ReactDOM.renderToString(component) : '';
25 |
26 | return (
27 |
28 |
29 | {DocumentMeta.renderAsReact()}
30 |
31 |
32 |
33 | {/* styles (will be present only in production with webpack extract text plugin) */}
34 | {Object.keys(assets.styles).map((style, key) =>
35 |
37 | )}
38 |
39 | {/* (will be present only in development mode) */}
40 | {/* outputs a tag with all bootstrap styles + App.scss + it could be CurrentPage.scss. */}
41 | {/* can smoothen the initial style flash (flicker) on page load in development mode. */}
42 | {/* ideally one could also include here the style for the current page (Home.scss, About.scss, etc) */}
43 | { Object.keys(assets.styles).length === 0 ? : null }
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | );
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/api/__tests__/api-test.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import {mapUrl} from '../utils/url';
3 |
4 | describe('mapUrl', () => {
5 |
6 | it('extracts nothing if both params are undefined', () => {
7 | expect(mapUrl(undefined, undefined)).to.deep.equal({
8 | action: null,
9 | params: []
10 | });
11 | });
12 |
13 | it('extracts nothing if the url is empty', () => {
14 | const url = '';
15 | const splittedUrlPath = url.split('?')[0].split('/').slice(1);
16 | const availableActions = {a: 1, widget: {c: 1, load: () => 'baz'}};
17 |
18 | expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
19 | action: null,
20 | params: []
21 | });
22 | });
23 |
24 | it('extracts nothing if nothing was found', () => {
25 | const url = '/widget/load/?foo=bar';
26 | const splittedUrlPath = url.split('?')[0].split('/').slice(1);
27 | const availableActions = {a: 1, info: {c: 1, load: () => 'baz'}};
28 |
29 | expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
30 | action: null,
31 | params: []
32 | });
33 | });
34 | it('extracts the available actions and the params from an relative url string with GET params', () => {
35 |
36 | const url = '/widget/load/param1/xzy?foo=bar';
37 | const splittedUrlPath = url.split('?')[0].split('/').slice(1);
38 | const availableActions = {a: 1, widget: {c: 1, load: () => 'baz'}};
39 |
40 | expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
41 | action: availableActions.widget.load,
42 | params: ['param1', 'xzy']
43 | });
44 | });
45 |
46 | it('extracts the available actions from an url string without GET params', () => {
47 | const url = '/widget/load/?foo=bar';
48 | const splittedUrlPath = url.split('?')[0].split('/').slice(1);
49 | const availableActions = {a: 1, widget: {c: 1, load: () => 'baz'}};
50 |
51 | expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
52 | action: availableActions.widget.load,
53 | params: ['']
54 | });
55 | });
56 |
57 | it('does not find the avaialble action if deeper nesting is required', () => {
58 | const url = '/widget';
59 | const splittedUrlPath = url.split('?')[0].split('/').slice(1);
60 | const availableActions = {a: 1, widget: {c: 1, load: () => 'baz'}};
61 |
62 | expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
63 | action: null,
64 | params: []
65 | });
66 | });
67 | });
68 |
--------------------------------------------------------------------------------
/src/helpers/__tests__/getDataDependencies-test.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import React from 'react';
3 | import { div } from 'react-dom';
4 | import getDataDependencies from '../getDataDependencies';
5 |
6 | describe('getDataDependencies', () => {
7 | let getState;
8 | let dispatch;
9 | let location;
10 | let params;
11 | let CompWithFetchData;
12 | let CompWithNoData;
13 | let CompWithFetchDataDeferred;
14 | let ConnectedCompWithFetchData;
15 | let ConnectedCompWithFetchDataDeferred;
16 |
17 | beforeEach(() => {
18 | getState = 'getState';
19 | dispatch = 'dispatch';
20 | location = 'location';
21 | params = 'params';
22 |
23 | CompWithNoData = () =>
24 | ;
25 |
26 | CompWithFetchData = () =>
27 | ;
28 |
29 | CompWithFetchData.fetchData = (_getState, _dispatch, _location, _params) => {
30 | return `fetchData ${_getState} ${_dispatch} ${_location} ${_params}`;
31 | };
32 | CompWithFetchDataDeferred = () =>
33 | ;
34 |
35 | CompWithFetchDataDeferred.fetchDataDeferred = (_getState, _dispatch, _location, _params) => {
36 | return `fetchDataDeferred ${_getState} ${_dispatch} ${_location} ${_params}`;
37 | };
38 |
39 | ConnectedCompWithFetchData = () =>
40 | ;
41 |
42 | ConnectedCompWithFetchData.WrappedComponent = CompWithFetchData;
43 |
44 | ConnectedCompWithFetchDataDeferred = () =>
45 | ;
46 |
47 | ConnectedCompWithFetchDataDeferred.WrappedComponent = CompWithFetchDataDeferred;
48 | });
49 |
50 | it('should get fetchDatas', () => {
51 | const deps = getDataDependencies([
52 | CompWithFetchData,
53 | CompWithNoData,
54 | CompWithFetchDataDeferred,
55 | ConnectedCompWithFetchData,
56 | ConnectedCompWithFetchDataDeferred
57 | ], getState, dispatch, location, params);
58 |
59 | expect(deps).to.deep.equal([
60 | 'fetchData getState dispatch location params',
61 | 'fetchData getState dispatch location params'
62 | ]);
63 | });
64 |
65 | it('should get fetchDataDeferreds', () => {
66 | const deps = getDataDependencies([
67 | CompWithFetchData,
68 | CompWithNoData,
69 | CompWithFetchDataDeferred,
70 | ConnectedCompWithFetchDataDeferred
71 | ], getState, dispatch, location, params, true);
72 |
73 | expect(deps).to.deep.equal([
74 | 'fetchDataDeferred getState dispatch location params',
75 | 'fetchDataDeferred getState dispatch location params'
76 | ]);
77 | });
78 | });
79 |
--------------------------------------------------------------------------------
/docs/InlineStyles.md:
--------------------------------------------------------------------------------
1 | # Inline Styles
2 |
3 | In the long term, CSS, LESS and SASS are dead. To keep this project on the bleeding edge, we should drop SASS support in favor of inline styles.
4 |
5 | ## Why?
6 |
7 | I think the case is made pretty strongly in these three presentations.
8 |
9 | Christopher Chedeau | Michael Chan | Colin Megill
10 | --- | --- | ---
11 | [](http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html) | [](https://www.youtube.com/watch?v=ERB1TJBn32c) | [](https://www.youtube.com/watch?v=NoaxsCi13yQ)
12 |
13 | Clearly this is the direction in which web development is moving.
14 |
15 | ## Why not?
16 |
17 | At the moment, all the inline CSS libraries suffer from some or all of these problems:
18 |
19 | * Client side only
20 | * No vendor auto prefixing (requires `User-Agent` checking on server side)
21 | * No server side media queries, resulting in a flicker on load to adjust to client device width
22 |
23 | Ideally, a library would allow for all the benefits of inline calculable styles, but, in production, would allow some generation of a CSS block, with media queries to handle device width conditionals, to be inserted into the page with a `Chat
61 | 62 | {user && 63 |
64 |
79 | }
80 | -
65 | {this.state.messages.map((msg) => {
66 | return
- {msg.from}: {msg.text} ; 67 | })} 68 |