@ha_tecno/live-id-sdk 1.0.0

package/package.json

@@ -0,0 +1,184 @@
+{
+  "name": "@ha_tecno/live-id-sdk",
+  "version": "1.0.0",
+  "description": "React Native SDK for Live ID",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "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",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/Hsergio45/liveid-sdk.git"
+  },
+  "author": "Gustavo Bacellar, Ewerton Vinicius Turco",
+  "license": "MIT",
+  "homepage": "https://bitbucket.org/Hsergio45/liveid-sdk/src/main/README.md",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.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",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.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"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-fs": "^2.20.0",
+    "react-native-modal": "^13.0.1",
+    "react-native-responsive-fontsize": "^0.5.1"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "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",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "axios": "^1.6.8",
+    "firebase": "^10.7.2",
+    "react-native-device-info": "^10.13.1",
+    "react-native-fs": "^2.20.0",
+    "react-native-gesture-handler": "^2.14.1",
+    "react-native-modal": "^13.0.1",
+    "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"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/Hsergio45/liveid-sdk/issues"
+  },
+  "directories": {
+    "example": "example",
+    "lib": "lib"
+  }
+}

package/src/components/CameraConfigInfos/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { styles } from './styles';
+
+type Props = {
+  exposure?: number;
+  zoom?: number;
+  showButtonInfo?: boolean;
+};
+
+export const CameraConfigInfos = ({
+  exposure,
+  zoom,
+  showButtonInfo,
+}: Props) => {
+  return (
+    <>
+      {showButtonInfo ? (
+        <Text style={styles.text}>
+          Exposição: {exposure} | Zoom: {zoom}
+        </Text>
+      ) : null}
+    </>
+  );
+};

package/src/components/CameraConfigInfos/styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export const styles = StyleSheet.create({
+  text: {
+    fontSize: 18,
+    fontWeight: '500',
+    color: '#fff',
+    textAlign: 'center',
+    width: RFValue(300),
+    marginBottom: RFValue(20),
+  },
+});

package/src/components/DeviceNullDisplay/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import Modal, { type ModalProps } from 'react-native-modal';
+
+interface DeviceNullDisplayProps {
+  isVisible: boolean;
+  modalParams?: ModalProps;
+  onCloseModalHandler: () => void;
+  requestCameraPermission: () => void;
+}
+
+export const DeviceNullDisplay: React.FC<DeviceNullDisplayProps> = ({
+  isVisible,
+  onCloseModalHandler,
+  requestCameraPermission,
+  ...modalParams
+}) => {
+  return (
+    <Modal
+      style={styles.modal}
+      isVisible={isVisible}
+      swipeDirection="down"
+      propagateSwipe={true}
+      onSwipeComplete={onCloseModalHandler}
+      {...modalParams}
+    >
+      <View style={styles.container}>
+        <Text style={styles.errorText}>
+          O dispositivo não possui camera ou não foi possivel acessar a camera !
+        </Text>
+        <View style={styles.buttonContainer}>
+          <Button title="Fechar Camera" onPress={onCloseModalHandler} />
+        </View>
+        <Button title="Tentar novamente" onPress={requestCameraPermission} />
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+  },
+  errorText: {
+    color: 'black',
+    fontWeight: 'bold',
+    fontSize: 20,
+    marginBottom: 16,
+  },
+  buttonContainer: {
+    marginBottom: 16,
+  },
+});

package/src/components/ErrorDisplay/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import Modal, { type ModalProps } from 'react-native-modal';
+
+interface ErrorDisplayProps {
+  isVisible: boolean;
+  modalParams?: ModalProps;
+  onCloseModalHandler: () => void;
+  requestCameraPermission: () => void;
+}
+
+export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
+  isVisible,
+  onCloseModalHandler,
+  requestCameraPermission,
+  ...modalParams
+}) => {
+  return (
+    <Modal
+      style={styles.modal}
+      isVisible={isVisible}
+      swipeDirection="down"
+      propagateSwipe={true}
+      onSwipeComplete={onCloseModalHandler}
+      {...modalParams}
+    >
+      <View style={styles.container}>
+        <Text style={styles.errorText}>
+          Ocorreu um erro ao tentar acessar o dispositivo! Você deve passar o id
+          do usuário para validar a digital.
+        </Text>
+        <View style={styles.buttonContainer}>
+          <Button title="Fechar Camera" onPress={onCloseModalHandler} />
+        </View>
+        <Button title="Tentar novamente" onPress={requestCameraPermission} />
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+  },
+  errorText: {
+    color: 'black',
+    fontWeight: 'bold',
+    fontSize: 20,
+    marginBottom: 16,
+  },
+  buttonContainer: {
+    marginBottom: 16,
+  },
+});

