react_on_rails 2.0.0.beta.1 → 2.0.0.beta.2

data/lib/generators/react_on_rails/templates/js_linters/client/.jscsrc

@@ -0,0 +1,18 @@
+{
+  "preset": "airbnb",
+  "fileExtensions": [
+    ".js",
+    ".jsx"
+  ],
+  "excludeFiles": [
+    "assets/**",
+    "build/**",
+    "node_modules/**"
+  ],
+  "esprima": "babel-jscs",
+  "validateQuoteMarks": {
+    "mark": "'",
+    "escape": true,
+    "ignoreJSX": true
+  }
+}

data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx

@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+
+// Simple example of a React "dumb" component
+export default class HelloWorldWidget extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    _updateName: PropTypes.func.isRequired,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+
+    // Uses lodash to bind all methods to the context of the object instance, otherwise
+    // the methods defined here would not refer to the component's class, not the component
+    // instance itself.
+    _.bindAll(this, '_handleChange');
+  }
+
+  // React will automatically provide us with the event `e`
+  _handleChange(e) {
+    const name = e.target.value;
+    this.props._updateName(name);
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>
+          Hello, {this.props.name}!
+        </h3>
+        <p>
+          Say hello to:
+          <input type="text" value={this.props.name} onChange={this._handleChange} />
+        </p>
+      </div>
+    );
+  }
+}

data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx

@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+import HelloWorldWidget from '../components/HelloWorldWidget';
+import _ from 'lodash';
+
+// Simple example of a React "smart" component
+export default class HelloWorld extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired, // this is passed from the Rails view
+  }
+
+  constructor(props, context) {
+    super(props, context);
+
+    // Uses lodash to bind all methods to the context of the object instance, otherwise
+    // the methods defined here would not refer to the component's class, not the component
+    // instance itself.
+    _.bindAll(this, '_updateName');
+  }
+
+  state = {name: this.props.name} // how to set initial state in es2015 class syntax
+
+  _updateName(name) {
+    this.setState({name: name});
+  }
+
+  render() {
+    return (
+      <div>
+        <HelloWorldWidget name={this.state.name} _updateName={this._updateName} />
+      </div>
+    );
+  }
+}

data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt

@@ -0,0 +1,8 @@
+import React from 'react';
+import HelloWorld from '../containers/HelloWorld';
+
+export default (props) => {
+  return (
+    <HelloWorld {...props} />
+  );
+};

data/lib/generators/react_on_rails/templates/no_redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import HelloWorld from '../containers/HelloWorld';
+
+export default (props) => {
+  return (
+    <HelloWorld {...props} />
+  );
+};

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx

@@ -0,0 +1,8 @@
+import * as actionTypes from '../constants/helloWorldConstants';
+
+export function updateName(name) {
+  return {
+    type: actionTypes.HELLO_WORLD_NAME_UPDATE,
+    name,
+  };
+}

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx

@@ -0,0 +1,48 @@
+// HelloWorldWidget is an arbitrary name for any "dumb" component. We do not recommend suffixing all your
+// dump component names with Widget.
+
+import React, { PropTypes } from 'react';
+import Immutable from 'immutable';
+import _ from 'lodash';
+
+// Simple example of a React "dumb" component
+export default class HelloWorldWidget extends React.Component {
+  static propTypes = {
+    // We prefix all property and variable names pointing to Immutable.js objects with '$$'.
+    // This allows us to immediately know we don't call $$helloWorldStore['someProperty'], but instead use
+    // the Immutable.js `get` API for Immutable.Map
+    actions: PropTypes.object.isRequired,
+    $$helloWorldStore: PropTypes.instanceOf(Immutable.Map).isRequired,
+  }
+
+  constructor(props, context) {
+    super(props, context);
+
+    // Uses lodash to bind all methods to the context of the object instance, otherwise
+    // the methods defined here would not refer to the component's class, not the component
+    // instance itself.
+    _.bindAll(this, '_handleChange');
+  }
+
+  // React will automatically provide us with the event `e`
+  _handleChange(e) {
+    const name = e.target.value;
+    this.props.actions.updateName(name);
+  }
+
+  render() {
+    const $$helloWorldStore = this.props.$$helloWorldStore;
+    const name = $$helloWorldStore.get('name');
+    return (
+      <div>
+        <h3>
+          Hello, {name}!
+        </h3>
+        <p>
+          Say hello to:
+          <input type="text" value={name} onChange={this._handleChange} />
+        </p>
+      </div>
+    );
+  }
+}

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx

