@momo-kits/foundation 0.74.2-react-native.1

package/Consts/styles.ts

@@ -0,0 +1,52 @@
+import {StyleSheet} from 'react-native';
+
+const Styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  flexCenter: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowSpace: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  columnSpace: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  columnSpaceRight: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+  },
+  columnCenter: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  columnCenterRight: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+});
+
+export {Styles};

package/Consts/theme.ts

@@ -0,0 +1,125 @@
+import {Context, Theme} from '../Application/types';
+import {Colors} from './colors+spacing+radius';
+
+const defaultTheme: Theme = {
+  dark: false,
+  colors: {
+    primary: Colors.pink_03,
+    secondary: Colors.pink_07,
+    background: {
+      default: '#f2f2f6',
+      surface: Colors.black_01,
+      tonal: Colors.pink_09,
+      pressed: '#dfdfe6',
+      selected: Colors.pink_10,
+      disable: '#ebebf2',
+    },
+    text: {
+      default: Colors.black_17,
+      secondary: Colors.black_15,
+      hint: Colors.black_12,
+      disable: Colors.black_08,
+    },
+    border: {
+      default: Colors.black_04,
+      disable: Colors.black_02,
+    },
+    success: {
+      primary: Colors.green_03,
+      secondary: Colors.green_07,
+      container: Colors.green_08,
+    },
+    warning: {
+      primary: Colors.orange_03,
+      secondary: Colors.orange_07,
+      container: Colors.orange_08,
+    },
+    error: {
+      primary: Colors.red_03,
+      secondary: Colors.red_07,
+      container: Colors.red_08,
+    },
+    highlight: {
+      primary: Colors.mint_03,
+      secondary: Colors.mint_07,
+      container: Colors.mint_08,
+    },
+    interactive: {
+      primary: Colors.blue_03,
+      secondary: Colors.blue_07,
+      container: Colors.blue_08,
+    },
+  },
+  font: 'SFProText',
+  assets: {
+    headerBackground:
+      'https://static.momocdn.net/app/img/app/img/header-background.png',
+  },
+};
+
+const defaultDarkTheme: Theme = {
+  dark: true,
+  colors: {
+    primary: Colors.pink_04,
+    secondary: Colors.pink_08,
+    background: {
+      default: '#121212', // Dark background
+      surface: '#1e1e1e', // Slightly lighter surface background
+      tonal: Colors.pink_10,
+      pressed: '#1a1a1a', // Pressed state background
+      selected: Colors.pink_11,
+      disable: '#303030', // Disabled state background
+    },
+    text: {
+      default: '#ffffff', // White text for better contrast
+      secondary: '#b0b0b0', // Light gray secondary text
+      hint: '#727272', // Hint text color
+      disable: '#505050', // Disabled text color
+    },
+    border: {
+      default: '#2a2a2a', // Darker borders
+      disable: '#242424', // Disabled state border color
+    },
+    success: {
+      primary: Colors.green_03,
+      secondary: Colors.green_07,
+      container: Colors.green_08,
+    },
+    warning: {
+      primary: Colors.orange_03,
+      secondary: Colors.orange_07,
+      container: Colors.orange_08,
+    },
+    error: {
+      primary: Colors.red_03,
+      secondary: Colors.red_07,
+      container: Colors.red_08,
+    },
+    highlight: {
+      primary: Colors.mint_03,
+      secondary: Colors.mint_07,
+      container: Colors.mint_08,
+    },
+    interactive: {
+      primary: Colors.blue_03,
+      secondary: Colors.blue_07,
+      container: Colors.blue_08,
+    },
+  },
+  font: 'SFProText',
+  assets: {
+    headerBackground:
+      'https://static.momocdn.net/app/img/app/img/header-background.png',
+  },
+};
+
+const defaultContext: Context = {
+  theme: defaultTheme,
+  navigator: undefined,
+  showGrid: false,
+  translate: (key: string) => {
+    return key;
+  },
+};
+
+export {defaultContext, defaultTheme, defaultDarkTheme};

package/Divider/index.tsx

@@ -0,0 +1,21 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
+
+const Divider = () => {
+  const {theme} = useContext(ApplicationContext);
+
+  return (
+    <View
+      style={{
+        height: 1,
+        width: '100%',
+        backgroundColor: theme.colors.border.default,
+        marginVertical: Spacing.XS,
+      }}
+    />
+  );
+};
+
+export {Divider};

package/Icon/index.tsx

@@ -0,0 +1,41 @@
+import React, {useContext} from 'react';
+import IconSources from '../Assets/icon.json';
+import IconBankSources from '../Assets/icon_bank.json';
+import {IconProps} from './types';
+import {ApplicationContext} from '../Application';
+import {Image} from '../Image';
+
+const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  /**
+   * get icon source maps or remote http
+   */
+  const getIconSource = (): any => {
+    if (source && !source.includes('http')) {
+      let icon: {[key: string]: {uri: string}} = IconSources;
+      return icon[source] ?? icon.ic_warning;
+    }
+    return {uri: source};
+  };
+
+  const tintColorProps = color !== null && {
+    tintColor: color ?? theme.colors.text.default
+  }
+
+  return (
+    <Image
+      loading={false}
+      source={getIconSource()}
+      style={[style, {width: size, height: size}]}
+      {...tintColorProps}
+    />
+  );
+};
+
+Icon.defaultProps = {
+  source: 'ic_back',
+  size: 24,
+};
+
+export {Icon, IconSources, IconBankSources};

package/Icon/types.ts

