@bifold/core 2.4.5 → 2.5.0

package/src/components/misc/CredentialCard11ActionFooter.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import { StyleSheet, View, TouchableOpacity } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-interface CredentialActionFooterProps {
-  onPress: GenericFn
-  text: string
-  testID: string
-  textColor?: string
-}
-
-const CredentialActionFooter = ({ onPress, text, testID, textColor }: CredentialActionFooterProps) => {
-  const { ColorPalette, TextTheme } = useTheme()
-  const styles = StyleSheet.create({
-    seperator: {
-      width: '100%',
-      height: 2,
-      marginVertical: 10,
-      backgroundColor: ColorPalette.grayscale.lightGrey,
-    },
-    touchable: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    credActionText: {
-      fontSize: 20,
-      fontWeight: TextTheme.bold.fontWeight,
-      color: textColor ?? ColorPalette.brand.credentialLink,
-    },
-  })
-
-  return (
-    <View>
-      <View style={styles.seperator}></View>
-      <View>
-        <TouchableOpacity onPress={onPress} testID={testIdWithKey(testID)} style={styles.touchable}>
-          <ThemedText style={styles.credActionText}>{text}</ThemedText>
-          <Icon
-            style={[styles.credActionText, { fontSize: styles.credActionText.fontSize + 5 }]}
-            name="chevron-right"
-          ></Icon>
-        </TouchableOpacity>
-      </View>
-    </View>
-  )
-}
-
-export default CredentialActionFooter

package/src/components/misc/CredentialCard11Issuer.tsx

@@ -1,74 +0,0 @@
-import { BrandingOverlay } from '@bifold/oca'
-import { BrandingOverlayType, CredentialOverlay } from '@bifold/oca/build/legacy'
-import { View } from 'react-native'
-import { testIdWithKey } from '../../utils/testable'
-import useCredentialCardStyles from '../../hooks/credential-card-styles'
-import { useTranslation } from 'react-i18next'
-import React from 'react'
-import { ThemedText } from '../texts/ThemedText'
-
-interface Props {
-  overlay: CredentialOverlay<BrandingOverlay>
-  overlayType: BrandingOverlayType
-  hasBody: boolean
-  proof?: boolean
-}
-
-const CredentialIssuerBody: React.FC<Props> = ({ overlay, overlayType, hasBody, proof }: Props) => {
-  const isBranding10 = overlayType === BrandingOverlayType.Branding10
-  const { styles } = useCredentialCardStyles(overlay, overlayType, proof)
-  const { t } = useTranslation()
-  if (!hasBody) return
-  return (
-    <>
-      {isBranding10 ? (
-        <View style={{ flexDirection: 'row' }}>
-          <ThemedText
-            variant="label"
-            testID={testIdWithKey('CredentialIssuer')}
-            style={[
-              styles.textContainer,
-              {
-                lineHeight: 19,
-                opacity: 0.8,
-                flex: 1,
-                flexWrap: 'wrap',
-              },
-            ]}
-          >
-            {overlay.metaOverlay?.issuer}
-          </ThemedText>
-        </View>
-      ) : (
-        <View style={styles.credentialIssuerContainer}>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignSelf: 'flex-end',
-            }}
-          >
-            <ThemedText
-              testID={testIdWithKey('CredentialIssuer')}
-              style={[
-                styles.textContainer,
-                {
-                  fontWeight: '500',
-                  fontSize: 12,
-                  lineHeight: 19,
-                  opacity: 0.8,
-                  textAlign: 'right',
-                },
-              ]}
-            >
-              {overlay.metaOverlay?.issuer !== 'Unknown Contact'
-                ? overlay.metaOverlay?.issuer
-                : t('Contacts.UnknownContact')}
-            </ThemedText>
-          </View>
-        </View>
-      )}
-    </>
-  )
-}
-
-export default CredentialIssuerBody

package/src/components/misc/CredentialCard11Logo.tsx

