[ReactNative] refactor the inspector

Summary:
The `InspectorOverlay` component was getting unwieldy, so I broke it into three components:

- Inspector
- InspectorOverlay
- InspectorPanel

and added @flow types.

The inspector was also living under the `ReactIOS` directory, and I moved it
up into the `Libraries` directory, as the inspector will soon be usable [on
Android](https://phabricator.fb.com/D2138319).

All features of the inspector should remain functional, with the addition of
one feature:

- you can toggle "touch to inspect" by tapping the "Inspect" button at the
  bottom of the inspection panel. When inspection is disabled, the panel remains, but you can interact with
  the app normally without touches being intercepted

@public

Test Plan:
Open the inspector:

- touch to inspect things, verify that margin, padding, size and position are
  reported correctly, and that the component hierarchy is navigable.
- tap the "Inspect" button, and verify that you can interact with the app
  normally.

{F22548949}

[Video of toggling inspection](https://www.latest.facebook.com/pxlcld/mrs9)

Libraries/Inspector/BorderBox.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BorderBox
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var View = require('View');
+
+class BorderBox extends React.Component {
+  render() {
+    var box = this.props.box;
+    if (!box) {
+      return this.props.children;
+    }
+    var style = {
+      borderTopWidth: box.top,
+      borderBottomWidth: box.bottom,
+      borderLeftWidth: box.left,
+      borderRightWidth: box.right,
+    };
+    return (
+      <View style={[style, this.props.style]}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+module.exports = BorderBox;
+

Libraries/Inspector/BoxInspector.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BoxInspector
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+var resolveBoxStyle = require('resolveBoxStyle');
+
+var blank = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+class BoxInspector extends React.Component {
+  render() {
+    var frame = this.props.frame;
+    var style = this.props.style;
+    var margin = style && resolveBoxStyle('margin', style) || blank;
+    var padding = style && resolveBoxStyle('padding', style) || blank;
+    return (
+      <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
+        <BoxContainer title="padding" box={padding}>
+          <View>
+            <Text style={styles.innerText}>
+              ({frame.left}, {frame.top})
+            </Text>
+            <Text style={styles.innerText}>
+              {frame.width} &times; {frame.height}
+            </Text>
+          </View>
+        </BoxContainer>
+      </BoxContainer>
+    );
+  }
+}
+
+class BoxContainer extends React.Component {
+  render() {
+    var box = this.props.box;
+    return (
+      <View style={styles.box}>
+        <View style={styles.row}>
+          <Text style={[this.props.titleStyle, styles.label]}>{this.props.title}</Text>
+          <Text style={styles.boxText}>{box.top}</Text>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.boxText}>{box.left}</Text>
+          {this.props.children}
+          <Text style={styles.boxText}>{box.right}</Text>
+        </View>
+        <Text style={styles.boxText}>{box.bottom}</Text>
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  marginLabel: {
+    width: 60,
+  },
+  label: {
+    fontSize: 10,
+    color: 'rgb(255,100,0)',
+    marginLeft: 5,
+    flex: 1,
+    textAlign: 'left',
+    top: -3,
+  },
+  buffer: {
+    fontSize: 10,
+    color: 'yellow',
+    flex: 1,
+    textAlign: 'center',
+  },
+  innerText: {
+    color: 'yellow',
+    fontSize: 12,
+    textAlign: 'center',
+    width: 70,
+  },
+  box: {
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+  boxText: {
+    color: 'white',
+    fontSize: 12,
+    marginHorizontal: 3,
+    marginVertical: 2,
+    textAlign: 'center',
+  },
+});
+
+module.exports = BoxInspector;
+

Libraries/Inspector/ElementBox.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ElementBox
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var View = require('View');
+var StyleSheet = require('StyleSheet');
+var BorderBox = require('BorderBox');
+var resolveBoxStyle = require('resolveBoxStyle');
+
+var flattenStyle = require('flattenStyle');
+
+class ElementBox extends React.Component {
+  render() {
+    var style = flattenStyle(this.props.style) || {};
+    var margin = resolveBoxStyle('margin', style);
+    var padding = resolveBoxStyle('padding', style);
+    var frameStyle = this.props.frame;
+    if (margin) {
+      frameStyle = {
+        top: frameStyle.top - margin.top,
+        left: frameStyle.left - margin.left,
+        height: frameStyle.height + margin.top + margin.bottom,
+        width: frameStyle.width + margin.left + margin.right,
+      };
+    }
+    var contentStyle = {
+      width: this.props.frame.width,
+      height: this.props.frame.height,
+    };
+    if (padding) {
+      contentStyle = {
+        width: contentStyle.width - padding.left - padding.right,
+        height: contentStyle.height - padding.top - padding.bottom,
+      };
+    }
+    return (
+      <View style={[styles.frame, frameStyle]} pointerEvents="none">
+        <BorderBox box={margin} style={styles.margin}>
+          <BorderBox box={padding} style={styles.padding}>
+            <View style={[styles.content, contentStyle]} />
+          </BorderBox>
+        </BorderBox>
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  frame: {
+    position: 'absolute',
+  },
+  content: {
+    backgroundColor: 'rgba(200, 230, 255, 0.8)',
+  },
+  padding: {
+    borderColor: 'rgba(77, 255, 0, 0.3)',
+  },
+  margin: {
+    borderColor: 'rgba(255, 132, 0, 0.3)',
+  },
+});
+
+module.exports = ElementBox;
+

Libraries/Inspector/ElementProperties.js

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ElementProperties
+ * @flow
+ */
+'use strict';
+
+var BoxInspector = require('BoxInspector');
+var PropTypes = require('ReactPropTypes');
+var React = require('React');
+var StyleInspector = require('StyleInspector');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var TouchableHighlight = require('TouchableHighlight');
+var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+var View = require('View');
+
+var flattenStyle = require('flattenStyle');
+var mapWithSeparator = require('mapWithSeparator');
+
+var ElementProperties = React.createClass({
+  propTypes: {
+    hierarchy: PropTypes.array.isRequired,
+    style: PropTypes.array.isRequired,
+  },
+
+  render: function() {
+    var style = flattenStyle(this.props.style);
+    var selection = this.props.selection;
+    // Without the `TouchableWithoutFeedback`, taps on this inspector pane
+    // would change the inspected element to whatever is under the inspector
+    return (
+      <TouchableWithoutFeedback>
+        <View style={styles.info}>
+          <View style={styles.breadcrumb}>
+            {mapWithSeparator(
+              this.props.hierarchy,
+              (item, i) => (
+                <TouchableHighlight
+                  style={[styles.breadItem, i === selection && styles.selected]}
+                  onPress={() => this.props.setSelection(i)}>
+                  <Text style={styles.breadItemText}>
+                    {item.getName ? item.getName() : 'Unknown'}
+                  </Text>
+                </TouchableHighlight>
+              ),
+              () => <Text style={styles.breadSep}>&#9656;</Text>
+            )}
+          </View>
+          <View style={styles.row}>
+            <StyleInspector style={style} />
+            <BoxInspector style={style} frame={this.props.frame} />
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  breadSep: {
+    fontSize: 8,
+    color: 'white',
+  },
+  breadcrumb: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 5,
+  },
+  selected: {
+    borderColor: 'white',
+    borderRadius: 5,
+  },
+  breadItem: {
+    borderWidth: 1,
+    borderColor: 'transparent',
+    marginHorizontal: 2,
+  },
+  breadItemText: {
+    fontSize: 10,
+    color: 'white',
+    marginHorizontal: 5,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  info: {
+    padding: 10,
+  },
+  path: {
+    color: 'white',
+    fontSize: 9,
+  },
+});
+
+module.exports = ElementProperties;

Libraries/Inspector/Inspector.js

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Inspector
+ * @flow
+ */
+'use strict';
+
+var Dimensions = require('Dimensions');
+var InspectorOverlay = require('InspectorOverlay');
+var InspectorPanel = require('InspectorPanel');
+var InspectorUtils = require('InspectorUtils');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var UIManager = require('NativeModules').UIManager;
+var View = require('View');
+
+class Inspector extends React.Component {
+  constructor(props: Object) {
+    super(props);
+    this.state = {
+      panelPos: 'bottom',
+      inspecting: true,
+      inspected: null,
+    };
+  }
+
+  setSelection(i: number) {
+    var instance = this.state.hierarchy[i];
+    var publicInstance = instance.getPublicInstance();
+    UIManager.measure(React.findNodeHandle(instance), (x, y, width, height, left, top) => {
+      this.setState({
+        inspected: {
+          frame: {left, top, width, height},
+          style: publicInstance.props ? publicInstance.props.style : {},
+        },
+        selection: i,
+      });
+    });
+  }
+
+  onTouchInstance(instance: Object, frame: Object, pointerY: number) {
+    var hierarchy = InspectorUtils.getOwnerHierarchy(instance);
+    var publicInstance = instance.getPublicInstance();
+    var props = publicInstance.props || {};
+    this.setState({
+      panelPos: pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
+      selection: hierarchy.length - 1,
+      hierarchy,
+      inspected: {
+        style: props.style || {},
+        frame,
+      },
+    });
+  }
+
+  setInspecting(val: bool) {
+    this.setState({
+      inspecting: val,
+    });
+  }
+
+  render() {
+    var panelPosition;
+    if (this.state.panelPos === 'bottom') {
+      panelPosition = {bottom: -Dimensions.get('window').height};
+    } else {
+      panelPosition = {top: 0};
+    }
+    return (
+      <View style={styles.container}>
+        {this.state.inspecting &&
+          <InspectorOverlay
+            rootTag={this.props.rootTag}
+            inspected={this.state.inspected}
+            inspectedViewTag={this.props.inspectedViewTag}
+            onTouchInstance={this.onTouchInstance.bind(this)}
+          />}
+        <View style={[styles.panelContainer, panelPosition]}>
+          <InspectorPanel
+            inspecting={this.state.inspecting}
+            setInspecting={this.setInspecting.bind(this)}
+            inspected={this.state.inspected}
+            hierarchy={this.state.hierarchy}
+            selection={this.state.selection}
+            setSelection={this.setSelection.bind(this)}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 0,
+  },
+  panelContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+});
+
+module.exports = Inspector;

Libraries/Inspector/InspectorOverlay.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule InspectorOverlay
+ * @flow
+ */
+'use strict';
+
+var Dimensions = require('Dimensions');
+var InspectorUtils = require('InspectorUtils');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var UIManager = require('NativeModules').UIManager;
+var View = require('View');
+var ElementBox = require('ElementBox');
+
+var PropTypes = React.PropTypes;
+
+type EventLike = {
+  nativeEvent: Object;
+};
+
+var InspectorOverlay = React.createClass({
+  propTypes: {
+    inspectedViewTag: PropTypes.object,
+    onTouchInstance: PropTypes.func.isRequired,
+  },
+
+  findViewForTouchEvent: function(e: EventLike) {
+    var {locationX, locationY} = e.nativeEvent.touches[0];
+    UIManager.findSubviewIn(
+      this.props.inspectedViewTag,
+      [locationX, locationY],
+      (nativeViewTag, left, top, width, height) => {
+        var instance = InspectorUtils.findInstanceByNativeTag(this.props.rootTag, nativeViewTag);
+        if (!instance) {
+          return;
+        }
+        this.props.onTouchInstance(instance, {left, top, width, height}, locationY);
+      }
+    );
+  },
+
+  shouldSetResponser: function(e: EventLike): bool {
+    this.findViewForTouchEvent(e);
+    return true;
+  },
+
+  render: function() {
+    var content = null;
+    if (this.props.inspected) {
+      content = <ElementBox frame={this.props.inspected.frame} style={this.props.inspected.style} />;
+    }
+
+    return (
+      <View
+        onStartShouldSetResponder={this.shouldSetResponser}
+        onResponderMove={this.findViewForTouchEvent}
+        style={[styles.inspector, {height: Dimensions.get('window').height}]}>
+        {content}
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  inspector: {
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+  },
+});
+
+module.exports = InspectorOverlay;

Libraries/Inspector/InspectorPanel.js

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule InspectorPanel
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+var ElementProperties = require('ElementProperties');
+var TouchableHighlight = require('TouchableHighlight');
+
+var PropTypes = React.PropTypes;
+
+class InspectorPanel extends React.Component {
+  renderWaiting() {
+    if (this.props.inspecting) {
+      return (
+        <Text style={styles.waitingText}>
+          Tap something to inspect it
+        </Text>
+      );
+    }
+    return <Text style={styles.waitingText}>Nothing is inspected</Text>;
+  }
+
+  render() {
+    var contents;
+    if (this.props.inspected) {
+      contents = (
+        <ElementProperties
+          style={this.props.inspected.style}
+          frame={this.props.inspected.frame}
+          hierarchy={this.props.hierarchy}
+          selection={this.props.selection}
+          setSelection={this.props.setSelection}
+        />
+      );
+    } else {
+      contents = (
+        <View style={styles.waiting}>
+          {this.renderWaiting()}
+        </View>
+      );
+    }
+    return (
+      <View style={styles.container}>
+        {contents}
+        <View style={styles.buttonRow}>
+          <Button
+            title={'Inspect'}
+            pressed={this.props.inspecting}
+            onClick={this.props.setInspecting}/>
+        </View>
+      </View>
+    );
+  }
+}
+
+InspectorPanel.propTypes = {
+  inspecting: PropTypes.bool,
+  setInspecting: PropTypes.func,
+  inspected: PropTypes.object,
+};
+
+class Button extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight onPress={() => this.props.onClick(!this.props.pressed)} style={[
+        styles.button,
+        this.props.pressed && styles.buttonPressed
+      ]}>
+        <Text style={styles.buttonText}>{this.props.title}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  buttonRow: {
+    flexDirection: 'row',
+  },
+  button: {
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    margin: 2,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonPressed: {
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: 'white',
+    margin: 5,
+  },
+  container: {
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  waiting: {
+    height: 100,
+  },
+  waitingText: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginVertical: 20,
+  },
+});
+
+module.exports = InspectorPanel;

Libraries/Inspector/InspectorUtils.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule InspectorUtils
+ */
+'use strict';
+
+var ReactInstanceHandles = require('ReactInstanceHandles');
+var ReactInstanceMap = require('ReactInstanceMap');
+var ReactNativeMount = require('ReactNativeMount');
+var ReactNativeTagHandles = require('ReactNativeTagHandles');
+
+function traverseOwnerTreeUp(hierarchy, instance) {
+  if (instance) {
+    hierarchy.unshift(instance);
+    traverseOwnerTreeUp(hierarchy, instance._currentElement._owner);
+  }
+}
+
+function findInstance(component, targetID) {
+  if (targetID === findRootNodeID(component)) {
+    return component;
+  }
+  if (component._renderedComponent) {
+    return findInstance(component._renderedComponent, targetID);
+  } else {
+    for (var key in component._renderedChildren) {
+      var child = component._renderedChildren[key];
+      if (ReactInstanceHandles.isAncestorIDOf(findRootNodeID(child), targetID)) {
+        var instance = findInstance(child, targetID);
+        if (instance) {
+          return instance;
+        }
+      }
+    }
+  }
+}
+
+function findRootNodeID(component) {
+  var internalInstance = ReactInstanceMap.get(component);
+  return internalInstance ? internalInstance._rootNodeID : component._rootNodeID;
+}
+
+function findInstanceByNativeTag(rootTag, nativeTag) {
+  var containerID = ReactNativeTagHandles.tagToRootNodeID[rootTag];
+  var rootInstance = ReactNativeMount._instancesByContainerID[containerID];
+  var targetID = ReactNativeTagHandles.tagToRootNodeID[nativeTag];
+  if (!targetID) {
+    return undefined;
+  }
+  return findInstance(rootInstance, targetID);
+}
+
+function getOwnerHierarchy(instance) {
+  var hierarchy = [];
+  traverseOwnerTreeUp(hierarchy, instance);
+  return hierarchy;
+}
+
+module.exports = {findInstanceByNativeTag, getOwnerHierarchy};

Libraries/Inspector/StyleInspector.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule StyleInspector
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+
+class StyleInspector extends React.Component {
+  render() {
+    if (!this.props.style) {
+      return <Text style={styles.noStyle}>No style</Text>;
+    }
+    var names = Object.keys(this.props.style);
+    return (
+      <View style={styles.container}>
+        <View>
+          {names.map(name => <Text style={styles.attr}>{name}:</Text>)}
+        </View>
+        <View>
+          {names.map(name => <Text style={styles.value}>{this.props.style[name]}</Text>)}
+        </View>
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  attr: {
+    fontSize: 10,
+    color: '#ccc',
+  },
+  value: {
+    fontSize: 10,
+    color: 'white',
+    marginLeft: 10,
+  },
+  noStyle: {
+    color: 'white',
+    fontSize: 10,
+  },
+});
+
+module.exports = StyleInspector;
+

Libraries/Inspector/resolveBoxStyle.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule resolveBoxStyle
+ * @flow
+ */
+'use strict';
+
+/**
+ * Resolve a style property into it's component parts, e.g.
+ *
+ * resolveProperties('margin', {margin: 5, marginBottom: 10})
+ * ->
+ * {top: 5, left: 5, right: 5, bottom: 10}
+ *
+ * If none are set, returns false.
+ */
+function resolveBoxStyle(prefix: string, style: Object): ?Object {
+  var res = {};
+  var subs = ['top', 'left', 'bottom', 'right'];
+  var set = false;
+  subs.forEach(sub => {
+    res[sub] = style[prefix] || 0;
+  });
+  if (style[prefix]) {
+    set = true;
+  }
+  if (style[prefix + 'Vertical']) {
+    res.top = res.bottom = style[prefix + 'Vertical'];
+    set = true;
+  }
+  if (style[prefix + 'Horizontal']) {
+    res.left = res.right = style[prefix + 'Horizontal'];
+    set = true;
+  }
+  subs.forEach(sub => {
+    var val = style[prefix + capFirst(sub)];
+    if (val) {
+      res[sub] = val;
+      set = true;
+    }
+  });
+  if (!set) {
+    return;
+  }
+  return res;
+}
+
+function capFirst(text) {
+  return text[0].toUpperCase() + text.slice(1);
+}
+
+module.exports = resolveBoxStyle;
+