@@ -0,0 +1,27 @@
+import {ImageStyle} from 'react-native-fast-image';
+
+export type IconProps = {
+  /**
+   * Represents the identifier or the path for the icon image source.
+   * It is a required property.
+   */
+  source: string;
+
+  /**
+   * Optional. Represents the size of the icon.
+   * It can be used to set the width and height of the icon.
+   */
+  size?: number;
+
+  /**
+   *  Optional. Represents the color of the icon.
+   * It can be any valid color in @momo-kits/foundation.
+   */
+  color?: string | null;
+
+  /**
+   *  Optional. Used to apply custom styling to the Icon component.
+   * Accepts an object of style properties.
+   */
+  style?: ImageStyle;
+};

package/IconButton/index.tsx

@@ -0,0 +1,139 @@
+import React, {useContext} from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+import {ApplicationContext} from '../Application';
+import {Colors} from '../Consts';
+import {Icon} from '../Icon';
+import styles from './styles';
+
+export interface IconButtonProps extends TouchableOpacityProps {
+  /**
+   * Represents the name or key of the icon to be displayed on the IconButton.
+   * It is a required property.
+   */
+  icon: string;
+
+  /**
+   * Optional. Defines the visual style of the IconButton.
+   */
+  type?: 'primary' | 'tonal' | 'secondary' | 'danger' | 'outline' | 'disabled';
+
+  /**
+   * Optional. Defines the size of the IconButton.
+   */
+  size?: 'large' | 'small';
+}
+
+const IconButton: React.FC<IconButtonProps> = ({
+  type,
+  icon,
+  size,
+  onPress,
+  ...rest
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  /**
+   * get size icon button
+   */
+  const getSizeStyle = () => {
+    if (size === 'small') {
+      return styles.small;
+    }
+    return styles.large;
+  };
+
+  /**
+   * get style for icon button by type
+   */
+  const getTypeStyle = () => {
+    switch (type) {
+      case 'disabled':
+        return {
+          backgroundColor: theme.colors.background.disable,
+        };
+      case 'primary':
+        return {backgroundColor: theme.colors.primary};
+      case 'secondary':
+        return {
+          backgroundColor: theme.colors.background.surface,
+          borderWidth: 1,
+          borderColor: theme.colors.border.default,
+        };
+      case 'outline':
+        return {
+          backgroundColor: theme.colors.background.surface,
+          borderWidth: 1,
+          borderColor: theme.colors.primary,
+        };
+      case 'tonal':
+        return {
+          backgroundColor: theme.colors.background.tonal,
+        };
+      case 'danger':
+        return {
+          backgroundColor: theme.colors.error.primary,
+        };
+      default:
+        return {backgroundColor: theme.colors.primary};
+    }
+  };
+
+  /**
+   * get color for icon
+   */
+  const getIconColor = () => {
+    switch (type) {
+      case 'disabled':
+        return theme.colors.text.disable;
+      case 'primary':
+        return Colors.black_01;
+      case 'danger':
+        return Colors.black_01;
+      case 'tonal':
+        return theme.colors.primary;
+      case 'secondary':
+        return theme.colors.text.default;
+      case 'outline':
+        return theme.colors.primary;
+      default:
+        return Colors.black_01;
+    }
+  };
+
+  /**
+   * handle press
+   * @param e
+   */
+  const onPressButton = (e: GestureResponderEvent) => {
+    if (type === 'disabled') {
+      return () => {};
+    }
+    onPress?.(e);
+  };
+
+  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
+  const iconSize = size === 'small' ? 16 : 24;
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
+    </TouchableOpacity>
+  );
+};
+
+IconButton.defaultProps = {
+  type: 'primary',
+  disabled: false,
+};
+
+export {IconButton};

package/IconButton/styles.ts

@@ -0,0 +1,19 @@
+import {StyleSheet} from 'react-native';
+import {Radius} from '../Consts';
+
+export default StyleSheet.create({
+  large: {
+    width: 48,
+    height: 48,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  small: {
+    width: 40,
+    height: 40,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/Image/index.tsx

@@ -0,0 +1,83 @@
+import React, {useContext, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+
+import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Skeleton} from '../Skeleton';
+import {Icon} from '../Icon';
+import {Styles} from '../Consts';
+import {ImageProps} from './types';
+import FastImage from 'react-native-fast-image';
+
+type Status = 'success' | 'loading' | 'error';
+
+const Image: React.FC<ImageProps> = ({
+  style,
+  source,
+  loading,
+  children,
+  ...rest
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const error = useRef(false);
+  const [status, setStatus] = useState<Status>('success');
+
+  /**
+   * render content loading | fail | rendered
+   */
+  const renderContent = () => {
+    if (status === 'loading' || status === 'error') {
+      let content = <Skeleton />;
+      if (status === 'error') {
+        content = (
+          <Icon source="media_fail" color={theme.colors.text.disable} />
+        );
+      }
+      return (
+        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
+          {content}
+        </View>
+      );
+    }
+    return children;
+  };
+
+  return (
+    <FastImage
+      {...rest}
+      source={source}
+      style={[styles.container, style]}
+      onProgress={() => {
+        error.current = false;
+        if (status !== 'loading' && loading) {
+          setStatus('loading');
+        }
+      }}
+      onLoadStart={() => {
+        error.current = false;
+      }}
+      onLoad={() => {
+        error.current = false;
+      }}
+      onLoadEnd={() => {
+        let current: Status = 'success';
+        if (error.current) {
+          current = 'error';
+        }
+        if (status !== current) {
+          setStatus(current);
+        }
+      }}
+      onError={() => {
+        error.current = true;
+      }}>
+      {renderContent()}
+    </FastImage>
+  );
+};
+
+Image.defaultProps = {
+  loading: true,
+};
+
+export {Image};

package/Image/styles.ts

@@ -0,0 +1,5 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {},
+});

package/Image/types.ts

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