@momo-kits/foundation 1.0.0

package/Icon/index.tsx

@@ -0,0 +1,30 @@
+import React, {useContext} from 'react';
+import {IconProps, Image, NavigationContext} from '../index';
+import SourceSets from './icon.json';
+
+const Icon: React.FC<IconProps> = ({name, source, size, color}) => {
+  const {theme} = useContext(NavigationContext);
+
+  const getIconSource = (): any => {
+    if (name) {
+      let icon: {[key: string]: object} = SourceSets;
+      return icon[name] ?? icon.ic_warning;
+    }
+    return source;
+  };
+
+  return (
+    <Image
+      source={getIconSource()}
+      style={{width: size, height: size}}
+      tintColor={color ?? theme.colors.text}
+    />
+  );
+};
+
+Icon.defaultProps = {
+  name: 'ic_back',
+  size: 24,
+};
+
+export {Icon};

package/Icon/types.ts

@@ -0,0 +1,8 @@
+import {Source} from 'react-native-fast-image';
+
+export type IconProps = {
+  name?: string;
+  source?: Source | number | undefined;
+  size?: number;
+  color?: string;
+};

package/IconButton/index.tsx

@@ -0,0 +1,127 @@
+import React, {useContext} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {NavigationContext, Colors, Icon, IconButtonProps} from '../index';
+
+const IconButton: React.FC<IconButtonProps> = ({
+  style,
+  type,
+  icon,
+  size,
+  shape,
+  ...rest
+}) => {
+  const {theme} = useContext(NavigationContext);
+
+  /**
+   * export size style
+   */
+  const getSizeStyle = () => {
+    switch (size) {
+      case 'large':
+        return styles.large;
+      case 'small':
+        return styles.small;
+
+      default:
+        return styles.small;
+    }
+  };
+
+  /**
+   * export size style
+   */
+  const getIconSize = () => {
+    switch (size) {
+      case 'large':
+        return 24;
+      case 'small':
+        return 16;
+
+      default:
+        return 16;
+    }
+  };
+
+  /**
+   * export type style
+   */
+  const getTypeStyle = () => {
+    switch (type) {
+      case 'primary':
+        return {backgroundColor: theme.colors.primary};
+      case 'tonal':
+        return {backgroundColor: theme.colors.primary + '33'};
+      case 'secondary':
+        return {borderColor: theme.colors.border, borderWidth: 1};
+      case 'outline':
+        return {
+          borderWidth: 1,
+          borderColor: theme.colors.primary,
+        };
+      case 'disabled':
+        return {backgroundColor: theme.colors.border};
+      default:
+        return {backgroundColor: theme.colors.primary};
+    }
+  };
+
+  const getIconColor = () => {
+    switch (type) {
+      case 'primary':
+        return Colors.black_01;
+      case 'tonal':
+        return theme.colors.primary;
+      case 'secondary':
+        return theme.colors.text;
+      case 'outline':
+        return theme.colors.primary;
+      case 'disabled':
+        return theme.colors.text + '4D';
+      default:
+        return Colors.black_01;
+    }
+  };
+
+  const buttonStyle = StyleSheet.flatten([
+    getSizeStyle(),
+    getTypeStyle(),
+    shape === 'rectangle' && {borderRadius: 8},
+    style,
+  ]);
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      disabled={type === 'disabled'}
+      style={buttonStyle}>
+      <Icon name={icon} size={getIconSize()} color={getIconColor()} />
+    </TouchableOpacity>
+  );
+};
+
+IconButton.defaultProps = {
+  icon: 'close',
+  type: 'primary',
+  size: 'small',
+  shape: 'circle',
+  children: <View />,
+};
+
+const styles = StyleSheet.create({
+  large: {
+    height: 48,
+    width: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  small: {
+    height: 36,
+    width: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export {IconButton};

package/IconButton/types.ts

@@ -0,0 +1,17 @@
+import {TouchableOpacityProps} from 'react-native';
+
+export type IconButtonType =
+  | 'primary'
+  | 'tonal'
+  | 'secondary'
+  | 'outline'
+  | 'disabled';
+export type IconButtonSize = 'large' | 'small';
+export type IconButtonShape = 'circle' | 'rectangle';
+
+export interface IconButtonProps extends TouchableOpacityProps {
+  icon: string;
+  type?: IconButtonType;
+  size?: IconButtonSize;
+  shape?: IconButtonShape;
+}

package/Image/index.tsx

@@ -0,0 +1,67 @@
+import React, {useContext, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import FastImage from 'react-native-fast-image';
+import {
+  ContentLoader,
+  Icon,
+  ImageProps,
+  NavigationContext,
+  Styles,
+  Text,
+} from '../index';
+import styles from './styles';
+
+const Image: React.FC<ImageProps> = props => {
+  const {theme} = useContext(NavigationContext);
+  const {style, placeholder, error, source} = props;
+  const [loading, setLoading] = useState(typeof source === 'object');
+  const [fail, setFail] = useState(false);
+
+  /**
+   * render content
+   * @returns {JSX.Element}
+   */
+  const renderContent = () => {
+    if (loading || fail) {
+      let content = placeholder ?? (
+        <ContentLoader style={[StyleSheet.absoluteFill, styles.image]} />
+      );
+      if (fail) {
+        content = error ?? (
+          <View
+            style={[Styles.flexCenter, {backgroundColor: theme.colors.border}]}>
+            <Icon name="error-outline" />
+            <Text typography="subtitle" style={Styles.textCenter}>
+              Can't load image
+            </Text>
+          </View>
+        );
+      }
+      return (
+        <View style={[StyleSheet.absoluteFill, styles.image]}>{content}</View>
+      );
+    }
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <FastImage
+        {...props}
+        style={styles.image}
+        onLoad={() => {
+          setFail(false);
+          setLoading(true);
+        }}
+        onLoadEnd={() => setLoading(false)}
+        onError={() => setFail(true)}
+      />
+      {renderContent()}
+    </View>
+  );
+};
+
+Image.defaultProps = {
+  style: {},
+};
+
+export {Image};

package/Image/styles.ts

@@ -0,0 +1,13 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/Image/types.ts

@@ -0,0 +1,6 @@
+import {FastImageProps} from 'react-native-fast-image';
+
+export interface ImageProps extends FastImageProps {
+  placeholder?: boolean;
+  error?: boolean;
+}

package/Layout/Row.tsx

@@ -0,0 +1,42 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import styles from './styles';
+import {MMSectionContext} from './Section';
+import {DEFAULT_SCREEN_PADDING, screenWidth} from './utils';
+
+const MMRow: React.FC<any> = props => {
+  const haveMargin = useContext(MMSectionContext);
+  const rowWidth = haveMargin
+    ? screenWidth - DEFAULT_SCREEN_PADDING * 4
+    : screenWidth - DEFAULT_SCREEN_PADDING * 2;
+
+  const {children} = props;
+  let totalGap = 0;
+  return (
+    <View
+      style={[
+        styles.row,
+        {
+          width: rowWidth,
+        },
+      ]}>
+      {React.Children.map(children, (child, index) => {
+        let isEndLine = false;
+        totalGap += child.props.span;
+        if (totalGap >= 12) {
+          totalGap = 0;
+          isEndLine = true;
+        }
+        if (totalGap + children[index + 1]?.props?.span > 12) {
+          totalGap = 0;
+        }
+        return React.cloneElement(child, {
+          isEndLine: isEndLine,
+          isRowChild: true,
+        });
+      })}
+    </View>
+  );
+};
+
+export default MMRow;

package/Layout/Screen.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {ScrollView, View} from 'react-native';
+import styles from './styles';
+import {MMScreenProps} from './types';
+import {MMSection} from './index';
+import {
+  DEFAULT_GUTTER,
+  DEFAULT_SCREEN_PADDING,
+  screenWidth,
+  validateChildren,
+} from './utils';
+
+const MMScreen = (props: MMScreenProps) => {
+  const {children, scrollable} = props;
+
+  const parentWidth = screenWidth - DEFAULT_SCREEN_PADDING * 2;
+
+  const colWidth = (parentWidth - DEFAULT_GUTTER * 11) / 12;
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          flexDirection: 'row',
+          marginHorizontal: 12,
+        }}>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i, ii) => {
+          return (
+            <View
+              pointerEvents="none"
+              style={{
+                width: colWidth,
+                height: '100%',
+                opacity: 0.2,
+                backgroundColor: '#bae7ff',
+                marginRight: ii !== 12 ? DEFAULT_GUTTER : 0,
+              }}
+            />
+          );
+        })}
+      </View>
+    );
+  };
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        style={[styles.screen, {width: screenWidth}]}>
+        {validateChildren(children, MMSection)}
+        {renderOverlay()}
+      </ScrollView>
+    );
+  }
+  return (
+    <View style={[styles.screen, {width: screenWidth}]}>
+      {validateChildren(children, MMSection)}
+      {renderOverlay()}
+    </View>
+  );
+};
+
+export default MMScreen;

