28 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/redux/middleware/transitionMiddleware.js:
--------------------------------------------------------------------------------
1 | import {ROUTER_DID_CHANGE} from 'redux-router/lib/constants';
2 | import getDataDependencies from '../../helpers/getDataDependencies';
3 |
4 | const locationsAreEqual = (locA, locB) => (locA.pathname === locB.pathname) && (locA.search === locB.search);
5 |
6 | export default ({getState, dispatch}) => next => action => {
7 | if (action.type === ROUTER_DID_CHANGE) {
8 | if (getState().router && locationsAreEqual(action.payload.location, getState().router.location)) {
9 | return next(action);
10 | }
11 |
12 | const {components, location, params} = action.payload;
13 | const promise = new Promise((resolve) => {
14 |
15 | const doTransition = () => {
16 | next(action);
17 | Promise.all(getDataDependencies(components, getState, dispatch, location, params, true))
18 | .then(resolve)
19 | .catch(error => {
20 | // TODO: You may want to handle errors for fetchDataDeferred here
21 | console.warn('Warning: Error in fetchDataDeferred', error);
22 | return resolve();
23 | });
24 | };
25 |
26 | Promise.all(getDataDependencies(components, getState, dispatch, location, params))
27 | .then(doTransition)
28 | .catch(error => {
29 | // TODO: You may want to handle errors for fetchData here
30 | console.warn('Warning: Error in fetchData', error);
31 | return doTransition();
32 | });
33 | });
34 |
35 | if (__SERVER__) {
36 | // router state is null until ReduxRouter is created so we can use this to store
37 | // our promise to let the server know when it can render
38 | getState().router = promise;
39 | }
40 |
41 | return promise;
42 | }
43 |
44 | return next(action);
45 | };
46 |
--------------------------------------------------------------------------------
/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 | 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 |
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/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 | const NullComponent = null;
15 |
16 | beforeEach(() => {
17 | getState = 'getState';
18 | dispatch = 'dispatch';
19 | location = 'location';
20 | params = 'params';
21 |
22 | CompWithNoData = () =>
23 | ;
24 |
25 | CompWithFetchData = () =>
26 | ;
27 |
28 | CompWithFetchData.fetchData = (_getState, _dispatch, _location, _params) => {
29 | return `fetchData ${_getState} ${_dispatch} ${_location} ${_params}`;
30 | };
31 | CompWithFetchDataDeferred = () =>
32 | ;
33 |
34 | CompWithFetchDataDeferred.fetchDataDeferred = (_getState, _dispatch, _location, _params) => {
35 | return `fetchDataDeferred ${_getState} ${_dispatch} ${_location} ${_params}`;
36 | };
37 | });
38 |
39 | it('should get fetchDatas', () => {
40 | const deps = getDataDependencies([
41 | NullComponent,
42 | CompWithFetchData,
43 | CompWithNoData,
44 | CompWithFetchDataDeferred
45 | ], getState, dispatch, location, params);
46 |
47 | expect(deps).to.deep.equal([
48 | 'fetchData getState dispatch location params'
49 | ]);
50 | });
51 |
52 | it('should get fetchDataDeferreds', () => {
53 | const deps = getDataDependencies([
54 | NullComponent,
55 | CompWithFetchData,
56 | CompWithNoData,
57 | CompWithFetchDataDeferred
58 | ], getState, dispatch, location, params, true);
59 |
60 | expect(deps).to.deep.equal([
61 | 'fetchDataDeferred getState dispatch location params'
62 | ]);
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing Guidelines
2 |
3 | Some basic conventions for this project.
4 |
5 | ### General
6 |
7 | Please make sure that there aren't existing pull requests attempting to address the issue mentioned. Likewise, please check for issues related to update, as someone else may be working on the issue in a branch or fork.
8 |
9 | * Non-trivial changes should be discussed in an issue first
10 | * Develop in a topic branch, not master
11 | * Squash your commits
12 |
13 | ### Linting
14 |
15 | Please check your code using `eslint` before submitting your pull requests, as the CI build will fail if `eslint` fails.
16 |
17 | ### Commit Message Format
18 |
19 | Each commit message should include a **type**, a **scope** and a **subject**:
20 |
21 | ```
22 | 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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |