@bifold/core 2.4.5 → 2.5.0

package/src/components/tour/AttachTourStep.tsx

@@ -1,73 +0,0 @@
-import React, { cloneElement, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef } from 'react'
-import { StyleProp, useWindowDimensions, View } from 'react-native'
-
-import { TourContext } from '../../contexts/tour/tour-context'
-import { TourID } from '../../types/tour'
-import { testIdWithKey } from '../../utils/testable'
-
-export interface ChildProps<T> {
-  children?: ReactNode
-  ref: RefObject<unknown>
-  style: StyleProp<T>
-}
-
-export interface AttachTourStepProps<T> {
-  children: ReactElement<ChildProps<T>>
-  /**
-   * When `AttachTourStep` wraps a Functional Component, it needs to add an
-   * aditional `View` on top of it to be able to measure the layout upon
-   * render. This prop allows to define the behavior of the width of such
-   * `View`. When set to `false`, it adjusts to its contents, when set to
-   * `true`, it stretches out and tries to fill it view.
-   *
-   * **Note:** This prop has no effect when wrapping native components or
-   * componentes created with `React.forwardRef`, which pass the `ref` to
-   * another native component.
-   *
-   * @default false
-   */
-  fill?: boolean
-  /**
-   * The index of the `steps` array to which the step is attatched to.
-   */
-  index: number
-  /**
-   * The id of the tour this step belongs to (ie. home tour or proof request tour or etc.)
-   */
-  tourID: TourID
-}
-
-/**
- * React functional component used to attach and step to another component by
- * only wrapping it. Use its props to customize the behavior.
- *
- * @param props the component props
- * @returns an AttachTourStep React element
- */
-export function AttachTourStep<T>({ children, fill = false, index, tourID }: AttachTourStepProps<T>): ReactElement {
-  const { currentStep, currentTour, changeSpot } = useContext(TourContext)
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
-  const childRef = useRef<View>(null)
-
-  useEffect(() => {
-    if (currentTour === tourID && currentStep === index) {
-      childRef.current?.measureInWindow((x, y, width, height) => {
-        changeSpot({ height, width, x, y })
-      })
-    }
-  }, [currentTour, tourID, currentStep, index, windowWidth, windowHeight, changeSpot])
-
-  const { style, ...rest } = children.props
-  const childStyle = style ?? {}
-  return (
-    <View
-      testID={testIdWithKey('AttachTourStep')}
-      ref={childRef}
-      style={{ alignSelf: fill ? 'stretch' : 'center', ...childStyle }}
-      collapsable={false}
-      focusable={false}
-    >
-      {cloneElement(children, rest, children.props?.children)}
-    </View>
-  )
-}

package/src/components/tour/CredentialOfferTourSteps.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
-
-import { TourBox } from './TourBox'
-
-export const credentialOfferTourSteps: TourStep[] = [
-  {
-    Render: (props: RenderProps) => {
-      const { currentTour, currentStep, next, stop, previous } = props
-      const { t } = useTranslation()
-      const { ColorPalette, TextTheme } = useTheme()
-      return (
-        <TourBox
-          title={t('Tour.CredentialOffers')}
-          hideLeft
-          rightText={t('Tour.Done')}
-          onRight={stop}
-          currentTour={currentTour}
-          currentStep={currentStep}
-          previous={previous}
-          stop={stop}
-          next={next}
-        >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPalette.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
-            {t('Tour.CredentialOffersDescription')}
-          </Text>
-        </TourBox>
-      )
-    },
-  },
-]

package/src/components/tour/CredentialsTourSteps.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
-
-import { TourBox } from './TourBox'
-
-export const credentialsTourSteps: TourStep[] = [
-  {
-    Render: (props: RenderProps) => {
-      const { currentTour, currentStep, next, stop, previous } = props
-      const { t } = useTranslation()
-      const { ColorPalette, TextTheme } = useTheme()
-      return (
-        <TourBox
-          title={t('Tour.AddCredentials')}
-          hideLeft
-          rightText={t('Tour.Done')}
-          onRight={stop}
-          currentTour={currentTour}
-          currentStep={currentStep}
-          previous={previous}
-          stop={stop}
-          next={next}
-        >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPalette.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
-            {t('Tour.AddCredentialsDescription')}
-          </Text>
-        </TourBox>
-      )
-    },
-  },
-]