@@ -0,0 +1,8 @@
+// See https://www.npmjs.com/package/mirror-creator
+// Allows us to easily setup constants inside of
+// client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
+import mirrorCreator from 'mirror-creator';
+
+export default mirrorCreator([
+  'HELLO_WORLD_NAME_UPDATE',
+]);

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx

@@ -0,0 +1,43 @@
+import React, { PropTypes } from 'react';
+import HelloWorldWidget from '../components/HelloWorldWidget';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Immutable from 'immutable';
+import * as helloWorldActionCreators from '../actions/helloWorldActionCreators';
+
+function select(state) {
+  // Which part of the Redux global state does our component want to receive as props?
+  // Note the use of `$$` to prefix the property name because the value is of type Immutable.js
+  return { $$helloWorldStore: state.$$helloWorldStore };
+}
+
+// Simple example of a React "smart" component
+class HelloWorld extends React.Component {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+
+    // This corresponds to the value used in function select above.
+    $$helloWorldStore: PropTypes.instanceOf(Immutable.Map).isRequired,
+  }
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    const { dispatch, $$helloWorldStore } = this.props;
+    const actions = bindActionCreators(helloWorldActionCreators, dispatch);
+
+    // This uses the ES2015 spread operator to pass properties as it is more DRY
+    // This is equivalent to:
+    // <HelloWorldWidget $$helloWorldStore={$$helloWorldStore} actions={actions} />
+    return (
+      <HelloWorldWidget {...{$$helloWorldStore, actions}} />
+    );
+  }
+}
+
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/rackt/react-redux/blob/master/docs/api.md#examples
+export default connect(select)(HelloWorld);

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx

@@ -0,0 +1,19 @@
+import Immutable from 'immutable';
+
+import * as actionTypes from '../constants/helloWorldConstants';
+
+export const $$initialState = Immutable.fromJS({
+  name: '', // this is the default state that would be used if one were not passed into the store
+});
+
+export default function helloWorldReducer($$state = $$initialState, action) {
+  const { type, name } = action;
+
+  switch (type) {
+  case actionTypes.HELLO_WORLD_NAME_UPDATE:
+    return $$state.set('name', name);
+
+  default:
+    return $$state;
+  }
+}

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/index.jsx

@@ -0,0 +1,14 @@
+// This file is our manifest of all reducers for the app.
+// See also /client/app/bundles/HelloWorld/store/helloWorldStore.jsx
+// A real world app will likely have many reducers and it helps to organize them in one file.
+// `https://github.com/shakacode/react_on_rails/tree/master/docs/additional_reading/generated_client_code.md`
+import helloWorldReducer from './helloWorldReducer';
+import { $$initialState as $$helloWorldState } from './helloWorldReducer';
+
+export default {
+  $$helloWorldStore: helloWorldReducer,
+};
+
+export const initalStates = {
+  $$helloWorldState,
+};

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import createStore from '../store/helloWorldStore';
+import HelloWorld from '../containers/HelloWorld';
+
+// See documentation for https://github.com/rackt/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+export default (props) => {
+  const store = createStore(props);
+  const reactComponent = (
+    <Provider store={store}>
+      <HelloWorld />
+    </Provider>
+  );
+  return reactComponent;
+};
+

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/store/helloWorldStore.jsx

