react_on_rails 1.0.0.pre → 1.0.0

data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_react-on-rails-sass-helper.scss

@@ -0,0 +1,19 @@
+// The Rails server imports this file via app/assets/stylesheets/application.css.scss
+// The webpack HMR dev server loads this file via client/bootstrap-sass.config.js
+
+// This file allows the same sass code with Rails and node-sass for the Webpack Dev Server.
+// It is CRTICAL that this file is loaded first.
+
+$rails: false !default; // defaults to false (e.g. webpack environment)
+
+// Sass 3 removes image-url helper
+// https://github.com/sass/libsass/issues/489
+$image-url-path: '/assets/images/' !default;
+
+@function img-url($image) {
+  @if $rails {
+    @return image-url($image);
+  } @else {
+    @return url('#{$image-url-path}#{$image}');
+  }
+}

data/lib/generators/react_on_rails/templates/bootstrap/client/bootstrap-sass.config.js

@@ -0,0 +1,89 @@
+// See https://github.com/shakacode/bootstrap-sass-loader for more information
+
+// IMPORTANT: Make sure to keep the customizations defined in this file
+//            in-sync with the ones defined in app/assets/stylesheets/_bootstrap-custom.scss.
+
+// For a reference on customizations,refer to:
+//  https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss
+
+module.exports = {
+  bootstrapCustomizations: './assets/stylesheets/_pre-bootstrap.scss',
+  mainSass: './assets/stylesheets/_post-bootstrap.scss',
+
+  // Default for the style loading is to put in your js files
+  // styleLoader: 'style-loader!css-loader!sass-loader',
+
+  // See: https://github.com/sass/node-sass#outputstyle
+  //      https://github.com/sass/node-sass#imagepath
+  styleLoader: 'style-loader!css-loader!sass-loader?imagePath=/assets/images',
+
+  // ### Scripts
+  // Any scripts here set to false will never make it to the client,
+  // i.e. it's not packaged by webpack.
+  scripts: {
+    transition: true,
+    alert: true,
+    button: true,
+
+    carousel: true,
+    collapse: true,
+    dropdown: true,
+
+    modal: true,
+    tooltip: true,
+    popover: true,
+    scrollspy: true,
+    tab: true,
+    affix: true,
+  },
+
+  // ### Styles
+  // Enable or disable certain less components and thus remove
+  // the css for them from the build.
+  styles: {
+    mixins: true,
+
+    normalize: true,
+    print: true,
+
+    scaffolding: true,
+    type: true,
+    code: true,
+    grid: true,
+    tables: true,
+    forms: true,
+    buttons: true,
+
+    'component-animations': true,
+    glyphicons: true,
+    dropdowns: true,
+    'button-groups': true,
+    'input-groups': true,
+    navs: true,
+    navbar: true,
+    breadcrumbs: true,
+    pagination: true,
+    pager: true,
+    labels: true,
+    badges: true,
+
+    jumbotron: true,
+    thumbnails: true,
+    alerts: true,
+
+    'progress-bars': true,
+    media: true,
+    'list-group': true,
+    panels: true,
+    wells: true,
+    close: true,
+
+    modals: true,
+    tooltip: true,
+    popovers: true,
+    carousel: true,
+
+    utilities: true,
+    'responsive-utilities': true,
+  },
+};

data/lib/generators/react_on_rails/templates/client/README.md

