@momo-kits/foundation 0.75.1-beta.3

package/Layout/Card.tsx

@@ -0,0 +1,87 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+
+import {CardProps, GridContextProps} from './types';
+import {GridContext} from './index';
+
+const Card: React.FC<CardProps> = ({
+  widthSpan = 12,
+  heightSpan,
+  usePadding,
+  children,
+  style,
+}) => {
+  const grid = useContext(GridContext);
+
+  /**
+   * render overlay view only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  const styles: any = style ?? {};
+
+  const numberOfColumns = 12;
+  const gutterSize = 8;
+  let margin = 0;
+  if (usePadding) {
+    margin = 12;
+  }
+  const widthSection = grid.getSizeSpan(widthSpan) - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+
+  return (
+    <View
+      accessibilityLabel={`Card`}
+      style={{
+        ...styles,
+        width: grid.getSizeSpan(widthSpan),
+        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+        paddingHorizontal: margin,
+        overflow: 'hidden',
+        margin: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        marginLeft: undefined,
+        marginRight: undefined,
+      }}>
+      <GridContext.Provider value={gridContext}>
+        {children}
+      </GridContext.Provider>
+      {__DEV__ && renderOverlay()}
+    </View>
+  );
+};
+
+Card.defaultProps = {
+  widthSpan: 12,
+  usePadding: false,
+};
+
+Card.displayName = 'Card';
+
+export default Card;

package/Layout/GridSystem.tsx

@@ -0,0 +1,124 @@
+import React, {useContext} from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Dimensions, StyleSheet, View} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import {Colors, Spacing} from '../Consts';
+import {GridContextProps} from './types';
+
+const GridSystem: React.FC = () => {
+  const {theme} = useContext(ApplicationContext);
+  const numberOfColumns = 12;
+  const gutterSize = 12;
+  const margin = 12;
+  const widthSection = Dimensions.get('window').width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+
+  const grid: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+  const insets = useSafeAreaInsets();
+
+  const list = [];
+  for (let i = 1; i <= grid.numberOfColumns; i++) {
+    list.push(i);
+  }
+
+  return (
+    <>
+      <View
+        pointerEvents="none"
+        style={[
+          styles.gridContainer,
+          insets,
+          {
+            borderColor: theme.colors.error.primary,
+            marginHorizontal: grid.margin,
+          },
+        ]}>
+        {list.map((i, index) => {
+          return (
+            <View style={{flexDirection: 'row'}} key={index.toString()}>
+              {index != -0 && <View style={{width: grid.gutterSize}} />}
+              <View
+                key={index.toString()}
+                pointerEvents="none"
+                style={[
+                  styles.gridColumn,
+                  {
+                    width: grid.sizePerSpan,
+                  },
+                ]}
+              />
+            </View>
+          );
+        })}
+      </View>
+      <View pointerEvents="none" style={styles.dangerLeftContainer} />
+      <View pointerEvents="none" style={styles.dangerRightContainer} />
+      <View
+        pointerEvents="none"
+        style={[styles.dangerTopContainer, {height: insets.top}]}
+      />
+      <View
+        pointerEvents="none"
+        style={[styles.dangerBottomContainer, {height: insets.bottom}]}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  gridContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    borderWidth: 1,
+  },
+  gridColumn: {
+    height: '100%',
+    opacity: 0.2,
+    backgroundColor: Colors.blue_07,
+  },
+  dangerTopContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: '100%',
+    top: 0,
+    position: 'absolute',
+  },
+  dangerBottomContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: '100%',
+    bottom: 0,
+    position: 'absolute',
+  },
+  dangerLeftContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: Spacing.M,
+    height: '100%',
+    left: 0,
+    position: 'absolute',
+  },
+  dangerRightContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: Spacing.M,
+    height: '100%',
+    right: 0,
+    position: 'absolute',
+  },
+});
+
+export default GridSystem;

package/Layout/ScreenContainer.tsx

@@ -0,0 +1,122 @@
+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/Layout/Section.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import {Dimensions, View} from 'react-native';
+import {validateChildren} from './utils';
+import Card from './Card';
+import {GridContextProps, SectionProps} from './types';
+import {GridContext} from './index';
+
+const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
+  const numberOfColumns = 12;
+  const gutterSize = 12;
+  let margin = 0;
+  if (useMargin) {
+    margin = 12;
+  }
+  let widthSection = Dimensions.get('window').width;
+  if (useMargin) widthSection = widthSection - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+
+  /**
+   * render overlay only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  /**
+   * build a row view in side session
+   * @param rows
+   * @param cursor
+   * @param endRow
+   */
+  const addRowView = (
+    rows: any[],
+    cursor: number = 0,
+    endRow: boolean = false,
+  ) => {
+    return (
+      <View
+        key={`Card${cursor}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : gridContext.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View key={`Card${cursor}${index}`} style={{flexDirection: 'row'}}>
+              {index != 0 && (
+                <View style={{width: gridContext.gutterSize}}></View>
+              )}
+              {i}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  /**
+   * render children content for session
+   * @param children
+   */
+  const renderView = (
+    children: any,
+  ): React.ReactElement | React.ReactElement[] => {
+    const element: React.ReactElement | React.ReactElement[] = [];
+    if (Array.isArray(children)) {
+      let cursor = 0;
+      let rows: any[] = [];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
+        const totalSpan = rows
+          .concat([item])
+          .map(i => i.props?.widthSpan)
+          .reduce((previousValue, currentValue) => {
+            return previousValue + currentValue;
+          });
+
+        if (totalSpan <= gridContext.numberOfColumns) {
+          rows.push(item);
+        } else {
+          cursor += 1;
+          element.push(addRowView(rows, cursor));
+          rows = [item];
+        }
+
+        if (i == children.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+    }
+    return element;
+  };
+
+  return (
+    <GridContext.Provider value={gridContext}>
+      <View
+        accessibilityLabel={`Section`}
+        style={{
+          width: gridContext.getSizeSpan(12),
+          marginHorizontal: gridContext.margin,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}>
+        {renderView(validateChildren(children, Card))}
+        {__DEV__ && renderOverlay()}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+Section.displayName = 'Section';
+
+Section.defaultProps = {
+  useMargin: true,
+};
+export default Section;

package/Layout/index.ts

@@ -0,0 +1,16 @@
+import Card from './Card';
+import Section from './Section';
+import GridSystem from './GridSystem';
+import {validateChildren} from './utils';
+import {createContext} from 'react';
+import {GridContextProps} from './types';
+
+const GridContext = createContext<GridContextProps>({
+  numberOfColumns: 12,
+  gutterSize: 12,
+  margin: 12,
+  sizePerSpan: 0,
+  getSizeSpan: span => 0,
+});
+
+export {GridContext, Card, Section, GridSystem, validateChildren};

package/Layout/types.ts

@@ -0,0 +1,21 @@
+import {ViewProps} from 'react-native';
+
+type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type GridContextProps = {
+  numberOfColumns: number;
+  gutterSize: number;
+  margin?: number;
+  sizePerSpan: number;
+  getSizeSpan: (span: number) => number;
+};
+export interface SectionProps extends ViewProps {
+  expanded?: boolean;
+  useMargin?: boolean;
+}
+
+export interface CardProps extends ViewProps {
+  widthSpan: SpanNumber;
+  heightSpan?: SpanNumber;
+  usePadding?: boolean;
+}

package/Layout/utils.ts

@@ -0,0 +1,50 @@
+import {Alert} from 'react-native';
+import React, {ReactElement} from 'react';
+
+/**
+ * validate children type
+ * @param children
+ * @param childrenType
+ */
+const validateChildren = (
+  children:
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+    | string
+    | number
+    | {}
+    | Iterable<React.ReactNode>
+    | React.ReactPortal
+    | null
+    | undefined
+    | boolean,
+  childrenType: React.FC<any>,
+) => {
+  if (!__DEV__) return children;
+  let results: React.ReactElement[] = [];
+  if (Array.isArray(children)) {
+    results = children?.filter((child: ReactElement) => {
+      if (child?.type === childrenType) {
+        return child;
+      } else {
+        Alert.alert(
+          'Component Kits',
+          `Wrong children type for this component, expected is ${childrenType.displayName}.`,
+        );
+      }
+    });
+  } else {
+    const singleChild: any = children;
+    if (singleChild?.type === childrenType) {
+      results = [singleChild];
+    } else {
+      Alert.alert(
+        'Component Kits',
+        `Wrong children type for this component, expected is ${childrenType.displayName}.`,
+      );
+    }
+  }
+
+  return results;
+};
+
+export {validateChildren};

package/Navigation/BottomTab.tsx

@@ -0,0 +1,39 @@
+import React, {FC} from 'react';
+import {BottomTabProps} from './types';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Icon} from '../Icon';
+
+const Tab = createBottomTabNavigator();
+
+const BottomTab: FC<BottomTabProps> = ({tabs}) => {
+  return (
+    <Tab.Navigator>
+      {tabs.map((item, index) => {
+        return (
+          <Tab.Screen
+            key={`${item.label}-${index}`}
+            name={item.label}
+            component={item.screen}
+            options={{
+              tabBarLabel: item.label,
+              tabBarBadge: item?.badgeLabel,
+              tabBarBadgeStyle: {
+                borderColor: 'white',
+                borderWidth: 2,
+                fontSize: 10,
+                lineHeight: 14,
+                fontWeight: 'bold',
+                alignSelf: 'center',
+              },
+              tabBarIcon: ({color, size}) => (
+                <Icon source={item.icon} color={color} size={size} />
+              ),
+            }}
+          />
+        );
+      })}
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTab;