@jescon-technologies/react-native-ui-kit 0.0.7 → 0.0.9

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ErrorBoundary } from './src/Common/ErrorBoundary';
+export { default as AAlertIOS } from './Alerts/AAlertIOS';
+export { default as AAlert } from './Alerts/AAlert';

package/index.js

@@ -0,0 +1,3 @@
+export { default as ErrorBoundary } from './src/Common/ErrorBoundary';
+export { default as AAlertIOS } from './Alerts/AAlertIOS';
+export { default as AAlert } from './Alerts/AAlert';

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@jescon-technologies/react-native-ui-kit",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A React Native module for Jescon Technologies that provides react-native-ui-kit",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
-    "build": "tsc",
-    "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -24,17 +22,7 @@
     "url": "https://github.com/dpraful/react-native-ui-kit/issues"
   },
   "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-native": "^0.72.8",
-    "typescript": "^5.0.0"
-  },
-  "peerDependencies": {
     "react": "^18.0.0",
     "react-native": "^0.69.0"
-  },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ]
-}
+  }
+}

package/src/Alerts/AAlert.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Dimensions,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+} from 'react-native';
+
+import { Global } from '../../../../../src/Common/Global';
+import Icons from '../Common/Icons';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+/**
+ * Types
+ */
+type AlertData = {
+  datavalue: number;
+  displaytext?: string;
+  bgcolor?: string;
+  duration?: number;
+};
+
+type Props = {
+  data: AlertData;
+  close: (value: boolean) => void;
+};
+
+const AAlert: React.FC<Props> = (props) => {
+  const [overlay, setOverlay] = useState<boolean>(true);
+
+  const [data] = useState<AlertData & {
+    bgcolor: string;
+    durartion: number;
+  }>({
+    ...props.data,
+    bgcolor: getBgColor(props.data.datavalue),
+    durartion: getDurarion(props.data.datavalue),
+  });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      props.close(false);
+      setOverlay(false);
+    }, data.durartion);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  function getBgColor(key: number): string {
+    switch (key) {
+      case 1:
+        return '#0ca004';
+      case 2:
+        return '#f44e4e';
+      case 3:
+        return '#bfbf18';
+      case 4:
+        return '#d88304';
+      default:
+        return Global.AppTheme?.primary_color ?? '#000';
+    }
+  }
+
+  function getTransparentColor(key: number): string {
+    switch (key) {
+      case 1:
+        return 'rgba(0, 90, 0, 0.2)';
+      case 2:
+        return 'rgba(90, 0, 0, 0.2)';
+      case 3:
+        return 'rgba(249, 242, 172, 0.2)';
+      case 4:
+        return 'rgba(249, 212, 167, 0.2)';
+      default:
+        return 'rgba(0, 0, 0, 0.2)';
+    }
+  }
+
+  function getDurarion(key: number): number {
+    return 2000;
+  }
+
+  function getPopupContainerStyleIOS() {
+    return {
+      ...styles.overlaystyle,
+      backgroundColor: ValueCheck(data.bgcolor) ? data.bgcolor : '#fff',
+      bottom: normalize(100),
+    };
+  }
+
+  const handleClose = () => {
+    setOverlay(false);
+    props.close(false);
+  };
+
+  return (
+    <CModalOverlay
+      visible={overlay}
+      onClose={handleClose}
+      animationType="fadeInUp"
+      animationDuration={500}
+      closeOnTouchOutside={false}
+      containerStyle={{
+        width: '100%',
+        backgroundColor: getTransparentColor(data.datavalue),
+      }}
+      childrenWrapperStyle={getPopupContainerStyleIOS()}
+    >
+      {/* Close button */}
+      <TouchableOpacity
+        style={{
+          position: 'absolute',
+          right: normalize(15),
+          zIndex: 1,
+          top: normalize(5),
+        }}
+        onPress={handleClose}
+      >
+        <Icons.AntDesign
+          name="closecircleo"
+          size={normalize(15)}
+          color="#fff"
+        />
+      </TouchableOpacity>
+
+      {/* Content */}
+      <View style={{ flexDirection: 'row', width: '100%' }}>
+        {/* Icon section */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Image
+            style={{
+              height: normalize(30),
+              width: normalize(30),
+              borderRadius: normalize(50),
+            }}
+            resizeMode="stretch"
+            source={require('../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png')}
+          />
+
+          <Icons.Entypo
+            color="#fff"
+            name="info"
+            size={normalize(15)}
+          />
+        </View>
+
+        {/* Text section */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 1,
+          }}
+        >
+          <Text
+            adjustsFontSizeToFit
+            style={{
+              color: '#fff',
+              fontWeight: 'bold',
+              fontSize: normalize(16),
+              paddingLeft: normalize(7),
+            }}
+          >
+            {ValueCheck(data.displaytext) ? data.displaytext : ''}
+          </Text>
+        </View>
+      </View>
+    </CModalOverlay>
+  );
+};
+
+export default AAlert;
+
+/**
+ * Styles
+ */
+const styles = StyleSheet.create({
+  overlaystyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    borderRadius: normalize(30),
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+  },
+});