@@ -1,61 +0,0 @@
-import { BrandingOverlay } from '@bifold/oca'
-import { BrandingOverlayType, CredentialOverlay } from '@bifold/oca/build/legacy'
-import { Image, View } from 'react-native'
-import { toImageSource } from '../../utils/credential'
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import useCredentialCardStyles from '../../hooks/credential-card-styles'
-import { TOKENS, useServices } from '../../container-api'
-import { ThemedText } from '../../components/texts/ThemedText'
-
-interface CredentialCardLogo {
-  noLogoText: string
-  overlay: CredentialOverlay<BrandingOverlay>
-  elevated?: boolean
-}
-
-const CredentialCard11Logo: React.FC<CredentialCardLogo> = ({ noLogoText, overlay, elevated }: CredentialCardLogo) => {
-  const { TextTheme } = useTheme()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-  const isBranding11 = bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding11
-  const textColor =
-    overlay.brandingOverlay?.secondaryBackgroundColor && overlay.brandingOverlay.secondaryBackgroundColor !== ''
-      ? overlay.brandingOverlay.secondaryBackgroundColor
-      : overlay.brandingOverlay?.primaryBackgroundColor
-
-  const { styles, logoHeight } = useCredentialCardStyles(overlay, bundleResolver.getBrandingOverlayType())
-
-  return (
-    <View style={[styles.logoContainer, { elevation: elevated ? 5 : 0 }]}>
-      {overlay.brandingOverlay?.logo ? (
-        <Image
-          source={toImageSource(overlay.brandingOverlay?.logo)}
-          style={{
-            resizeMode: 'cover',
-            width: logoHeight,
-            height: logoHeight,
-            borderRadius: 8,
-          }}
-          testID={testIdWithKey('Logo')}
-        />
-      ) : (
-        <ThemedText
-          variant="bold"
-          style={[
-            TextTheme.bold,
-            {
-              fontSize: 0.5 * logoHeight,
-              alignSelf: 'center',
-              color: isBranding11 ? textColor : '#000',
-            },
-          ]}
-          testID={testIdWithKey('NoLogoText')}
-        >
-          {noLogoText.charAt(0).toUpperCase()}
-        </ThemedText>
-      )}
-    </View>
-  )
-}
-
-export default CredentialCard11Logo

package/src/components/misc/EmptyList.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-export interface EmptyListProps {
-  message?: string
-}
-
-const EmptyList: React.FC<EmptyListProps> = ({ message }) => {
-  const { t } = useTranslation()
-  const { ListItems, Assets, ColorPalette } = useTheme()
-
-  return (
-    <View style={{ paddingTop: 100, height: '100%', backgroundColor: ColorPalette.brand.primaryBackground }}>
-      <Assets.svg.emptyWallet fill={ListItems.emptyList.color} height={100} />
-      <ThemedText style={[ListItems.emptyList, { textAlign: 'center' }]} testID={testIdWithKey('NoneYet')}>
-        {message || t('Global.NoneYet!')}
-      </ThemedText>
-    </View>
-  )
-}
-
-export default EmptyList

package/src/components/misc/EmptyListContacts.tsx

@@ -1,55 +0,0 @@
-import { StackNavigationProp } from '@react-navigation/stack'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { ContactStackParams, Screens, Stacks } from '../../types/navigators'
-import Link from '../texts/Link'
-import { ThemedText } from '../texts/ThemedText'
-
-export interface EmptyListProps {
-  navigation: StackNavigationProp<ContactStackParams, Screens.Contacts>
-}
-
-const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
-  const { t } = useTranslation()
-  const { ListItems, Assets, ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      height: '100%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: 40,
-      paddingTop: 100,
-      backgroundColor: ColorPalette.brand.primaryBackground,
-    },
-    text: {
-      textAlign: 'center',
-      marginTop: 10,
-    },
-    link: {
-      textAlign: 'center',
-      marginTop: 10,
-      alignSelf: 'center',
-    },
-  })
-
-  const navigateToWhatAreContacts = () => {
-    navigation.getParent()?.navigate(Stacks.ContactStack, { screen: Screens.WhatAreContacts })
-  }
-
-  return (
-    <View style={styles.container}>
-      <Assets.svg.contactBook fill={ListItems.emptyList.color} height={120} />
-      <ThemedText variant="headingThree" style={[styles.text, { marginTop: 30 }]} accessibilityRole="header">
-        {t('Contacts.EmptyList')}
-      </ThemedText>
-      <ThemedText style={[ListItems.emptyList, styles.text]}>{t('Contacts.PeopleAndOrganizations')}</ThemedText>
-      <Link style={styles.link} linkText={t('Contacts.WhatAreContacts')} onPress={navigateToWhatAreContacts} />
-    </View>
-  )
-}
-
-export default EmptyListContacts

