@bifold/core 1.0.0

package/src/components/tour/HomeTourSteps.tsx

@@ -0,0 +1,104 @@
+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 { ColorPallet, 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: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.AddAndShareDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+  {
+    Render: (props: RenderProps) => {
+      const { currentTour, currentStep, next, stop, previous } = props
+      const { t } = useTranslation()
+      const { ColorPallet, 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: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.NotificationsDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+  {
+    Render: (props: RenderProps) => {
+      const { currentTour, currentStep, next, stop, previous } = props
+      const { t } = useTranslation()
+      const { ColorPallet, 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: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.YourCredentialsDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+]

package/src/components/tour/ProofRequestTourSteps.tsx

@@ -0,0 +1,41 @@
+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 { ColorPallet, 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: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.ProofRequestsDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+]

package/src/components/tour/SpotCutout.tsx

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,255 @@
+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, ColorPallet, OnboardingTheme } = useTheme()
+  const iconSize = 30
+  const dismissIconName = 'clear'
+  const iconColor = ColorPallet.notification.infoIcon
+  const [paginationDots, setPaginationDots] = useState<PaginationDotTypes[]>([])
+  const [xPos, setXPos] = useState(0)
+  const swipeThreshold = 75
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: ColorPallet.notification.info,
+      borderColor: ColorPallet.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: ColorPallet.notification.infoText,
+    },
+    dismissIcon: {
+      alignSelf: 'flex-end',
+    },
+    body: {
+      flex: 1,
+      marginVertical: 16,
+    },
+    footerContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+    },
+    navText: {
+      ...TextTheme.bold,
+      color: ColorPallet.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>
+  )
+}

package/src/components/tour/TourOverlay.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useContext, useRef, useState, useEffect } from 'react'
+import { ColorValue, LayoutRectangle, View, ViewStyle, useWindowDimensions } from 'react-native'
+import { Defs, Mask, Rect, Svg } from 'react-native-svg'
+
+import { tourMargin } from '../../constants'
+import { BackdropPressBehavior, OSConfig, TourContext, TourStep } from '../../contexts/tour/tour-context'
+import { Optional, TourID } from '../../types/tour'
+import { testIdWithKey } from '../../utils/testable'
+
+import { SpotCutout } from './SpotCutout'
+
+interface TourOverlayProps {
+  backdropOpacity: number
+  color: ColorValue
+  currentTour: TourID
+  currentStep: Optional<number>
+  nativeDriver: boolean | OSConfig<boolean>
+  onBackdropPress: Optional<BackdropPressBehavior>
+  changeSpot: (spot: LayoutRectangle) => void
+  spot: LayoutRectangle
+  tourStep: TourStep
+}
+
+export const TourOverlay = (props: TourOverlayProps) => {
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
+  const { color, currentTour, currentStep, onBackdropPress, backdropOpacity, changeSpot, spot, tourStep } = props
+  const [viewBox, setViewBox] = useState(`0 0 ${windowWidth} ${windowHeight}`)
+  const { next, previous, start, stop } = useContext(TourContext)
+
+  const [tooltipStyle, setTooltipStyle] = useState<ViewStyle>({})
+
+  const tooltipRef = useRef<View>(null)
+
+  const handleBackdropPress = useCallback((): void => {
+    const handler = tourStep.onBackdropPress ?? onBackdropPress
+
+    if (handler !== undefined && currentStep !== undefined) {
+      switch (handler) {
+        case 'continue':
+          return next()
+
+        case 'stop':
+          return stop()
+
+        default:
+          return handler({ currentTour, currentStep, changeSpot, next, previous, start, stop })
+      }
+    }
+  }, [tourStep, onBackdropPress, currentTour, currentStep, changeSpot, next, previous, start, stop])
+
+  useEffect(() => {
+    const gapBetweenSpotAndTooltip = 50
+    // if origin spot (ie. no spotlight)
+    if (spot.x === 0 && spot.y === 0) {
+      // a relative margin so that the tooltip doesn't start at the very top of the screen
+      const oneSixthOfScreenHeight = windowHeight / 6
+      setTooltipStyle({
+        left: tourMargin,
+        right: tourMargin,
+        top: oneSixthOfScreenHeight,
+      })
+      // if spot is in the lower half of the screen
+    } else if (spot.y >= windowHeight / 2) {
+      const bottom = windowHeight - spot.y + gapBetweenSpotAndTooltip
+      setTooltipStyle({
+        left: tourMargin,
+        right: tourMargin,
+        bottom,
+      })
+      // if spot is in the upper half of the screen
+    } else {
+      const top = spot.y + gapBetweenSpotAndTooltip + spot.height
+      setTooltipStyle({
+        left: tourMargin,
+        right: tourMargin,
+        top,
+      })
+    }
+  }, [windowWidth, windowHeight, spot.width, spot.height, spot.x, spot.y])
+
+  useEffect(() => {
+    // + 1 pixel to account for an svg size rounding issue that would cause
+    // a tiny gap around the overlay
+    setViewBox(`0 0 ${windowWidth + 1} ${windowHeight + 1}`)
+  }, [windowWidth, windowHeight])
+
+  return currentStep !== undefined ? (
+    <View
+      accessibilityViewIsModal
+      style={{ position: 'absolute', top: 0, left: 0, height: windowHeight + 1, width: windowWidth + 1 }}
+      testID={testIdWithKey('SpotlightOverlay')}
+    >
+      <Svg
+        testID={testIdWithKey('SpotOverlay')}
+        height={windowHeight + 1}
+        width={windowWidth + 1}
+        viewBox={viewBox}
+        onPress={handleBackdropPress}
+        shouldRasterizeIOS={true}
+        renderToHardwareTextureAndroid={true}
+      >
+        <Defs>
+          <Mask id="mask" x={0} y={0} height={windowHeight + 1} width={windowWidth + 1}>
+            <Rect height={windowHeight + 1} width={windowWidth + 1} fill="#fff" />
+            <SpotCutout />
+          </Mask>
+        </Defs>
+
+        <Rect
+          height={windowHeight + 1}
+          width={windowWidth + 1}
+          fill={color}
+          mask="url(#mask)"
+          opacity={backdropOpacity}
+        />
+      </Svg>
+
+      <View
+        ref={tooltipRef}
+        testID={testIdWithKey('SpotTooltip')}
+        style={{ ...tooltipStyle, opacity: 1, position: 'absolute' }}
+      >
+        <tourStep.Render
+          currentTour={currentTour}
+          currentStep={currentStep}
+          changeSpot={changeSpot}
+          next={next}
+          previous={previous}
+          stop={stop}
+        />
+      </View>
+    </View>
+  ) : null
+}

package/src/components/views/CredentialCardLogo.tsx

@@ -0,0 +1,77 @@
+import { Image, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { BrandingOverlay } from '@bifold/oca'
+import { BrandingOverlayType, CredentialOverlay } from '@bifold/oca/build/legacy'
+import { useTheme } from '../../contexts/theme'
+import { toImageSource } from '../../utils/credential'
+import { useMemo } from 'react'
+import { ThemedText } from '../texts/ThemedText'
+
+type Props = {
+  overlay: CredentialOverlay<BrandingOverlay>
+  brandingOverlayType?: BrandingOverlayType
+}
+
+const CredentialCardLogo: React.FC<Props> = ({
+  overlay,
+  brandingOverlayType = BrandingOverlayType.Branding10,
+}: Props) => {
+  const { CredentialCardShadowTheme } = useTheme()
+  const { fontScale } = useWindowDimensions()
+  const logoHeight = brandingOverlayType === BrandingOverlayType.Branding10 ? 80 : 48
+  const paddingHorizontal = 24
+  const isBranding11 = brandingOverlayType === BrandingOverlayType.Branding11
+  const textColor =
+    overlay.brandingOverlay?.secondaryBackgroundColor && overlay.brandingOverlay.secondaryBackgroundColor !== ''
+      ? overlay.brandingOverlay.secondaryBackgroundColor
+      : overlay.brandingOverlay?.primaryBackgroundColor
+
+  const logoText = useMemo(() => {
+    if (brandingOverlayType === BrandingOverlayType.Branding11) {
+      return (overlay.metaOverlay?.issuer ?? 'I').charAt(0).toUpperCase()
+    }
+    return (overlay.metaOverlay?.name ?? overlay.metaOverlay?.issuer ?? 'C').charAt(0).toUpperCase()
+  }, [brandingOverlayType, overlay])
+
+  const styles = StyleSheet.create({
+    logoContainer: {
+      width: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
+      height: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
+      backgroundColor: '#ffffff',
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      ...(brandingOverlayType === BrandingOverlayType.Branding10 && {
+        top: -0.5 * logoHeight,
+        left: paddingHorizontal,
+        marginBottom: -1 * logoHeight,
+        ...CredentialCardShadowTheme,
+      }),
+    },
+  })
+
+  return (
+    <View style={styles.logoContainer}>
+      {overlay.brandingOverlay?.logo ? (
+        <Image
+          source={toImageSource(overlay.brandingOverlay?.logo)}
+          style={{
+            resizeMode: 'cover',
+            width: logoHeight,
+            height: logoHeight,
+            borderRadius: 8,
+          }}
+        />
+      ) : (
+        <ThemedText
+          variant="title"
+          style={{ fontSize: 0.5 * logoHeight, color: isBranding11 ? textColor : '#000' }}
+          accessible={false}
+        >
+          {logoText}
+        </ThemedText>
+      )}
+    </View>
+  )
+}
+
+export default CredentialCardLogo