package/src/components/tour/HomeTourSteps.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
-
-import { TourBox } from './TourBox'
-
-export const homeTourSteps: TourStep[] = [
-  {
-    Render: (props: RenderProps) => {
-      const { currentTour, currentStep, next, stop, previous } = props
-      const { t } = useTranslation()
-      const { ColorPalette, TextTheme } = useTheme()
-      return (
-        <TourBox
-          title={t('Tour.AddAndShare')}
-          leftText={t('Tour.Skip')}
-          rightText={t('Tour.Next')}
-          onLeft={stop}
-          onRight={next}
-          currentTour={currentTour}
-          currentStep={currentStep}
-          previous={previous}
-          stop={stop}
-          next={next}
-        >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPalette.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
-            {t('Tour.AddAndShareDescription')}
-          </Text>
-        </TourBox>
-      )
-    },
-  },
-  {
-    Render: (props: RenderProps) => {
-      const { currentTour, currentStep, next, stop, previous } = props
-      const { t } = useTranslation()
-      const { ColorPalette, TextTheme } = useTheme()
-      return (
-        <TourBox
-          title={t('Tour.Notifications')}
-          leftText={t('Tour.Back')}
-          rightText={t('Tour.Next')}
-          onLeft={previous}
-          onRight={next}
-          currentTour={currentTour}
-          currentStep={currentStep}
-          next={next}
-          stop={stop}
-          previous={previous}
-        >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPalette.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
-            {t('Tour.NotificationsDescription')}
-          </Text>
-        </TourBox>
-      )
-    },
-  },
-  {
-    Render: (props: RenderProps) => {
-      const { currentTour, currentStep, next, stop, previous } = props
-      const { t } = useTranslation()
-      const { ColorPalette, TextTheme } = useTheme()
-      return (
-        <TourBox
-          title={t('Tour.YourCredentials')}
-          leftText={t('Tour.Back')}
-          rightText={t('Tour.Done')}
-          onLeft={previous}
-          onRight={stop}
-          currentTour={currentTour}
-          currentStep={currentStep}
-          next={next}
-          stop={stop}
-          previous={previous}
-        >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPalette.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
-            {t('Tour.YourCredentialsDescription')}
-          </Text>
-        </TourBox>
-      )
-    },
-  },
-]

package/src/components/tour/ProofRequestTourSteps.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { RenderProps, TourStep } from '../../contexts/tour/tour-context'
-
-import { TourBox } from './TourBox'
-
-export const proofRequestTourSteps: TourStep[] = [
-  {
-    Render: (props: RenderProps) => {
-      const { currentTour, currentStep, next, stop, previous } = props
-      const { t } = useTranslation()
-      const { ColorPalette, TextTheme } = useTheme()
-      return (
-        <TourBox
-          title={t('Tour.ProofRequests')}
-          hideLeft
-          rightText={t('Tour.Done')}
-          onRight={stop}
-          currentTour={currentTour}
-          currentStep={currentStep}
-          previous={previous}
-          stop={stop}
-          next={next}
-        >
-          <Text
-            style={{
-              ...TextTheme.normal,
-              color: ColorPalette.notification.infoText,
-            }}
-            allowFontScaling={false}
-          >
-            {t('Tour.ProofRequestsDescription')}
-          </Text>
-        </TourBox>
-      )
-    },
-  },
-]

package/src/components/tour/SpotCutout.tsx