@@ -0,0 +1,35 @@
+import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
+
+// See https://github.com/gaearon/redux-thunk and http://redux.js.org/docs/advanced/AsyncActions.html
+// This is not actually used for this simple example, but you'd probably want to use this once your app has
+// asynchronous actions.
+import thunkMiddleware from 'redux-thunk';
+
+// This provides an example of logging redux actions to the console.
+// You'd want to disable this for production.
+import loggerMiddleware from 'lib/middlewares/loggerMiddleware';
+
+import reducers from '../reducers';
+import { initalStates } from '../reducers';
+
+export default props => {
+  // This is how we get initial props Rails into redux.
+  const { name } = props;
+  const { $$helloWorldState } = initalStates;
+
+  // Redux expects to initialize the store using an Object, not an Immutable.Map
+  const initialState = {
+    $$helloWorldStore: $$helloWorldState.merge({
+      name: name,
+    }),
+  };
+
+  const reducer = combineReducers(reducers);
+  const composedStore = compose(
+    applyMiddleware(thunkMiddleware, loggerMiddleware)
+  );
+  const storeCreator = composedStore(createStore);
+  const store = storeCreator(reducer, initialState);
+
+  return store;
+};

data/lib/generators/react_on_rails/templates/redux/base/client/app/lib/middlewares/loggerMiddleware.js

@@ -0,0 +1,20 @@
+/* eslint no-console: 0 */
+
+// This logger should be configured not to run in a production environment.
+// See https://github.com/petehunt/webpack-howto#6-feature-flags for you might turn this off for production.
+export default function logger({ getState }) {
+  return next => action => {
+    console.log('will dispatch', action);
+
+    // Call the next dispatch method in the middleware chain.
+    const result = next(action);
+
+    const immutableState = getState();
+
+    console.log('state after dispatch', JSON.stringify(immutableState));
+
+    // This will likely be the action itself, unless
+    // a middleware further in chain changed it.
+    return result;
+  };
+}

data/lib/generators/react_on_rails/templates/redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import createStore from '../store/helloWorldStore';
+import HelloWorld from '../containers/HelloWorld';
+
+// See documentation for https://github.com/rackt/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+// This is how the server redux gets hydrated with data.
+export default (props) => {
+  const store = createStore(props);
+  const reactComponent = (
+    <Provider store={store}>
+      <HelloWorld />
+    </Provider>
+  );
+  return reactComponent;
+};

data/lib/generators/react_on_rails/templates/ruby_linters/.rubocop.yml

@@ -0,0 +1,26 @@
+# This is the configuration used to check the rubocop source code.
+# Check out: https://github.com/bbatsov/rubocop
+
+AllCops:
+  Include:
+    - '**/Rakefile'
+    - '**/config.ru'
+  Exclude:
+    - 'vendor/**/*'
+    - 'spec/fixtures/**/*'
+    - 'node_modules/**/*'
+    - 'db/**/*'
+    - 'db/schema.rb'
+    - 'db/seeds.rb'
+    - 'client/node_modules/**/*'
+    - 'bin/**/*'
+    - !ruby/regexp /old_and_unused\.rb$/
+
+Metrics/LineLength:
+  Max: 120
+
+Style/StringLiterals:
+  EnforcedStyle: double_quotes
+
+Style/Documentation:
+  Enabled: false

data/lib/generators/react_on_rails/templates/ruby_linters/.scss-lint.yml

