@core_super_app/ui 0.0.1

package/src/components/BaseView.tsx

@@ -0,0 +1,56 @@
+import {
+  ImageBackground,
+  KeyboardAvoidingView,
+  StyleSheet,
+  View,
+} from 'react-native';
+import LoadingOverlay from './LoadingOverlay';
+import Header from './Header';
+import type { HeaderProps } from './Header';
+import type { LoadingOverlayProps } from './LoadingOverlay';
+import type { ImageSourcePropType } from 'react-native';
+import type { ReactNode } from 'react';
+
+type BaseViewProps = {
+  background?: ImageSourcePropType;
+  children: ReactNode;
+} & HeaderProps &
+  LoadingOverlayProps;
+
+const BaseView = (props: BaseViewProps) => {
+  const { background, children } = props;
+
+  if (background) {
+    return (
+      <ImageBackground
+        style={styles.container}
+        source={background}
+        resizeMode="cover"
+      >
+        <LoadingOverlay {...props} />
+        <Header {...props} />
+        <KeyboardAvoidingView style={styles.container}>
+          {children}
+        </KeyboardAvoidingView>
+      </ImageBackground>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <LoadingOverlay {...props} />
+      <Header {...props} />
+      <KeyboardAvoidingView style={styles.container}>
+        {children}
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+export default BaseView;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/BasicButton.tsx

@@ -0,0 +1,70 @@
+import {
+  TouchableOpacity,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import TextWrapper, { type TextWrapperProps } from './TextWrapper';
+import type { ReactNode } from 'react';
+import type { StyleProp } from 'react-native'
+import { scaleFont } from '@core_super_app/utils/dimension';
+
+type Props = {
+  children?: ReactNode;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  colors?: string[];
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+} & TextWrapperProps;
+
+const BasicButton = ({
+  children,
+  onPress,
+  disabled = false,
+  colors = ['#A18CD1', '#7B5CFF', '#5A3DFF'],
+  style,
+  textStyle,
+}: Props) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.6}
+      onPress={onPress}
+      disabled={disabled}
+      style={[styles.container, style]}
+    >
+      <LinearGradient
+        colors={disabled ? ['#ccc', '#ccc'] : colors}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.gradient}
+      >
+        <TextWrapper style={[styles.text, textStyle]}>
+          {children}
+        </TextWrapper>
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+export default BasicButton;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  gradient: {
+    paddingVertical: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: scaleFont(16),
+  },
+});

package/src/components/Header.tsx

