Merge pull request #49 from salesforce-ux/feature/upgrade

Upgrade dependencies

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015"]
+}

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '0.12'
+- '6'
 install:
 - npm install
 script:

README.md

@@ -59,7 +59,7 @@ A *Design Token* file is written in either
       "type": "color",
 
       // Required
-      // Descriibe the category of this property
+      // Describe the category of this property
       // Often used for style guide generation
       "category": "background",
 
@@ -142,14 +142,14 @@ the specified type.
 A transform is list of [valueTransforms](#registerValueTransform) that should be applied
 to each property.
 
-**@param {string} type**  
+**@param {string} type**
 The name of the registered transform
 
-**@param {object} [options]**  
+**@param {object} [options]**
 Additional options
 
-**@param {boolean} [options.includeMeta]**  
-Don't remove ".meta" key from a prop 
+**@param {boolean} [options.includeMeta]**
+Don't remove ".meta" key from a prop
 
 #### Example:
 
@@ -165,10 +165,10 @@ gulp.src('./design/props.json')
 Register a new transform. Existing transforms with the same name
 will be overwritten.
 
-**@param {string} type**  
+**@param {string} type**
 The name of the transform
 
-**@param {array} valueTransforms**  
+**@param {array} valueTransforms**
 An array of registered value transforms
 
 #### Example:
@@ -187,19 +187,19 @@ Below is a list of pre-defined transforms and the corresponding
 *Note*: Generally speaking, the pre-defined transforms assume the original
 *Design Tokens* are formatted for the web.
 
-**raw**:  
+**raw**:
 No valueTransforms will be applied
 
-**web**:  
+**web**:
 `['color/rgb']`
 
-**ios**:  
+**ios**:
 `['color/rgb', 'relative/pixelValue', 'percentage/float']`
 
-**android**:  
+**android**:
 `['color/hex8', 'relative/pixelValue', 'percentage/float']`
 
-**aura**:  
+**aura**:
 `['color/hex']`
 
 ***
@@ -209,14 +209,14 @@ No valueTransforms will be applied
 Register a new valueTransform. Existing valueTransforms with the same name
 will be overwritten.
 
-**@param {string} type**  
+**@param {string} type**
 The name of the valueTransform
 
-**@param {function} matcher**  
+**@param {function} matcher**
 An function that should return a boolean indicating if the provided property
 should be transformed
 
-**@param {function} transformer**  
+**@param {function} transformer**
 An function that should return a new value for the provided property
 
 #### Example:
@@ -235,25 +235,25 @@ theo.registerValueTransform('animation/web/curve',
 
 #### Pre-defined ValueTransforms:
 
-**color/rgb**  
+**color/rgb**
 Parse the value as a color and return an rgb(a) string
 
-**color/hex**  
+**color/hex**
 Parse the value as a color and return an 6 digit hex string
 
-**color/hex8**  
+**color/hex8**
 Parse the value as a color and return an 8 digit hex string
 
-**percentage/float**  
+**percentage/float**
 Parse a string percentage value and return a float representation
 
-**relative/pixel**  
+**relative/pixel**
 Parse a relative size value (em/rem) and return a pixel representation.
 By default, the `baseFontSize` is set to 16 and
 the `baseFontPercentage` is set to 1. These values can be overwritten in a property's
 `.meta` object.
 
-**relative/pixelValue** 
+**relative/pixelValue**
 Same as *relative/pixel*, but removes the `px` extension
 
 ***
@@ -265,17 +265,17 @@ the specified type.
 
 *Note*: This plugin will almost always run after a `transform` call.
 
-**@param {string} type**  
+**@param {string} type**
 The name of the registered format
 
-**@param {object} [options]**  
+**@param {object} [options]**
 Additional options to be passed along to the formatter
 
-**@param {function} [options.propsFilter]**  
+**@param {function} [options.propsFilter]**
 A filter function that can be used to filter down the props before formatting
 
-**@param {function} [options.propsMap]**  
-A map function that can be used modifiy the props before formatting
+**@param {function} [options.propsMap]**
+A map function that can be used modify the props before formatting
 
 #### Example:
 
@@ -309,10 +309,10 @@ gulp.src('design/props.json')
 Register a new format. Existing formats with the same name
 will be overwritten.
 
-**@param {string} type**  
+**@param {string} type**
 The name of the format
 
-**@param {function} formatter**  
+**@param {function} formatter**
 An function that should return a string representation
 of the reformatted *Design Tokens*.
 
@@ -477,7 +477,7 @@ See <https://salesforce-ux.github.io/design-properties>.
 
 Get the result of a transform/format
 
-**@param {function} [callback]**  
+**@param {function} [callback]**
 The function to call for each result in the stream
 
 #### Example:

package.json

@@ -35,18 +35,21 @@
   },
   "homepage": "https://github.com/salesforce-ux/theo",
   "dependencies": {
-    "gulp-util": "^3.0.3",
-    "js-yaml": "^3.2.7",
-    "lodash": "^3.3.0",
-    "react": "^0.12.2",
-    "through2": "^0.6.3",
+    "gulp-util": "^3.0.7",
+    "js-yaml": "^3.6.0",
+    "lodash": "^4.11.2",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
+    "through2": "^2.0.1",
     "tinycolor2": "^1.1.1",
     "xml2js": "^0.4.5"
   },
   "devDependencies": {
-    "babel": "^4.4.6",
-    "gulp": "^3.8.11",
-    "mocha": "^2.1.0",
+    "babel-cli": "^6.8.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "gulp": "^3.9.1",
+    "mocha": "^2.4.5",
     "sinon": "^1.12.2"
   }
 }

src/props/formats/html.jsx

@@ -11,10 +11,11 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 */
 
 let React = require('react');
+let ReactDOMServer = require('react-dom/server');
 
-let groupBy = require('lodash/collection/groupBy');
-let camelCase   = require('lodash/string/camelCase');
-let capitalize   = require('lodash/string/capitalize');
+let groupBy = require('lodash/groupBy');
+let camelCase = require('lodash/camelCase');
+let upperfirst = require('lodash/upperFirst');
 
 let Style = React.createClass({
   render() {
@@ -226,7 +227,7 @@ let Styleguide = React.createClass({
   renderSection(type, heading, fn) {
     let props = this.state.categories[type];
     if (!props) { return null; }
-    let name = capitalize(camelCase(type));
+    let name = upperfirst(camelCase(type));
     let render = typeof fn === 'function' ? fn : this[`render${name}`];
     return [
       this.renderRowHeader(type, heading),
@@ -283,6 +284,6 @@ let Styleguide = React.createClass({
 module.exports = function(json) {
   return `
     <!DOCTYPE html>
-    ${React.renderToStaticMarkup(<Styleguide json={json} />)}
+    ${ReactDOMServer.renderToStaticMarkup(<Styleguide json={json} />)}
   `;
 };

src/props/index.js

@@ -23,8 +23,8 @@ let TheoError   = require('./util/error');
 
 let PropSet     = require('./prop-set');
 
-let kebabCase   = require('lodash/string/kebabCase');
-let camelCase   = require('lodash/string/camelCase');
+let kebabCase   = require('lodash/kebabCase');
+let camelCase   = require('lodash/camelCase');
 
 ////////////////////////////////////////////////////////////////////
 // Helpers