@proteoapp/react-native-onboarding 0.1.0

package/package.json

@@ -0,0 +1,200 @@
+{
+  "name": "@proteoapp/react-native-onboarding",
+  "version": "0.1.0",
+  "description": "Proteo onboarding SDK for react native",
+  "author": "Proteo",
+  "license": "SEE LICENSE IN LICENSE",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "assets",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example-min": "yarn workspace @proteoapp/react-native-onboarding-example-min",
+    "example-lts": "yarn workspace @proteoapp/react-native-onboarding-example-lts",
+    "typecheck": "tsc",
+    "lint": "eslint \"src/**/*.{jsx,ts,tsx}\"",
+    "format": "prettier --write \"src/**/*.{jsx,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "build": "bob build",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "proteo",
+    "onboarding",
+    "sdk",
+    "react-native"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Proteo-Organization/onboarding-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Proteo-Organization/onboarding-sdk/issues"
+  },
+  "homepage": "https://github.com/Proteo-Organization/onboarding-sdk#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "workspaces": [
+    "examples/*"
+  ],
+  "peerDependencies": {
+    "@react-native-community/geolocation": ">=3.4.0 <4.0.0",
+    "@react-native-community/image-editor": ">=4.3.0 <5.0.0",
+    "@react-navigation/native": ">=7.1.18 <7.3.0",
+    "@react-navigation/native-stack": ">=7.3.28 <7.5.0",
+    "@shopify/react-native-skia": ">=2.2.4 <3.0.0",
+    "react": ">=19.0.0 <20.0.0",
+    "react-native": ">=0.79.0 <0.82.0",
+    "react-native-compressor": ">=1.16.0 <2.0.0",
+    "react-native-fast-opencv": ">=0.4.7 <0.5.0",
+    "react-native-fs": ">=2.20.0 <3.0.0",
+    "react-native-quick-crypto": ">=0.7.17 <0.8.0",
+    "react-native-reanimated": ">=4.1.2 <5.0.0",
+    "react-native-safe-area-context": ">=5.6.0 <6.0.0",
+    "react-native-screens": ">=4.14.0 <5.0.0",
+    "react-native-svg": ">=15.13.0 <16.0.0",
+    "react-native-vision-camera": ">=4.7.0 <5.0.0",
+    "react-native-vision-camera-face-detector": ">=1.8.9 <2.0.0",
+    "react-native-worklets": ">=0.6.0 <0.7.0",
+    "react-native-worklets-core": ">=1.6.2 <2.0.0",
+    "vision-camera-resize-plugin": ">=3.2.0 <4.0.0"
+  },
+  "dependencies": {
+    "@aws-sdk/client-rekognition": "^3.930.0",
+    "@aws-sdk/client-s3": "^3.930.0",
+    "@rails/actioncable": "^8.1.200",
+    "@shopify/restyle": "^2.4.5",
+    "@tanstack/react-query": "^5.90.8",
+    "axios": "^1.13.2",
+    "react-native-error-boundary": "^3.0.0",
+    "react-native-url-polyfill": "^3.0.0",
+    "use-debounce": "^10.0.6",
+    "web-streams-polyfill": "^4.2.0",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/runtime": "^7.28.4",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@evilmartians/lefthook": "^1.12.3",
+    "@react-native-community/cli": "^20.0.2",
+    "@react-native-community/cli-platform-android": "^20.0.2",
+    "@react-native-community/cli-platform-ios": "^20.0.2",
+    "@react-native-community/geolocation": "^3.4.0",
+    "@react-native-community/image-editor": "^4.3.0",
+    "@react-native/babel-preset": "^0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@react-native/metro-config": "^0.81.1",
+    "@react-native/typescript-config": "^0.81.1",
+    "@react-navigation/native": "^7.1.18",
+    "@react-navigation/native-stack": "^7.3.28",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@shopify/react-native-skia": "^2.2.21",
+    "@types/rails__actioncable": "^8",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-compressor": "^1.16.0",
+    "react-native-fast-opencv": "^0.4.7",
+    "react-native-fs": "^2.20.0",
+    "react-native-monorepo-config": "^0.2.1",
+    "react-native-quick-crypto": "^0.7.17",
+    "react-native-reanimated": "^4.1.2",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-screens": "^4.16.0",
+    "react-native-svg": "^15.13.0",
+    "react-native-vision-camera": "^4.7.0",
+    "react-native-vision-camera-face-detector": "^1.8.9",
+    "react-native-worklets": "^0.6.0",
+    "react-native-worklets-core": "^1.6.2",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.3",
+    "vision-camera-resize-plugin": "^3.2.0"
+  },
+  "packageManager": "yarn@4.10.3",
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "github": {
+      "release": true
+    },
+    "npm": {
+      "publish": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.3"
+  }
+}