package/src/Alerts/AAlertIOS.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Dimensions,
+  Text,
+  Image,
+  StyleSheet,
+} from 'react-native';
+
+import { Global } from '../../../../../src/Common/Global';
+import Icons from '../Common/Icons';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+
+/**
+ * Types
+ */
+type AlertData = {
+  datavalue: number;
+  displaytext?: string;
+  bgcolor?: string;
+  duration?: number;
+};
+
+type Props = {
+  data: AlertData;
+  close: (value: boolean) => void;
+};
+
+const AAlertIOS: React.FC<Props> = (props) => {
+  const [overlay, setOverlay] = useState<boolean>(true);
+
+  const [data] = useState<
+    AlertData & { bgcolor: string; durartion: number }
+  >({
+    ...props.data,
+    bgcolor: getBgColor(props.data.datavalue),
+    durartion: getDurarion(props.data.datavalue),
+  });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      props.close(false);
+      setOverlay(false);
+    }, data.durartion);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  function getBgColor(key: number): string {
+    switch (key) {
+      case 1:
+        return '#0ca004';
+      case 2:
+        return '#f44e4e';
+      case 3:
+        return '#bfbf18';
+      case 4:
+        return '#d88304';
+      default:
+        return Global.AppTheme?.primary_color ?? '#000';
+    }
+  }
+
+  function getDurarion(key: number): number {
+    return 2500;
+  }
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: normalize(80),
+        zIndex: 1,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          backgroundColor: data.bgcolor,
+          width: Dimensions.get('screen').width,
+          paddingHorizontal: normalize(10),
+          paddingVertical: normalize(10),
+          borderRadius: normalize(10),
+          borderWidth: normalize(2),
+          borderColor: '#fff',
+        }}
+      >
+        {/* App icon */}
+        <Image
+          style={{
+            height: normalize(30),
+            width: normalize(30),
+            borderRadius: normalize(50),
+            alignSelf: 'flex-start',
+          }}
+          resizeMode="stretch"
+          source={require('../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png')}
+        />
+
+        {/* Text content */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingLeft: normalize(15),
+            flex: 1,
+          }}
+        >
+          <Icons.Entypo
+            color="#fff"
+            name="info"
+            size={normalize(15)}
+          />
+
+          <Text
+            adjustsFontSizeToFit
+            style={{
+              color: '#fff',
+              fontWeight: 'bold',
+              fontSize: normalize(16),
+              paddingLeft: normalize(7),
+              paddingRight: normalize(30),
+            }}
+          >
+            {ValueCheck(data.displaytext) ? data.displaytext : ''}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default AAlertIOS;
+
+/**
+ * (Optional styles kept for future reuse)
+ */
+const styles = StyleSheet.create({
+  overlaystyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    borderRadius: normalize(15),
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+  },
+});

package/src/Common/ErrorBoundary.tsx

