@momo-kits/foundation 1.0.7 → 1.0.9

package/Consts/styles.ts

@@ -47,38 +47,6 @@ const Styles = StyleSheet.create({
     alignItems: 'flex-end',
     justifyContent: 'center',
   },
-  //padding
-  padding4: {
-    padding: 4,
-  },
-  padding8: {
-    padding: 8,
-  },
-  padding16: {
-    padding: 16,
-  },
-  padding24: {
-    padding: 24,
-  },
-  padding32: {
-    padding: 32,
-  },
-  //margin
-  margin4: {
-    margin: 4,
-  },
-  margin8: {
-    margin: 8,
-  },
-  margin16: {
-    margin: 16,
-  },
-  margin24: {
-    margin: 24,
-  },
-  margin32: {
-    margin: 32,
-  },
   //paddingHorizontal
   paddingHorizontal4: {
     paddingHorizontal: 4,
@@ -105,33 +73,6 @@ const Styles = StyleSheet.create({
   paddingVertical24: {
     paddingVertical: 24,
   },
-  //button
-  buttonContent: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    flexDirection: 'row',
-  },
-
-  headerRightButton: {
-    flexDirection: 'row',
-    overflow: 'hidden',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 4,
-  },
-  //text
-  textCenter: {textAlign: 'center'},
-  //card
-  card: {
-    shadowColor: 'gray',
-    shadowOffset: {
-      width: 1,
-      height: 1,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 4,
-  },
 });
 
 export {Styles};

package/Consts/theme.ts

@@ -60,14 +60,14 @@ const defaultTheme: Theme = {
 const defaultDarkTheme: Theme = {
   dark: true,
   colors: {
-    primary: '#ff79b0',
-    secondary: '#ffacdc',
+    primary: Colors.pink_04,
+    secondary: Colors.pink_08,
     background: {
       default: '#121212', // Dark background
       surface: '#1e1e1e', // Slightly lighter surface background
-      tonal: '#171717', // Tonal background
+      tonal: Colors.pink_10,
       pressed: '#1a1a1a', // Pressed state background
-      selected: '#1a1a1a', // Selected state background
+      selected: Colors.pink_11,
       disable: '#303030', // Disabled state background
     },
     text: {

package/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import IconSources from './icon.json';
+import IconSources from '../Assets/icon.json';
 import {IconProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Image} from '../Image';

package/Input/SearchInput.tsx

@@ -25,8 +25,9 @@ const SearchInput: FC<SearchInputProps> = ({
   onChangeText,
   icon,
   buttonText = 'Hủy',
-  showButtonText,
+  showButtonText = true,
   showIcon = true,
+  style,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -63,32 +64,25 @@ const SearchInput: FC<SearchInputProps> = ({
       iconTintColor = disabledColor;
     }
     return (
-      <View style={styles.searchInputView}>
-        <Icon
-          source={'navigation_search'}
-          size={24}
-          color={theme.colors.text.hint}
-        />
-        <TextInput
-          {...props}
-          editable={!disabled}
-          textAlignVertical="top"
-          ref={inputRef}
-          style={[
-            styles.searchInput,
-            {
-              color: textColor,
-            },
-          ]}
-          value={value}
-          onChangeText={_onChangeText}
-          onFocus={_onFocus}
-          onBlur={_onBlur}
-          placeholder={placeholder}
-          selectionColor={theme.colors.primary}
-          placeholderTextColor={placeholderColor}
-        />
-      </View>
+      <TextInput
+        {...props}
+        editable={!disabled}
+        textAlignVertical="top"
+        ref={inputRef}
+        style={[
+          styles.searchInput,
+          {
+            color: textColor,
+          },
+        ]}
+        value={value}
+        onChangeText={_onChangeText}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        placeholder={placeholder}
+        selectionColor={theme.colors.primary}
+        placeholderTextColor={placeholderColor}
+      />
     );
   };
 
@@ -108,7 +102,7 @@ const SearchInput: FC<SearchInputProps> = ({
           </TouchableOpacity>
         )}
         {showIcon && icon && (
-          <View>
+          <View style={{flexDirection: 'row'}}>
             <View
               style={[
                 styles.divider,
@@ -117,7 +111,6 @@ const SearchInput: FC<SearchInputProps> = ({
                 },
               ]}
             />
-
             <Image
               tintColor={iconTintColor}
               source={{uri: icon}}
@@ -129,13 +122,18 @@ const SearchInput: FC<SearchInputProps> = ({
     );
   };
   return (
-    <View style={styles.searchInputContainer}>
+    <View style={[style, styles.searchInputContainer]}>
       <View
         style={[
           getBorderColor(focused, errorMessage, disabled),
           styles.searchInputWrapper,
           {backgroundColor: theme.colors.background.surface},
         ]}>
+        <Icon
+          source={'navigation_search'}
+          size={24}
+          color={theme.colors.text.hint}
+        />
         {renderInputView()}
         {renderIconView()}
       </View>

package/Input/styles.ts

@@ -96,12 +96,11 @@ export default StyleSheet.create({
     flex: 1,
   },
   searchInput: {
-    width: '100%',
     height: 36,
     marginLeft: Spacing.S,
+    flex: 1,
   },
   searchInputView: {
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },

package/Navigation/Components.tsx

@@ -1,11 +1,18 @@
 import React, {useContext} from 'react';
-import {DeviceEventEmitter, StatusBar, StyleSheet, View} from 'react-native';
+import {
+  DeviceEventEmitter,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Colors, Styles} from '../Consts';
+import {Colors, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {HeaderBackgroundProps, TitleCustomProps} from './types';
 import {useGridSystem} from '../Layout';
 import {Text} from '../Text';
+import {Icon} from '../Icon';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -29,10 +36,47 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.black_01,
   },
+  headerRightButton: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.M,
+  },
+  toolkitContainer: {
+    marginLeft: Spacing.S,
+    padding: Spacing.XS,
+    height: 28,
+    borderWidth: 0.5,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  divider: {
+    width: 1,
+    height: 12,
+    marginHorizontal: 4,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
 });
 
-const HeaderLeft = (props: any) => {
-  const {navigator} = useContext(ApplicationContext);
+const HeaderTitle = (props: any) => {
+  return (
+    <Text
+      {...props}
+      typography="header_default"
+      weight="bold"
+      color={props.tintColor}
+    />
+  );
+};
+
+const HeaderLeft: React.FC<any> = ({tintColor}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
     if (canGoBack) {
@@ -43,21 +87,48 @@ const HeaderLeft = (props: any) => {
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
   };
-  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
+
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <View style={styles.headerLeft}>
+      <NavigationButton
+        icon="ic_back"
+        tintColor={tintColor}
+        backgroundColor={backgroundColor}
+        onPress={goBack}
+      />
+    </View>
+  );
 };
 
-const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  image,
+  backgroundColor,
+}) => {
   const {theme} = useContext(ApplicationContext);
+  let headerImage = theme.assets?.headerBackground;
+  if (image === null) {
+    headerImage = undefined;
+  }
   return (
     <View
       style={[
         Styles.flex,
-        {backgroundColor: theme.colors.background.surface, overflow: 'hidden'},
+        {
+          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          overflow: 'hidden',
+        },
       ]}>
       <StatusBar
-        barStyle={image || theme.dark ? 'light-content' : 'dark-content'}
+        barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
-      {image && <Image style={styles.headerBackground} source={{uri: image}} />}
+      {headerImage && (
+        <Image style={styles.headerBackground} source={{uri: headerImage}} />
+      )}
     </View>
   );
 };
@@ -120,7 +191,50 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
     validType(children);
     return React.cloneElement(children, {...restProps});
   };
-  return <View style={Styles.headerRightButton}>{renderAction()}</View>;
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-export {HeaderLeft, HeaderBackground, HeaderRightAction, HeaderCustom};
+const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+  const {theme} = useContext(ApplicationContext);
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <View style={styles.headerRightButton}>
+      <NavigationButton
+        icon="addFavorite"
+        tintColor={tintColor}
+        backgroundColor={backgroundColor}
+        onPress={() => {}}
+      />
+      <View
+        style={[
+          styles.toolkitContainer,
+          {backgroundColor: backgroundColor ?? '#00000066'},
+        ]}>
+        <TouchableOpacity>
+          <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+        </TouchableOpacity>
+        <View style={[styles.divider, {backgroundColor: tintColor}]} />
+        <TouchableOpacity>
+          <Icon
+            color={tintColor}
+            source="16_navigation_close_circle"
+            size={20}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export {
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+};

package/Navigation/ModalScreen.tsx

@@ -10,7 +10,7 @@ import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
 import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
 import Navigation from './Navigation';
-import {ModalParams} from './types';
+import {BottomSheetParams, ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {
   ApplicationContext,
@@ -19,15 +19,22 @@ import {
   NavigationContainer,
 } from './index';
 
-const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
+const ModalScreen: React.FC<any> = props => {
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = ({navigation, route}) => {
   const {theme} = useContext(ApplicationContext);
-  const {
-    isBottomSheet,
-    backgroundColor,
-    screen,
-    barrierDismissible,
-    options,
-  }: ModalParams = route.params;
+  const {screen, barrierDismissible}: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
     ...route.params,
@@ -35,61 +42,13 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   };
   delete params.screen;
 
-  /**
-   * onDismiss modal
-   */
   const onDismiss = (pop = true) => {
-    let action = navigation.pop;
-    if (!pop) {
-      action = () => {};
-    }
-    if (barrierDismissible && !isBottomSheet) {
+    if (barrierDismissible) {
       return;
     }
-    params?.onDismiss?.();
-    action();
+    navigation.pop();
   };
 
-  /**
-   * build bottom sheet
-   */
-  if (isBottomSheet) {
-    const bgColor = backgroundColor ?? theme.colors.background.surface;
-    const sheetTheme = {...theme, assets: undefined};
-    return (
-      <BottomSheet {...rest} onDismiss={onDismiss}>
-        <View style={[styles.sheetContainer, {backgroundColor: bgColor}]}>
-          <View style={styles.indicatorContainer}>
-            <View
-              style={[
-                styles.indicator,
-                {backgroundColor: theme.colors.text.disable},
-              ]}
-            />
-          </View>
-          <NavigationContainer
-            theme={sheetTheme}
-            screen={props => <Component {...props} {...params} />}
-            options={{
-              ...options,
-              hiddenBack: true,
-              headerTitleAlign: 'center',
-              headerRight: (props: any) => (
-                <HeaderRightAction>
-                  <NavigationButton
-                    icon="24_navigation_close"
-                    {...props}
-                    onPress={() => navigation.pop()}
-                  />
-                </HeaderRightAction>
-              ),
-            }}
-          />
-        </View>
-      </BottomSheet>
-    );
-  }
-
   return (
     <KeyboardAvoidingView
       style={Styles.flex}
@@ -121,7 +80,16 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   );
 };
 
-const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
+const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {screen, options}: BottomSheetParams = route.params;
+  const Component = useRef(screen).current;
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+  delete params.screen;
+
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
@@ -142,24 +110,57 @@ const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
     />
   );
 
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+  const sheetTheme = {...theme, assets: undefined};
+
   return (
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        onDismiss={() => onDismiss?.(mountedRef.current)}
+        onDismiss={navigation.pop}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View style={{paddingBottom: bottom}}>{children}</View>
+        <View style={{paddingBottom: bottom}}>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
+            <View style={styles.indicatorContainer}>
+              <View
+                style={[
+                  styles.indicator,
+                  {backgroundColor: theme.colors.text.disable},
+                ]}
+              />
+            </View>
+            <NavigationContainer
+              theme={sheetTheme}
+              screen={props => <Component {...props} {...params} />}
+              options={{
+                ...options,
+                ...{headerLeft: null},
+                headerTitleAlign: 'center',
+                headerRight: props => (
+                  <HeaderRightAction>
+                    <NavigationButton
+                      {...props}
+                      icon="24_navigation_close"
+                      backgroundColor="transparent"
+                      useBorder={false}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
+                    />
+                  </HeaderRightAction>
+                ),
+              }}
+            />
+          </View>
+        </View>
       </BottomSheetModal>
     </SafeAreaView>
   );
 };
 
-ModalScreen.defaultProps = {
-  barrierDismissible: false,
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {

package/Navigation/NavigationButton.tsx

@@ -8,20 +8,35 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
+  backgroundColor,
+  useBorder = true,
 }) => {
   const {theme} = useContext(ApplicationContext);
   return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Icon source={icon} color={tintColor ?? theme.colors.text.default} />
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? '#00000066',
+          borderWidth: useBorder ? 0.5 : 0,
+        },
+      ]}
+      onPress={onPress}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={20}
+      />
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    height: 36,
-    width: 36,
-    borderRadius: 18,
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/Navigation/Navigator.ts

@@ -1,5 +1,5 @@
 import {StackActions} from '@react-navigation/native';
-import {ModalParams, ScreenParams} from './types';
+import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 
 class Navigator {
   ref?: any;
@@ -28,7 +28,7 @@ class Navigator {
     this.ref.current.dispatch(StackActions.push('Modal', params));
   };
 
-  showBottomSheet = (params: ModalParams) => {
+  showBottomSheet = (params: BottomSheetParams) => {
     this.ref.current.dispatch(
       StackActions.push('Modal', {
         ...params,

package/Navigation/types.ts

@@ -85,18 +85,23 @@ export interface ModalParams extends ScreenParams {
   screen: React.ElementType;
   onDismiss?: (mounted?: boolean) => void;
   barrierDismissible?: boolean;
-  backgroundColor?: string;
+}
+
+export interface BottomSheetParams extends ScreenParams {
+  [key: string]: any;
+  onDismiss?: () => void;
 }
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
+  backgroundColor?: string;
+  useBorder?: boolean;
   onPress: () => void;
 };
 
 export type NavigationOptions = {
   surface?: boolean;
-  hiddenBack?: boolean;
   title?: string;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
@@ -104,7 +109,8 @@ export type NavigationOptions = {
 };
 
 export type HeaderBackgroundProps = {
-  image?: string;
+  image?: string | null;
+  backgroundColor?: string | null;
 };
 
 export type TitleCustomProps = {

package/Navigation/utils.tsx

@@ -3,21 +3,15 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {HeaderBackground, HeaderCustom, HeaderLeft} from './Components';
+import {
+  HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
+  HeaderTitle,
+  HeaderToolkitAction,
+} from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import {Text} from '../Text';
-
-const HeaderTitle = (props: any) => {
-  return (
-    <Text
-      {...props}
-      typography="header_default"
-      weight="bold"
-      color={props.tintColor}
-    />
-  );
-};
 
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
@@ -34,10 +28,9 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
     headerTitle: HeaderTitle,
-    headerBackground: () => (
-      <HeaderBackground image={theme.assets?.headerBackground} />
-    ),
+    headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     ...getTintColor(theme),
   };
 };
@@ -47,9 +40,8 @@ const getDialogOptions = (theme: Theme): StackNavigationOptions => {
     headerTitleAlign: 'center',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerBackground: () => (
-      <HeaderBackground image={theme.assets?.headerBackground} />
-    ),
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    headerBackground: HeaderBackground,
     ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
   };
@@ -81,23 +73,17 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backTheme: {};
   let surfaceTheme: {};
   let titleTheme: {};
 
-  if (params.hiddenBack == true) {
-    backTheme = {
-      headerLeft: null,
-    };
-  } else {
-    backTheme = {
-      headerLeft: (props: any) => <HeaderLeft {...props} />,
-    };
-  }
-
   if (params.surface == true) {
     surfaceTheme = {
-      headerBackground: () => <HeaderBackground />,
+      headerBackground: () => (
+        <HeaderBackground
+          image={null}
+          backgroundColor={theme.colors.background.surface}
+        />
+      ),
       ...getTintColor({
         ...theme,
         assets: {...theme.assets, headerBackground: undefined},
@@ -105,9 +91,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   } else {
     surfaceTheme = {
-      headerBackground: () => (
-        <HeaderBackground image={theme.assets?.headerBackground} />
-      ),
+      headerBackground: HeaderBackground,
       ...getTintColor(theme),
     };
   }
@@ -125,7 +109,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  return {...params, ...backTheme, ...surfaceTheme, ...titleTheme};
+  return {...params, ...surfaceTheme, ...titleTheme};
 };
 
 export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Popup/PopupNotify.tsx

@@ -148,7 +148,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         </View>
         {information && (
           <View style={styles.information}>
-            <Text typography={'description_xs'} numberOfLines={1}>
+            <Text
+              typography={'description_xs'}
+              color={theme.colors.text.hint}
+              numberOfLines={1}>
               {information}
             </Text>
           </View>

package/Text/index.tsx

@@ -18,6 +18,20 @@ const SFProText: TypographyWeight = {
   bold: 'Bold',
 };
 
+const AlegreyaSans: TypographyWeight = {
+  100: 'Thin',
+  200: 'Thin',
+  300: 'Thin',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Bold',
+  800: 'Black',
+  900: 'Black',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
 const FontStyle: {[key: string]: string} = {
   italic: 'Italic',
   normal: '',
@@ -43,14 +57,18 @@ const Text: React.FC<TextProps> = ({
     } = styles;
     const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
     const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
-    let fontFamily: string;
     const style = FontStyle[fontStyle ?? 'normal'];
+    let fontFamily: string;
 
     switch (theme.font) {
       case 'SFProText': {
         fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
         break;
       }
+      case 'AlegreyaSans': {
+        fontFamily = `${theme.font}-${AlegreyaSans[fontWeight]}${style}`;
+        break;
+      }
       default: {
         fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
       }

package/index.ts

@@ -1,11 +1,9 @@
 import {
+  SafeAreaProvider,
   SafeAreaView,
   useSafeAreaInsets,
-  SafeAreaProvider,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
-import Playground from './Playground';
-export {Playground};
 
 export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {

package/Playground/index.tsx

@@ -1,249 +0,0 @@
-import React, {FC, useContext, useEffect, useState} from 'react';
-import {FlatList, TouchableOpacity, View} from 'react-native';
-import {CheckBox, Input, Radio, Text} from '@momo-kits/foundation';
-import {PlaygroundProps, PropValue} from './types';
-import styles from './styles';
-import {Colors, Radius, Spacing} from '../Consts';
-import {ApplicationContext} from '../Navigation';
-import {ScreenSection, SectionItem} from '../Layout';
-import {Icon, IconSources} from '../Icon';
-import {string} from 'prop-types';
-
-const ChooseOptionScreen = (
-  data: string[] = [],
-  optionType: 'color' | 'icon' | 'text' = 'text',
-  onPress: (value: string) => void,
-) => {
-  const {theme} = useContext(ApplicationContext);
-
-  let mapData = data;
-  if (optionType === 'color') {
-    mapData = Object.values(Colors);
-  }
-  if (optionType === 'icon') {
-    mapData = Object.keys(IconSources);
-  }
-  const renderItemView = (item: string) => {
-    switch (optionType) {
-      case 'color': {
-        return (
-          <View
-            style={{
-              width: 36,
-              height: 36,
-              borderRadius: Radius.M,
-              backgroundColor: item,
-              marginRight: Spacing.S,
-            }}
-          />
-        );
-      }
-      case 'icon': {
-        return <Icon source={item} style={{marginRight: Spacing.S}} />;
-      }
-    }
-  };
-
-  const renderItem = ({item, index}) => {
-    const iconSource: {[key: string]: {uri: string}} = IconSources;
-    let key = item;
-    let chosenItem = item;
-    if (optionType === 'color') key = Object.keys(Colors)[index];
-    if (optionType === 'icon') chosenItem = iconSource[key].uri;
-    return (
-      <TouchableOpacity
-        key={`${item.toString()} ${index}`}
-        onPress={() => onPress(chosenItem)}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          marginBottom: Spacing.M,
-          borderBottomWidth: index !== mapData.length - 1 ? 1 : 0,
-          borderColor: theme.colors.border.default,
-          paddingBottom: Spacing.M,
-        }}>
-        {renderItemView(item)}
-        <Text typography={'description_default'}>{key}</Text>
-      </TouchableOpacity>
-    );
-  };
-  return (
-    <ScreenSection>
-      <SectionItem widthSpan={12}>
-        <FlatList
-          data={mapData}
-          renderItem={renderItem}
-          keyExtractor={(item, index) => `${item.toString()} ${index}`}
-          showsVerticalScrollIndicator={false}
-        />
-      </SectionItem>
-    </ScreenSection>
-  );
-};
-
-const Playground: FC<PlaygroundProps> = ({params}) => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const {props} = params;
-  const [compProps, setCompProps] = useState<{[key: string]: any}>({});
-  useEffect(() => {
-    initProps();
-    return () => {};
-  }, [props]);
-
-  const initProps = () => {
-    let newProps = {};
-    Object.keys(props).forEach(i => {
-      newProps = {...newProps, [i]: props[i].value};
-    });
-    setCompProps(newProps);
-  };
-
-  const onChangeOptions = (
-    value: string | boolean | undefined,
-    key: string,
-  ) => {
-    const newProps = {...compProps, [key]: value};
-    setCompProps(newProps);
-  };
-
-  const onCheckUndefined = (value: boolean, key: string) => {
-    let newValue = !value ? undefined : props?.[key]?.value;
-    const newProps = {...compProps, [key]: newValue};
-    setCompProps(newProps);
-  };
-
-  const showOptions = (prop: any, key: string) => {
-    navigator?.showBottomSheet({
-      options: {
-        title: 'Choose option',
-      },
-      screen: () =>
-        ChooseOptionScreen(prop.data, prop.optionType, optionValue => {
-          onChangeOptions(optionValue, key);
-          navigator?.pop();
-        }),
-    });
-  };
-
-  const generateView = (key: string, prop: PropValue) => {
-    let PlayGroundView = <View />;
-    switch (prop.type) {
-      case 'enum': {
-        PlayGroundView = (
-          <View style={styles.radioView}>
-            {prop?.options?.map(option => {
-              return (
-                <Radio
-                  label={option}
-                  value={option}
-                  onChange={() => onChangeOptions(option, key)}
-                  groupValue={compProps?.[key]}
-                  style={{marginBottom: Spacing.S}}
-                />
-              );
-            })}
-          </View>
-        );
-        break;
-      }
-      case 'string': {
-        PlayGroundView = (
-          <Input
-            size={'small'}
-            floatingValue={key}
-            value={compProps?.[key]}
-            onChangeText={text => onChangeOptions(text, key)}
-          />
-        );
-        break;
-      }
-      case 'bool': {
-        let label = compProps?.[key] === true ? 'True' : 'False';
-        if (compProps?.[key] === undefined) {
-          label = 'undefined';
-        }
-        PlayGroundView = (
-          <CheckBox
-            label={label}
-            value={compProps?.[key]}
-            onChange={value => onChangeOptions(value, key)}
-          />
-        );
-        break;
-      }
-      case 'options': {
-        PlayGroundView = (
-          <TouchableOpacity
-            style={{
-              width: '100%',
-              height: 48,
-              borderRadius: Radius.M,
-              borderColor: theme.colors.border.default,
-              borderWidth: 1,
-              justifyContent: 'center',
-              alignItems: 'center',
-              flexDirection: 'row',
-              backgroundColor: theme.colors.background.surface,
-            }}
-            onPress={() => showOptions(prop, key)}>
-            <Text typography={'description_default'}>{compProps?.[key]}</Text>
-            <View style={{position: 'absolute', right: Spacing.M}}>
-              <Icon source={'arrow_chevron_down_small'} size={24} />
-            </View>
-          </TouchableOpacity>
-        );
-      }
-    }
-
-    return (
-      <View
-        style={[
-          styles.propView,
-          {backgroundColor: theme.colors.background.surface},
-        ]}>
-        <Text style={styles.propTitle} typography={'header_default'}>
-          {key}
-        </Text>
-        {PlayGroundView}
-        {typeof compProps?.[key] !== 'boolean' && (
-          <CheckBox
-            style={{marginTop: Spacing.M}}
-            label={'Is undefined'}
-            value={!compProps?.[key]}
-            onChange={value => onCheckUndefined(!value, key)}
-          />
-        )}
-      </View>
-    );
-  };
-
-  const Component = params.component ?? <View />;
-  const propsKeys = Object.keys(props);
-
-  return (
-    <View>
-      <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
-        Component
-      </Text>
-      <View
-        style={[
-          styles.propView,
-          {
-            backgroundColor: theme.colors.background.surface,
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}>
-        <Component {...compProps} />
-      </View>
-      <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
-        Props
-      </Text>
-      {propsKeys.map(prop => {
-        return generateView(prop, props[prop]);
-      })}
-    </View>
-  );
-};
-
-export default Playground;

package/Playground/styles.ts

@@ -1,16 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '../Consts';
-
-export default StyleSheet.create({
-  radioView: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-  },
-  propView: {
-    borderRadius: Radius.M,
-    padding: Spacing.M,
-    marginBottom: Spacing.M,
-  },
-  propTitle: {marginBottom: Spacing.S, textTransform: 'capitalize'},
-});

package/Playground/types.ts

@@ -1,16 +0,0 @@
-import {ReactElement} from 'react';
-
-export type PropValue = {
-  value: any;
-  options?: string[];
-  type: 'string' | 'options' | 'enum' | 'bool';
-  description?: string;
-  data?: {[key: string]: string}[];
-  optionType?: 'icon' | 'color';
-};
-export type PlaygroundProps = {
-  params: {
-    component: ReactElement;
-    props: {[key: string]: PropValue};
-  };
-};