@momo-kits/foundation 0.92.8-rc.5 → 0.92.9-beta.0

package/Application/BottomSheet.tsx

@@ -29,7 +29,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     snapPoint = 'content',
     draggable = true,
     dragOnContent = false,
-    useBottomInset = true,
   }: BottomSheetParams = props.route.params;
   const [modalVisible, setModalVisible] = useState(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
@@ -59,8 +58,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     }),
   ).current;
-  const [estimate, setEstimate] = useState(0.9);
-  const timeoutMount = useRef<any>();
+  const estimate = useRef(0.9);
 
   let backgroundColor = theme.colors.background.default;
   if (surface) {
@@ -71,32 +69,27 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    * handle open & emit dismiss event
    */
   useEffect(() => {
-    clearTimeout(timeoutMount.current);
-    timeoutMount.current = setTimeout(() => {
+    setTimeout(() => {
       const mapSnapPoint: any = {
         '30%': 0.3,
         '50%': 0.5,
         '70%': 0.7,
         '90%': 0.9,
       };
-      const point = mapSnapPoint[snapPoint] ?? estimate;
+      const point = mapSnapPoint[snapPoint] ?? estimate.current;
       setModalVisible(true);
       Animated.timing(animatedHeight, {
         useNativeDriver: false,
         toValue: heightDevice * point,
-        duration: 150,
+        duration: 300,
       }).start();
-    }, 50);
-  }, [estimate]);
+    }, 100);
 
-  /**
-   * emit dismiss event
-   */
-  useEffect(() => {
     return () => {
       props.route.params?.onDismiss?.();
     };
   }, []);
+
   /**
    * handler dismiss
    */
@@ -170,9 +163,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </View>
             )}
             <Screen {...props} {...props.route.params} />
-            {useBottomInset && (
-              <View style={{height: Math.min(insets.bottom, 21)}} />
-            )}
+            <View style={{height: Math.min(insets.bottom, 21)}} />
           </Animated.View>
         </KeyboardAvoidingView>
       </Modal>
@@ -180,15 +171,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <View
           style={styles.estimate}
           onLayout={e => {
-            const current = (e.nativeEvent.layout.height + 72) / heightDevice;
-            if (current != estimate) {
-              setEstimate(current);
-            }
+            estimate.current =
+              (e.nativeEvent.layout.height + 68) / heightDevice;
           }}>
           <Screen {...props} {...props.route.params} />
-          {useBottomInset && (
-            <View style={{height: Math.min(insets.bottom, 21)}} />
-          )}
+          <View style={{height: Math.min(insets.bottom, 21)}} />
         </View>
       )}
     </>

package/Application/BottomTab/BottomTabBar.tsx

@@ -26,6 +26,7 @@ type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
   floatingButton?: FloatingButtonProps;