package/Layout/Section.tsx

@@ -0,0 +1,30 @@
+import React, {createContext} from 'react';
+import {View} from 'react-native';
+import styles from './styles';
+import {MMSectionProps} from './types';
+import {MMRow} from './index';
+import {DEFAULT_SCREEN_PADDING, screenWidth, validateChildren} from './utils';
+
+export const MMSectionContext = createContext({});
+
+const MMSection: React.FC<MMSectionProps> = props => {
+  const {haveMargin = false, children} = props;
+  return (
+    <MMSectionContext.Provider value={haveMargin}>
+      <View
+        style={[
+          styles.section,
+          {
+            width: haveMargin
+              ? screenWidth - DEFAULT_SCREEN_PADDING * 2
+              : screenWidth,
+            marginHorizontal: haveMargin ? DEFAULT_SCREEN_PADDING : 0,
+          },
+        ]}>
+        {validateChildren(children, MMRow)}
+      </View>
+    </MMSectionContext.Provider>
+  );
+};
+
+export default MMSection;

package/Layout/View.tsx

@@ -0,0 +1,84 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {MMViewProps} from './types';
+import styles from './styles';
+import {MMSectionContext} from './Section';
+import {screenWidth} from './utils';
+import {Colors, Shadow} from '@momo-kits/core';
+
+const MMView: React.FC<MMViewProps> = props => {
+  const {
+    span = 12,
+    children,
+    isEndLine,
+    alignItems,
+    justifyContent,
+    padding,
+    backgroundColor,
+    borderRadius,
+    direction,
+    shadow = 'none',
+    isRowChild = false,
+  } = props;
+  const NUM_OF_SPAN = 12;
+  const DEFAULT_SCREEN_PADDING = 12;
+  const GUTTER = 12;
+  const haveMargin = useContext(MMSectionContext);
+  const shadowStyle =
+    shadow !== 'none' ? (shadow === 'light' ? Shadow.Light : Shadow.Dark) : {};
+
+  const parentWidth = haveMargin
+    ? screenWidth - DEFAULT_SCREEN_PADDING * 4
+    : screenWidth - DEFAULT_SCREEN_PADDING * 2;
+
+  const paddingStyle = {
+    paddingTop: padding?.[0] || 0,
+    paddingRight: padding?.[1] || 0,
+    paddingBottom: padding?.[2] || 0,
+    paddingLeft: padding?.[3] || 0,
+  };
+  const colWidth =
+    (span * (parentWidth - GUTTER * (NUM_OF_SPAN - 1))) / NUM_OF_SPAN +
+    GUTTER * (span - 1);
+
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: Colors.pink_08,
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={[
+        styles.col,
+        {
+          width: colWidth,
+          marginRight: isEndLine ? 0 : GUTTER,
+          marginBottom: isRowChild ? GUTTER : 0,
+          alignItems,
+          backgroundColor,
+          borderRadius,
+          justifyContent,
+          flexDirection: direction,
+        },
+        paddingStyle,
+        shadowStyle,
+      ]}>
+      {children}
+      {renderOverlay()}
+    </View>
+  );
+};
+
+export default MMView;

