react_rails_webpack 3.0.1 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8b2f3a48acfa2f14f5d1e3895c7b01c4a7d2303d
-  data.tar.gz: 2c4d4681099d46fe71be6ce89f4e2268bb4deca5
+  metadata.gz: 7df79ab8898ae43bbf479c52485fcb82f9c54417
+  data.tar.gz: 22713d477ca4b524ff22c71f916699d3929cf81b
 SHA512:
-  metadata.gz: 913cb3241d660098233b46f58d7720ffaddc763f851428e03f24d8d5f1bc4e6d3ed97e9ed4a3ba5b2e2e529435ffac087d5ea1a9fbbe3c466972b4cd324b2b07
-  data.tar.gz: 092242a9d94a1c01e8d5b08fd72fb57ecfb3e214bd5c9446e9f5e0b0fbb99332d95f06f48ada69d1e6c8cf4d05f39dd02969fd0453a869c0562ab857f82dac74
+  metadata.gz: a8001cad731cedcab5c09aef6130ce80613e94911b0c798a59d86362d4d95d5baadeea65312507937a2e1bf2956b0c9cb47afa8ca02079a68d2185ad26f7e56f
+  data.tar.gz: e2c25167f5ad6e448e032954b5f8c11c4e6e96db3621e1538fceee08edd625aac03f05f2e4cc9f2299c1a734bffff06d00210bf63eb3bcf5d77232b6550c384e

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Changelog
 
+### 3.1.0
+  - Improve look of example components
+  - Add examples of using Font Awesome and image files
+
 ### 3.0.1
   - Add react-hmre preset to development environment in .babelrc file
 
@@ -12,4 +16,8 @@
   - Depend on main hjs-webpack repo instead of customized fork (UglifyJS options enabled this)
   - Add .babelrc file
   - Correct broken redux test
-  - Start keeping a changelog
+  - Start keeping a changelog
+
+**To upgrade to version 3**, update the gem version in your `Gemfile` to version 3, run `bundle install`, delete the `client/node_modules` directory, and run the `rails g react_rails_webpack:install` generator command again, and when it asks, refuse to overwrite the `availableComponents.js` file and any React component files you've changed.
+
+There are some important changes to `webpack.config.js` for version 3, so if you've made changes to that file (for example, if you've written your own components and added divs for them to the `html` option), save them somewhere else before running the generator, then let the generator overwrite that file, and copy and paste the changes you made back into the new file after the generator finishes.

data/FEATURES.md

