Updated babel

.babelrc

@@ -1,3 +1,10 @@
 {
-  "stage": 0
+  "presets": [
+    "es2015",
+    "stage-0",
+    "react"
+  ],
+  "plugins": [
+    "transform-decorators-legacy"
+  ]
 }

docs/windows/progress-circle.md

@@ -23,7 +23,7 @@ export default class extends Component {
     return (
       <ProgressCircle
         color={this.props.color}
-        size="100"
+        size={100}
       />
     );
   }

examples/windows/progress-circle.js

@@ -10,7 +10,7 @@ export default class extends Component {
     return (
       <ProgressCircle
         color={this.props.color}
-        size="100"
+        size={100}
       />
     );
   }

package.json

@@ -31,14 +31,18 @@
     "react-dom": "~0.14"
   },
   "devDependencies": {
-    "babel": "^5.8.35",
-    "babel-core": "^5.8.35",
-    "babel-eslint": "^4.1.6",
-    "babel-loader": "^5.4.0",
+    "babel": "^6.5.2",
+    "babel-core": "^6.5.2",
+    "babel-eslint": "^5.0.0",
+    "babel-loader": "^6.2.3",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
     "chai": "^3.5.0",
-    "eslint": "^1.10.3",
-    "eslint-plugin-react": "^3.16.1",
-    "html-webpack-plugin": "^1.7.0",
+    "eslint": "^2.2.0",
+    "eslint-plugin-react": "^4.0.0",
+    "html-webpack-plugin": "^2.9.0",
     "jsdom": "^8.0.1",
     "mocha": "^2.4.5",
     "react": "^0.14.7",

playground/examples-loader.js

@@ -27,16 +27,17 @@ module.exports = function(source) {
   var dirname = path.join(__dirname, '..');
   var files = scanDir(path.join(dirname, 'examples'));
   var file;
-  var data;
 
-  source = 'var data = {};\n';
+  source = 'let data = {};\n';
   for (var i = 0, len = files.length; i < len; ++i) {
     file = files[i];
     var filename = file.file.replace(dirname, '').replace(/\.js$/, '');
-    data = 'data[\'' + filename + '\'] = require(\'..' + filename + '\');\n';
-    source = source + data;
+    var key = filename.replace(/[\/\-]/g, '_');
+    source += 'import ' + key + ' from \'..' + filename + '\';\n';
+    source += 'data[\'' + filename + '\'] = ' + key + ';\n';
   }
-  source = source + '\nmodule.exports = data;\n';
+
+  source += 'export default data;';
 
   return source;
 };

playground/ui/examples/examples.js

@@ -32,39 +32,38 @@ class Examples extends Component {
     list: PropTypes.object
   };
 
-  click = (key) => {
-    key = (this.props.path + '/' + key).replace(/^\//, '');
+  click = (category, key) => {
+    key = (category + '/' + key).replace(/^\//, '');
     this.context.playground.showExample(key);
   };
 
   render() {
-    let name = this.props.name ? <h1 style={styles.title}>{this.props.name}</h1> : null;
-
     return (
       <div>
-        {name}
-        {this.renderItems()}
+        {this.renderCategories(this.props.list)}
       </div>
     );
   }
 
-  renderItems() {
+  renderCategories(categories) {
     let children = [];
-    for (let prop in this.props.list) {
-      if (this.props.list.hasOwnProperty(prop)) {
-        let item = this.props.list[prop];
-        if (typeof item === 'function') {
-          children.push(this.renderItem(item, prop));
-        } else {
-          children.push(<Examples key={prop} name={prop} list={item} path={(this.props.path || '') + '/' + prop}/>);
-        }
+    for (let prop in categories) {
+      if (categories.hasOwnProperty(prop)) {
+        children.push(<h1 key={prop} style={styles.title}>{prop}</h1>);
+        children.push(...this.renderItems(prop, categories[prop]));
       }
     }
     return children;
   }
 
-  renderItem(item, key) {
-    return <a key={key} style={styles.item} onClick={() => this.click(key)}>{key}</a>
+  renderItems(category, items) {
+    let children = [];
+    for (let prop in items) {
+      if (items.hasOwnProperty(prop)) {
+        children.push(<a key={category + '/' + prop} style={styles.item} onClick={() => this.click(category, prop)}>{prop}</a>);
+      }
+    }
+    return children;
   }
 }
 

playground/webpack.config.js

@@ -51,12 +51,12 @@ module.exports = {
     loaders: [
       {
         test: /\?examples/,
-        loaders: ['babel-loader?stage=0', 'examples-loader']
+        loaders: ['babel', 'examples-loader']
       },
       {
         test: /\.(js)$/,
         exclude: /node_modules/,
-        loader: 'babel-loader?stage=0'
+        loader: 'babel'
       }
     ]
   },

src/progress-circle/progress-circle.windows/progress-circle.js

@@ -9,7 +9,7 @@ class ProgressRingWindows extends Component {
   static propTypes = {
     absolute: PropTypes.bool,
     color: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    size: PropTypes.number
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
 
   componentDidMount() {