package/src/components/Gabarito/index.tsx

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

package/src/components/Gabarito/styles.ts

@@ -0,0 +1,23 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+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%',
+  },
+  gabarito: {
+    width: width * 0.5,
+    height: height * 0.3,
+    borderWidth: 3,
+    borderColor: 'red',
+    marginLeft: '15%',
+    borderTopLeftRadius: 125,
+    borderBottomLeftRadius: 125,
+    transform: [{ scaleX: 2 }],
+  },
+});

package/src/components/Toast/Toast.tsx

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

package/src/components/WaitingForResult/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { styles } from './styles';
+import { TouchableWithoutFeedback } from 'react-native';
+
+interface WaitingForResultProps {
+  onPress?: () => void;
+}
+
+export const WaitingForResult: React.FC<WaitingForResultProps> = ({
+  onPress,
+}) => {
+  return (
+    <TouchableWithoutFeedback onPress={onPress} style={styles.flexi}>
+      <View style={styles.overlay}>
+        <Text style={styles.textOverlay}>
+          Você já pode retirar o dedo da tela, aguarde o resultado.
+        </Text>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};

package/src/components/WaitingForResult/styles.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export const styles = StyleSheet.create({
+  flexi: {
+    flex: 1,
+  },
+  overlay: {
+    zIndex: 2,
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    backgroundColor: `rgba(44, 45, 46, 0.5)`,
+    alignItems: `center`,
+    justifyContent: `center`,
+    position: `absolute`,
+  },
+
+  textOverlay: {
+    fontSize: RFValue(18),
+    fontWeight: `500`,
+    color: `#fff`,
+    textAlign: `center`,
+    width: RFValue(300),
+    marginBottom: RFValue(20),
+  },
+});

package/src/index.tsx

@@ -0,0 +1,6 @@
+export { ValidaFinger } from './screens/ValidadeFinger';
+
+// deprecated
+export { CameraProvaVidas } from './screens/ProvaVidas';
+export { CadastroFinger } from './screens/CadastroFinger';
+export { CadastroScreen } from './screens/CadastroScreen/CadastroScreen';

package/src/screens/CadastroFinger/components/AjudaCadastro/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Image, Text, TouchableOpacity } from 'react-native';
+import { styles } from './styles';
+
+type AjudaCadastroProps = {
+  handleProximaTela: () => void;
+};
+
+export const AjudaCadastro = ({ handleProximaTela }: AjudaCadastroProps) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <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 branca ou parede lisa
+        </Text>
+        <Image
+          source={require('../../../../assets/exampleInstructionWithoutFinger.jpeg')}
+          style={styles.image}
+          resizeMode="stretch"
+        />
+        <Text style={styles.text}>
+          2. Posicione o dedo dentro do 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={handleProximaTela}
+          style={styles.button}
+          activeOpacity={0.5}
+        >
+          <Text style={styles.textButton}>Ir para captura</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};

package/src/screens/CadastroFinger/components/AjudaCadastro/styles.ts

@@ -0,0 +1,56 @@
+import { StyleSheet, Platform } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#f5f5f5',
+    gap: 10,
+  },
+  containerImages: {
+    justifyContent: 'center',
+  },
+  image: {
+    width: 150,
+    height: 150,
+    alignSelf: 'center',
+    borderRadius: 15,
+  },
+  arrow: {
+    position: 'absolute',
+    width: 50,
+    height: 50,
+    marginHorizontal: 32,
+  },
+  content: {
+    marginVertical: 10,
+    marginHorizontal: 20,
+    gap: 10,
+  },
+  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',
+  },
+});