@@ -0,0 +1,97 @@
+Example NPM Package
+===========================
+We've included an example package.json from https://github.com/shakacode/react-webpack-rails-tutorial which should get you started with your React project.
+
+Starting the node.js server:
+```
+npm start
+```
+
+Building client javascript files for production:
+```
+npm run build:client
+```
+
+Building server javascript files for production:
+```
+npm run build:server
+```
+
+Building client javascript files for development:
+```
+npm run build:dev:client
+```
+
+Building server javascript files for development:
+```
+npm run build:dev:server
+```
+
+Running all linters:
+```
+npm run lint
+```
+
+Running eslint:
+```
+npm run eslint
+```
+
+Running jscs:
+```
+npm run jscs
+```
+
+dependencies vs devDependencies
+===========================
+Anything needed for heroku deployment needs to go in "dependencies", and anything not needed for heroku deployment should go in "devDependencies".
+
+
+Updating Node Dependencies
+===========================
+
+```
+npm install -g npm-check-updates
+```
+
+Then run this to update the dependencies (starting at the top level).
+
+```
+# Make sure you are in the top directory, then run:
+cd client
+rm npm-shrinkwrap.json
+npm-check-updates -u
+npm install
+npm prune
+npm shrinkwrap
+```
+
+Then confirm that the hot reload server and the rails server both work fine. You
+may have to delete `node_modules` and `npm-shrinkwrap.json` and then run `npm
+shrinkwrap`.
+
+Note: `npm prune` is required before running `npm shrinkwrap` to remove dependencies that are no longer needed after doing updates.
+
+
+Adding Node Modules
+=====================================
+Suppose you want to add a dependency to "module_name"....
+
+Before you do so, consider:
+
+1. Do we really need the module and the extra JS code?
+2. Is the module well maintained?
+
+```bash
+cd client
+npm install --save module_name@version
+# or
+# npm install --save_dev module_name@version
+rm npm-shrinkwrap.json
+npm shrinkwrap
+```
+
+Setting Up a Basic REST API
+=====================================
+See server.js in our tutorial at
+https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/server.js

data/lib/generators/react_on_rails/templates/heroku_deployment/.buildpacks

@@ -0,0 +1,2 @@
+https://github.com/heroku/heroku-buildpack-nodejs.git
+https://github.com/heroku/heroku-buildpack-ruby.git

data/lib/generators/react_on_rails/templates/heroku_deployment/Procfile

@@ -0,0 +1 @@
+web: bundle exec unicorn -p $PORT -c ./config/unicorn.rb

data/lib/generators/react_on_rails/templates/linters/client/.eslintignore

@@ -0,0 +1 @@
+node_modules

data/lib/generators/react_on_rails/templates/linters/client/.eslintrc

@@ -0,0 +1,17 @@
+---
+parser: babel-eslint
+
+extends: eslint-config-airbnb
+
+plugins:
+  - react
+
+env:
+  browser: true
+  node: true
+
+rules:
+  indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]
+  react/sort-comp: 0
+  react/jsx-quotes: 1
+  id-length: [2, {"exceptions": ["e", "i"]}]

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

@@ -0,0 +1,7 @@
+{
+  "preset": "airbnb",
+  "fileExtensions": [".js", ".jsx"],
+  "excludeFiles": ["build/**", "node_modules/**"],
+
+  "validateQuoteMarks": null                        // Issue with JSX quotemarks: https://github.com/jscs-dev/babel-jscs/issues/12
+}

data/lib/generators/react_on_rails/templates/linters/lib/tasks/brakeman.rake

@@ -0,0 +1,17 @@
+namespace :brakeman do
+
+  desc "Run Brakeman"
+  task :run, :output_files do |t, args|
+    require 'brakeman'
+
+    files = args[:output_files].split(' ') if args[:output_files]
+    Brakeman.run :app_path => ".", :output_files => files, :print_report => true
+  end
+
+  desc "Check your code with Brakeman"
+  task :check do
+    require 'brakeman'
+    result = Brakeman.run app_path: '.', print_report: true
+    exit Brakeman::Warnings_Found_Exit_Code unless result.filtered_warnings.empty?
+  end
+end

data/lib/generators/react_on_rails/templates/linters/lib/tasks/ci.rake