package/src/app.tsx

@@ -0,0 +1,9 @@
+import { type OnboardingProps } from '.'
+import { AppView } from './view'
+import { useAppViewModel } from './view-model'
+
+export const App = (props: OnboardingProps) => {
+  const viewProps = useAppViewModel(props)
+
+  return <AppView {...viewProps} />
+}

package/src/components/button.tsx

@@ -0,0 +1,70 @@
+import { Pressable } from 'react-native'
+import { type SvgProps } from 'react-native-svg'
+import {
+  border,
+  createRestyleComponent,
+  createText,
+  createVariant,
+  layout,
+  opacity,
+  spacing,
+  type BorderProps,
+  type LayoutProps,
+  type OpacityProps,
+  type SpacingProps,
+  type VariantProps,
+} from '@shopify/restyle'
+import { useButton } from '../hooks'
+import { type CustomThemeProps } from '../theme'
+
+type BaseButtonProps = LayoutProps<CustomThemeProps> &
+  SpacingProps<CustomThemeProps> &
+  BorderProps<CustomThemeProps> &
+  OpacityProps<CustomThemeProps> &
+  VariantProps<CustomThemeProps, 'buttonVariants'>
+
+const BaseButton = createRestyleComponent<BaseButtonProps, CustomThemeProps>([
+  layout,
+  spacing,
+  border,
+  opacity,
+  createVariant({ themeKey: 'buttonVariants' }),
+])
+const Text = createText<CustomThemeProps>()
+
+type ButtonProps = ReturnType<typeof useButton> &
+  BaseButtonProps & {
+    title: string
+    iconRight?: React.ComponentType<SvgProps>
+    iconLeft?: React.ComponentType<SvgProps>
+    disabled?: boolean
+    onPress: () => void
+  }
+
+export const Button = ({
+  title,
+  iconRight: IconRight,
+  iconLeft: IconLeft,
+  mainColor,
+  disabled,
+  onPress,
+  ...props
+}: ButtonProps) => (
+  <Pressable onPress={onPress} disabled={disabled}>
+    {({ pressed }) => (
+      <BaseButton
+        {...props}
+        {...(pressed && {
+          opacity: 0.85,
+        })}
+        {...(disabled && {
+          opacity: 0.7,
+        })}
+      >
+        {!!IconLeft && <IconLeft color={mainColor} />}
+        <Text style={{ color: mainColor }}>{title}</Text>
+        {!!IconRight && <IconRight color={mainColor} />}
+      </BaseButton>
+    )}
+  </Pressable>
+)

package/src/components/centered-loading.tsx

@@ -0,0 +1,11 @@
+import { createBox } from '@shopify/restyle'
+import { type CustomThemeProps } from '../theme'
+import { Loading, type LoadingProps } from './loading'
+
+const Box = createBox<CustomThemeProps>()
+
+export const CenteredLoading = (props: LoadingProps) => (
+  <Box flex={1} alignItems="center" justifyContent="center" bg="secondary">
+    <Loading {...props} size={48} />
+  </Box>
+)

package/src/components/default-error-fallback.tsx

@@ -0,0 +1,26 @@
+import { StyleSheet, Text, View } from 'react-native'
+import { defaultColors } from '../theme/default-colors'
+
+type DefaultErrorFallbackProps = {
+  error: Error
+}
+
+export const DefaultErrorFallback = ({ error }: DefaultErrorFallbackProps) => (
+  <View style={styles.container}>
+    <Text style={styles.text}>{error.message}</Text>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: defaultColors.background,
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 400,
+    color: defaultColors.text,
+  },
+})

package/src/components/default-loading.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, Text, View } from 'react-native'
+import { defaultColors } from '../theme/default-colors'
+import { Loading, type LoadingProps } from './loading'
+
+type DefaultLoadingProps = LoadingProps & {
+  message: string
+}
+
+export const DefaultLoading = (props: DefaultLoadingProps) => (
+  <View style={styles.container}>
+    <Loading {...props} color={defaultColors.text} size={50} />
+    <Text style={styles.text}>{props.message}...</Text>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: defaultColors.background,
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 400,
+    color: defaultColors.text,
+    marginTop: 16,
+  },
+})

package/src/components/description-loading.tsx

@@ -0,0 +1,32 @@
+import { type SvgProps } from 'react-native-svg'
+import { createBox, createText } from '@shopify/restyle'
+import { useDescriptionLoading } from '../hooks'
+import { type CustomThemeProps } from '../theme'
+import { Loading } from './loading'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type DescriptionLoadingProps = ReturnType<typeof useDescriptionLoading> & {
+  title: string
+  message?: string
+  icon: React.ComponentType<SvgProps>
+}
+
+export const DescriptionLoading = ({
+  title,
+  message = 'Processando',
+  icon: Icon,
+  iconColor,
+  loadingProps,
+}: DescriptionLoadingProps) => (
+  <Box flex={1} alignItems="center" justifyContent="center">
+    <Icon width={80} height={80} color={iconColor} />
+    <Box alignItems="center" justifyContent="center" rowGap="s" my="xl">
+      <Text variant="subtitle">{title}</Text>
+      <Text>Por favor, aguarde!</Text>
+    </Box>
+    <Loading {...loadingProps} variant="double" size={50} />
+    <Text mt="m">{message}...</Text>
+  </Box>
+)

