@bifold/core 1.0.0

package/src/screens/Onboarding.tsx

@@ -0,0 +1,162 @@
+import { useNavigation, useFocusEffect } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { Ref, useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Animated, BackHandler, FlatList, View, ViewStyle, useWindowDimensions } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import IconButton, { ButtonLocation } from '../components/buttons/IconButton'
+import { Pagination } from '../components/misc/Pagination'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+import { AuthenticateStackParams } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
+export interface OnboardingStyleSheet {
+  container: ViewStyle
+  carouselContainer: ViewStyle
+  pagerContainer: ViewStyle
+  pagerDot: ViewStyle
+  pagerDotActive: ViewStyle
+  pagerDotInactive: ViewStyle
+  pagerPosition: ViewStyle
+  pagerNavigationButton: ViewStyle
+}
+
+interface OnboardingProps {
+  pages: Array<Element>
+  nextButtonText: string
+  previousButtonText: string
+  style: OnboardingStyleSheet
+  disableSkip?: boolean
+}
+
+const Onboarding: React.FC<OnboardingProps> = ({
+  pages,
+  nextButtonText,
+  previousButtonText,
+  style,
+  disableSkip = false,
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const flatList: Ref<FlatList> = useRef(null)
+  const scrollX = useRef(new Animated.Value(0)).current
+  const { t } = useTranslation()
+  const navigation = useNavigation<StackNavigationProp<AuthenticateStackParams>>()
+  const [, dispatch] = useStore()
+  const { width } = useWindowDimensions()
+
+  const onViewableItemsChangedRef = useRef(({ viewableItems }: any) => {
+    if (!viewableItems[0]) {
+      return
+    }
+
+    setActiveIndex(viewableItems[0].index)
+  })
+
+  const viewabilityConfigRef = useRef({
+    viewAreaCoveragePercentThreshold: 60,
+  })
+
+  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+    useNativeDriver: false,
+  })
+
+  const next = useCallback(() => {
+    if (activeIndex + 1 < pages.length) {
+      flatList?.current?.scrollToIndex({
+        index: activeIndex + 1,
+        animated: true,
+      })
+    }
+  }, [activeIndex, pages, flatList])
+
+  const previous = useCallback(() => {
+    if (activeIndex !== 0) {
+      flatList?.current?.scrollToIndex({
+        index: activeIndex - 1,
+        animated: true,
+      })
+    }
+  }, [activeIndex, flatList])
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: Element; index: number }) => (
+      <View key={index} style={[{ width }, style.carouselContainer]}>
+        {item as React.ReactNode}
+      </View>
+    ),
+    [width, style.carouselContainer]
+  )
+
+  const onSkipTouched = useCallback(() => {
+    dispatch({
+      type: DispatchAction.DID_COMPLETE_TUTORIAL,
+    })
+  }, [dispatch])
+
+  useEffect(() => {
+    !disableSkip &&
+      navigation.setOptions({
+        headerRight: () => (
+          <IconButton
+            buttonLocation={ButtonLocation.Right}
+            accessibilityLabel={t('Onboarding.SkipA11y')}
+            testID={testIdWithKey('Skip')}
+            onPress={onSkipTouched}
+            icon="chevron-right"
+            text={t('Global.Skip')}
+          />
+        ),
+      })
+
+    if (!disableSkip && activeIndex + 1 === pages.length) {
+      navigation.setOptions({
+        headerRight: () => false,
+      })
+    }
+  }, [disableSkip, navigation, t, onSkipTouched, activeIndex, pages])
+
+  useFocusEffect(
+    useCallback(() => {
+      const onBackPress = () => {
+        BackHandler.exitApp()
+
+        return true
+      }
+
+      BackHandler.addEventListener('hardwareBackPress', onBackPress)
+
+      return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress)
+    }, [])
+  )
+
+  return (
+    <SafeAreaView style={style.container} edges={['left', 'right', 'bottom']}>
+      <FlatList
+        ref={flatList}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        style={{ width }}
+        data={pages}
+        renderItem={renderItem}
+        viewabilityConfig={viewabilityConfigRef.current}
+        onViewableItemsChanged={onViewableItemsChangedRef.current}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+      />
+      <Pagination
+        pages={pages}
+        activeIndex={activeIndex}
+        nextButtonText={nextButtonText}
+        previousButtonText={previousButtonText}
+        scrollX={scrollX}
+        style={style}
+        next={next}
+        previous={previous}
+      />
+    </SafeAreaView>
+  )
+}
+
+export default Onboarding

package/src/screens/OnboardingPages.tsx

