feat(playground): home screen. Closes #203 (#205)

* fix(theme): pass wrapped component displayName to consumer components

* feat(playground): react-navigation integration

* refactor(ui): move sample component to playground

package.json

@@ -33,6 +33,7 @@
     "@types/jest": "^23.3.8",
     "@types/react": "^16.4.18",
     "@types/react-native": "^0.57.7",
+    "@types/react-navigation": "^2.13.7",
     "@types/react-test-renderer": "^16.0.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",

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

@@ -76,6 +76,8 @@ export const StyledComponent = <T extends React.Component, P extends object>(Com
   };
 
   const RefForwardingComponent = React.forwardRef<T, P>(RefForwardingFactory as any);
+
+  RefForwardingComponent.displayName = Component.displayName || Component.name;
   hoistNonReactStatics(RefForwardingComponent, Component);
 
   return RefForwardingComponent;

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

@@ -66,6 +66,8 @@ export const withStyles = <T extends React.Component, P extends object>(Componen
   };
 
   const RefForwardingComponent = React.forwardRef<T, P>(RefForwardingFactory as any);
+
+  RefForwardingComponent.displayName = Component.displayName || Component.name;
   hoistNonReactStatics(RefForwardingComponent, Component);
 
   return RefForwardingComponent;

src/framework/ui/index.ts

@@ -1,9 +0,0 @@
-import { StyledComponent } from '@rk-kit/theme';
-import { Sample, Props } from './sample/sample.component';
-
-const StyledSample = StyledComponent<Sample, Props>(Sample);
-
-export {
-  StyledSample as Sample,
-  Props as SampleProps,
-};

src/playground/package.json