package/Layout/index.ts

@@ -0,0 +1,6 @@
+import MMRow from './Row';
+import MMView from './View';
+import MMScreen from './Screen';
+import MMSection from './Section';
+
+export {MMRow, MMView, MMScreen, MMSection};

package/Layout/styles.ts

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import {Colors} from '@momo-kits/core';
+
+const styles = StyleSheet.create({
+  col: {
+    minHeight: 1,
+  },
+  row: {
+    minHeight: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  section: {
+    paddingHorizontal: 12,
+    marginBottom: 12,
+  },
+  screen: {
+    flex: 1,
+    backgroundColor: Colors.black_01,
+    paddingVertical: 12,
+  },
+});
+
+export default styles;

package/Layout/types.ts

@@ -0,0 +1,39 @@
+import {ReactElement} from 'react';
+
+type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type ViewAlignItems = 'flex-start' | 'flex-end' | 'center';
+
+type ViewJustifyContent =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
+type ViewDirection = 'row' | 'column';
+
+type ViewShadow = 'none' | 'light' | 'dark';
+export interface MMScreenProps {
+  children: ReactElement;
+  scrollable: boolean;
+}
+
+export interface MMSectionProps {
+  haveMargin?: boolean;
+  children: ReactElement;
+}
+
+export interface MMViewProps {
+  span: SpanNumber;
+  children: ReactElement;
+  isEndLine?: boolean;
+  isRowChild?: boolean;
+  alignItems?: ViewAlignItems;
+  justifyContent: ViewJustifyContent;
+  padding: Array<number>;
+  backgroundColor: string;
+  borderRadius: number;
+  direction: ViewDirection;
+  shadow: ViewShadow;
+}

package/Layout/utils.ts

@@ -0,0 +1,37 @@
+import {Dimensions} from 'react-native';
+import {FC, JSXElementConstructor, ReactElement, ReactNode} from 'react';
+import {MMSectionProps} from './types';
+
+export const screenWidth = Dimensions.get('window').width;
+
+export const DEFAULT_SCREEN_PADDING = 12;
+
+export const DEFAULT_GUTTER = 12;
+export const validateChildren = (
+  children: ReactElement<any, string | JSXElementConstructor<any>> & ReactNode,
+  childrenType:
+    | string
+    | FC<MMSectionProps>
+    | JSXElementConstructor<any>
+    | FC<any>,
+) => {
+  if (Array.isArray(children)) {
+    return children?.map((child: ReactElement) => {
+      if (child?.type === childrenType) {
+        return child;
+      }
+      console.error(
+        'Wrong children type for this container, please check document.',
+      );
+      return null;
+    });
+  } else {
+    if (children?.type === childrenType) {
+      return children;
+    }
+    console.error(
+      'Wrong children type for this container, please check document.',
+    );
+    return null;
+  }
+};

package/Navigation/Components.tsx

@@ -0,0 +1,55 @@
+import React, {useContext} from 'react';
+import {StatusBar, StyleSheet, View} from 'react-native';
+import {Image, NavigationButton, NavigationContext, Styles} from '../index';
+
+const styles = StyleSheet.create({
+  headerBackground: {
+    width: '100%',
+    height: undefined,
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+});
+
+const HeaderBackground: React.FC<any> = () => {
+  const {theme} = useContext(NavigationContext);
+  const source: any = theme.assets?.headerBackground;
+  return (
+    <View
+      style={[
+        Styles.flex,
+        {backgroundColor: theme.colors.background, overflow: 'hidden'},
+      ]}>
+      <StatusBar barStyle="light-content" />
+      <Image style={styles.headerBackground} source={source} />
+    </View>
+  );
+};
+
+const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
+  const validType = (item: any) => {
+    if (item.type !== NavigationButton) {
+      console.error(
+        'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
+      );
+    }
+  };
+  const renderAction = () => {
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        validType(child);
+        return (
+          <React.Fragment key={index}>
+            {React.cloneElement(child, {...restProps})}
+          </React.Fragment>
+        );
+      });
+    }
+
+    validType(children);
+    return React.cloneElement(children, {...restProps});
+  };
+  return <View style={Styles.headerRightButton}>{renderAction()}</View>;
+};
+
+export {HeaderBackground, HeaderRightAction};