@@ -0,0 +1,171 @@
+import { useNavigation } from '@react-navigation/native';
+import { useEffect } from 'react';
+import {
+  BackHandler,
+  Image,
+  Keyboard,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { getStatusBarHeight } from '@core_super_app/utils/status-bar';
+import TextWrapper from './TextWrapper';
+import type { ColorValue, ImageSourcePropType, TextStyle } from 'react-native';
+import type { ReactNode } from 'react';
+import { Icon } from '../constants/image';
+import { scaleFont, scaleHeight, scaleWidth } from '@core_super_app/utils/dimension';
+
+export type HeaderProps = {
+  disabledBackHandler?: boolean;
+  leftIcon?: ImageSourcePropType;
+  back?: boolean;
+  onPressLeftIcon?: () => void;
+  title?: string;
+  rightView?: ReactNode;
+  isNotBackAfterPressLeft?: boolean;
+  subTitle?: string;
+  titleMaxLines?: number;
+  titleStyle?: TextStyle;
+  backColor?: ColorValue;
+};
+
+export const Header = (props: HeaderProps) => {
+  const {
+    disabledBackHandler,
+    leftIcon,
+    back,
+    onPressLeftIcon,
+    title,
+    rightView,
+    isNotBackAfterPressLeft,
+    subTitle,
+    titleMaxLines,
+    titleStyle,
+    backColor
+  } = props;
+
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    let subscription = null;
+    if (!disabledBackHandler) {
+      subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+        handleLeftIconPress();
+        return true;
+      });
+    }
+
+    return () => {
+      if (!disabledBackHandler && subscription) {
+        subscription.remove();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabledBackHandler]);
+
+  const handleLeftIconPress = () => {
+    Keyboard.dismiss();
+    if (onPressLeftIcon) {
+      onPressLeftIcon();
+    }
+    if (back) {
+      if (!isNotBackAfterPressLeft) {
+        navigation.goBack();
+      }
+    }
+  };
+
+  return (
+    <View
+      style={{
+        ...styles.headerView,
+        minHeight: subTitle ? scaleHeight(8.8) : scaleHeight(6.2),
+      }}
+    >
+      {back && (
+        <View style={styles.leftView}>
+          <TouchableOpacity
+            style={styles.leftView}
+            onPress={handleLeftIconPress}
+          >
+            <Image
+              source={leftIcon || Icon.back}
+              style={{...styles.icon}}
+              tintColor={backColor}
+            />
+          </TouchableOpacity>
+        </View>
+      )}
+      {title && (
+        <View style={styles.titleContainer}>
+          <TextWrapper
+            numberOfLines={titleMaxLines}
+            style={{ ...styles.title, ...titleStyle }}
+          >
+            {title}
+          </TextWrapper>
+          {subTitle && (
+            <TextWrapper
+              style={{ ...styles.subTitle }}
+            >
+              {subTitle}
+            </TextWrapper>
+          )}
+        </View>
+      )}
+      {rightView && (
+        <View style={styles.rightViewContainer}>
+          {rightView}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default Header
+
+const styles = StyleSheet.create({
+  headerView: {
+    flexDirection: 'row',
+    width: scaleWidth(100),
+    paddingHorizontal: scaleWidth(4),
+    marginTop: getStatusBarHeight(),
+    backgroundColor: 'transparent',
+    position: 'relative',
+    alignItems: 'center',
+  },
+  leftView: {
+    flexDirection: 'row',
+    flex: 0.24,
+    width: scaleWidth(12),
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  rightIconView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    width: scaleFont(24),
+    height: scaleFont(24),
+  },
+  titleContainer: {
+    position: 'absolute',
+    top: 0,
+    left: scaleWidth(22),
+    width: scaleWidth(56),
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rightViewContainer: { flexDirection: 'row', justifyContent: 'flex-end' },
+  subTitle: {
+    fontSize: scaleFont(11),
+    textAlign: 'center',
+    marginTop: scaleFont(3),
+  },
+  title: {
+    textAlign: 'center',
+    fontSize: scaleFont(16),
+  }
+});

package/src/components/LoadingOverlay.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, ActivityIndicator, View } from "react-native";
+
+export type LoadingOverlayProps = {
+  indicatorColor?: string;
+  isLoading?: boolean;
+}
+
+const LoadingOverlay = ({ indicatorColor, isLoading = false }: LoadingOverlayProps) => {
+  if (!isLoading) return null;
+
+  return (
+    <View style={styles.viewLoading}>
+      <ActivityIndicator size="large" color={indicatorColor || "#FFF"} />
+    </View>
+  );
+};
+
+export default LoadingOverlay
+
+const styles = StyleSheet.create({
+  viewLoading: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+  },
+});

package/src/components/TextWrapper.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet, Text } from 'react-native';
+import type { GestureResponderEvent, StyleProp, TextStyle } from 'react-native';
+import type { ReactNode } from 'react';
+
+export type TextWrapperProps = {
+  testID?: string;
+  accessibilityLabel?: string;
+  onPress?: (e: GestureResponderEvent) => void;
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  style?: StyleProp<TextStyle>;
+  children: ReactNode;
+};
+
+const TextWrapper = (props: TextWrapperProps) => {
+  const {
+    testID,
+    accessibilityLabel,
+    onPress,
+    numberOfLines,
+    ellipsizeMode,
+    style,
+    children,
+  } = props;
+
+  return (
+    <Text
+      accessible
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      allowFontScaling={false}
+      style={[styles.defaultStyle, style]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default TextWrapper;
+
+const styles = StyleSheet.create({
+  defaultStyle: {
+    color: '#212B36',
+    includeFontPadding: false,
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from "./BaseView";
+export * from "./Header";
+export * from "./LoadingOverlay";
+export * from "./TextWrapper";
+export * from "./input";
+export * from "./BasicButton";