@@ -0,0 +1,11 @@
+# All Features
+
+1. One-command setup
+2. Use any packages from the [npm](https://www.npmjs.com) ecosystem
+3. Built-in examples of plain and [redux](http://redux.js.org)-backed React components
+4. The [webpack](https://webpack.github.io) development server for React components will live update your changes to any device on your local network (including phones)
+5. Integrated with [hjs-webpack](https://github.com/HenrikJoreteg/hjs-webpack) to simplify webpack configuration ([video about hjs-webpack](http://learn.humanjavascript.com/react-ampersand/setting-up-webpack))
+6. Integration code is added directly to project, making it easy to read and modify
+7. Hot-reloading of components
+8. Built-in [Redux DevTools](https://github.com/gaearon/redux-devtools) integration for React-Redux components
+9. Built-in examples of [Redux](https://github.com/gaearon/redux-devtools) reducer testing using [Chai](http://chaijs.com)

data/README.md

@@ -1,16 +1,23 @@
 # ReactRailsWebpack
+[![Gem Version](https://badge.fury.io/rb/react_rails_webpack.svg)](https://badge.fury.io/rb/react_rails_webpack)
 
-Ruby gem for quickly and easily creating highly customizable react/rails integrations using webpack and npm.
+> Warning: If you are upgrading across major versions, please read the [release notes in the changelog](CHANGELOG.md).
+
+Ruby gem for quickly creating highly customizable react/rails integrations using webpack and npm.
 
 ## Key Features
 
 1. One-command setup
 2. Use any packages from the [npm](https://www.npmjs.com) ecosystem
 3. Built-in examples of plain and [redux](http://redux.js.org)-backed React components
-4. The [webpack](https://webpack.github.io) development server for React components will live update your changes to any device on your local network (including phones)
+4. The [webpack](https://webpack.github.io) development server for React components will live update your changes to any device on your local network (including phones) (gif demo of this feature [here](images/rrw_demo_short.gif))
+
+[more features...](FEATURES.md)
 
 ## Install
 
+> Video demo of setup and use on a new Rails app [here](https://vimeo.com/180349372)
+
 1. Make sure you have the [requirements](#requirements) installed
 2. Add `gem 'react_rails_webpack'` to your Gemfile
 3. Run `bundle install`

data/lib/react_rails_webpack/client/copy_fonts.rb

@@ -0,0 +1,13 @@
+# I can't figure out a cleaner way to get font compilation
+# to work than copying the compiled font files into the public
+# directory. Without this copying step, the font filenames
+# in the Webpack-generated CSS file won't match the filenames
+# of the actual font files. Hoping for a better solution to
+# this in the future.
+
+require 'fileutils'
+
+font_files = Dir.glob('../app/assets/webpack/*.{otf,eot,svg,ttf,woff,woff2}')
+puts "Copying #{font_files.inspect} to public folder..."
+
+FileUtils.cp font_files, '../public/'

data/lib/react_rails_webpack/client/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "hjs-dev-server",
     "build": "NODE_ENV=production webpack",
+    "postbuild": "ruby copy_fonts.rb",
     "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'"
   },
   "author": "",
@@ -24,6 +25,8 @@
     "chai": "^3.4.0",
     "chai-immutable": "^1.3.0",
     "css-loader": "^0.23.1",
+    "file-loader": "^0.9.0",
+    "font-awesome": "^4.6.3",
     "hjs-webpack": "^8.3.0",
     "jsdom": "^7.0.2",
     "mocha": "^2.3.3",
@@ -38,6 +41,7 @@
     "redux-devtools-log-monitor": "^1.0.11",
     "sass-loader": "^3.1.1",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "^1.12.15"
   }
 }

data/lib/react_rails_webpack/client/src/app.js

@@ -2,7 +2,8 @@ import {
   renderReactComponentInDiv, renderLastComponentDiv
 } from './app/renderingComponentsInDivs'
 
-import './app.sass'
+import './app.sass' // Require your styling files this way
+
 import injectTapEventPlugin from 'react-tap-event-plugin'
 
 injectTapEventPlugin()

data/lib/react_rails_webpack/client/src/app.sass

@@ -1,14 +1,41 @@
+// This file is included in the project  by being required in the app.js file
 .bordered-component
-  border: 2px solid gray
+  border: 4px solid gray
   border-radius: 10px
   margin: 10px 20px
   padding: 20px 40px
+  word-wrap: break-word
+  background-color: rgba(black, 0.05)
 
   h2
+    text-align: center
     margin-top: 0
 
+  .info-block
+    display: inline-block
+    margin: 4px 7px
+
+  .source
+    font-style: italic
+    font-size: 15px
+    color: rgba(black, 0.7)
+    text-align: center
+    margin-bottom: 15px
+
+    code
+      font-weight: bold
+
+    i
+      margin-left: 4px
+
 aside.source
   text-align: center
   color: darkblue
   font-size: 20px
-  margin: 20px 0 35px
+  margin: 20px 0 35px
+
+.react-logo
+  width: 40px
+  margin-bottom: -13px
+  margin-right: 10px
+  border-radius: 50%

data/lib/react_rails_webpack/client/src/components/FeatureWidgets.jsx

@@ -0,0 +1,22 @@
+// Here are some examples of other features
+// written into some React components
+// defined purely as functions. You can do
+// components this way if they're simple
+// enough.
+
+import React from 'react'
+
+// USING IMAGES EXAMPLE COMPONENT
+import reactImageUrl from '../images/react_logo.svg'
+
+export const ReactLogo = () =>
+  <img className='react-logo' src={reactImageUrl} />
+
+// USING FONT AWESOME ICONS EXAMPLE COMPONENT
+// Icon list here: http://fontawesome.io/icons/
+import 'font-awesome/scss/font-awesome.scss'
+
+export const Icon = (props) =>
+  <i className={'fa fa-' + props.icon}></i>
+
+Icon.propTypes = { icon: React.PropTypes.string.isRequired }

data/lib/react_rails_webpack/client/src/components/Hello.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import {ReactLogo, Icon} from './FeatureWidgets'
+
 export default React.createClass({
   propTypes: {
     details: React.PropTypes.string.isRequired
@@ -9,12 +11,17 @@ export default React.createClass({
   },
   render () {
     return <div className='bordered-component'>
-      <h2>This is the "Hello" component from 'client/src/components/Hello.jsx'</h2>
-      <p><strong>Details</strong>: {this.props.details}</p>
-      <p>Current greeting: {this.state.greeting}</p>
+      <h2><ReactLogo /> This is the Hello component</h2>
+      <div className='source'>from the <code>Hello.jsx</code> file in <Icon icon='folder-open' /> <code>client/src/components</code></div>
+
+      <div className='info-block'>
+        <label htmlFor='greeting'><strong>Change greeting</strong>: </label>
+        <input type='text' id='greeting' value={this.state.greeting} onChange={(e) => this.setState({ greeting: e.target.value })}/>
+      </div>
+
+      <div className='info-block'><strong>Current greeting</strong>: {this.state.greeting}</div>
 
-      <label htmlFor='greeting'>Change the greeting here: </label>
-      <input type='text' id='greeting' value={this.state.greeting} onChange={(e) => this.setState({ greeting: e.target.value })}/>
+      <div className='info-block'><strong>Details</strong>: {this.props.details}</div>
     </div>
   }
 })

data/lib/react_rails_webpack/client/src/components/HelloWithRedux.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import {connect} from 'react-redux'
 import * as actionCreators from '../redux/reducer'
 
+import {ReactLogo, Icon} from './FeatureWidgets'
+
 export const HelloWithRedux = React.createClass({
   propTypes: {
     greeting: React.PropTypes.string.isRequired,
@@ -10,12 +12,16 @@ export const HelloWithRedux = React.createClass({
   },
   render () {
     return <div className='bordered-component'>
-      <h2>This is the "HelloWithRedux" component from 'client/src/components/HelloWithRedux.jsx'</h2>
-      <p><strong>Details</strong>: {this.props.details}</p>
-      <p>Current greeting: {this.props.greeting}</p>
+      <h2><ReactLogo /> This is the HelloWithRedux component</h2>
+      <div className='source'>from the <code>HelloWithRedux.jsx</code> file in <Icon icon='folder-open' /> <code>client/src/components</code></div>
+
+      <div className='info-block'>
+        <label htmlFor='redux-greeting'><strong>Change greeting</strong>: </label>
+        <input type='text' id='redux-greeting' value={this.props.greeting} onChange={(e) => this.props.setGreeting(e.target.value)}/>
+      </div>
 
-      <label htmlFor='greeting'>Change the greeting here: </label>
-      <input type='text' id='greeting' value={this.props.greeting} onChange={(e) => this.props.setGreeting(e.target.value)}/>
+      <div className='info-block'><strong>Current greeting</strong>: {this.props.greeting}</div>
+      <div className='info-block'><strong>Details</strong>: {this.props.details}</div>
     </div>
   }
 })

data/lib/react_rails_webpack/client/src/images/react_logo.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
+<rect fill="#222222" width="600" height="600"/>
+<circle fill="#00D8FF" cx="299.529" cy="299.628" r="50.167"/>
+<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M299.529,197.628
+	c67.356,0,129.928,9.665,177.107,25.907c56.844,19.569,91.794,49.233,91.794,76.093c0,27.991-37.041,59.503-98.083,79.728
+	c-46.151,15.291-106.879,23.272-170.818,23.272c-65.554,0-127.63-7.492-174.29-23.441c-59.046-20.182-94.611-52.103-94.611-79.559
+	c0-26.642,33.37-56.076,89.415-75.616C167.398,207.503,231.515,197.628,299.529,197.628z"/>
+<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.736,248.922
+	c33.649-58.348,73.281-107.724,110.92-140.48c45.35-39.466,88.507-54.923,111.775-41.505
+	c24.248,13.983,33.042,61.814,20.067,124.796c-9.81,47.618-33.234,104.212-65.176,159.601
+	c-32.749,56.788-70.25,106.819-107.377,139.272c-46.981,41.068-92.4,55.929-116.185,42.213
+	c-23.079-13.31-31.906-56.921-20.834-115.233C153.281,368.316,176.758,307.841,210.736,248.922z"/>
+<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.821,351.482
+	c-33.746-58.292-56.731-117.287-66.312-166.255c-11.544-58.999-3.382-104.109,19.864-117.566
+	c24.224-14.024,70.055,2.244,118.14,44.94c36.356,32.28,73.688,80.837,105.723,136.173c32.844,56.733,57.461,114.209,67.036,162.582
+	c12.117,61.213,2.309,107.984-21.453,121.74c-23.057,13.348-65.249-0.784-110.239-39.499
+	C285.567,460.886,244.898,410.344,210.821,351.482z"/>
+</svg>

data/lib/react_rails_webpack/version.rb

@@ -1,3 +1,3 @@
 module ReactRailsWebpack
-  VERSION = "3.0.1"
+  VERSION = "3.1.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_rails_webpack
 version: !ruby/object:Gem::Version
-  version: 3.0.1
+  version: 3.1.0
 platform: ruby
 authors:
 - Neurodynamic
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-08-23 00:00:00.000000000 Z
+date: 2016-08-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -76,17 +76,20 @@ files:
 - ".gitignore"
 - CHANGELOG.md
 - CODE_OF_CONDUCT.md
+- FEATURES.md
 - Gemfile
 - LICENSE.txt
 - README.md
 - Rakefile
 - bin/console
 - bin/setup
+- images/rrw_demo_short.gif
 - lib/react_rails_webpack.rb
 - lib/react_rails_webpack/app/controllers/react_example_controller.rb
 - lib/react_rails_webpack/app/helpers/react_helper.rb
 - lib/react_rails_webpack/app/views/react_example/greeting.html.erb
 - lib/react_rails_webpack/client/.babelrc
+- lib/react_rails_webpack/client/copy_fonts.rb
 - lib/react_rails_webpack/client/environment.json
 - lib/react_rails_webpack/client/package.json
 - lib/react_rails_webpack/client/src/app.js
@@ -96,8 +99,10 @@ files:
 - lib/react_rails_webpack/client/src/app/initializeReduxStore.js
 - lib/react_rails_webpack/client/src/app/renderingComponentsInDivs.js
 - lib/react_rails_webpack/client/src/app/wrapWithProvider.jsx
+- lib/react_rails_webpack/client/src/components/FeatureWidgets.jsx
 - lib/react_rails_webpack/client/src/components/Hello.jsx
 - lib/react_rails_webpack/client/src/components/HelloWithRedux.jsx
+- lib/react_rails_webpack/client/src/images/react_logo.svg
 - lib/react_rails_webpack/client/src/redux/reducer.js
 - lib/react_rails_webpack/client/test/redux/actions/set_greeting_spec.js
 - lib/react_rails_webpack/client/test/test_helper.js