@@ -0,0 +1,212 @@
+import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ScrollView, StyleSheet, View, TouchableWithoutFeedback } from 'react-native'
+import { SvgProps } from 'react-native-svg'
+
+import CredentialList from '../assets/img/credential-list.svg'
+import ScanShare from '../assets/img/scan-share.svg'
+import Button, { ButtonType } from '../components/buttons/Button'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+import { GenericFn } from '../types/fn'
+import { OnboardingStackParams, Screens } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
+
+import { useTheme } from '../contexts/theme'
+
+import { OnboardingStyleSheet } from './Onboarding'
+import { ThemedText } from '../components/texts/ThemedText'
+
+export const createCarouselStyle = (OnboardingTheme: any) => {
+  return StyleSheet.create<OnboardingStyleSheet>({
+    container: {
+      ...OnboardingTheme.container,
+      flex: 1,
+      alignItems: 'center',
+    },
+    carouselContainer: {
+      ...OnboardingTheme.carouselContainer,
+      flexDirection: 'column',
+    },
+    pagerContainer: {
+      flexShrink: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 30,
+    },
+    pagerDot: {
+      ...OnboardingTheme.pagerDot,
+      borderWidth: 1,
+      borderStyle: 'solid',
+    },
+    pagerDotActive: {
+      ...OnboardingTheme.pagerDotActive,
+    },
+    pagerDotInactive: {
+      ...OnboardingTheme.pagerDotInactive,
+    },
+    pagerPosition: {
+      position: 'relative',
+      top: 0,
+    },
+    pagerNavigationButton: {
+      ...OnboardingTheme.pagerNavigationButton,
+    },
+  })
+}
+
+export const createStyles = (OnboardingTheme: any) => {
+  return StyleSheet.create({
+    headerText: {
+      ...OnboardingTheme.headerText,
+    },
+    bodyText: {
+      ...OnboardingTheme.bodyText,
+      flexShrink: 1,
+    },
+    point: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginLeft: 20,
+      marginTop: 10,
+      marginRight: 20,
+      marginBottom: 10,
+    },
+    icon: {
+      marginRight: 10,
+    },
+  })
+}
+
+const createImageDisplayOptions = (OnboardingTheme: any) => {
+  return {
+    ...OnboardingTheme.imageDisplayOptions,
+    height: 180,
+    width: 180,
+  }
+}
+
+const CustomPages = (onTutorialCompleted: GenericFn, OnboardingTheme: any) => {
+  const { Assets } = useTheme()
+  const { t } = useTranslation()
+  const styles = createStyles(OnboardingTheme)
+  const imageDisplayOptions = createImageDisplayOptions(OnboardingTheme)
+  return (
+    <>
+      <ScrollView style={{ padding: 20 }}>
+        <View style={{ alignItems: 'center' }}>
+          <Assets.svg.secureImage {...imageDisplayOptions} />
+        </View>
+        <View style={{ marginBottom: 20 }}>
+          <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
+            Ornare suspendisse sed nisi lacus
+          </ThemedText>
+          <ThemedText style={[styles.bodyText, { marginTop: 25 }]} testID={testIdWithKey('BodyText')}>
+            Enim facilisis gravida neque convallis a cras semper. Suscipit adipiscing bibendum est ultricies integer
+            quis auctor elit sed.
+          </ThemedText>
+        </View>
+      </ScrollView>
+      <View style={{ marginTop: 'auto', margin: 20 }}>
+        <Button
+          title={t('Global.GetStarted')}
+          accessibilityLabel={t('Global.GetStarted')}
+          testID={testIdWithKey('GetStarted')}
+          onPress={onTutorialCompleted}
+          buttonType={ButtonType.Primary}
+        />
+      </View>
+    </>
+  )
+}
+
+const guides: Array<{ image: React.FC<SvgProps>; title: string; body: string; devModeListener?: boolean }> = [
+  {
+    image: CredentialList,
+    title: 'Lorem ipsum dolor sit amet',
+    body: 'Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.',
+    devModeListener: true,
+  },
+  {
+    image: ScanShare,
+    title: 'Excepteur sint occaecat ',
+    body: 'Mollis aliquam ut porttitor leo a diam sollicitudin tempor.',
+  },
+]
+
+export const createPageWith = (
+  PageImage: React.FC<SvgProps>,
+  title: string,
+  body: string,
+  OnboardingTheme: any,
+  devModeListener?: boolean,
+  onDevModeTouched?: () => void
+) => {
+  const styles = createStyles(OnboardingTheme)
+  const imageDisplayOptions = createImageDisplayOptions(OnboardingTheme)
+  const titleElement = (
+    <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
+      {title}
+    </ThemedText>
+  )
+  return (
+    <ScrollView style={{ padding: 20 }}>
+      <View style={{ alignItems: 'center' }}>{<PageImage style={imageDisplayOptions} />}</View>
+      <View style={{ marginBottom: 20 }}>
+        {devModeListener ? (
+          <TouchableWithoutFeedback testID={testIdWithKey('DeveloperModeTouch')} onPress={onDevModeTouched}>
+            {titleElement}
+          </TouchableWithoutFeedback>
+        ) : (
+          titleElement
+        )}
+        <ThemedText style={[styles.bodyText, { marginTop: 25 }]} testID={testIdWithKey('BodyText')}>
+          {body}
+        </ThemedText>
+      </View>
+    </ScrollView>
+  )
+}
+
+const OnboardingPages = (onTutorialCompleted: GenericFn, OnboardingTheme: any): Array<Element> => {
+  const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
+  const [, dispatch] = useStore()
+  const onDevModeEnabled = () => {
+    dispatch({
+      type: DispatchAction.ENABLE_DEVELOPER_MODE,
+      payload: [true],
+    })
+    navigation.getParent()?.navigate(Screens.Developer)
+  }
+  const developerOptionCount = useRef(0)
+  const touchCountToEnableBiometrics = 9
+
+  const incrementDeveloperMenuCounter = () => {
+    if (developerOptionCount.current >= touchCountToEnableBiometrics) {
+      developerOptionCount.current = 0
+      if (onDevModeEnabled) {
+        onDevModeEnabled()
+      }
+      return
+    }
+
+    developerOptionCount.current = developerOptionCount.current + 1
+  }
+  return [
+    ...guides.map((g) =>
+      createPageWith(
+        g.image,
+        g.title,
+        g.body,
+        OnboardingTheme,
+        g.devModeListener,
+        g.devModeListener ? incrementDeveloperMenuCounter : undefined
+      )
+    ),
+    CustomPages(onTutorialCompleted, OnboardingTheme),
+  ]
+}
+
+export default OnboardingPages