@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/foundations/FoundationList/types.ts

@@ -0,0 +1,7 @@
+import { FlashListProps, FlashListRef } from '@shopify/flash-list';
+
+interface FoundationListProps extends FlashListProps<any> {}
+
+interface FoundationListRef extends FlashListRef<any> {}
+
+export type { FoundationListRef, FoundationListProps };

package/src/foundations/Icon/index.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import IconSources from '../Assets/icon.json';
+import IconBankSources from '../Assets/icon_bank.json';
+import { IconProps } from './types';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import { Image } from '../Image';
+import { StyleSheet } from 'react-native';
+import { Colors } from '../Consts';
+
+const Icon: React.FC<IconProps> = ({
+  source = 'ic_back',
+  size = 24,
+  color,
+  style = {},
+  ...props
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  /**
+   * 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
+      {...props}
+      loading={false}
+      source={getIconSource()}
+      style={[
+        style,
+        { width: size, height: size },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+      resizeMode="contain"
+      {...tintColorProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});
+
+export { Icon, IconSources, IconBankSources };

package/src/foundations/Icon/types.ts

@@ -0,0 +1,32 @@
+import { ImageStyle } from 'react-native-fast-image';
+import { StyleProp } from 'react-native';
+
+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.
+   */
+  color?: string | null;
+
+  /**
+   *  Optional. Used to apply custom styling to the Icon component.
+   * Accepts an object of style properties.
+   */
+  style?: StyleProp<ImageStyle>;
+
+  /**
+   * Optional. Represents the accessibility label for the icon.
+   */
+  accessibilityLabel?: string;
+};

package/src/foundations/IconButton/index.tsx

@@ -0,0 +1,144 @@
+import React, { useContext } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
+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';
+
+  /**
+   * Optional. Params auto tracking component.
+   */
+  params?: any;
+}
+
+const IconButton: React.FC<IconButtonProps> = ({
+  type = 'primary',
+  icon,
+  size,
+  params,
+  ...rest
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  /**
+   * 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;
+    }
+  };
+
+  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
+  const iconSize = size === 'small' ? 16 : 24;
+
+  return (
+    <ComponentContext.Provider
+      value={{
+        componentName: 'IconButton',
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        action: 'click',
+      }}
+    >
+      <TouchableOpacity
+        {...rest}
+        disabled={type === 'disabled'}
+        activeOpacity={activeOpacity}
+        style={[buttonStyle, showBaseLineDebug && styles.debugBaseLine]}
+      >
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ComponentContext.Provider>
+  );
+};
+
+export { IconButton };

package/src/foundations/IconButton/styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { Radius, Colors } 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',
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});

package/src/foundations/Image/index.tsx

@@ -0,0 +1,115 @@
+import React, { useContext, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import styles from './styles';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+  SkeletonContext,
+} from '../Context';
+import { Skeleton } from '../Skeleton';
+import { Icon } from '../Icon';
+import { Styles } from '../Consts';
+import { ImageProps } from './types';
+
+type Status = 'success' | 'loading' | 'error';
+
+export const getImageName = (source: any): string => {
+  const parts = source?.uri?.split?.('/');
+  if (parts?.length > 0) {
+    return parts?.[parts.length - 1];
+  }
+  return '';
+};
+
+const Image: React.FC<ImageProps> = ({
+  style,
+  source,
+  loading = true,
+  children,
+  ...rest
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const component: any = useContext(ComponentContext);
+  const context = useContext<any>(MiniAppContext);
+  const skeleton = useContext(SkeletonContext);
+  const error = useRef(false);
+  const [status, setStatus] = useState<Status>('success');
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  let accessibilityLabel: any = `img|${getImageName(source)}`;
+  if (component?.componentId) {
+    accessibilityLabel = `${component?.componentId}|img|${getImageName(
+      source,
+    )}`;
+  }
+  /**
+   * 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>
+      );
+    }
+
+    if (skeleton.loading) {
+      return (
+        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
+          <Skeleton />
+        </View>
+      );
+    }
+
+    return children;
+  };
+
+  return (
+    <FastImage
+      {...rest}
+      {...{ accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel }}
+      source={source}
+      style={[
+        styles.container,
+        style,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+      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';
+        }
+        setStatus(prevState => (prevState !== current ? current : prevState));
+      }}
+      onError={() => {
+        error.current = true;
+      }}
+    >
+      {renderContent()}
+    </FastImage>
+  );
+};
+
+export { Image };

package/src/foundations/Image/styles.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../Consts';
+
+export default StyleSheet.create({
+  container: {},
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});

package/src/foundations/Image/types.ts

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

package/src/foundations/Input/Input.tsx

@@ -0,0 +1,280 @@
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useComponentId } from '../Application';
+import { Icon } from '../Icon';
+import { exportFontFamily, useScaleSize } from '../Text';
+import { Spacing } from '../Consts';
+import {
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+  RenderTrailing,
+} from './common';
+import { InputProps } from './index';
+import styles from './styles';
+import SystemTextInput from './SystemTextInput';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
+
+/**
+ * Input default component
+ */
+const Input = forwardRef(
+  (
+    {
+      value,
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size = 'small',
+      placeholder,
+      onBlur,
+      onFocus,
+      errorMessage,
+      trailing,
+      trailingColor,
+      onPressTrailing,
+      disabled = false,
+      floatingIconColor,
+      required = false,
+      errorSpacing,
+      loading = false,
+      leadingIcon,
+      leadingIconColor,
+      fontWeight,
+      secureTextEntry,
+      keyboardType,
+      style,
+      params,
+      hintText,
+      editable = true,
+      onPressFloatingIcon,
+      onPressLeadingIcon,
+      showClearIcon = true,
+      defaultValue,
+      ...props
+    }: InputProps,
+    ref,
+  ) => {
+    const { theme } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
+    const scaledFontSize = useScaleSize(14);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+    const [focused, setFocused] = useState(false);
+    const haveValue = !!value || !!defaultValue;
+    const inputRef = useRef<TextInput | null>(null);
+    const componentName = 'Input';
+
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+    const { componentId } = useComponentId(
+      `${componentName}/${placeholder}`,
+      props.accessibilityLabel,
+    );
+
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      inputRef.current?.setNativeProps({ text: '' });
+      _onChangeText('');
+    };
+
+    const _onChangeText = (text: string) => {
+      onChangeText?.(text);
+    };
+
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const _setText = (text: string) => {
+      inputRef?.current?.setNativeProps({ text });
+      _onChangeText(text);
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: _setText,
+      };
+    });
+
+    /**
+     * Render input view
+     */
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      const secure = secureTextEntry;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = trailingColor;
+
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
+
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            { backgroundColor: theme.colors.background.surface },
+            getSizeStyle(size, undefined, scaleHeight),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}
+        >
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
+            componentId={componentId}
+          />
+          <View style={styles.inputView}>
+            {!!leadingIcon && (
+              <View style={styles.leadingIconContainer}>
+                <TouchableOpacity
+                  onPress={onPressLeadingIcon}
+                  accessibilityLabel={`${componentId}|leading-icon-touch`}
+                >
+                  <Icon
+                    color={leadingIconColor}
+                    source={leadingIcon}
+                    size={size === 'small' ? 24 : 32}
+                    accessibilityLabel={`${componentId}|leading-icon`}
+                  />
+                </TouchableOpacity>
+              </View>
+            )}
+            <SystemTextInput
+              {...props}
+              accessibilityLabel={`${componentId}`}
+              editable={editable && !disabled}
+              secureTextEntry={secure}
+              textAlignVertical="center"
+              ref={inputRef}
+              accessibilityState={{
+                disabled,
+                ...props.accessibilityState,
+              }}
+              style={[
+                {
+                  flex: 1,
+                  paddingLeft: Spacing.M,
+                  fontSize: scaledFontSize,
+                  height: '100%',
+                },
+                {
+                  color: textColor,
+                  fontFamily: exportFontFamily(fontWeight ?? 'regular'),
+                },
+                secure && haveValue && { fontSize: size === 'small' ? 18 : 22 },
+              ]}
+              defaultValue={defaultValue}
+              allowFontScaling={false}
+              textBreakStrategy="highQuality"
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+              keyboardType={keyboardType}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {showClearIcon && focused && haveValue && (
+              <TouchableOpacity
+                accessibilityLabel={`${componentId}|clear-icon-touch`}
+                accessible={false}
+                style={styles.iconWrapper}
+                onPress={onClearText}
+              >
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                  accessibilityLabel={`${componentId}|clear-icon`}
+                />
+              </TouchableOpacity>
+            )}
+            <RenderTrailing
+              color={iconTintColor}
+              icon={trailing}
+              onPressIcon={onPressTrailing}
+              loading={loading}
+              componentId={componentId}
+            />
+          </View>
+        </View>
+      );
+    };
+
+    let inputState = 'active';
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
+    return (
+      <ComponentContext.Provider
+        value={{
+          componentName,
+          componentId,
+          params,
+          state: inputState,
+        }}
+      >
+        <View
+          style={[
+            style,
+            styles.wrapper,
+            showBaseLineDebug && styles.debugBaseLine,
+          ]}
+        >
+          {renderInputView()}
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+            componentId={componentId}
+          />
+        </View>
+      </ComponentContext.Provider>
+    );
+  },
+);
+
+export default Input;