@@ -0,0 +1,205 @@
+# See http://sass-guidelin.es/#zeros
+
+scss_files:
+  - 'app/assets/stylesheets/**/*.scss'
+  - 'client/assets/stylesheets/**/*.scss'
+
+linters:
+#  BangFormat:
+#    enabled: true
+#    space_before_bang: true
+#    space_after_bang: false
+#
+#  BorderZero:
+#    enabled: true
+#    convention: zero # or `none`
+#
+  ColorKeyword:
+    enabled: false
+  ColorVariable:
+    enabled: false
+#
+#  Comment:
+#    enabled: true
+#
+#  DebugStatement:
+#    enabled: true
+#
+#  DeclarationOrder:
+#    enabled: true
+#
+#  DuplicateProperty:
+#    enabled: true
+#
+#  ElsePlacement:
+#    enabled: true
+#    style: same_line # or 'new_line'
+#
+#  EmptyLineBetweenBlocks:
+#    enabled: true
+#    ignore_single_line_blocks: true
+#
+#  EmptyRule:
+#    enabled: true
+#
+#  FinalNewline:
+#    enabled: true
+#    present: true
+#
+  HexLength:
+    enabled: true
+    style: long
+
+  HexNotation:
+    enabled: true
+    style: uppercase
+#
+#  HexValidation:
+#    enabled: true
+#
+  IdSelector:
+    enabled: true
+#
+#  ImportantRule:
+#    enabled: true
+#
+#  ImportPath:
+#    enabled: true
+#    leading_underscore: false
+#    filename_extension: false
+#
+#  Indentation:
+#    enabled: true
+#    allow_non_nested_indentation: false
+#    character: space # or 'tab'
+#    width: 2
+#
+  LeadingZero:
+    enabled: true
+    style: include_zero
+#
+#  MergeableSelector:
+#    enabled: true
+#    force_nesting: true
+#
+#  NameFormat:
+#    enabled: true
+#    allow_leading_underscore: true
+#    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+#
+#  NestingDepth:
+#    enabled: true
+#    max_depth: 3
+#
+#  PlaceholderInExtend:
+#    enabled: true
+#
+#  PropertyCount:
+#    enabled: false
+#    include_nested: false
+#    max_properties: 10
+#
+#  PropertyUnits:
+#    enabled: true
+#    global: [
+#      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+#      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+#      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+#      'deg', 'grad', 'rad', 'turn',            # Angle
+#      'ms', 's',                               # Duration
+#      'Hz', 'kHz',                             # Frequency
+#      'dpi', 'dpcm', 'dppx',                   # Resolution
+#      '%',                                     # Other
+#    ]
+#    properties: {}
+#
+#  PropertySortOrder:
+#    enabled: true
+#    ignore_unspecified: false
+#    separate_groups: false
+#
+#  PropertySpelling:
+#    enabled: true
+#    extra_properties: []
+#
+#  QualifyingElement:
+#    enabled: true
+#    allow_element_with_attribute: false
+#    allow_element_with_class: false
+#    allow_element_with_id: false
+#
+#  SelectorDepth:
+#    enabled: true
+#    max_depth: 3
+#
+#  SelectorFormat:
+#    enabled: true
+#    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+#
+#  Shorthand:
+#    enabled: true
+#    allowed_shorthands: [1, 2, 3]
+#
+#  SingleLinePerProperty:
+#    enabled: true
+#    allow_single_line_rule_sets: true
+#
+#  SingleLinePerSelector:
+#    enabled: true
+#
+#  SpaceAfterComma:
+#    enabled: true
+#
+#  SpaceAfterPropertyColon:
+#    enabled: true
+#    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+#
+#  SpaceAfterPropertyName:
+#    enabled: true
+#
+#  SpaceBeforeBrace:
+#    enabled: true
+#    style: space # or 'new_line'
+#    allow_single_line_padding: false
+#
+#  SpaceBetweenParens:
+#    enabled: true
+#    spaces: 0
+#
+#  StringQuotes:
+#    enabled: true
+#    style: single_quotes # or double_quotes
+#
+#  TrailingSemicolon:
+#    enabled: true
+#
+#  TrailingZero:
+#    enabled: false
+#
+#  UnnecessaryMantissa:
+#    enabled: true
+#
+#  UnnecessaryParentReference:
+#    enabled: true
+#
+#  UrlFormat:
+#    enabled: true
+#
+#  UrlQuotes:
+#    enabled: true
+#
+#  VariableForProperty:
+#    enabled: false
+#    properties: []
+#
+#  VendorPrefix:
+#    enabled: true
+#    identifier_list: base
+#    additional_identifiers: []
+#    excluded_identifiers: []
+#
+#  ZeroUnit:
+#    enabled: true
+#
+#  Compass::*:
+#    enabled: false