@bifold/core 2.4.6 → 2.6.0

package/src/components/animated/CredentialAdded.tsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const slideTiming: Animated.TimingAnimationConfig = {
-  toValue: -15,
-  duration: 1200,
-  useNativeDriver: true,
-}
-const fadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 1,
-  duration: 600,
-  useNativeDriver: true,
-}
-const animationDelay = 300
-
-const CredentialAdded: React.FC = () => {
-  const { Assets } = useTheme()
-  const cardFadeAnim = useRef(new Animated.Value(0))
-  const checkFadeAnim = useRef(new Animated.Value(0))
-  const tranAnim = useRef(new Animated.Value(-90))
-  const style = StyleSheet.create({
-    container: {
-      flexDirection: 'column',
-    },
-    back: {
-      backgroundColor: 'transparent',
-      position: 'absolute',
-      marginTop: -30,
-    },
-    front: {
-      backgroundColor: 'transparent',
-    },
-    card: {
-      backgroundColor: 'transparent',
-      position: 'absolute',
-      marginLeft: 10,
-    },
-    check: {
-      alignItems: 'center',
-      marginBottom: 10,
-    },
-  })
-
-  useEffect(() => {
-    setTimeout(() => {
-      Animated.sequence([
-        Animated.timing(cardFadeAnim.current, fadeTiming),
-        Animated.timing(tranAnim.current, slideTiming),
-        Animated.timing(checkFadeAnim.current, fadeTiming),
-      ]).start()
-    }, animationDelay)
-  }, [])
-
-  return (
-    <View style={style.container}>
-      <Animated.View style={[{ opacity: checkFadeAnim.current }, style.check]}>
-        <Assets.svg.checkInCircle {...{ height: 45, width: 45 }} />
-      </Animated.View>
-      <View>
-        <Assets.svg.walletBack style={style.back} {...{ height: 110, width: 110 }} />
-        <Animated.View style={{ opacity: cardFadeAnim.current, transform: [{ translateY: tranAnim.current }] }}>
-          <Assets.svg.credentialCard style={style.card} {...{ height: 110, width: 110 }} />
-        </Animated.View>
-        <Assets.svg.walletFront style={style.front} {...{ height: 140, width: 140 }} />
-      </View>
-    </View>
-  )
-}
-
-export default CredentialAdded

package/src/components/animated/CredentialPending.tsx

@@ -1,63 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const slideTiming: Animated.TimingAnimationConfig = {
-  toValue: -15,
-  duration: 1400,
-  useNativeDriver: true,
-}
-const fadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 1,
-  duration: 400,
-  useNativeDriver: true,
-}
-const animationDelay = 300
-
-const CredentialPending: React.FC = () => {
-  const { Assets } = useTheme()
-  const fadeAnim = useRef(new Animated.Value(0))
-  const tranAnim = useRef(new Animated.Value(-90))
-  const style = StyleSheet.create({
-    container: {
-      flexDirection: 'column',
-    },
-    back: {
-      backgroundColor: 'transparent',
-      position: 'absolute',
-      marginTop: -30,
-    },
-    front: {
-      backgroundColor: 'transparent',
-    },
-    card: {
-      backgroundColor: 'transparent',
-      position: 'absolute',
-      marginLeft: 10,
-    },
-  })
-
-  useEffect(() => {
-    setTimeout(() => {
-      Animated.loop(
-        Animated.sequence([
-          Animated.timing(fadeAnim.current, fadeTiming),
-          Animated.timing(tranAnim.current, slideTiming),
-        ])
-      ).start()
-    }, animationDelay)
-  }, [])
-
-  return (
-    <View style={style.container}>
-      <Assets.svg.walletBack style={style.back} {...{ height: 110, width: 110 }} />
-      <Animated.View style={{ opacity: fadeAnim.current, transform: [{ translateY: tranAnim.current }] }}>
-        <Assets.svg.credentialCard style={style.card} {...{ height: 110, width: 110 }} />
-      </Animated.View>
-      <Assets.svg.walletFront style={style.front} {...{ height: 140, width: 140 }} />
-    </View>
-  )
-}
-
-export default CredentialPending

package/src/components/animated/LoadingIndicator.tsx

