@momo-kits/foundation 0.75.1-beta.8 → 0.76.1-beta.1

package/Layout/utils.ts

@@ -1,10 +1,10 @@
-import {Alert} from 'react-native';
-import React, {ReactElement} from 'react';
+import {Alert, Dimensions} from 'react-native';
+import React, {useEffect, useState} from 'react';
 
 /**
  * validate children type
  * @param children
- * @param childrenType
+ * @param childrenTypes
  */
 const validateChildren = (
   children:
@@ -17,34 +17,64 @@ const validateChildren = (
     | null
     | undefined
     | boolean,
-  childrenType: React.FC<any>,
+  childrenTypes: Array<React.FC<any>>,
 ) => {
   if (!__DEV__) return children;
+
   let results: React.ReactElement[] = [];
+  const validateType = (child: React.ReactElement) => {
+    return childrenTypes.some(childrenType => child?.type === childrenType);
+  };
+
+  const alertWrongType = () => {
+    Alert.alert(
+      'Component Kits',
+      `Wrong children type for this component, expected are ${childrenTypes
+        .map(type => type.displayName)
+        .join(', ')}.`,
+    );
+  };
+
   if (Array.isArray(children)) {
-    results = children?.filter((child: ReactElement) => {
-      if (child?.type === childrenType) {
+    const flattenChildren = children.flat();
+    results = flattenChildren.filter((child: React.ReactElement) => {
+      if (validateType(child)) {
         return child;
       } else {
-        Alert.alert(
-          'Component Kits',
-          `Wrong children type for this component, expected is ${childrenType.displayName}.`,
-        );
+        alertWrongType();
       }
     });
   } else {
     const singleChild: any = children;
-    if (singleChild?.type === childrenType) {
+    if (validateType(singleChild)) {
       results = [singleChild];
     } else {
-      Alert.alert(
-        'Component Kits',
-        `Wrong children type for this component, expected is ${childrenType.displayName}.`,
-      );
+      alertWrongType();
     }
   }
 
   return results;
 };
 
-export {validateChildren};
+const useGridSystem = () => {
+  const [numberOfColumns, setNumberOfColumns] = useState(
+    Dimensions.get('window').width > 600 ? 24 : 12,
+  );
+
+  useEffect(() => {
+    const subscription: any = Dimensions.addEventListener(
+      'change',
+      ({window}: any) => {
+        const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+        if (newColumns != numberOfColumns) {
+          setNumberOfColumns(newColumns);
+        }
+      },
+    );
+    return () => subscription?.remove();
+  }, []);
+
+  return {numberOfColumns};
+};
+
+export {validateChildren, useGridSystem};

package/Pagination/Dot.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext} from 'react';
 import {Animated} from 'react-native';
 import styles from './styles';
 import {DotProps} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const Dot: FC<DotProps> = ({active, style}) => {
   const {theme} = useContext(ApplicationContext);

package/Pagination/PaginationDot.tsx

@@ -4,7 +4,7 @@ import {ChildPaginationProps} from './types';
 import Dot from './Dot';
 import styles from './styles';
 import {Spacing} from '../Consts';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,

package/Pagination/PaginationNumber.tsx

@@ -3,14 +3,13 @@ import {View} from 'react-native';
 import {ChildPaginationProps} from './types';
 import styles from './styles';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   return (
     <View style={[styles.paginationNumberContainer]}>
       <Text color={Colors.black_01} typography={'label_default'}>{`${

package/Pagination/PaginationScroll.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext, useRef, useState} from 'react';
 import {Animated, View} from 'react-native';
 import {ScrollIndicatorProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -31,6 +31,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const renderScrollView = () => {
     return (
       <Animated.ScrollView
+        accessibilityLabel={'PaginationScroll'}
         ref={scrollViewRef}
         onScroll={Animated.event(
           [

package/Pagination/PaginationWhiteDot.tsx

@@ -4,7 +4,7 @@ import {ChildPaginationProps} from './types';
 import styles from './styles';
 import Dot from './Dot';
 import {Colors, Spacing} from '../Consts';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,

package/Popup/PopupNotify.tsx

@@ -4,7 +4,7 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
 

package/Popup/PopupPromotion.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';

package/Radio/index.tsx

@@ -4,7 +4,7 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 
 const Radio: FC<RadioProps> = ({

package/Switch/index.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const Switch: FC<SwitchProps> = props => {

package/Tag/index.tsx

@@ -60,7 +60,9 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+    <View
+      style={[style, sizeStyle, {backgroundColor: tagColor}]}
+      accessibilityLabel={`Tag/${label}`}>
       {!!icon && (
         <Icon
           style={styles.icon}

package/Text/index.tsx

@@ -2,8 +2,9 @@ import React, {useContext} from 'react';
 import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {GridContext} from '../Layout';
+import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -93,8 +94,8 @@ const Text: React.FC<TextProps> = ({
 
     return {
       fontFamily,
-      fontSize,
-      lineHeight,
+      fontSize: scaleSize(fontSize),
+      lineHeight: scaleSize(lineHeight),
       fontStyle,
     };
   };
@@ -120,4 +121,4 @@ Text.defaultProps = {
   typography: 'paragraph_default',
 };
 
-export {Text};
+export {Text, scaleSize};

package/Text/utils.ts

@@ -0,0 +1,14 @@
+import {Dimensions} from 'react-native';
+
+const deviceWidth = Dimensions.get('window').width;
+const DEFAULT_SCREEN_SIZE = 375;
+const scaleSize = (size: number) => {
+  const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
+
+  if (scaleRate > 1) {
+    return Math.min(Math.round(size * scaleRate), size + 5);
+  }
+
+  return size;
+};
+export {scaleSize};

package/index.ts

@@ -5,8 +5,15 @@ import {
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
 
+/**
+ * native export
+ */
 export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
 
+/**
+ * foundation component
+ */
+
 export * from './Consts';
 export * from './Layout';
 export * from './Layout/types';
@@ -15,8 +22,8 @@ export * from './Popup/types';
 export * from './Text';
 export * from './Text/types';
 export * from './Button';
-export * from './Navigation';
-export * from './Navigation/types';
+export * from './Application';
+export * from './Application/types';
 export * from './Icon';
 export * from './Icon/types';
 export * from './IconButton';

package/package.json

@@ -1,41 +1,41 @@
 {
-  "name": "@momo-kits/foundation",
-  "version": "0.75.1-beta.8",
-  "description": "React Native Component Kits",
-  "main": "index.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "@momo-kits/foundation"
-  ],
-  "dependencies": {
-    "react-native-safe-area-context": "3.1.4",
-    "react-native-linear-gradient": "2.5.6",
-    "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
-    "@react-navigation/core": "5.16.1",
-    "@react-navigation/native": "5.9.8",
-    "@react-navigation/routers": "5.7.4",
-    "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main",
-    "@gorhom/bottom-sheet": "2.4.1"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@types/jest": "26.0.23",
-    "@types/react-native": "0.64.4",
-    "@types/react-test-renderer": "16.9.2",
-    "babel-jest": "^26.6.3",
-    "eslint": "^7.14.0",
-    "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.64.0",
-    "react-test-renderer": "17.0.1",
-    "typescript": "^4.0.3"
-  },
-  "author": "@momo-kits/foundation",
-  "license": "ISC"
-}
+    "name": "@momo-kits/foundation",
+    "version": "0.76.1-beta.1",
+    "description": "React Native Component Kits",
+    "main": "index.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [
+        "@momo-kits/foundation"
+    ],
+    "dependencies": {
+        "react-native-safe-area-context": "3.1.4",
+        "react-native-linear-gradient": "2.5.6",
+        "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
+        "@react-navigation/core": "5.16.1",
+        "@react-navigation/native": "5.9.8",
+        "@react-navigation/routers": "5.7.4",
+        "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main",
+        "@gorhom/bottom-sheet": "2.4.1"
+    },
+    "peerDependencies": {
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.12.9",
+        "@babel/runtime": "^7.12.5",
+        "@react-native-community/eslint-config": "^2.0.0",
+        "@types/jest": "26.0.23",
+        "@types/react-native": "0.64.4",
+        "@types/react-test-renderer": "16.9.2",
+        "babel-jest": "^26.6.3",
+        "eslint": "^7.14.0",
+        "jest": "^26.6.3",
+        "metro-react-native-babel-preset": "^0.64.0",
+        "react-test-renderer": "17.0.1",
+        "typescript": "^4.0.3"
+    },
+    "author": "@momo-kits/foundation",
+    "license": "ISC"
+}

package/publish.sh

@@ -12,15 +12,12 @@ echo VERSION: $VERSION
 
 rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
 
-#babel component to dist
-#babel ./dist -d dist --copy-files
-
 cd dist
-npm publish --tag beta --access=public
+npm publish --tag latest --access=public
 
 #clear dist and package json
 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/core"}'
+#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"}'

package/Layout/ScreenContainer.tsx

@@ -1,122 +0,0 @@
-import {Animated, KeyboardAvoidingView, Platform, View} from 'react-native';
-import {useHeaderHeight} from '@react-navigation/stack';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {useContext} from 'react';
-import {ScreenContainerProps} from '../Navigation/types';
-import {Spacing, Styles} from '../Consts';
-import {Section, validateChildren} from './index';
-
-import {ApplicationContext} from '../Navigation';
-
-const ScreenContainer: React.FC<ScreenContainerProps> = ({
-  children,
-  enableKeyboardAvoidingView,
-  scrollable,
-  scrollY,
-  headerBackground,
-  scrollViewProps,
-  footerComponent: Footer,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const insets = useSafeAreaInsets();
-  let marginHeader = 0;
-  let handleScroll;
-  let imageAnimatedStyle = {};
-  let Component: any = View;
-  if (scrollable) {
-    Component = Animated.ScrollView;
-  }
-  if (scrollY) {
-    marginHeader = useHeaderHeight();
-    imageAnimatedStyle = {
-      transform: [
-        {
-          scale: scrollY.interpolate?.({
-            inputRange: [-300, 0, 1],
-            outputRange: [1.75, 1, 1],
-            extrapolate: 'clamp',
-          }),
-        },
-      ],
-    };
-    handleScroll = Animated.event(
-      [{nativeEvent: {contentOffset: {y: scrollY}}}],
-      {useNativeDriver: true},
-    );
-  }
-
-  /**
-   * build content for screen
-   */
-  const renderContent = () => {
-    const results = validateChildren(children, Section);
-    if (Array.isArray(results)) {
-      return results.map((item, index) => {
-        return (
-          <View
-            key={`Section${index}`}
-            style={{
-              marginTop: item.props?.useMargin ? Spacing.M : 0,
-              flex: item.props?.expanded ? 1 : undefined,
-            }}>
-            {item}
-          </View>
-        );
-      });
-    }
-    return results;
-  };
-
-  return (
-    <View style={Styles.flex} accessibilityLabel={`ScreenContainer`}>
-      <View
-        style={{
-          position: 'absolute',
-          height: 300,
-          width: '100%',
-        }}>
-        {!!headerBackground && (
-          <Animated.Image
-            source={{
-              uri: headerBackground,
-            }}
-            style={{
-              aspectRatio: 1.3,
-              ...imageAnimatedStyle,
-            }}
-          />
-        )}
-      </View>
-      <KeyboardAvoidingView
-        style={Styles.flex}
-        enabled={enableKeyboardAvoidingView}
-        behavior={Platform.select({
-          ios: 'padding',
-          android: undefined,
-        })}>
-        <Component
-          {...scrollViewProps}
-          onScroll={handleScroll}
-          style={[Styles.flex, {marginTop: marginHeader}]}>
-          {renderContent()}
-        </Component>
-        {Footer && (
-          <View
-            style={{
-              paddingTop: Spacing.S,
-              paddingBottom: insets.bottom,
-              backgroundColor: theme.colors.background.surface,
-            }}>
-            <Section>{Footer}</Section>
-          </View>
-        )}
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-ScreenContainer.defaultProps = {
-  enableKeyboardAvoidingView: false,
-  scrollable: false,
-};
-export default ScreenContainer;

package/Navigation/Observer.ts

@@ -1,79 +0,0 @@
-class Subject {
-  private observers: any[];
-  constructor() {
-    this.observers = [];
-  }
-
-  attach(observer: any) {
-    observer && this.observers.push(observer);
-  }
-
-  detach(observer: any) {
-    this.observers = this.observers.filter(item => item !== observer);
-  }
-
-  notify(newState: any) {
-    this.observers.forEach(observer => {
-      if (typeof observer === 'function') {
-        observer(newState);
-      } else {
-        observer.updateData && observer.updateData(newState);
-      }
-    });
-  }
-}
-
-class ObserverInstance {
-  private readonly props: any;
-  constructor(props: any) {
-    this.props = props;
-  }
-
-  remove() {
-    const {detach, observer} = this.props;
-    detach && detach(observer);
-  }
-}
-
-export default class Observer {
-  static SCHEMA = 'Observer';
-
-  static instances: any = {};
-  private schema: any;
-  private subject: Subject;
-  private data: null;
-  private loaded: boolean;
-
-  constructor(props: any) {
-    this.schema = props.schema;
-    this.subject = new Subject();
-    this.data = null;
-    this.loaded = false;
-    this.initilize();
-  }
-
-  static getInstance(schema: string, Class = Observer) {
-    schema = schema || Class.SCHEMA;
-    let instance = Observer.instances[schema];
-    if (!instance) {
-      instance = new Class({schema});
-      Observer.instances[schema] = instance;
-    }
-    return instance;
-  }
-
-  initilize = () => {};
-
-  notify = (state: any) => {
-    this.subject.notify(state);
-  };
-
-  attach = (observer: any) => {
-    this.subject.attach(observer);
-    return new ObserverInstance({observer, detach: this.detach});
-  };
-
-  detach = (observer: any) => {
-    this.subject.detach(observer);
-  };
-}