package/src/components/error-fallback.tsx

@@ -0,0 +1,55 @@
+import { createBox, createText } from '@shopify/restyle'
+import { RefreshSvg, XSvg } from '../../assets/svgs'
+import { useErrorFallback } from '../hooks'
+import { type CustomThemeProps } from '../theme'
+import { Button } from './button'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type ErrorFallbackProps = ReturnType<typeof useErrorFallback>
+
+export const ErrorFallback = ({
+  title,
+  message,
+  icon: Icon,
+  miniIconColor,
+  tryAgainButtonProps,
+  finishProcessButtonProps,
+  showFooterButtons,
+  onTryAgainPress,
+  onFinishProcessPress,
+}: ErrorFallbackProps) => (
+  <Box
+    flex={1}
+    bg="secondary"
+    alignItems="center"
+    justifyContent="center"
+    rowGap="m"
+    px="m"
+  >
+    <Icon width={80} height={80} miniIconColor={miniIconColor} />
+    <Box width="80%" rowGap="s">
+      <Text variant="subtitle" textAlign="center">
+        {title}
+      </Text>
+      <Text textAlign="center">{message}</Text>
+    </Box>
+    {showFooterButtons && (
+      <Box width="100%" rowGap="m">
+        <Button
+          {...tryAgainButtonProps}
+          title="Tentar Novamente"
+          iconLeft={RefreshSvg}
+          onPress={onTryAgainPress}
+        />
+        <Button
+          {...finishProcessButtonProps}
+          title="Finalizar Processo"
+          iconLeft={XSvg}
+          onPress={onFinishProcessPress}
+        />
+      </Box>
+    )}
+  </Box>
+)

package/src/components/identification-error.tsx

@@ -0,0 +1,37 @@
+import { type SvgProps } from 'react-native-svg'
+import { createBox, createText } from '@shopify/restyle'
+import { RefreshSvg } from '../../assets/svgs'
+import { useIdentificationError } from '../hooks'
+import { type CustomThemeProps } from '../theme'
+import { Button } from './button'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type IdentificationErrorProps = ReturnType<typeof useIdentificationError> & {
+  icon: React.ComponentType<SvgProps & { miniIconColor: string }>
+  onTryAgainPress: () => void
+}
+
+export const IdentificationError = ({
+  icon: Icon,
+  miniIconColor,
+  tryAgainButtonProps,
+  onTryAgainPress,
+}: IdentificationErrorProps) => (
+  <Box flex={1}>
+    <Box flex={1} alignItems="center" justifyContent="center">
+      <Icon width={80} height={80} miniIconColor={miniIconColor} />
+      <Text variant="subtitle" width="80%" textAlign="center" mt="m" mb="s">
+        Não foi possível identificar a sua identidade!
+      </Text>
+      <Text>Tente novamente.</Text>
+    </Box>
+    <Button
+      {...tryAgainButtonProps}
+      title="Tentar Novamente"
+      iconLeft={RefreshSvg}
+      onPress={onTryAgainPress}
+    />
+  </Box>
+)

package/src/components/index.ts

@@ -0,0 +1,10 @@
+export * from './default-error-fallback'
+export * from './error-fallback'
+export * from './default-loading'
+export * from './loading'
+export * from './description-loading'
+export * from './centered-loading'
+export * from './progress-indicator'
+export * from './button'
+export * from './recommended-validations'
+export * from './identification-error'

package/src/components/loading.tsx

@@ -0,0 +1,50 @@
+import Animated from 'react-native-reanimated'
+import Svg, { Circle } from 'react-native-svg'
+import { useLoading } from '../hooks'
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg)
+
+export type LoadingProps = ReturnType<typeof useLoading> & {
+  variant?: 'default' | 'double'
+  size?: number
+}
+
+export const Loading = ({
+  variant = 'default',
+  size = 24,
+  animatedStyle,
+  backgroundColor,
+  color,
+}: LoadingProps) => {
+  const strokeWidth = size / 10
+  const center = size / 2
+  const radius = (size - strokeWidth) / 2
+  const strokeDasharray = radius * 2 * Math.PI
+  const strokeDashoffset = strokeDasharray * 0.8
+
+  return (
+    <AnimatedSvg width={size} height={size} style={animatedStyle}>
+      {variant === 'double' && (
+        <Circle
+          stroke={backgroundColor}
+          fill="none"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+      )}
+      <Circle
+        stroke={color}
+        fill="none"
+        cx={center}
+        cy={center}
+        r={radius}
+        strokeWidth={strokeWidth}
+        strokeDasharray={strokeDasharray}
+        strokeDashoffset={strokeDashoffset}
+        strokeLinecap="round"
+      />
+    </AnimatedSvg>
+  )
+}

