@ha_tecno/live-id-sdk 1.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ha_tecno/live-id-sdk",
-  "version": "1.0.0",
+  "version": "2.2.0",
   "description": "React Native SDK for Live ID",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -27,10 +27,9 @@
   ],
   "scripts": {
     "example": "yarn workspace react-native-live-id-sdk-example",
-    "test": "jest",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "format": "prettier --write .",
+    "lint": "eslint . --ext .ts,.tsx",
     "prepare": "bob build",
     "release": "release-it"
   },
@@ -50,27 +49,37 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.0.2",
-    "@evilmartians/lefthook": "^1.5.0",
+    "@eslint/eslintrc": "^3.0.2",
+    "@eslint/js": "^9.0.0",
     "@react-native/eslint-config": "^0.72.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
     "@types/react-native": "0.70.0",
-    "commitlint": "^17.0.2",
+    "@types/react-native-vector-icons": "^6.4.18",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "del-cli": "^5.0.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "globals": "^15.0.0",
     "jest": "^28.1.1",
     "pod-install": "^0.1.0",
-    "prettier": "^2.0.5",
+    "prettier": "^3.2.5",
     "react": "18.2.0",
     "react-native": "0.72.7",
     "react-native-builder-bob": "^0.20.0",
     "release-it": "^15.0.0",
     "turbo": "^1.10.7",
-    "typescript": "^5.3.3"
+    "typescript": "*",
+    "typescript-eslint": "^7.5.0"
   },
   "resolutions": {
     "@types/react": "17.0.21"
@@ -118,36 +127,6 @@
       }
     }
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
-      ]
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
@@ -172,7 +151,10 @@
     "react-native-orientation-locker": "^1.6.0",
     "react-native-reanimated": "^3.6.1",
     "react-native-responsive-fontsize": "^0.5.1",
-    "react-native-vision-camera": "^3.8.2"
+    "react-native-uuid": "^2.0.2",
+    "react-native-vector-icons": "^10.0.3",
+    "react-native-vision-camera": "^3.8.2",
+    "zustand": "^4.5.2"
   },
   "bugs": {
     "url": "https://bitbucket.org/Hsergio45/liveid-sdk/issues"

package/src/components/CameraConfigInfo/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { styles } from "./styles";
+
+type Props = {
+  exposure: number;
+  zoom: number;
+};
+
+const CameraConfigInfo = ({ exposure, zoom }: Props) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>
+        Exposure: {exposure} | Zoom: {zoom}
+      </Text>
+    </View>
+  );
+};
+
+export default CameraConfigInfo;

package/src/components/CameraConfigInfo/styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    padding: 10,
+    backgroundColor: "#0d0d0d"
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: "#fff"
+  }
+});

package/src/components/CaptureButton/index.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from "react";
+import { Pressable } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import Icon from "../icon/icon";
+import { styles } from "./styles";
+
+type Props = {
+  onPress: () => void;
+  imagesCount?: number;
+  authFinger?: boolean;
+  loading?: boolean;
+};
+
+const CaptureButton = ({ onPress, imagesCount, authFinger, loading }: Props) => {
+  const width = useSharedValue(75);
+  const translateX = useSharedValue(0);
+  const opacity = useSharedValue(0);
+
+  const animatedView = useAnimatedStyle(() => ({
+    width: width.value
+  }));
+
+  const animatedIcon = useAnimatedStyle(() => ({
+    transform: [{ translateX: -translateX.value }]
+  }));
+
+  const animatedText = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    color: "#fff",
+    transform: [{ translateX: translateX.value }]
+  }));
+
+  useEffect(() => {
+    if (imagesCount === 3) {
+      setTimeout(() => {
+        width.value = withSpring(75);
+        translateX.value = withSpring(0);
+        opacity.value = withTiming(0, { duration: 250 });
+      }, 500);
+    }
+  }, [width, opacity, translateX, imagesCount]);
+
+  const handlePress = () => {
+    onPress();
+    width.value = withSpring(150);
+    translateX.value = withSpring(25);
+    opacity.value = withTiming(1, { duration: 250 });
+  };
+
+  if (authFinger) {
+    return (
+      <Pressable onPress={handlePress} disabled={loading}>
+        <Animated.View style={[styles.box, { width: 75 }]}>
+          <Icon name="camera-outline" size={40} color="white" />
+        </Animated.View>
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable onPress={handlePress} disabled={imagesCount === 3 ? true : false}>
+      <Animated.View style={[styles.box, animatedView]}>
+        <Animated.View style={animatedIcon}>
+          <Icon name="camera-outline" size={40} color="white" />
+        </Animated.View>
+        {(imagesCount ?? 0) > 0 ? (
+          <Animated.Text style={[styles.text, animatedText]}>{imagesCount}/3</Animated.Text>
+        ) : undefined}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export default CaptureButton;

package/src/components/CaptureButton/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  box: {
+    flexDirection: "row",
+    height: 50,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 50,
+    backgroundColor: "#1F75FF"
+  },
+  text: {
+    position: "absolute",
+    color: "#fff"
+  }
+});

