feat(theme): styled and theme components statics copy

package.json

@@ -50,5 +50,8 @@
     "ts-jest": "^23.10.4",
     "tslint": "^5.11.0",
     "typescript": "^3.1.6"
+  },
+  "dependencies": {
+    "hoist-non-react-statics": "^3.2.1"
   }
 }

src/framework/theme/component/style/styleConsumer.component.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   ThemeType,
   StyleType,
@@ -74,5 +75,8 @@ export const StyledComponent = <T extends React.Component, P extends object>(Com
     );
   };
 
-  return React.forwardRef<T, P>(RefForwardingFactory as any);
+  const RefForwardingComponent = React.forwardRef<T, P>(RefForwardingFactory as any);
+  hoistNonReactStatics(RefForwardingComponent, Component);
+
+  return RefForwardingComponent;
 };

src/framework/theme/component/theme/themeConsumer.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import hoistNonReactStatics from 'hoist-non-react-statics';
 import ThemeContext from './themeContext';
 import {
   ThemeType,
@@ -65,5 +65,8 @@ export const withStyles = <T extends React.Component, P extends object>(Componen
     );
   };
 
-  return React.forwardRef<T, P>(RefForwardingFactory as any);
+  const RefForwardingComponent = React.forwardRef<T, P>(RefForwardingFactory as any);
+  hoistNonReactStatics(RefForwardingComponent, Component);
+
+  return RefForwardingComponent;
 };

src/framework/theme/tests/style.spec.tsx

@@ -128,6 +128,15 @@ describe('@style: style consumer checks', () => {
     expect(styledComponent.props.themedStyle.textColor).toEqual(config.values.textSuccess);
   });
 
+  it('static methods are copied over', async () => {
+    // @ts-ignore: test-case
+    Test.staticMethod = function() {};
+    const StyleConsumer = StyledComponent(Test);
+
+    // @ts-ignore: test-case
+    expect(StyleConsumer.staticMethod).not.toBeUndefined();
+  });
+
 });
 
 describe('@style: complex hierarchy checks', async () => {

src/framework/theme/tests/theme.spec.tsx

@@ -193,6 +193,15 @@ describe('@theme: theme consumer checks', () => {
     expect(themedComponent1Color).not.toEqual(themedComponent2Color);
   });
 
+  it('static methods are copied over', async () => {
+    // @ts-ignore: test-case
+    ThemedConsumer.staticMethod = function() {};
+    const ThemedComponent = withStyles(ThemedConsumer);
+
+    // @ts-ignore: test-case
+    expect(ThemedComponent.staticMethod).not.toBeUndefined();
+  });
+
 });
 
 describe('@theme: service methods checks', () => {

src/playground/metro.config.js

@@ -22,5 +22,9 @@ module.exports = {
   watchFolders: [
     path.resolve(__dirname, '../framework'),
     path.resolve(__dirname, '../../node_modules/@babel'),
+
+    // FIXME(playground): unable to resolve hoist-non-react-statics
+    path.resolve(__dirname, '../../node_modules/hoist-non-react-statics'),
+    path.resolve(__dirname, '../../node_modules/react-is'),
   ],
-};
+};