@@ -0,0 +1,33 @@
+if Rails.env.development?
+  # See tasks/linters.rake
+
+  task :bundle_audit do
+    puts Rainbow("Running security audit on gems (bundle_audit)").green
+    Rake::Task["bundle_audit"].invoke
+  end
+
+  task :security_audit do
+    puts Rainbow("Running security audit on code (brakeman)").green
+
+    sh "brakeman --exit-on-warn --quiet -A -z"
+  end
+
+  namespace :ci do
+    desc "Run all audits and tests"
+    task all: [:environment, :lint, :spec, :bundle_audit, :security_audit] do
+      begin
+        puts Rainbow("PASSED").green
+        puts ""
+      rescue Exception => e
+        puts "#{e}"
+        puts Rainbow("FAILED").red
+        puts ""
+        raise(e)
+      end
+    end
+  end
+
+  task ci: "ci:all"
+
+  task(:default).clear.enhance([:ci])
+end

data/lib/generators/react_on_rails/templates/linters/lib/tasks/linters.rake

@@ -0,0 +1,81 @@
+if %w(development test).include? Rails.env
+  namespace :lint do
+    # This fails: https://github.com/bbatsov/rubocop/issues/1840
+    # RuboCop::RakeTask.new
+    # require "rubocop/rake_task"
+    desc "Run Rubocop lint in shell. Specify option fix to auto-correct (and don't have uncommitted files!)."
+    task :rubocop, [:fix] => [] do |_t, args|
+      def to_bool(str)
+        return true if str =~ (/^(true|t|yes|y|1)$/i)
+        return false if str.blank? || str =~ (/^(false|f|no|n|0)$/i)
+        fail ArgumentError, "invalid value for Boolean: \"#{str}\""
+      end
+
+      fix = (args.fix == "fix") || to_bool(args.fix)
+      cmd = "rubocop -S -D#{fix ? ' -a' : ''} ."
+      puts "Running Rubocop Linters via `#{cmd}`#{fix ? ' auto-correct is turned on!' : ''}"
+      sh cmd
+    end
+
+    desc "Run ruby-lint as shell"
+    task :ruby do
+      cmd = "ruby-lint app config spec lib"
+      puts "Running ruby-lint Linters via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "eslint"
+    task :eslint do
+      cmd = "cd client && npm run eslint . -- --ext .jsx,.js"
+      puts "Running eslint via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "jscs"
+    task :jscs do
+      cmd = "cd client && npm run jscs ."
+      puts "Running jscs via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "JS Linting"
+    task js: [:eslint, :jscs] do
+      puts "Completed running all JavaScript Linters"
+    end
+
+    # desc "haml_lint"
+    # task :haml_lint do
+    #   require 'haml_lint/rake_task'
+
+    #   HamlLint::RakeTask.new do |t|
+    #     t.files = ["app/views"]
+    #   end
+    # end
+
+    # desc "See docs for task 'slim_lint'"
+    # task slim: :slim_lint
+    # SlimLint::RakeTask.new do |t|
+    #   t.files = ["app/views"]
+    # end
+
+    desc "See docs for task 'scss_lint'"
+    task :scss do
+      begin
+        require 'scss_lint/rake_task'
+        SCSSLint::RakeTask.new do |t|
+          t.files = ["app/assets/stylesheets/", "client/assets/stylesheets/"]
+        end
+        Rake::Task[:scss_lint].invoke
+      rescue LoadError
+        puts "** add gem 'scss_lint' to your Gemfile for scss linting."
+      end
+    end
+
+    task lint: [:rubocop, :ruby, :js, :scss] do
+      puts "Completed all linting"
+    end
+  end
+
+  desc "Runs all linters. Run `rake -D lint` to see all available lint options"
+  task lint: ["lint:lint"]
+end

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 {
+  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');
+  }
+
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    _updateName: PropTypes.func.isRequired,
+  };
+
+  // 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" ref="name" 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 {
+  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');
+  }
+
+  static propTypes = {
+    name: PropTypes.string.isRequired, // this is passed from the Rails view
+  }
+
+  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>
+    );
+  }
+}