package/src/components/Gabarito/index.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import { View } from 'react-native';
-import { styles } from './styles';
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./styles";
 
-export const Gabarito = () => {
+const Gabarito = () => {
   return (
     <View style={styles.container}>
       <View style={styles.gabarito} />
     </View>
   );
 };
+
+export default Gabarito;

package/src/components/Gabarito/styles.ts

@@ -1,23 +1,22 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet, Dimensions } from "react-native";
 
-const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
 
 export const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignSelf: 'center',
-    position: `absolute`,
-    marginTop: '50%',
+    position: "absolute",
+    justifyContent: "center",
+    alignSelf: "center"
   },
   gabarito: {
     width: width * 0.5,
-    height: height * 0.3,
+    height: height * 0.4,
     borderWidth: 3,
-    borderColor: 'red',
-    marginLeft: '15%',
-    borderTopLeftRadius: 125,
-    borderBottomLeftRadius: 125,
-    transform: [{ scaleX: 2 }],
-  },
+    borderColor: "red",
+    marginLeft: "15%",
+    borderTopLeftRadius: 75,
+    borderBottomLeftRadius: 75,
+    transform: [{ scaleX: 2 }]
+  }
 });

package/src/components/HelpRegister/index.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { View, Image, Text, TouchableOpacity, Modal } from "react-native";
+import { styles } from "./styles";
+
+const HelpRegister = () => {
+  const [visible, setVisible] = useState(true);
+
+  const handleVisible = () => setVisible(false);
+  return (
+    <Modal animationType="fade" visible={visible}>
+      <View style={styles.container}>
+        <Text style={styles.title}>Instruções da Captura</Text>
+        <Text style={styles.text}>
+          1. Para cadastrar sua digital, escolha um fundo neutro. {`\n`}
+          ex: folha de papel ou parede lisa
+        </Text>
+        <Image
+          source={require("../../assets/exampleInstructionWithoutFinger.jpeg")}
+          style={styles.image}
+          resizeMode="stretch"
+        />
+        <Text style={styles.text}>2. Posicione o dedo dentro da marcação indicada na tela</Text>
+        <View style={styles.containerImages}>
+          <Image source={require("../../assets/arrow.png")} style={styles.arrow} resizeMode="center" />
+          <Image
+            source={require("../../assets/exampleInstructionWithBorder.jpeg")}
+            style={styles.image}
+            resizeMode="contain"
+          />
+        </View>
+        <Text style={styles.text}>3. Clique em "Tirar Foto" e aguarde.</Text>
+        <TouchableOpacity onPress={handleVisible} style={styles.button} activeOpacity={0.5}>
+          <Text style={styles.textButton}>Ir para captura</Text>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  );
+};
+
+export default HelpRegister;

package/src/components/HelpRegister/styles.ts

@@ -0,0 +1,54 @@
+import { StyleSheet, Platform } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    backgroundColor: "#f5f5f5",
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    gap: 10
+  },
+  containerImages: {
+    justifyContent: "center"
+  },
+  image: {
+    width: 150,
+    height: 150,
+    alignSelf: "center",
+    borderRadius: 15
+  },
+  arrow: {
+    position: "absolute",
+    width: 50,
+    height: 50,
+    marginHorizontal: 32
+  },
+
+  title: {
+    alignSelf: "center",
+    fontSize: 22,
+    fontWeight: "bold",
+    marginVertical: 10,
+    color: "#000"
+  },
+  text: {
+    fontSize: 18,
+    textAlign: "center",
+    fontWeight: Platform.OS === "ios" ? "300" : "normal",
+    marginVertical: 10,
+    color: "#000"
+  },
+  button: {
+    width: "100%",
+    alignItems: "center",
+    marginTop: 20,
+    padding: 12,
+    borderRadius: 10,
+    backgroundColor: "#3652AD"
+  },
+  textButton: {
+    fontSize: 18,
+    color: "#fff"
+  }
+});