@@ -1,65 +0,0 @@
-import React, { useContext, useEffect, useRef } from 'react'
-import { Animated, Easing } from 'react-native'
-import { Rect } from 'react-native-svg'
-
-import { TourContext } from '../../contexts/tour/tour-context'
-
-const AnimatedRectangle = Animated.createAnimatedComponent(Rect)
-
-export const SpotCutout = () => {
-  const { spot } = useContext(TourContext)
-  const spotPadding = 20
-
-  const start = useRef(new Animated.ValueXY({ x: 0, y: 0 }))
-  const width = useRef(new Animated.Value(0))
-  const height = useRef(new Animated.Value(0))
-
-  useEffect(() => {
-    const { height: spotHeight, width: spotWidth, x, y } = spot
-    const w = spotWidth + spotPadding
-    const h = spotHeight + spotPadding
-    const paddedX = x - spotPadding / 2
-    const paddedY = y - spotPadding / 2
-
-    const transition = (): Animated.CompositeAnimation => {
-      return Animated.parallel([
-        Animated.timing(start.current, {
-          duration: 500,
-          easing: Easing.out(Easing.exp),
-          toValue: { x: paddedX, y: paddedY },
-          useNativeDriver: false,
-        }),
-        Animated.timing(width.current, {
-          duration: 500,
-          easing: Easing.out(Easing.exp),
-          toValue: w,
-          useNativeDriver: false,
-        }),
-        Animated.timing(height.current, {
-          duration: 500,
-          easing: Easing.out(Easing.exp),
-          toValue: h,
-          useNativeDriver: false,
-        }),
-      ])
-    }
-
-    transition().start()
-  }, [spot])
-
-  if ([spot.height, spot.width].every((value) => value <= 0)) {
-    return null
-  }
-
-  return (
-    <AnimatedRectangle
-      width={width.current}
-      height={height.current}
-      x={start.current.x}
-      y={start.current.y}
-      opacity={1}
-      rx={10}
-      fill="black"
-    />
-  )
-}

package/src/components/tour/TourBox.tsx