@@ -1,49 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated, Image } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-
-const timing: Animated.TimingAnimationConfig = {
-  toValue: 1,
-  duration: 2000,
-  useNativeDriver: true,
-}
-
-const LoadingIndicator: React.FC = () => {
-  const { ColorPalette, Assets } = useTheme()
-  const rotationAnim = useRef(new Animated.Value(0))
-  const rotation = rotationAnim.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  })
-  const style = StyleSheet.create({
-    animation: {
-      position: 'absolute',
-    },
-  })
-  const imageDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 200,
-    width: 200,
-  }
-
-  useEffect(() => {
-    Animated.loop(Animated.timing(rotationAnim.current, timing)).start()
-  }, [])
-
-  return (
-    <View style={{ alignItems: 'center', justifyContent: 'center' }} testID={testIdWithKey('LoadingActivityIndicator')}>
-      <Image
-        source={Assets.img.logoSecondary.src}
-        style={{ width: Assets.img.logoSecondary.width, height: Assets.img.logoSecondary.height, objectFit: 'contain' }}
-        testID={testIdWithKey('LoadingActivityIndicatorImage')}
-      />
-      <Animated.View style={[style.animation, { transform: [{ rotate: rotation }] }]}>
-        <Assets.svg.activityIndicator {...imageDisplayOptions} />
-      </Animated.View>
-    </View>
-  )
-}
-
-export default LoadingIndicator

package/src/components/animated/PresentationLoading.tsx

@@ -1,52 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const timing: Animated.TimingAnimationConfig = {
-  toValue: 1,
-  duration: 2000,
-  useNativeDriver: true,
-}
-
-const PresentationLoading: React.FC = () => {
-  const { ColorPalette, Assets } = useTheme()
-  const rotationAnim = useRef(new Animated.Value(0))
-  const rotation = rotationAnim.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  })
-  const style = StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    animation: {
-      position: 'absolute',
-      zIndex: 1,
-    },
-  })
-  const displayOptions = {
-    fill: ColorPalette.notification.infoText,
-  }
-  const animatedCircleDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 250,
-    width: 250,
-  }
-
-  useEffect(() => {
-    Animated.loop(Animated.timing(rotationAnim.current, timing)).start()
-  }, [])
-
-  return (
-    <View style={style.container}>
-      <Assets.svg.chatLoading style={style.animation} {...displayOptions} />
-      <Animated.View style={{ transform: [{ rotate: rotation }] }}>
-        <Assets.svg.activityIndicator {...animatedCircleDisplayOptions} />
-      </Animated.View>
-    </View>
-  )
-}
-
-export default PresentationLoading

package/src/components/animated/RecordLoading.tsx

@@ -1,75 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { StyleProp, ViewStyle, View, StyleSheet, Animated, useWindowDimensions } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-
-type RecordLoadingProps = {
-  style?: StyleProp<ViewStyle>
-}
-
-const fadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 0.4,
-  duration: 1100,
-  useNativeDriver: true,
-}
-
-const borderRadius = 10
-
-const RecordLoading: React.FC<RecordLoadingProps> = ({ style }) => {
-  const { width } = useWindowDimensions()
-  const padding = width * 0.05
-  const logoHeight = width * 0.12
-  const { ColorPalette } = useTheme()
-  const rowFadeAnim = useRef(new Animated.Value(1))
-  const myStyle = StyleSheet.create({
-    container: {
-      flexDirection: 'column',
-    },
-    rectangle: {
-      backgroundColor: ColorPalette.grayscale.lightGrey,
-      height: 30,
-      marginVertical: 5,
-      borderRadius,
-    },
-    margin: {
-      backgroundColor: ColorPalette.grayscale.lightGrey,
-      width: 40,
-      borderTopLeftRadius: borderRadius,
-      borderBottomLeftRadius: borderRadius,
-    },
-    logo: {
-      marginLeft: -1 * logoHeight + padding,
-      marginTop: padding,
-      backgroundColor: ColorPalette.grayscale.lightGrey,
-      height: logoHeight,
-      width: logoHeight,
-      borderRadius,
-    },
-  })
-
-  useEffect(() => {
-    Animated.loop(Animated.timing(rowFadeAnim.current, fadeTiming)).start()
-  }, [])
-
-  return (
-    <Animated.View
-      style={[{ opacity: rowFadeAnim.current, backgroundColor: ColorPalette.grayscale.white, borderRadius: 15 }, style]}
-    >
-      <View style={myStyle.container} testID={testIdWithKey('RecordLoading')}>
-        <View style={{ flexDirection: 'row' }}>
-          <View style={myStyle.margin} />
-          <View style={myStyle.logo} />
-          <View style={{ flexGrow: 1, marginLeft: 15, marginTop: 15, marginBottom: 15 }}>
-            <View style={[myStyle.rectangle, { width: '100%', height: 20 }]} />
-            <View style={[myStyle.rectangle, { width: '75%', height: 25 }]} />
-            <View style={[myStyle.rectangle, { width: '35%', height: 20, marginTop: 20 }]} />
-            <View style={[myStyle.rectangle, { width: '90%', height: 25 }]} />
-          </View>
-        </View>
-      </View>
-    </Animated.View>
-  )
-}
-
-export default RecordLoading

