Merge 5d253ff into 707edd7

.eslintrc

@@ -21,6 +21,23 @@
     "brace-style": [2, "1tbs"],
     "indent": [2, 2],
     "linebreak-style": [2, "unix"],
-    "semi": [2, "always"]
+    "semi": [2, "always"],
+
+    // eslint-plugin-react
+    // React specific linting rules for ESLint
+    "react/display-name": 0, // Prevent missing displayName in a React component
+    "react/jsx-quotes": [2, "double", "avoid-escape"], // Enforce quote style for JSX attributes
+    "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
+    "react/jsx-sort-props": 0, // Enforce props alphabetical sorting
+    "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
+    "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
+    "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
+    "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
+    "react/no-multi-comp": 0, // Prevent multiple component definition per file
+    "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
+    "react/prop-types": 2, // Prevent missing props validation in a React component definition
+    "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX
+    "react/self-closing-comp": 2, // Prevent extra closing tags for components without children
+    "react/wrap-multilines": 2, // Prevent missing parentheses around multilines JSX
   }
 }

src/components/button/__tests__/button-test.js

@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 
+var React = require('react');
 var ButtonView = require('../code/views/buttonView.jsx');
 
 describe('ButtonComponent', function() {
@@ -67,7 +68,7 @@ describe('ButtonComponent', function() {
 
   it('should render as an anchor if href is present', function() {
     var anchor = TestUtils.renderIntoDocument(
-      <ButtonView href='http://www.ui-toolkit.com'>Go to Toolkit</ButtonView>
+      <ButtonView href="http://www.ui-toolkit.com">Go to Toolkit</ButtonView>
     );
 
     var renderedButton = TestUtils.findRenderedDOMComponentWithTag(anchor, 'a');

src/components/button/code/templates/buttonAnchorTemplate.jsx

@@ -1,3 +1,4 @@
+var React = require('react');
 var classNames = require('classnames');
 var getComponentClasses = require('../../../../utils/getComponentClasses');
 

src/components/button/code/templates/buttonTemplate.jsx

@@ -1,3 +1,4 @@
+var React = require('react');
 var classNames = require('classnames');
 var getComponentClasses = require('../../../../utils/getComponentClasses');
 

src/components/flag/__tests__/flag-test.js

@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 
+var React = require('react');
 var FlagComponent = require('../code/views/flagView.jsx');
 
 describe('FlagComponent', function() {

src/components/flag/code/templates/flagTemplate.jsx

@@ -1,3 +1,4 @@
+var React = require('react');
 var classNames = require('classnames');
 var getComponentClasses = require('../../../../utils/getComponentClasses');
 

src/components/icon-list-item/code/templates/IconListItemComponentTemplate.jsx

@@ -1,3 +1,5 @@
+var React = require('react');
+
 module.exports = function(props) {
   return (
     <li className="component-icon-list-item">

src/components/icon-list/__tests__/IconListComponent-test.js

@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 
+var React = require('react');
 var IconList = require('../code/views/IconListComponentView.jsx');
 var IconListItem = require('../../icon-list-item/code/views/IconListItemComponentView.jsx');
 

src/components/icon-list/code/templates/IconListComponentTemplate.jsx

@@ -1,3 +1,5 @@
+var React = require('react');
+
 module.exports = function(props) {
   return (
     <ul className="component-icon-list">

src/components/image/__tests__/image-test.js

@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 
+var React = require('react');
 var ImageComponent = require('../code/views/imageView.jsx');
 
 describe('ImageComponent', function() {

src/components/image/code/templates/imageTemplate.jsx

@@ -1,3 +1,5 @@
+var React = require('react');
+
 module.exports = function(props) {
   return (
     <img alt={props.alt} src={props.src} className="component-image" />

src/components/rating/__tests__/rating-test.js

@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 
+var React = require('react');
 var RatingComponent = require('../code/views/ratingView.jsx');
 
 describe('RatingComponent', function() {

src/components/rating/code/templates/ratingTemplate.jsx

@@ -1,3 +1,5 @@
+var React = require('react');
+
 module.exports = function(props) {
 
   var $rating = [];

src/components/reviews/__tests__/reviews-test.js

@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 
+var React = require('react');
 var ReviewsComponent = require('../code/views/reviewsView.jsx');
 
 describe('ReviewsComponent', function() {

src/components/reviews/code/templates/reviewsTemplate.jsx

@@ -1,3 +1,5 @@
+var React = require('react');
+
 module.exports = function(props) {
   return (
     <div itemProp="aggregateRating" itemScope itemType="http://schema.org/AggregateRating" className="ui-component-reviews">

src/components/tile/__tests__/tile-test.js

@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 
+var React = require('react');
 var TileComponent = require('../code/views/tileView.jsx');
 
 describe('TileComponent', function() {
@@ -10,7 +11,7 @@ describe('TileComponent', function() {
       alt: 'bar'
     };
 
-    assert.ok(TestUtils.isElement(<TileComponent image={img} title='title' />));
+    assert.ok(TestUtils.isElement(<TileComponent image={img} title="title" />));
   });
 
 });

src/components/tile/code/templates/tileTemplate.jsx

@@ -1,3 +1,4 @@
+var React = require('react');
 var ImageComponent = require('../../../image');
 
 module.exports = function(props) {