@@ -0,0 +1,73 @@
+import React, { ErrorInfo, ReactNode } from 'react';
+import { Button, StyleSheet, Text, View, Image } from 'react-native';
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // You can also log the error to an error reporting service
+    // console.log('componentDidCatch ', error, ' ', errorInfo);
+    notifyMessage("ERROR : " + error + ' ' + errorInfo, 2)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <View style={styles.container}>
+          <View style={{ width: '100%', }}>
+            <Image
+              source={{ uri: "https://t4.ftcdn.net/jpg/05/24/04/51/360_F_524045110_UXnCx4GEDapddDi5tdlY96s4g0MxHRvt.jpg" }}
+              resizeMode="cover" style={{ height: normalize(200) }} />
+          </View>
+          <Text style={styles.message}>
+            Something went wrong.{'\n'} Our team has taken a note of this issue.
+          </Text>
+          {/* <Button 
+            title="Try Again" 
+            onPress={() => CodePush.restartApp()} 
+          /> */}
+
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff'
+  },
+  message: {
+    fontSize: normalize(16),
+    color: 'black',
+    marginBottom: 20,
+    textAlign: 'center',
+    paddingHorizontal: 10,
+  },
+});

package/src/Common/Icons.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import MaterialCommunityIconsI from 'react-native-vector-icons/MaterialCommunityIcons';
+import SimpleLineIconsI from 'react-native-vector-icons/SimpleLineIcons';
+import MaterialIconsI from 'react-native-vector-icons/MaterialIcons';
+import FontAwesomeI from 'react-native-vector-icons/FontAwesome';
+import FoundationI from 'react-native-vector-icons/Foundation';
+import EvilIconsI from 'react-native-vector-icons/EvilIcons';
+import OcticonsI from 'react-native-vector-icons/Octicons';
+import IoniconsI from 'react-native-vector-icons/Ionicons';
+import FeatherI from 'react-native-vector-icons/Feather';
+import EntypoI from 'react-native-vector-icons/Entypo';
+import ZocialI from 'react-native-vector-icons/Zocial';
+import FontAwesome5I from 'react-native-vector-icons/FontAwesome5';
+import AntDesignI from 'react-native-vector-icons/AntDesign';
+
+import type { IconProps } from 'react-native-vector-icons/Icon';
+
+/**
+ * Shared icon props type
+ */
+type Props = IconProps;
+
+/**
+ * Wrapper components (typed)
+ */
+export const MaterialCommunityIcons: React.FC<Props> = (props) => (
+  <MaterialCommunityIconsI {...props} />
+);
+
+export const SimpleLineIcons: React.FC<Props> = (props) => (
+  <SimpleLineIconsI {...props} />
+);
+
+export const MaterialIcons: React.FC<Props> = (props) => (
+  <MaterialIconsI {...props} />
+);
+
+export const FontAwesome: React.FC<Props> = (props) => (
+  <FontAwesomeI {...props} />
+);
+
+export const Foundation: React.FC<Props> = (props) => (
+  <FoundationI {...props} />
+);
+
+export const EvilIcons: React.FC<Props> = (props) => (
+  <EvilIconsI {...props} />
+);
+
+export const Ionicons: React.FC<Props> = (props) => (
+  <IoniconsI {...props} />
+);
+
+export const Octicons: React.FC<Props> = (props) => (
+  <OcticonsI {...props} />
+);
+
+export const Feather: React.FC<Props> = (props) => (
+  <FeatherI {...props} />
+);
+
+export const Entypo: React.FC<Props> = (props) => (
+  <EntypoI {...props} />
+);
+
+export const Zocial: React.FC<Props> = (props) => (
+  <ZocialI {...props} />
+);
+
+export const FontAwesome5: React.FC<Props> = (props) => (
+  <FontAwesome5I {...props} />
+);
+
+export const AntDesign: React.FC<Props> = (props) => (
+  <AntDesignI {...props} />
+);
+
+/**
+ * Default export object (same usage style as your JS version)
+ */
+const Icons = {
+  MaterialCommunityIcons,
+  SimpleLineIcons,
+  MaterialIcons,
+  FontAwesome,
+  Foundation,
+  EvilIcons,
+  Ionicons,
+  Octicons,
+  Feather,
+  Entypo,
+  Zocial,
+  FontAwesome5,
+  AntDesign,
+};
+
+export default Icons;