Merge branch 'staging' into icon-color-picker

Conflicts:
	apps/src/applab/designElements/button.jsx

Author: Josh Lory

.gitignore

@@ -33,6 +33,7 @@ crowdin.yaml
 /apps/build
 /apps/node_modules/
 /apps/npm-debug.log
+/apps/src/color.js
 *_temp.json
 /.ruby-version
 /levelbuilder_ci_last_run

.haml-lint.yml

@@ -8,9 +8,6 @@ linters:
   ClassesBeforeIds:
     enabled: false
 
-  ConsecutiveComments:
-    enabled: false
-
   ConsecutiveSilentScripts:
     enabled: false
 

Gemfile

@@ -21,6 +21,7 @@ gem 'dalli' # memcached
 gem 'parallel'
 
 gem 'google-api-client'
+gem 'sprockets-derailleur' # Multi-cpu assets precompile
 
 gem 'crowdin-cli'
 

Gemfile.lock

@@ -469,6 +469,8 @@ GEM
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
+    sprockets-derailleur (0.0.9)
+      sprockets (~> 2)
     sprockets-rails (2.3.3)
       actionpack (>= 3.0)
       activesupport (>= 3.0)
@@ -630,6 +632,7 @@ DEPENDENCIES
   sinatra
   spring
   spring-commands-testunit
+  sprockets-derailleur
   sqlite3
   stringex (~> 2.5.2)
   therubyracer (~> 0.12.2)

STYLEGUIDE.md

@@ -1,4 +1,4 @@
-# Style Guide {
+# Style Guide
 
 ## Prelude
 We try to maintain a consistent style for two reasons:
@@ -217,6 +217,121 @@ Default: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
     templates include a script tag which assigns app_options to
     a Javascript variable so that it as accessible from JS.
 