package/src/components/progress-indicator.tsx

@@ -0,0 +1,46 @@
+import { type SvgProps } from 'react-native-svg'
+import { createBox, createText } from '@shopify/restyle'
+import { useProgressIndicator } from '../hooks'
+import { type CustomThemeProps } from '../theme'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type ProgressIndicatorProps = ReturnType<typeof useProgressIndicator> & {
+  stepIcon: React.ComponentType<SvgProps>
+}
+
+export const ProgressIndicator = ({
+  currentStep,
+  totalSteps,
+  bars,
+  stepIcon: StepIcon,
+  stepIconColor,
+}: ProgressIndicatorProps) => (
+  <Box rowGap="s">
+    <Box flexDirection="row" alignItems="center" justifyContent="space-between">
+      <Text variant="caption">
+        Passo {currentStep}/{totalSteps}
+      </Text>
+      <StepIcon width={15} height={15} color={stepIconColor} />
+    </Box>
+    <Box flexDirection="row" columnGap="xs">
+      {bars.map((bar, index) => (
+        <Box
+          key={index}
+          flex={1}
+          height={4}
+          bg={bar.isCurrent ? 'primary' : 'gray'}
+          {...(bar.isFirst && {
+            borderTopLeftRadius: 'xs',
+            borderBottomLeftRadius: 'xs',
+          })}
+          {...(bar.isLast && {
+            borderTopRightRadius: 'xs',
+            borderBottomRightRadius: 'xs',
+          })}
+        />
+      ))}
+    </Box>
+  </Box>
+)

package/src/components/recommended-validations.tsx

@@ -0,0 +1,98 @@
+import { View, type LayoutChangeEvent } from 'react-native'
+import { createBox, createText } from '@shopify/restyle'
+import { useRecommendedValidations } from '../hooks'
+import { type CustomThemeProps } from '../theme'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type BaseProps = ReturnType<typeof useRecommendedValidations> & {
+  recommendations: string[]
+  onLayout?: (event: LayoutChangeEvent) => void
+}
+
+type TipModeProps = BaseProps & {
+  mode: 'tip'
+  title: string
+}
+
+type CheckModeProps = BaseProps & {
+  mode: 'check'
+  title?: never
+}
+
+type RecommendedValidationsProps = TipModeProps | CheckModeProps
+
+export const RecommendedValidations = ({
+  mode,
+  title,
+  recommendations,
+  bulletRefs,
+  titleMarginLeft,
+  getConnectorHeight,
+  onLayout,
+  onBulletLayout,
+  onRecommendationLayout,
+}: RecommendedValidationsProps) => (
+  <Box
+    borderWidth={1}
+    borderStyle={mode === 'tip' ? 'dashed' : 'solid'}
+    borderRadius="md"
+    borderColor="text"
+    p="m"
+    onLayout={onLayout}
+  >
+    {mode === 'tip' && (
+      <Text variant="caption" mb="s" style={{ marginLeft: titleMarginLeft }}>
+        {title}
+      </Text>
+    )}
+    <Box rowGap="l">
+      {recommendations.map((text, index, array) => (
+        <Box key={index} flexDirection="row" alignItems="center" columnGap="m">
+          <Box alignItems="center">
+            <Box
+              ref={(ref: React.ComponentRef<typeof View>) => {
+                bulletRefs.current[index] = ref
+              }}
+              width={32}
+              height={32}
+              alignItems="center"
+              justifyContent="center"
+              borderWidth={1}
+              borderColor="text"
+              borderRadius="full"
+              onLayout={() => onBulletLayout(index)}
+            >
+              <Box
+                width={20}
+                height={20}
+                alignItems="center"
+                justifyContent="center"
+                borderWidth={1.5}
+                borderColor="primary"
+                borderRadius="full"
+              >
+                <Text color="primary" fontSize={10} fontWeight={600}>
+                  {mode === 'tip' ? index + 1 : '!'}
+                </Text>
+              </Box>
+            </Box>
+            {index !== array.length - 1 && (
+              <Box
+                position="absolute"
+                top={32}
+                width={1}
+                height={getConnectorHeight(index)}
+                bg="text"
+              />
+            )}
+          </Box>
+          <Text variant="caption" flex={1} onLayout={onRecommendationLayout}>
+            {text}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  </Box>
+)