package/src/components/animated/SendingProof.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const timing: Animated.TimingAnimationConfig = {
-  toValue: 1,
-  duration: 2000,
-  useNativeDriver: true,
-}
-
-const SendingProof: React.FC = () => {
-  const { ColorPalette, Assets } = useTheme()
-  const rotationAnim = useRef(new Animated.Value(0))
-  const rotation = rotationAnim.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  })
-  const style = StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    animation: {
-      position: 'absolute',
-    },
-  })
-  const credentialInHandDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 130,
-    width: 130,
-  }
-  const animatedCircleDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 250,
-    width: 250,
-  }
-
-  useEffect(() => {
-    Animated.loop(Animated.timing(rotationAnim.current, timing)).start()
-  }, [])
-
-  return (
-    <View style={style.container}>
-      <Assets.svg.credentialInHand style={style.animation} {...credentialInHandDisplayOptions} />
-      <Animated.View style={{ transform: [{ rotate: rotation }] }}>
-        <Assets.svg.activityIndicator {...animatedCircleDisplayOptions} />
-      </Animated.View>
-    </View>
-  )
-}
-
-export default SendingProof

package/src/components/animated/SentProof.tsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const ringFadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 0,
-  duration: 600,
-  useNativeDriver: true,
-}
-const checkFadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 1,
-  duration: 600,
-  useNativeDriver: true,
-}
-
-const SentProof: React.FC = () => {
-  const { ColorPalette, Assets } = useTheme()
-  const ringFadeAnim = useRef(new Animated.Value(1))
-  const checkFadeAnim = useRef(new Animated.Value(0))
-  const style = StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    credential: {
-      marginTop: 25,
-    },
-    ring: {
-      flexGrow: 3,
-      position: 'absolute',
-    },
-    check: {
-      position: 'absolute',
-    },
-  })
-  const credentialInHandDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 130,
-    width: 130,
-  }
-  const animatedCircleDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 250,
-    width: 250,
-  }
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(ringFadeAnim.current, ringFadeTiming),
-      Animated.timing(checkFadeAnim.current, checkFadeTiming),
-    ]).start()
-  }, [])
-
-  return (
-    <View style={style.container}>
-      <View style={{ alignItems: 'center' }}>
-        <Assets.svg.credentialInHand style={style.credential} {...credentialInHandDisplayOptions} />
-        <Animated.View style={[{ opacity: checkFadeAnim.current }, style.check]}>
-          <Assets.svg.checkInCircle {...{ height: 45, width: 45 }} />
-        </Animated.View>
-      </View>
-      <View style={style.ring}>
-        <Animated.View style={{ opacity: ringFadeAnim.current }}>
-          <Assets.svg.activityIndicator {...animatedCircleDisplayOptions} />
-        </Animated.View>
-      </View>
-    </View>
-  )
-}
-
-export default SentProof

package/src/components/buttons/Button-api.tsx

@@ -1,46 +0,0 @@
-import { TouchableOpacity } from 'react-native'
-
-export enum ButtonType {
-  Critical,
-  Primary,
-  Secondary,
-  Tertiary,
-  ModalCritical,
-  ModalPrimary,
-  ModalSecondary,
-  ModalTertiary,
-}
-
-export interface ButtonProps extends React.PropsWithChildren {
-  title: string
-  buttonType: ButtonType
-  accessibilityLabel?: string
-  accessibilityHint?: string
-  maxfontSizeMultiplier?: number
-  testID?: string
-  onPress?: () => void
-  disabled?: boolean
-}
-
-export enum ButtonState {
-  Default = 'default',
-  Disabled = 'disabled',
-  Active = 'active',
-}
-
-export enum ButtonStyleNames {
-  Critical_Default = 'Critical' + '_' + ButtonState.Default,
-  Critical_Disabled = 'Critical' + '_' + ButtonState.Disabled,
-  Critical_Active = 'Critical' + '_' + ButtonState.Active,
-}
-/*
-type stylesType = { readonly [key in ButtonStyleNames]?: ViewStyle | TextStyle | ImageStyle}
-const styles: stylesType = StyleSheet.create({
-  [ButtonStyleNames.Critical_Default]: {},
-  [ButtonType.Secondary]: {},
-  [ButtonType.ModalCritical]: {},
-  [ButtonType.ModalPrimary]: {},
-  [ButtonType.ModalSecondary]: {},
-})
-*/
-export type Button = React.FC<ButtonProps & React.RefAttributes<TouchableOpacity>>

package/src/components/buttons/Button.tsx