+  accessibilityLabel?: string;
 };
 
 const getPaddingBottom = (insets: EdgeInsets) => {
@@ -64,7 +65,7 @@ export default function BottomTabBar({
    */
   const renderTabItem = useCallback(
     (data: any[]) => {
-      return data?.map((route, _) => {
+      return data?.map((route, index) => {
         const focused = route.params.name === focusedTab;
         const {options} = descriptors[route?.key] as any;
         const onPress = () => {
@@ -89,7 +90,19 @@ export default function BottomTabBar({
           });
         };
 
-        const label = options.tabBarLabel || options.title || route.name;
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : route.name;
+
+        const accessibilityLabel =
+          options.tabBarAccessibilityLabel !== undefined
+            ? options.tabBarAccessibilityLabel
+            : typeof label === 'string'
+            ? `${label}, tab, ${index + 1} of ${routes.length}`
+            : undefined;
 
         return (
           <NavigationContext.Provider
@@ -102,7 +115,7 @@ export default function BottomTabBar({
                 horizontal={false}
                 onPress={onPress}
                 onLongPress={onLongPress}
-                accessibilityLabel={`tab_item_${route.name}`}
+                accessibilityLabel={accessibilityLabel}
                 to={buildLink(route.name, route.params)}
                 testID={options.tabBarTestID}
                 allowFontScaling={allowFontScaling}
@@ -219,7 +232,7 @@ export default function BottomTabBar({
         style,
       ]}
       pointerEvents={'auto'}>
-      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
+      <View style={styles.content}>
         {useFloating && floatingButton?.container}
         <Animated.View
           style={{

package/Application/BottomTab/index.tsx

@@ -22,18 +22,13 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
   if (route.params?.options) {
     options = getOptions(route.params?.options, theme);
   }
-
   if (route.params?.nested) {
     return (
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{
-            screen: route.params?.screen,
-            options,
-            initialParams: route.params?.initialParams,
-          }}
+          initialParams={{screen: route.params?.screen, options}}
           options={{...getStackOptions()}}
         />
       </Stack.Navigator>
@@ -45,11 +40,7 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{
-            screen: route.params?.screen,
-            options,
-            initialParams: route.params?.initialParams,
-          }}
+          initialParams={{screen: route.params?.screen, options}}
           options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>
@@ -81,7 +72,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar {...props} floatingButton={floatingButton} />
+        <BottomTabBar
+          {...props}
+          accessibilityLabel={'BottomTabBar'}
+          floatingButton={floatingButton}
+        />
       )}
       tabBarOptions={{
         style: {

package/Application/StackScreen.tsx

@@ -50,7 +50,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    Alert.alert(screenName);
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    }
 
     navigator?.maxApi?.of?.({screenName});
 

package/Application/types.ts

@@ -102,14 +102,14 @@ export type ScreenParams = {
 
 export type ModalParams = {
   [key: string]: any;
-  screen: React.ComponentType;
+  screen: Screen;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 };
 
 export type BottomSheetParams = {
   [key: string]: any;
-  screen: React.ComponentType;
+  screen: Screen;
   options: {
     title: string;
     surface?: boolean;
@@ -120,7 +120,6 @@ export type BottomSheetParams = {
   barrierDismissible?: boolean;
   draggable?: boolean;
   dragOnContent?: boolean;
-  useBottomInset?: boolean;
 };
 
 export type NavigationButtonProps = {
@@ -198,7 +197,6 @@ export type BottomTabItemProps = {
   badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
-  initialParams?: any;
 };
 
 export type BottomTabProps = {

package/Input/InputDropDown.tsx

@@ -4,7 +4,7 @@ import {ApplicationContext, ComponentContext} from '../Application';
 import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {ErrorView, FloatingView, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import styles from './styles';
 
@@ -61,7 +61,7 @@ const InputDropDown = ({
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size),
-          getBorderColor(theme, false, errorMessage, disabled),
+          // getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}

package/Layout/Card.tsx

@@ -144,7 +144,6 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
-        onLayout={undefined}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,

package/Layout/Screen.tsx

@@ -296,8 +296,7 @@ const Screen = forwardRef(
                 style={{
                   marginTop: space,
                   flex: item.props?.expanded ? 1 : undefined,
-                }}
-                onLayout={item.props?.onLayout}>
+                }}>
                 {item}
               </View>
             );
@@ -315,8 +314,7 @@ const Screen = forwardRef(
             style={{
               marginTop: space,
               flex: item?.props?.expanded ? 1 : undefined,
-            }}
-            onLayout={item?.props?.onLayout}>
+            }}>
             {children}
           </View>
         );

package/Layout/Section.tsx

@@ -151,7 +151,6 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
-        onLayout={undefined}
         style={[
           style,
           styles.protectedStyle,

package/Loader/index.tsx

@@ -1,6 +1,4 @@
 import Loader from './Loader';
 import ProgressBar from './ProgressBar';
-import {LoaderProps, ProgressBarProps} from './types';
 
 export {Loader, ProgressBar};
-export type {LoaderProps, ProgressBarProps};

package/Popup/PopupNotify.tsx

@@ -188,7 +188,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      accessibilityLabel={'popup_notify'}
+      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -79,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View accessibilityLabel={'popup_promotion'}>
+    <View accessibilityLabel={'PopupPromotion'}>
       <Image
         source={{
           uri: image,

package/Popup/types.ts

@@ -18,7 +18,7 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description?: string | React.ReactNode;
+  description: string | React.ReactNode;
 
   /**
    * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.8-rc.5",
+    "version": "0.92.9-beta.0",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/publish.sh

@@ -1,23 +1,23 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag latest --access=public
 
-#clear dist and package json
+PACKAGE_NAME=$(npm pkg get name)
+if [ "$1" == "beta" ]; then  # Publish beta
+  npm version $(npm view "$PACKAGE_NAME@beta" version)
+  npm version prepatch --preid=beta
+  npm publish --tag beta --access=public
+else                         # Publish latest
+  npm version $(npm view $PACKAGE_NAME version)
+  npm version patch
+  npm publish --tag latest --access=public
+fi
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/core new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/foundation"}'