@@ -8,7 +8,8 @@
   "dependencies": {
     "expo": "^31.0.4",
     "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz"
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
+    "react-navigation": "^3.0.7"
   },
   "devDependencies": {
     "react-native-typescript-transformer": "^1.2.10"

src/playground/src/app.component.tsx

@@ -4,11 +4,12 @@ import {
   ThemeMappingType,
   ThemeType,
 } from '@rk-kit/theme';
-import { Sample } from '@rk-kit/ui';
 import {
   Mappings,
   Theme,
 } from './theme-token';
+import { withNavigation } from './navigation';
+import * as Screens from './ui/screen';
 
 interface State {
   mappings: ThemeMappingType[];
@@ -17,8 +18,6 @@ interface State {
 
 export default class App extends React.Component<any, State> {
 
-  sampleRef = undefined;
-
   constructor(props) {
     super(props);
     this.state = {
@@ -27,17 +26,12 @@ export default class App extends React.Component<any, State> {
     };
   }
 
-  setSampleRef = (ref) => {
-    this.sampleRef = ref;
-  };
-
   render() {
+    const { HomeScreen: RootScreen, ...nestedScreens } = Screens;
+    const Router = withNavigation(RootScreen, nestedScreens);
     return (
       <StyleProvider theme={this.state.theme} mapping={this.state.mappings}>
-        <Sample
-          ref={this.setSampleRef}
-          variant='dark success'
-        />
+        <Router/>
       </StyleProvider>
     );
   }

src/playground/src/navigation/index.ts

@@ -0,0 +1,5 @@
+export {
+  withNavigation,
+  Props as NavigatorProps,
+  RouteType,
+} from './navigation.component';

src/playground/src/navigation/navigation.component.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  // @ts-ignore: createAppContainer is not exported
+  createAppContainer,
+  createStackNavigator,
+  NavigationRouteConfigMap,
+} from 'react-navigation';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+export interface RouteType {
+  name: string;
+}
+
+export interface Props {
+  routes?: RouteType[];
+}
+
+const ROUTE_INITIAL = 'root';
+
+export const withNavigation = <P extends object>(Root: React.ComponentType<P>,
+                                          routes: NavigationRouteConfigMap) => {
+
+  type WrapperProps = Props & P;
+
+  class RootWrapper extends React.Component<WrapperProps> {
+
+    getComponentName = (Component: React.ComponentType) => Component.displayName || Component.name;
+
+    createCustomProps = (): Props => {
+      const toRoute = (key: string): RouteType => ({ name: key });
+      return {
+        routes: Object.keys(routes).filter(key => {
+          const rootComponentName = this.getComponentName(Root);
+          const componentName = this.getComponentName(routes[key]);
+          return rootComponentName !== componentName;
+        }).map(toRoute),
+      };
+    };
+
+    render() {
+      return (
+        <Root
+          {...this.createCustomProps()}
+          {...this.props}
+        />
+      );
+    }
+  }
+
+  const routeConfig: NavigationRouteConfigMap = {
+    [ROUTE_INITIAL]: RootWrapper,
+    ...routes,
+  };
+  const stackConfig: NavigationRouteConfigMap = {
+    initialRouteName: ROUTE_INITIAL,
+  };
+
+  hoistNonReactStatics(RootWrapper, Root);
+
+  // FIXME:
+  // @ts-ignore: createAppContainer is not exported
+  return createAppContainer(createStackNavigator(routeConfig, stackConfig));
+};

src/playground/src/ui/component/index.ts

@@ -0,0 +1,9 @@
+import { StyledComponent } from '@rk-kit/theme';
+import { Sample, Props } from './sample.component';
+
+const StyledSample = StyledComponent<Sample, Props>(Sample);
+
+export {
+  StyledSample as Sample,
+  Props as SampleProps,
+};

src/framework/ui/sample/sample.component.tsx → src/playground/src/ui/component/sample.component.tsx

@@ -24,20 +24,14 @@ export class Sample extends React.Component<Props, {}> {
   render() {
     const { themedStyle } = this.props;
     return (
-      <View style={[styles.container, { backgroundColor: themedStyle.backgroundColor }]}>
+      <View style={{ backgroundColor: themedStyle.backgroundColor }}>
         <Text style={[styles.text, { color: themedStyle.textColor }]}>{this.props.text}</Text>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 16,
-  },
   text: {
     textAlign: 'center',
     fontSize: 16,

src/playground/src/ui/screen/home.component.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { NavigationScreenProps } from 'react-navigation';
+import {
+  FlatList,
+  Text,
+  TouchableOpacity,
+  ListRenderItemInfo,
+} from 'react-native';
+import {
+  withStyles,
+  ThemeType,
+  ThemedComponentProps,
+} from '@rk-kit/theme';
+import {
+  NavigatorProps,
+  RouteType,
+} from '../../navigation';
+
+type Props = NavigatorProps & ThemedComponentProps & NavigationScreenProps;
+
+class Home extends React.Component<Props> {
+
+  static navigationOptions = {
+    title: 'Home',
+  };
+
+  onItemPress = (route: RouteType) => {
+    this.props.navigation.navigate(route.name);
+  };
+
+  extractItemKey = (item: RouteType, index: number) => `${index}`;
+
+  renderItem = (info: ListRenderItemInfo<any>) => (
+    <TouchableOpacity
+      style={this.props.themedStyle.itemContainer}
+      key={info.index}
+      onPress={() => this.onItemPress(info.item)}>
+      <Text style={this.props.themedStyle.itemText}>{info.item.name}</Text>
+    </TouchableOpacity>
+  );
+
+  render() {
+    return (
+      <FlatList
+        keyExtractor={this.extractItemKey}
+        style={this.props.themedStyle.container}
+        data={this.props.routes}
+        renderItem={this.renderItem}
+      />
+    );
+  }
+}
+
+export const HomeScreen = withStyles(Home, (theme: ThemeType) => ({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+  },
+  itemContainer: {
+    paddingVertical: 8,
+  },
+  itemText: {
+    fontSize: 20,
+    fontWeight: '500',
+  },
+}));

src/playground/src/ui/screen/index.ts

@@ -0,0 +1,2 @@
+export { HomeScreen } from './home.component';
+export { SampleScreen } from './sample.component';

src/playground/src/ui/screen/sample.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+import { NavigationScreenProps } from 'react-navigation';
+import {
+  withStyles,
+  ThemeType,
+  ThemedComponentProps,
+} from '@rk-kit/theme';
+import { Sample as SampleComponent } from '../component';
+
+type Props = & ThemedComponentProps & NavigationScreenProps;
+
+class Sample extends React.Component<Props> {
+
+  static navigationOptions = {
+    title: 'Sample',
+  };
+
+  render() {
+    return (
+      <View style={this.props.themedStyle.container}>
+        <SampleComponent variant='dark success'/>
+      </View>
+    );
+  }
+}
+
+export const SampleScreen = withStyles(Sample, (theme: ThemeType) => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}));