package/src/components/misc/ErrorBoundary.tsx

@@ -1,200 +0,0 @@
-import React, { ReactNode } from 'react'
-import { StyleSheet, Text, useWindowDimensions, ScrollView, View, TouchableOpacity } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { GenericFn } from 'types/fn'
-import { useTranslation } from 'react-i18next'
-import Button, { ButtonType } from '../buttons/Button'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-import { getBuildNumber, getVersion } from 'react-native-device-info'
-import { testIdWithKey } from '../../utils/testable'
-import { BifoldError } from '../../types/error'
-import { BifoldLogger } from '../../services/logger'
-
-const iconSize = 30
-
-interface ErrorBoundaryProps {
-  children: ReactNode
-  styles: ReturnType<typeof StyleSheet.create>
-  t: (key: string) => string
-  logger: BifoldLogger
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean
-  error: Error | null
-  reported: boolean
-}
-
-class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = { hasError: false, error: null, reported: false }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error, reported: false }
-  }
-
-  onDismissModalTouched = () => {
-    this.setState({ hasError: false, error: null, reported: false })
-  }
-
-  componentDidCatch(error: Error) {
-    const { logger } = this.props
-    logger.error('ErrorBoundary caught an error:', error)
-  }
-
-  reportError = (error: Error, logger: BifoldLogger) => {
-    if (error) {
-      this.setState({ reported: true })
-      logger.report(error as BifoldError)
-    }
-  }
-
-  render() {
-    const { hasError, error, reported } = this.state
-    const { t, styles, logger } = this.props
-
-    if (hasError && error) {
-      return (
-        <SafeAreaView style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
-          <ErrorBoundaryInfoBox
-            title={error.name}
-            description={error.message}
-            secondaryCallToActionTitle={reported ? t('Error.Reported') : t('Error.ReportThisProblem')}
-            secondaryCallToActionPressed={() => this.reportError(error, logger)}
-            secondaryCallToActionDisabled={reported}
-            onCallToActionPressed={this.onDismissModalTouched}
-            onCallToActionLabel={t('Global.Okay')}
-            showVersionFooter
-          />
-        </SafeAreaView>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-interface ErrorBoundaryInfoBoxProps {
-  title: string
-  description?: string
-  secondaryCallToActionTitle?: string
-  secondaryCallToActionPressed?: GenericFn
-  secondaryCallToActionDisabled?: boolean
-  onCallToActionPressed?: GenericFn
-  onCallToActionLabel?: string
-  showVersionFooter: boolean
-}
-
-const ErrorBoundaryInfoBox: React.FC<ErrorBoundaryInfoBoxProps> = ({
-  title,
-  description,
-  secondaryCallToActionTitle,
-  secondaryCallToActionPressed,
-  secondaryCallToActionDisabled,
-  onCallToActionPressed,
-  onCallToActionLabel,
-  showVersionFooter,
-}) => {
-  const { width } = useWindowDimensions()
-  const { t } = useTranslation()
-
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: 'lightgrey',
-      borderColor: 'darkgrey',
-      borderRadius: 5,
-      borderWidth: 1,
-      padding: 10,
-      minWidth: width - 2 * 25,
-      height: 400,
-    },
-    headerContainer: {
-      flexDirection: 'row',
-      paddingHorizontal: 5,
-      paddingTop: 5,
-    },
-    bodyContainer: {
-      flexDirection: 'column',
-      marginLeft: 10,
-      paddingHorizontal: 5,
-      paddingBottom: 5,
-      flexGrow: 0,
-    },
-    headerText: {
-      marginLeft: 7,
-      flexShrink: 1,
-      alignSelf: 'center',
-      color: 'darkred',
-    },
-    bodyText: {
-      flexShrink: 1,
-      marginVertical: 16,
-      color: 'darkred',
-    },
-    showDetailsText: {
-      fontWeight: 'normal',
-      color: 'black',
-    },
-  })
-  return (
-    <View style={styles.container}>
-      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-        <View style={styles.headerContainer}>
-          <Icon name={'error'} size={iconSize} color={'darkred'} />
-          <Text style={styles.headerText}>{title}</Text>
-        </View>
-        <TouchableOpacity accessibilityLabel={'dismiss'} accessibilityRole={'button'} onPress={onCallToActionPressed}>
-          <Icon name={'close'} size={iconSize} color={'black'} />
-        </TouchableOpacity>
-      </View>
-      <View style={{ maxHeight: 150, marginBottom: 8 }}>
-        <ScrollView>
-          <Text style={styles.bodyText}>{description}</Text>
-        </ScrollView>
-      </View>
-      {onCallToActionLabel && (
-        <View style={{ marginBottom: 8 }}>
-          <Button buttonType={ButtonType.Critical} title={onCallToActionLabel} onPress={onCallToActionPressed} />
-        </View>
-      )}
-      {secondaryCallToActionTitle && (
-        <Button
-          buttonType={ButtonType.Critical}
-          title={secondaryCallToActionTitle}
-          onPress={secondaryCallToActionPressed}
-          disabled={secondaryCallToActionDisabled}
-        />
-      )}
-      {showVersionFooter ? (
-        <Text
-          style={{ flex: 1, marginTop: 8, textAlign: 'center', color: 'darkred' }}
-          testID={testIdWithKey('VersionNumber')}
-        >
-          {`${t('Settings.Version')} ${getVersion()} (${getBuildNumber()})`}
-        </Text>
-      ) : null}
-    </View>
-  )
-}
-
-interface ErrorBoundaryWrapperProps {
-  children: ReactNode
-  logger: BifoldLogger
-}
-
-const ErrorBoundaryWrapper: React.FC<ErrorBoundaryWrapperProps> = ({ children, logger }) => {
-  const { t } = useTranslation()
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 20,
-    },
-  })
-
-  return (
-    <ErrorBoundary t={t} styles={styles} logger={logger}>
-      {children}
-    </ErrorBoundary>
-  )
-}
-
-export default ErrorBoundaryWrapper

