Infra/expo app fixes (#1166)

* Load assets for demo app

* expo settings stuff

* Update UI for main screen

* use useCallback for renderItem and renderSectionHeader

* register ChipScreen so it will be accessible in expo demo app

* Update README

* remove .expo files from git

* Update .gitignore to exclude .expo files

* Use Incubator.TextField

* Update our expo demo icon with the new one

* Update expoDemo/.gitignore

Co-authored-by: Mendy Edri <[email protected]>

* code review fixes and search improvements

* refactor item onPress and use useCallback

Co-authored-by: Mendy Edri <[email protected]>

Author: ethanshar

demo/src/index.js

@@ -40,6 +40,9 @@ module.exports = {
       get CheckboxScreen() {
         return require('./screens/componentScreens/CheckboxScreen').default;
       },
+      get ChipScreen() {
+        return require('./screens/componentScreens/ChipScreen').default;
+      },
       get ConnectionStatusBarScreen() {
         return require('./screens/componentScreens/ConnectionStatusBarScreen').default;
       },
@@ -206,6 +209,10 @@ module.exports = {
       get ProgressBarScreen() {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
+      // Incubator 
+      get IncubatorTextFieldScreen() {
+        return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

expoDemo/.expo/README.md

@@ -54,3 +54,8 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
+
+# Expo
+.expo
+__generated__
+web-build

expoDemo/.expo/packager-info.json

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import {screens} from 'unicorn-demo-app';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
+import './src/assets';
 import MainScreen from './MainScreen';
 
 const Stack = createStackNavigator();

expoDemo/.expo/settings.json

@@ -1,59 +1,105 @@
-import React from 'react';
-import {ScrollView, TextInput} from 'react-native';
-import {Colors, View, Text, TouchableOpacity} from 'react-native-ui-lib';
+import React, {useCallback} from 'react';
+import {SectionList, StyleSheet} from 'react-native';
+import {Colors, View, Text, TouchableOpacity, Spacings, Image, Assets, Incubator} from 'react-native-ui-lib';
 import {menuStructure} from 'unicorn-demo-app';
 import _ from 'lodash';
+import fuzzysearch from 'fuzzysearch';
+
+const {TextField} = Incubator;
+
+const sections = _.map(menuStructure, (section, key) => {
+  return {
+    key,
+    data: section.screens
+  };
+});
 
 export default function MainScreen({navigation}) {
   const [searchText, setSearchText] = React.useState('');
 
+  const includedInSearch = (text = '') => {
+    return fuzzysearch(searchText.toLowerCase(), text.toLowerCase());
+  };
+
+  const onItemPress = useCallback(({customValue: screenId}) => {
+    // convert "unicorn.components.ActionBarScreen" -> "ActionBar"
+    navigation.navigate(screenId);
+  });
+
+  const renderSectionHeader = useCallback(({section}) => {
+    if (!_.find(section.data, screen => includedInSearch(screen.title))) {
+      return null;
+    }
+
+    return (
+      <View paddingV-s1 paddingH-s5 bg-primary>
+        <Text text90BO uppercase grey70>
+          {section.key}
+        </Text>
+      </View>
+    );
+  },
+  [searchText]);
+
+  const renderItem = useCallback(({item}) => {
+    if (!includedInSearch(item.title)) {
+      return null;
+    }
+
+    if (!item.title) {
+      return <View height={Spacings.s2} bg-grey70/>;
+    }
+
+    const screenId = _.chain(item.screen).split('.').last().replace('Screen', '').value();
+
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        key={item.title}
+        style={styles.sectionItem}
+        activeBackgroundColor={Colors.violet80}
+        customValue={screenId}
+        onPress={onItemPress}
+      >
+        <Text grey10 text70M>
+          {item.title}
+        </Text>
+      </TouchableOpacity>
+    );
+  },
+  [searchText]);
+
   return (
-    <View>
-      <TextInput
-        style={{padding: 10, marginBottom:0, fontSize: 18}}
-        placeholder= 'Search for your component...'
-        onChangeText={text => setSearchText(text)}
-        value={searchText}
+    <View flex bg-white>
+      <SectionList
+        ListHeaderComponent={
+          <TextField
+            migrate
+            placeholder="Search component name"
+            onChangeText={text => setSearchText(text)}
+            value={searchText}
+            preset={null}
+            text70
+            fieldStyle={styles.fieldStyle}
+            leadingAccessory={<Image source={Assets.icons.search} marginH-s2/>}
+          />
+        }
+        sections={sections}
+        renderSectionHeader={renderSectionHeader}
+        renderItem={renderItem}
       />
-      <ScrollView>
-        <View bg-white>
-          {_.map(menuStructure, section => {
-            return (
-              <View key={section.title}>
-                <Text text50 marginL-s5 marginV-s3>
-                  {section.title}
-                </Text>
-                {_.map(section.screens, screen => {
-                  return (
-                    <TouchableOpacity
-                      activeOpacity={1}
-                      bg-blue40
-                      paddingH-s5
-                      paddingV-s4
-                      key={screen.title}
-                      activeBackgroundColor={Colors.blue20}
-                      style={{borderBottomWidth: 1, borderColor: Colors.white}}
-                      onPress={() => {
-                        // convert "unicorn.components.ActionBarScreen" -> "ActionBar"
-                        const screenId = _.chain(screen.screen)
-                          .split('.')
-                          .last()
-                          .replace('Screen', '')
-                          .value();
-                        navigation.navigate(screenId);
-                      }}
-                    >
-                      <Text white text70M>
-                        {screen.title}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                }).filter(item => item.key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1)}
-              </View>
-            );
-          })}
-        </View>
-      </ScrollView>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  fieldStyle: {
+    paddingVertical: Spacings.s3
+  },
+  sectionItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.grey60,
+    paddingHorizontal: Spacings.s5,
+    paddingVertical: Spacings.s3
+  }
+});

expoDemo/.gitignore

@@ -5,7 +5,7 @@
     "name": "rnuilib",
     "slug": "rnuilib",
     "privacy": "public",
-    "icon": "https://user-images.githubusercontent.com/1780255/76164954-b97b3880-615b-11ea-85b9-209ac7932d89.png",
+    "icon": "https://user-images.githubusercontent.com/1780255/107911939-34e98a80-6f66-11eb-91a6-1eb1b384e429.png",
     "version": "1.0.0",
     "entryPoint": "index.js",
     "packagerOpts": {

expoDemo/App.js

@@ -16,6 +16,7 @@
     "@react-navigation/native": "^5.0.8",
     "@react-navigation/stack": "^5.1.0",
     "expo": "^40.0.0",
+    "fuzzysearch": "^1.0.3",
     "lodash": "^4.17.15",
     "react": "16.13.1",
     "react-dom": "16.13.1",

expoDemo/MainScreen.js

@@ -0,0 +1,6 @@
+import {Assets} from 'react-native-ui-lib';
+
+Assets.loadAssetsGroup('', {
+  chevronRight: require('./chevronRight.png'),
+  search: require('./search.png')
+});