package/src/components/Toast/Toast.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View, Modal, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import React from "react";
+import { View, Modal, Text, StyleSheet, TouchableOpacity } from "react-native";
 
 interface ToastProps {
   isVisible: boolean;
@@ -7,11 +7,7 @@ interface ToastProps {
   onClose: () => void;
 }
 
-export const Toast: React.FC<ToastProps> = ({
-  isVisible,
-  message,
-  onClose,
-}) => {
+export const Toast: React.FC<ToastProps> = ({ isVisible, message, onClose }) => {
   return (
     <Modal transparent visible={isVisible} onRequestClose={onClose}>
       <View style={styles.modalContainer}>
@@ -29,33 +25,33 @@ export const Toast: React.FC<ToastProps> = ({
 export const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 999,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999
   },
   modalCard: {
-    backgroundColor: 'white',
+    backgroundColor: "white",
     padding: 16,
     borderRadius: 8,
-    width: '80%',
-    alignItems: 'center',
+    width: "80%",
+    alignItems: "center"
   },
   messageText: {
     fontSize: 18,
     marginBottom: 16,
-    textAlign: 'center',
-    color: '#333',
+    textAlign: "center",
+    color: "#333"
   },
   closeButton: {
     marginTop: 8,
-    backgroundColor: '#ccc',
+    backgroundColor: "#ccc",
     padding: 8,
-    borderRadius: 4,
+    borderRadius: 4
   },
   closeButtonText: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center"
+  }
 });

package/src/components/deviceNotFound/deviceNotFound.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Pressable, Text, View } from "react-native";
+import { styles } from "./styles";
+
+type Props = {
+	hasPermission: boolean;
+	cameraPermission: () => void;
+};
+
+const DeviceNotFound = ({ hasPermission, cameraPermission }: Props) => {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Device not found</Text>
+			<Pressable style={styles.button} onPress={cameraPermission}>
+				<Text style={styles.textButton}>
+					{hasPermission ? "Permission granted" : "Request permission"}
+				</Text>
+			</Pressable>
+		</View>
+	);
+};
+
+export default DeviceNotFound;

package/src/components/deviceNotFound/styles.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		gap: 20,
+	},
+	text: {
+		color: "#000",
+		fontSize: 20,
+	},
+	button: {
+		alignItems: "center",
+		justifyContent: "center",
+		paddingVertical: 12,
+		paddingHorizontal: 32,
+		borderRadius: 4,
+		elevation: 3,
+		backgroundColor: "black",
+	},
+	textButton: {
+		fontSize: 16,
+		lineHeight: 21,
+		fontWeight: "bold",
+		letterSpacing: 0.25,
+		color: "white",
+	},
+});

package/src/components/icon/icon.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Ionicons from "react-native-vector-icons/Ionicons";
+
+type Props = {
+  name: string;
+  size: number;
+  color: string;
+};
+
+const Icon = ({ name, size, color }: Props) => {
+  return <Ionicons name={name} size={size} color={color} />;
+};
+
+export default Icon;

package/src/components/index.ts

@@ -0,0 +1,9 @@
+import DeviceNotFound from "./deviceNotFound/deviceNotFound";
+import ModalMessage from "./modalMessage/modalMessage";
+import RecordButton from "./recordButton/recordButton";
+import HelpRegister from "./HelpRegister";
+import CaptureButton from "./CaptureButton";
+import CameraConfigInfo from "./CameraConfigInfo";
+import Gabarito from "./Gabarito";
+
+export { DeviceNotFound, ModalMessage, RecordButton, HelpRegister, CaptureButton, CameraConfigInfo, Gabarito };

package/src/components/modalMessage/modalMessage.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  ActivityIndicator,
+  Modal,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+  useColorScheme
+} from "react-native";
+import { styles } from "./styles";
+
+type Props = {
+  isLoading: boolean;
+  modal?: {
+    title: string;
+    message: string;
+  };
+};
+
+export const ModalMessage = ({ isLoading, modal }: Props) => {
+  const [visible, setVisible] = useState(false);
+  const isDark = useColorScheme() === "dark";
+
+  const backgroundColor = useMemo<ViewStyle>(() => {
+    return {
+      ...styles.modal,
+      backgroundColor: isDark ? "#0f0f0f" : "#fff"
+    };
+  }, [isDark]);
+
+  const textColor = useMemo<TextStyle>(() => {
+    return {
+      color: isDark ? "#fff" : "#000"
+    };
+  }, [isDark]);
+
+  const handleModal = () => {
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    if (isLoading === true) setVisible(true);
+  }, [isLoading]);
+
+  return (
+    <Modal animationType="fade" visible={visible} transparent>
+      <View style={styles.container}>
+        <View style={backgroundColor}>
+          {isLoading ? (
+            <>
+              <ActivityIndicator size="large" color="#0000ff" />
+              <Text style={[styles.title, textColor]}>Processando...</Text>
+            </>
+          ) : (
+            <>
+              <Text style={[styles.title, textColor]}>{modal?.title}</Text>
+              <Text style={[styles.text, textColor]}>{modal?.message}</Text>
+              <View style={styles.button}>
+                <TouchableOpacity style={styles.button} onPress={handleModal}>
+                  <Text style={styles.textButton}>Fechar</Text>
+                </TouchableOpacity>
+              </View>
+            </>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalMessage;

package/src/components/modalMessage/styles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  modal: {
+    maxWidth: 300,
+    maxHeight: 200,
+    gap: 12,
+    borderRadius: 20,
+    padding: 18,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "#000"
+  },
+  text: {
+    fontSize: 16,
+    textAlign: "center",
+    color: "#000"
+  },
+  button: {
+    backgroundColor: "#0000ff",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 10
+  },
+  textButton: {
+    color: "#fff",
+    fontSize: 14
+  }
+});