Merge pull request #183 from nikgraf/introduce-webpack-and-update-eslint

Introduce webpack and update eslint

.babelrc

@@ -0,0 +1,16 @@
+{
+  "stage": 0,
+  "plugins": [
+    "react-transform"
+  ],
+  "extra": {
+    "react-transform": [{
+      "target": "react-transform-webpack-hmr",
+      "imports": ["react"],
+      "locals": ["module"]
+    }, {
+      "target": "react-transform-catch-errors",
+      "imports": ["react", "redbox-react"]
+    }]
+  }
+}

.eslintrc

@@ -1,193 +1,7 @@
 {
-  "parser": "babel-eslint",          // https://github.com/babel/babel-eslint
-  "plugins": [
-    "react"                          // https://github.com/yannickcr/eslint-plugin-react
-  ],
-  "env": {                           // http://eslint.org/docs/user-guide/configuring.html#specifying-environments
-    "browser": true,                 // browser global variables
-    "node": true                     // Node.js global variables and Node.js-specific rules
-  },
-  "ecmaFeatures": {
-    "arrowFunctions": true,
-    "blockBindings": true,
-    "classes": true,
-    "defaultParams": true,
-    "destructuring": true,
-    "forOf": true,
-    "generators": false,
-    "modules": true,
-    "objectLiteralComputedProperties": true,
-    "objectLiteralDuplicateProperties": false,
-    "objectLiteralShorthandMethods": true,
-    "objectLiteralShorthandProperties": true,
-    "spread": true,
-    "superInFunctions": true,
-    "templateStrings": true,
-    "jsx": true
-  },
+  "extends": "airbnb",
   "rules": {
-/**
- * Strict mode
- */
-    // babel inserts "use strict"; for us
-    "strict": [2, "never"],          // http://eslint.org/docs/rules/strict
-
-/**
- * ES6
- */
-    "no-var": 2,                     // http://eslint.org/docs/rules/no-var
-    "prefer-const": 2,               // http://eslint.org/docs/rules/prefer-const
-
-/**
- * Variables
- */
-    "no-shadow": 2,                  // http://eslint.org/docs/rules/no-shadow
-    "no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
-    "no-unused-vars": [2, {          // http://eslint.org/docs/rules/no-unused-vars
-      "vars": "local",
-      "args": "after-used"
-    }],
-    "no-use-before-define": 2,       // http://eslint.org/docs/rules/no-use-before-define
-
-/**
- * Possible errors
- */
-    "comma-dangle": [2, "never"],    // http://eslint.org/docs/rules/comma-dangle
-    "no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign
-    "no-console": 1,                 // http://eslint.org/docs/rules/no-console
-    "no-debugger": 1,                // http://eslint.org/docs/rules/no-debugger
-    "no-alert": 1,                   // http://eslint.org/docs/rules/no-alert
-    "no-constant-condition": 1,      // http://eslint.org/docs/rules/no-constant-condition
-    "no-dupe-keys": 2,               // http://eslint.org/docs/rules/no-dupe-keys
-    "no-duplicate-case": 2,          // http://eslint.org/docs/rules/no-duplicate-case
-    "no-empty": 2,                   // http://eslint.org/docs/rules/no-empty
-    "no-ex-assign": 2,               // http://eslint.org/docs/rules/no-ex-assign
-    "no-extra-boolean-cast": 0,      // http://eslint.org/docs/rules/no-extra-boolean-cast
-    "no-extra-semi": 2,              // http://eslint.org/docs/rules/no-extra-semi
-    "no-func-assign": 2,             // http://eslint.org/docs/rules/no-func-assign
-    "no-inner-declarations": 2,      // http://eslint.org/docs/rules/no-inner-declarations
-    "no-invalid-regexp": 2,          // http://eslint.org/docs/rules/no-invalid-regexp
-    "no-irregular-whitespace": 2,    // http://eslint.org/docs/rules/no-irregular-whitespace
-    "no-obj-calls": 2,               // http://eslint.org/docs/rules/no-obj-calls
-    "no-reserved-keys": 2,           // http://eslint.org/docs/rules/no-reserved-keys
-    "no-sparse-arrays": 2,           // http://eslint.org/docs/rules/no-sparse-arrays
-    "no-unreachable": 2,             // http://eslint.org/docs/rules/no-unreachable
-    "use-isnan": 2,                  // http://eslint.org/docs/rules/use-isnan
-    "block-scoped-var": 2,           // http://eslint.org/docs/rules/block-scoped-var
-
-/**
- * Best practices
- */
-    "consistent-return": 2,          // http://eslint.org/docs/rules/consistent-return
-    "curly": [2, "multi-line"],      // http://eslint.org/docs/rules/curly
-    "default-case": 2,               // http://eslint.org/docs/rules/default-case
-    "dot-notation": [2, {            // http://eslint.org/docs/rules/dot-notation
-      "allowKeywords": true
-    }],
-    "eqeqeq": 2,                     // http://eslint.org/docs/rules/eqeqeq
-    "guard-for-in": 2,               // http://eslint.org/docs/rules/guard-for-in
-    "no-caller": 2,                  // http://eslint.org/docs/rules/no-caller
-    "no-else-return": 2,             // http://eslint.org/docs/rules/no-else-return
-    "no-eq-null": 2,                 // http://eslint.org/docs/rules/no-eq-null
-    "no-eval": 2,                    // http://eslint.org/docs/rules/no-eval
-    "no-extend-native": 2,           // http://eslint.org/docs/rules/no-extend-native
-    "no-extra-bind": 2,              // http://eslint.org/docs/rules/no-extra-bind
-    "no-fallthrough": 2,             // http://eslint.org/docs/rules/no-fallthrough
-    "no-floating-decimal": 2,        // http://eslint.org/docs/rules/no-floating-decimal
-    "no-implied-eval": 2,            // http://eslint.org/docs/rules/no-implied-eval
-    "no-lone-blocks": 2,             // http://eslint.org/docs/rules/no-lone-blocks
-    "no-loop-func": 2,               // http://eslint.org/docs/rules/no-loop-func
-    "no-multi-str": 2,               // http://eslint.org/docs/rules/no-multi-str
-    "no-native-reassign": 2,         // http://eslint.org/docs/rules/no-native-reassign
-    "no-new": 2,                     // http://eslint.org/docs/rules/no-new
-    "no-new-func": 2,                // http://eslint.org/docs/rules/no-new-func
-    "no-new-wrappers": 2,            // http://eslint.org/docs/rules/no-new-wrappers
-    "no-octal": 2,                   // http://eslint.org/docs/rules/no-octal
-    "no-octal-escape": 2,            // http://eslint.org/docs/rules/no-octal-escape
-    "no-param-reassign": 2,          // http://eslint.org/docs/rules/no-param-reassign
-    "no-proto": 2,                   // http://eslint.org/docs/rules/no-proto
-    "no-redeclare": 2,               // http://eslint.org/docs/rules/no-redeclare
-    "no-return-assign": 2,           // http://eslint.org/docs/rules/no-return-assign
-    "no-script-url": 2,              // http://eslint.org/docs/rules/no-script-url
-    "no-self-compare": 2,            // http://eslint.org/docs/rules/no-self-compare
-    "no-sequences": 2,               // http://eslint.org/docs/rules/no-sequences
-    "no-throw-literal": 2,           // http://eslint.org/docs/rules/no-throw-literal
-    "no-with": 2,                    // http://eslint.org/docs/rules/no-with
-    "radix": 2,                      // http://eslint.org/docs/rules/radix
-    "vars-on-top": 2,                // http://eslint.org/docs/rules/vars-on-top
-    "wrap-iife": [2, "any"],         // http://eslint.org/docs/rules/wrap-iife
-    "yoda": 2,                       // http://eslint.org/docs/rules/yoda
-
-/**
- * Style
- */
-    "indent": [2, 2],                // http://eslint.org/docs/rules/indent
-    "brace-style": [2,               // http://eslint.org/docs/rules/brace-style
-      "1tbs", {
-      "allowSingleLine": true
-    }],
-    "quotes": [
-      2, "single", "avoid-escape"    // http://eslint.org/docs/rules/quotes
-    ],
-    "camelcase": [2, {               // http://eslint.org/docs/rules/camelcase
-      "properties": "never"
-    }],
-    "comma-spacing": [2, {           // http://eslint.org/docs/rules/comma-spacing
-      "before": false,
-      "after": true
-    }],
-    "comma-style": [2, "last"],      // http://eslint.org/docs/rules/comma-style
-    "eol-last": 2,                   // http://eslint.org/docs/rules/eol-last
-    "func-names": 1,                 // http://eslint.org/docs/rules/func-names
-    "key-spacing": [2, {             // http://eslint.org/docs/rules/key-spacing
-        "beforeColon": false,
-        "afterColon": true
-    }],
-    "new-cap": [2, {                 // http://eslint.org/docs/rules/new-cap
-      "newIsCap": true
-    }],
-    "no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
-      "max": 2
-    }],
-    "no-nested-ternary": 2,          // http://eslint.org/docs/rules/no-nested-ternary
-    "no-new-object": 2,              // http://eslint.org/docs/rules/no-new-object
-    "no-spaced-func": 2,             // http://eslint.org/docs/rules/no-spaced-func
-    "no-trailing-spaces": 2,         // http://eslint.org/docs/rules/no-trailing-spaces
-    "no-wrap-func": 2,               // http://eslint.org/docs/rules/no-wrap-func
-    "no-underscore-dangle": 0,       // http://eslint.org/docs/rules/no-underscore-dangle
-    "one-var": [2, "never"],         // http://eslint.org/docs/rules/one-var
-    "padded-blocks": [2, "never"],   // http://eslint.org/docs/rules/padded-blocks
-    "semi": [2, "always"],           // http://eslint.org/docs/rules/semi
-    "semi-spacing": [2, {            // http://eslint.org/docs/rules/semi-spacing
-      "before": false,
-      "after": true
-    }],
-    "space-after-keywords": 2,       // http://eslint.org/docs/rules/space-after-keywords
-    "space-before-blocks": 2,        // http://eslint.org/docs/rules/space-before-blocks
-    "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
-    "space-infix-ops": 2,            // http://eslint.org/docs/rules/space-infix-ops
-    "space-return-throw-case": 2,    // http://eslint.org/docs/rules/space-return-throw-case
-    "spaced-line-comment": 2,        // http://eslint.org/docs/rules/spaced-line-comment
-
-/**
- * JSX style
- */
-    "react/display-name": 0,         // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
-    "react/jsx-boolean-value": 2,    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
-    "react/jsx-quotes": [2, "double"], // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-quotes.md
-    "react/jsx-no-undef": 2,         // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md
-    "react/jsx-sort-props": 0,       // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
-    "react/jsx-sort-prop-types": 0,  // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-prop-types.md
-    "react/jsx-uses-react": 2,       // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md
-    "react/jsx-uses-vars": 2,        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md
-    "react/no-did-mount-set-state": [2, "allow-in-func"], // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
-    "react/no-did-update-set-state": 2, // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md
-    "react/no-multi-comp": 2,        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md
-    "react/no-unknown-property": 2,  // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md
-    "react/prop-types": 2,           // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
-    "react/react-in-jsx-scope": 2,   // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
-    "react/self-closing-comp": 2,    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
-    "react/wrap-multilines": 2,      // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md
+    "comma-dangle": 0,
     "react/sort-comp": [2, {         // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md
       "order": [
         "constructor",

CHANGELOG.md

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## To Be Released
 
+### Changed
+- [Button, Card, Choice, ComboBox, Option, Placeholder, Rating, Select, Separator, TextInput, Toggle] Removed the 'Belle ' prefix from displayName
+
 ## 1.2.2 - 2015-09-04
 
 ### Fixed

README.md

@@ -122,16 +122,11 @@ You can install the development environment with
 npm install
 ```
 
-Note: In case you want to add a peerDependency please make sure it get's removed
-after running install since peerDependencies should not be in node_modules to
-make them work properly. React & Underscore are removed in the `postinstall`
-script which is defined in `package.json`.
+`npm run build` will trigger a build into the `lib` folder. To develop a component it's convenient to use the examples or docs application.
 
-Whenever you change something in `src/` you can compile it during development with
+### Run the examples or docs application
 
-```
-npm start
-```
+To run the examples or docs you go into the folder `docs` or `examples` and run `npm install` and `npm start`. The app will run with hot reloading on `http://localhost:3000`.
 
 ### Tests
 
@@ -145,12 +140,6 @@ In order to run the tests use
 npm test
 ```
 
-### Run the examples or docs
-
-To run the examples or docs you should run `npm install` and `npm start` in the examples/docs folder as well.
-
-Use `python -m SimpleHTTPServer 8310` in the examples folder to run it on localhost.
-
 ## Discussion or need help?
 
 Join us at the **#belle** channel of the [Reactiflux](http://reactiflux.com/) Slack community or our [Gitter room](https://gitter.im/nikgraf/belle).

docs/README.md

@@ -1,19 +1,18 @@
 Belle Documentation
 ================
 
-## Setup
+## Install
 
 ```
 npm install
 ```
 
-Note: To make the development setup as easy as possible `npm install` will copy
-the code styles from node_modules & establish a symlink from inside node_modules
-to the root of the belle directory. Ideally `npm link` could be used, but it
-doesn't play well with `peerDependencies` -> [Issue](https://github.com/npm/npm/issues/5875).
+Make sure you ran `npm install` in the root folder of Belle.
 
-## Development Environment
+## Run
 
 ```
 npm start
 ```
+
+The app will run with hot reloading on `http://localhost:3000`.

docs/js/Base.jsx → docs/components/Base.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {Card} from 'belle';
 import {RouteHandler, Link} from 'react-router';
 import Column from './Column';
-import ViewportMixin from './mixin/viewport';
+import ViewportMixin from '../mixin/viewport';
 
 export default React.createClass({
 

docs/js/Column.jsx → docs/components/Column.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {omit} from 'underscore';
-import ViewportMixin from './mixin/viewport';
+import ViewportMixin from '../mixin/viewport';
 
 export default React.createClass({
 

docs/js/Configuration.jsx → docs/components/Configuration.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {Button, Card} from 'belle';
 import Code from './Code';
-import ThemeSwitch from './theme/ThemeSwitch';
+import ThemeSwitch from '../theme/ThemeSwitch';
 
 const overwriteCardStyleExample = `var belle = require('belle');
 

docs/js/Home.jsx → docs/components/Home.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import ThemeSwitch from './theme/ThemeSwitch';
+import ThemeSwitch from '../theme/ThemeSwitch';
 import GettingStarted from './GettingStarted';
 import {Card} from 'belle';
 

docs/index.html

@@ -44,7 +44,7 @@
 <body>
   <div id="fb-root"></div>
   <section id="react"></section>
-  <script src="js/bundle.js"></script>
+  <script src="/static/bundle.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

docs/js/App.jsx → docs/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
-import routes from './routes';
+import routes from './components/routes';
 import Router from 'react-router';
 import initializeTheme from './theme/initialize';
 
+import belle from 'belle';
+
+
 // export for http://fb.me/react-devtools
 window.React = React;
 

docs/package.json

@@ -13,29 +13,23 @@
     "url": "http://github.com/nikgraf/belle.git"
   },
   "dependencies": {
-    "highlight.js": "=8.6.0",
+    "highlight.js": "=8.8.0",
     "react": "=0.13.3",
-    "uglify-js": "=2.4.23",
-    "underscore": "=1.8.3",
-    "react-router": "=0.13.3"
+    "react-router": "=0.13.3",
+    "uglify-js": "=2.4.24",
+    "underscore": "=1.8.3"
   },
   "devDependencies": {
-    "babelify": "=6.1.2",
-    "browserify": "=10.2.4",
-    "watchify": "=3.2.3"
+    "babel-core": "^5.8.23",
+    "babel-loader": "^5.3.2",
+    "express": "^4.13.3",
+    "node-libs-browser": "^0.5.2",
+    "react-hot-loader": "^1.3.0",
+    "webpack": "^1.12.1",
+    "webpack-dev-server": "^1.10.1"
   },
   "scripts": {
-    "prestart": "rm -rf ../node_modules/react",
-    "start": "watchify -o js/bundle.js --extension=.jsx -v -d js/App.jsx",
-    "build": "browserify --extension=.jsx . | uglifyjs -c > js/bundle.js",
-    "postinstall": "cp node_modules/highlight.js/styles/googlecode.css css/googlecode.css && ln -snf ../../ node_modules/belle"
-  },
-  "browserify": {
-    "extension": [
-      "jsx"
-    ],
-    "transform": [
-      "babelify"
-    ]
+    "start": "node server.js",
+    "postinstall": "cp node_modules/highlight.js/styles/googlecode.css css/googlecode.css"
   }
 }