@@ -1,125 +0,0 @@
-import React, { forwardRef, useState } from 'react'
-import { TouchableOpacity, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-import { Button, ButtonType, ButtonProps } from './Button-api'
-import { ThemedText } from '../texts/ThemedText'
-
-const ButtonImplComponent = (
-  {
-    title,
-    buttonType,
-    accessibilityLabel,
-    accessibilityHint,
-    testID,
-    onPress,
-    disabled = false,
-    maxfontSizeMultiplier,
-    children,
-  }: ButtonProps,
-  ref: React.LegacyRef<TouchableOpacity>
-) => {
-  const { Buttons, heavyOpacity } = useTheme()
-  const buttonStyles = {
-    [ButtonType.Critical]: {
-      color: Buttons.critical,
-      colorDisabled: Buttons.criticalDisabled,
-      text: Buttons.criticalText,
-      textDisabled: Buttons.criticalTextDisabled,
-    },
-    [ButtonType.Primary]: {
-      color: Buttons.primary,
-      colorDisabled: Buttons.primaryDisabled,
-      text: Buttons.primaryText,
-      textDisabled: Buttons.primaryTextDisabled,
-    },
-    [ButtonType.Secondary]: {
-      color: Buttons.secondary,
-      colorDisabled: Buttons.secondaryDisabled,
-      text: Buttons.secondaryText,
-      textDisabled: Buttons.secondaryTextDisabled,
-    },
-    [ButtonType.Tertiary]: {
-      color: Buttons.tertiary,
-      colorDisabled: Buttons.tertiaryDisabled,
-      text: Buttons.tertiaryText,
-      textDisabled: Buttons.tertiaryTextDisabled,
-    },
-    [ButtonType.ModalCritical]: {
-      color: Buttons.modalCritical,
-      colorDisabled: Buttons.modalCriticalDisabled,
-      text: Buttons.modalCriticalText,
-      textDisabled: Buttons.modalCriticalTextDisabled,
-    },
-    [ButtonType.ModalPrimary]: {
-      color: Buttons.modalPrimary,
-      colorDisabled: Buttons.modalPrimaryDisabled,
-      text: Buttons.modalPrimaryText,
-      textDisabled: Buttons.modalPrimaryTextDisabled,
-    },
-    [ButtonType.ModalSecondary]: {
-      color: Buttons.modalSecondary,
-      colorDisabled: Buttons.modalSecondaryDisabled,
-      text: Buttons.modalSecondaryText,
-      textDisabled: Buttons.modalSecondaryTextDisabled,
-    },
-    [ButtonType.ModalTertiary]: {
-      color: Buttons.modalTertiary,
-      colorDisabled: Buttons.modalTertiaryDisabled,
-      text: Buttons.modalTertiaryText,
-      textDisabled: Buttons.modalTertiaryTextDisabled,
-    },
-  }
-  const [isActive, setIsActive] = useState<boolean>(false)
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      accessible
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole={'button'}
-      onPressIn={() => setIsActive(!disabled && true)}
-      onPressOut={() => setIsActive(false)}
-      testID={testID}
-      style={[
-        buttonStyles[buttonType].color,
-        disabled && buttonStyles[buttonType].colorDisabled,
-        isActive &&
-          (buttonType === ButtonType.Secondary || buttonType === ButtonType.Tertiary) && {
-            backgroundColor: Buttons.primary.backgroundColor,
-          },
-      ]}
-      disabled={disabled}
-      activeOpacity={heavyOpacity}
-      ref={ref}
-    >
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        {children}
-        <ThemedText
-          maxFontSizeMultiplier={maxfontSizeMultiplier}
-          style={[
-            buttonStyles[buttonType].text,
-            disabled && buttonStyles[buttonType].textDisabled,
-            isActive && { textDecorationLine: 'underline' },
-            isActive && buttonType === ButtonType.Secondary && { color: Buttons.primaryText.color },
-          ]}
-        >
-          {title}
-        </ThemedText>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-const ButtonImpl = forwardRef<TouchableOpacity, ButtonProps>(ButtonImplComponent)
-export default ButtonImpl
-export { ButtonType, ButtonImpl }
-export type { Button, ButtonProps }

package/src/components/buttons/HeaderHome.tsx

@@ -1,25 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { Screens, TabStacks } from '../../types/navigators'
-import { testIdWithKey } from '../../utils/testable'
-
-import IconButton, { ButtonLocation } from './IconButton'
-
-const HeaderRightHome: React.FC = () => {
-  const { t } = useTranslation()
-  const navigation = useNavigation()
-
-  return (
-    <IconButton
-      buttonLocation={ButtonLocation.Right}
-      accessibilityLabel={t('Global.Home')}
-      testID={testIdWithKey('HomeButton')}
-      onPress={() => navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })}
-      icon="home"
-    />
-  )
-}
-
-export default HeaderRightHome