@@ -1,255 +0,0 @@
-import React, { ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { RenderProps } from '../../contexts/tour/tour-context'
-import { testIdWithKey } from '../../utils/testable'
-
-enum PaginationDotTypes {
-  Filled,
-  Unfilled,
-}
-
-export interface TourBoxProps extends RenderProps {
-  children?: ReactNode
-  /**
-   * Optionally hide the left button
-   */
-  hideLeft?: boolean
-  /**
-   * Optionally hide the right button
-   */
-  hideRight?: boolean
-  /**
-   * Text for the left button
-   */
-  leftText?: string
-  /**
-   * Text for the right button
-   */
-  rightText?: string
-  /**
-   * Callback for when the left button is pressed.
-   */
-  onLeft?: () => void
-  /**
-   * Callback for when the right button is pressed.
-   */
-  onRight?: () => void
-  title?: string
-  /**
-   * The 1-indexed step it is on
-   */
-  stepOn?: number
-  /**
-   * The 1-indexed number of steps in the current tour
-   */
-  stepsOutOf?: number
-}
-
-/**
- * A built-in TourBox component which can be used as a tooltip container for
- * each step. While it's somewhat customizable, it's not required and can be
- * replaced by your own component.
- *
- * @param props the component props
- * @returns A TourBox React element
- */
-export function TourBox(props: TourBoxProps): ReactElement {
-  const { t } = useTranslation()
-  const {
-    leftText = t('Tour.Back'),
-    rightText = t('Tour.Next'),
-    title,
-    hideLeft,
-    hideRight,
-    onLeft,
-    onRight,
-    children,
-    stop,
-    stepOn,
-    stepsOutOf,
-  } = props
-  const { TextTheme, ColorPalette, OnboardingTheme } = useTheme()
-  const iconSize = 30
-  const dismissIconName = 'clear'
-  const iconColor = ColorPalette.notification.infoIcon
-  const [paginationDots, setPaginationDots] = useState<PaginationDotTypes[]>([])
-  const [xPos, setXPos] = useState(0)
-  const swipeThreshold = 75
-
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: ColorPalette.notification.info,
-      borderColor: ColorPalette.notification.infoBorder,
-      borderRadius: 5,
-      borderWidth: 1,
-      padding: 20,
-      flex: 1,
-      margin: 'auto',
-    },
-    headerContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    headerTextContainer: {
-      flexGrow: 1,
-    },
-    headerText: {
-      ...TextTheme.headingThree,
-      alignSelf: 'flex-start',
-      color: ColorPalette.notification.infoText,
-    },
-    dismissIcon: {
-      alignSelf: 'flex-end',
-    },
-    body: {
-      flex: 1,
-      marginVertical: 16,
-    },
-    footerContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-around',
-    },
-    navText: {
-      ...TextTheme.bold,
-      color: ColorPalette.brand.primary,
-    },
-    pagerContainer: {
-      flexDirection: 'row',
-      alignSelf: 'center',
-    },
-    pagerDot: {
-      ...OnboardingTheme.pagerDot,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      width: 10,
-      height: 10,
-      borderRadius: 5,
-      marginHorizontal: 5,
-    },
-    pagerDotActive: {
-      backgroundColor: OnboardingTheme.pagerDotActive.color,
-    },
-    pagerDotInactive: {
-      backgroundColor: 'transparent',
-    },
-  })
-
-  const accessibilityLabel = useMemo(() => {
-    return stepOn && stepsOutOf ? t('Tour.AccessibilitySteps', { stepOn, stepsOutOf, title }) : title
-  }, [stepOn, stepsOutOf, title, t])
-
-  const handleLeft = useCallback((): void => {
-    onLeft?.()
-  }, [onLeft])
-
-  const handleRight = useCallback((): void => {
-    onRight?.()
-  }, [onRight])
-
-  useEffect(() => {
-    const arr: PaginationDotTypes[] = []
-    if (typeof stepOn === 'number' && typeof stepsOutOf === 'number') {
-      for (let i = 1; i <= stepsOutOf; i++) {
-        if (i === stepOn) {
-          arr.push(PaginationDotTypes.Filled)
-        } else {
-          arr.push(PaginationDotTypes.Unfilled)
-        }
-      }
-    }
-
-    setPaginationDots(arr)
-  }, [stepOn, stepsOutOf])
-
-  return (
-    <View
-      style={styles.container}
-      onTouchStart={(e) => setXPos(e.nativeEvent.pageX)}
-      onTouchEnd={(e) => {
-        // if swipe right
-        if (xPos - e.nativeEvent.pageX > swipeThreshold) {
-          handleRight()
-
-          // if swipe left
-        } else if (e.nativeEvent.pageX - xPos > swipeThreshold) {
-          handleLeft()
-        }
-      }}
-    >
-      <View style={styles.headerContainer}>
-        <View style={styles.headerTextContainer}>
-          <Text
-            allowFontScaling={false}
-            style={styles.headerText}
-            testID={testIdWithKey('HeaderText')}
-            accessibilityRole="header"
-            accessibilityLabel={accessibilityLabel}
-          >
-            {title}
-          </Text>
-        </View>
-        <View style={styles.dismissIcon}>
-          <TouchableOpacity
-            onPress={stop}
-            testID={testIdWithKey('Close')}
-            accessibilityLabel={t('Global.Close')}
-            accessibilityRole={'button'}
-            hitSlop={hitSlop}
-          >
-            <Icon name={dismissIconName} size={iconSize} color={iconColor} />
-          </TouchableOpacity>
-        </View>
-      </View>
-      <View style={styles.body}>{children}</View>
-
-      {(!hideLeft || !hideRight) && (
-        <View style={styles.footerContainer}>
-          <View>
-            {!hideLeft && (
-              <TouchableOpacity
-                accessibilityLabel={leftText}
-                accessibilityRole={'button'}
-                testID={testIdWithKey('Back')}
-                onPress={handleLeft}
-                hitSlop={hitSlop}
-              >
-                <Text allowFontScaling={false} style={styles.navText}>
-                  {leftText}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-          <View style={styles.pagerContainer}>
-            {paginationDots.map((dot, index) =>
-              dot === PaginationDotTypes.Filled ? (
-                <View key={index} style={[styles.pagerDot, styles.pagerDotActive]}></View>
-              ) : (
-                <View key={index} style={[styles.pagerDot, styles.pagerDotInactive]}></View>
-              )
-            )}
-          </View>
-          <View>
-            {!hideRight && (
-              <TouchableOpacity
-                accessibilityLabel={rightText}
-                accessibilityRole={'button'}
-                testID={testIdWithKey('Next')}
-                onPress={handleRight}
-                hitSlop={hitSlop}
-              >
-                <Text allowFontScaling={false} style={styles.navText}>
-                  {rightText}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-        </View>
-      )}
-    </View>
-  )
-}