+### React
+Our default style if not mentioned here should be that mentioned in the AirBnb guide https://github.com/airbnb/javascript/tree/master/react (perhaps with the exception of closing tags on their own line).
+* <a name="js-react-inline-styles"></a>
+Prefer single object for all styles vs. inlined style objects
+```jsx
+// Bad
+var component = (
+  <div style={{color: 'red', display: 'block'}}>
+    <div style={{color: 'blue', fontSize: 10}}>I'm a child</div>
+  </div>
+);
+
+// Good
+var styles = {
+  root: {
+    color: 'red',
+    display: 'block
+  },
+  child: {
+    color: 'blue',
+    fontSize: 10
+  }
+};
+...
+var component = (
+  <div style={styles.root}>
+    <div style={styles.child}>I'm a child</div>
+  </div>
+);
+```
+* <a name="js-react-pixel-numbers"></a>
+Prefer numbers vs strings for pixel values
+```jsx
+// Bad
+var styles = {
+  root: {
+    width: '100px',
+    height: '100px'
+  }
+}'
+
+// Good
+var styles = {
+  root: {
+    width: 100,
+    height: 100
+  }
+};
+```
+* <a name="js-react-long-components"></a>
+Components with many attributes should have one per line, with 4 spaces of indentation. Child components should have 2 spaces of indentation.
+```jsx
+// Bad
+var component = (
+  <MyComponent param1={1} param2={2} param3={3} param4={4} param5={5}>
+    <ChildComponent/>
+  </MyComponent>
+);
+
+// Good
+var component = (
+  <MyComponent
+      param1={1}
+      param2={2}
+      param3={3}
+      param4={4}
+      param5={5}>
+    <ChildComponent/>
+  </MyComponent>
+);
+```
+* <a name="jsx-child-elements-on-own-line"></a>
+Since JSX [removes newlines before rendering to HTML](http://andrewhfarmer.com/how-whitespace-works-in-jsx/)
+you can and should put child elements on their own line, instead of putting
+them on the same line to avoid extra spaces.
+
+```
+// good
+<Component
+    prop1="prop1"
+    prop2="prop2">
+  textContent
+</Component>
+
+
+// bad
+<Component
+    prop1="prop1"
+    prop2="prop2">textContent</Component>
+    
+// good - fine to put content on same line if the tag opens & closes on that line
+<Component>textContent</Component>
+```
+
+* <a name="js-react-aligned-tags"></a>
+align open and close tags
+```jsx
+// Bad
+var component = (<MyComponent
+      foo="bar"
+      onClose={this.handleClose}>
+    <ChildComponent/>
+  </MyComponent>);
+
+// Good
+var component = (
+  <MyComponent
+      foo="bar"
+      onClose={this.handleClose}>
+    <ChildComponent/>
+  </MyComponent>
+);
+```
+
+
 ### In /apps
 
 Use lodash and jQuery libraries in `/apps`.
@@ -225,31 +340,6 @@ Use lodash and jQuery libraries in `/apps`.
 
 Use Google Closure Tools in `/blockly-core`, especially for color conversion and keyboard identifiers. Prefer raw HTML over Closure Tools UI constructs for new code.
 
-## JSX
-
-* <a name="jsx-child-elements-on-own-line"></a>
-  Since JSX [removes newlines before rendering to HTML](http://andrewhfarmer.com/how-whitespace-works-in-jsx/)
-  you can and should put child elements on their own line, instead of putting
-  them on the same line to avoid extra spaces.
-  
-  ```
-  // good
-  <Component
-      prop1="prop1"
-      prop2="prop2">
-    textContent
-  </Component>
-  
-  
-  // bad
-  <Component
-      prop1="prop1"
-      prop2="prop2">textContent</Component>
-      
-  // good - fine to put content on same line if the tag opens & closes on that line
-  <Component>textContent</Component>
-  ```
-
 ## CSS
 
 Default: https://github.com/thoughtbot/guides/tree/master/style/sass
@@ -278,4 +368,3 @@ Default: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
 - Prefer double quotes for attributes.
 - Use dashes instead of underscores, camel casing, etc for separating words in IDs and classes.
 
-# }

apps/Gruntfile.js

@@ -350,6 +350,7 @@ module.exports = function (grunt) {
 
   config.exec = {
     browserify: 'echo "' + browserifyExec + '" && ' + browserifyExec,
+    buildColorJs: './script/build-color-js.js',
     mochaTest: 'node test/util/runTests.js --color' + (fastMochaTest ? ' --fast' : '')
   };
 
@@ -512,6 +513,7 @@ module.exports = function (grunt) {
     'checkDropletSize',
     'pseudoloc',
     'newer:messages',
+    'exec:buildColorJs',
     'newer:copy:src',
     'newer:copy:lib',
     'locales',
@@ -545,6 +547,7 @@ module.exports = function (grunt) {
 
   grunt.registerTask('mochaTest', [
     'newer:messages',
+    'exec:buildColorJs',
     'newer:copy:static',
     'newer:concat',
     'exec:mochaTest'

apps/lib/blockly/sentinel

@@ -1 +1 @@
-2016-03-15 20:43:26 +0000
+2016-03-17 01:38:25 +0000

apps/script/build-color-js.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+// Script to generate color.js from color.scss
+var fs = require('fs');
+var path = require('path');
+var readline = require('readline');
+
+var colorScssPath = path.resolve('../shared/css/color.scss');
+var colorJsPath = path.resolve('./src/color.js');
+
+// Regular expression to capture a color definition from SCSS
+var colorRe = /\$(\w+)\s*:\s*([^;]+);/;
+var cachedColors = {};
+
+// In color.scss some color definitions reference previous
+// color definitions.  Since we're reading them in order,
+// we can recursively resolve these referential defintions
+// until we land on an actual color.
+function resolveColor(value) {
+  var originalValue = value;
+  while (/^\$/.test(value)) {
+    value = cachedColors[value.substring(1)];
+  }
+  return value;
+}
+
+// Generate color.js while reading color.scss line-by-line
+var out = fs.createWriteStream(colorJsPath);
+out.write([
+  '// color.js',
+  '// GENERATED FILE: DO NOT MODIFY DIRECTLY',
+  '// This generated file exports all colors defined in color.scss',
+  '// for use in JavaScript. The generator script is build-color-js.js',
+  'module.exports = {\n'
+].join('\n'));
+
+var rl = readline.createInterface({
+  input: fs.createReadStream(colorScssPath),
+  terminal: false
+});
+
+var currentLine = 0;
+rl.on('line', function (line) {
+  currentLine++;
+  var match = colorRe.exec(line);
+  if (match === null) {
+    return;
+  }
+
+  var colorName = match[1];
+  var colorValue = resolveColor(match[2]);
+  if (typeof colorValue === 'undefined') {
+    throw new Error([
+        'Unable to resolve color ' + colorName,
+        colorScssPath + ':' + currentLine,
+        line,
+        ' ^'
+        ].join('\n'));
+  }
+  cachedColors[colorName] = colorValue;
+
+  out.write('  ' + colorName + ': "' + colorValue + '",\n');
+});
+rl.on('close', function () {
+  out.write('};\n');
+});
+