YAGNI: Remove clutter from GUI component

src/components/gui/gui.jsx

-const defaultsDeep = require('lodash.defaultsdeep');
 const React = require('react');
 const VM = require('scratch-vm');
 
-const shapeFromPropTypes = require('../../lib/shape-from-prop-types');
-
 const Blocks = require('../../containers/blocks.jsx');
 const GreenFlag = require('../../containers/green-flag.jsx');
 const TargetPane = require('../../containers/target-pane.jsx');
@@ -13,24 +10,15 @@ const StopAll = require('../../containers/stop-all.jsx');
 const Box = require('../box/box.jsx');
 
 const GUIComponent = props => {
-    let {
+    const {
         basePath,
-        blocksProps,
         children,
-        greenFlagProps,
-        targetPaneProps,
-        stageProps,
-        stopAllProps,
-        vm
+        vm,
+        ...componentProps
     } = props;
-    blocksProps = defaultsDeep({}, blocksProps, {
-        options: {
-            media: `${basePath}static/blocks-media/`
-        }
-    });
     if (children) {
         return (
-            <Box>
+            <Box {...componentProps}>
                 {children}
             </Box>
         );
@@ -40,6 +28,7 @@ const GUIComponent = props => {
             grow={1}
             height="100%"
             style={{overflow: 'hidden'}}
+            {...componentProps}
         >
             <Box
                 direction="column"
@@ -55,8 +44,10 @@ const GUIComponent = props => {
                 />
                 <Blocks
                     grow={1}
+                    options={{
+                        media: `${basePath}static/blocks-media/`
+                    }}
                     vm={vm}
-                    {...blocksProps}
                 />
             </Box>
             <Box
@@ -72,24 +63,16 @@ const GUIComponent = props => {
                         marginTop: 8
                     }}
                 >
-                    <GreenFlag
-                        vm={vm}
-                        {...greenFlagProps}
-                    />
-                    <StopAll
-                        vm={vm}
-                        {...stopAllProps}
-                    />
+                    <GreenFlag vm={vm} />
+                    <StopAll vm={vm} />
                 </Box>
                 <Stage
                     shrink={0}
                     vm={vm}
-                    {...stageProps}
                 />
                 <TargetPane
                     grow={1}
                     vm={vm}
-                    {...targetPaneProps}
                 />
             </Box>
         </Box>
@@ -97,21 +80,11 @@ const GUIComponent = props => {
 };
 GUIComponent.propTypes = {
     basePath: React.PropTypes.string,
-    blocksProps: shapeFromPropTypes(Blocks.propTypes, {omit: ['vm']}),
     children: React.PropTypes.node,
-    greenFlagProps: shapeFromPropTypes(GreenFlag.propTypes, {omit: ['vm']}),
-    stageProps: shapeFromPropTypes(Stage.propTypes, {omit: ['vm']}),
-    stopAllProps: shapeFromPropTypes(StopAll.propTypes, {omit: ['vm']}),
-    targetPaneProps: shapeFromPropTypes(TargetPane.propTypes, {omit: ['vm']}),
     vm: React.PropTypes.instanceOf(VM)
 };
 GUIComponent.defaultProps = {
     basePath: '/',
-    blocksProps: {},
-    greenFlagProps: {},
-    targetPaneProps: {},
-    stageProps: {},
-    stopAllProps: {},
     vm: new VM()
 };
 module.exports = GUIComponent;

src/lib/shape-from-prop-types.js

-const React = require('react');
-
-module.exports = function shapeFromPropTypes (propTypes, opts) {
-    opts = Object.assign({}, opts, {omit: []});
-    const shape = Object
-        .keys(propTypes)
-        .filter(key => opts.omit.indexOf(key) !== -1)
-        .reduce((newPropTypes, key) => {
-            newPropTypes[key] = propTypes[key];
-            return newPropTypes;
-        }, {});
-    return React.PropTypes.shape(shape);
-};