package/src/components/misc/FauxHeader.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Platform, StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import IconButton, { ButtonLocation } from '../buttons/IconButton'
-import { ThemedText } from '../texts/ThemedText'
-
-interface FauxHeaderProps {
-  title: string
-  onBackPressed: () => void
-}
-
-// Used for modals that we want to look like regular screens
-const FauxHeader: React.FC<FauxHeaderProps> = ({ title, onBackPressed }) => {
-  const { ColorPalette, Spacing, NavigationTheme } = useTheme()
-  const { t } = useTranslation()
-  const styles = StyleSheet.create({
-    header: {
-      backgroundColor: NavigationTheme.colors.primary,
-      elevation: 0,
-      shadowOffset: { width: 0, height: 6 },
-      shadowRadius: 6,
-      shadowColor: ColorPalette.grayscale.black,
-      shadowOpacity: 0.15,
-      zIndex: 2,
-      borderWidth: 0,
-      flexDirection: 'row',
-      alignItems: 'stretch',
-      minHeight: Platform.OS === 'ios' ? 44 : 56,
-    },
-    left: {
-      justifyContent: 'center',
-      alignItems: 'flex-start',
-    },
-    titleContainer: {
-      marginHorizontal: Spacing.md,
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexShrink: 1,
-      maxWidth: '68%',
-      width: '100%',
-    },
-    title: {
-      textAlign: 'center',
-    },
-    right: {
-      justifyContent: 'center',
-      alignItems: 'flex-end',
-    },
-  })
-
-  return (
-    <View style={styles.header}>
-      <View style={styles.left}>
-        <IconButton
-          buttonLocation={ButtonLocation.Left}
-          accessibilityLabel={t('Global.Back')}
-          testID={testIdWithKey('BackButton')}
-          onPress={onBackPressed}
-          icon="chevron-left"
-        />
-      </View>
-      <View style={styles.titleContainer}>
-        <ThemedText variant={'headerTitle'} numberOfLines={1} ellipsizeMode="tail" style={styles.title}>
-          {title}
-        </ThemedText>
-      </View>
-      <View style={styles.right}></View>
-    </View>
-  )
-}
-
-export default FauxHeader