@bifold/core 2.4.5 → 2.5.0

package/src/components/record/RecordField.tsx

@@ -1,154 +0,0 @@
-import { CaptureBaseAttributeType } from '@bifold/oca'
-import { Attribute, BrandingOverlayType, Field } from '@bifold/oca/build/legacy'
-import startCase from 'lodash.startcase'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-
-import { hiddenFieldValue } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { isDataUrl } from '../../utils/helpers'
-import { testIdWithKey } from '../../utils/testable'
-
-import RecordBinaryField from './RecordBinaryField'
-import RecordDateIntField from './RecordDateIntField'
-import { useServices, TOKENS } from '../../container-api'
-import { ThemedText } from '../texts/ThemedText'
-
-interface RecordFieldProps {
-  field: Field
-  hideFieldValue?: boolean
-  hideBottomBorder?: boolean
-  shown?: boolean
-  onToggleViewPressed?: () => void
-  fieldLabel?: (field: Field) => React.ReactElement | null
-  fieldValue?: (field: Field) => React.ReactElement | null
-}
-
-export const validEncoding = 'base64'
-export const validFormat = new RegExp('^image/(jpeg|png|jpg)')
-
-interface AttributeValueParams {
-  field: Attribute
-  shown?: boolean
-  style?: Record<string, unknown>
-}
-
-export const AttributeValue: React.FC<AttributeValueParams> = ({ field, style, shown }) => {
-  const { ListItems } = useTheme()
-  const styles = StyleSheet.create({
-    text: {
-      ...ListItems.recordAttributeText,
-    },
-  })
-  if (
-    (field.encoding == validEncoding && field.format && validFormat.test(field.format) && field.value) ||
-    isDataUrl(field.value)
-  ) {
-    return <RecordBinaryField attributeValue={field.value as string} style={style} shown={shown} />
-  }
-  if (field.type == CaptureBaseAttributeType.DateInt || field.type == CaptureBaseAttributeType.DateTime) {
-    return <RecordDateIntField field={field} style={style} shown={shown} />
-  }
-  return (
-    <ThemedText style={style || styles.text} testID={testIdWithKey('AttributeValue')}>
-      {shown ? field.value : hiddenFieldValue}
-    </ThemedText>
-  )
-}
-
-const RecordField: React.FC<RecordFieldProps> = ({
-  field,
-  hideFieldValue = false,
-  hideBottomBorder = false,
-  shown = !hideFieldValue,
-  onToggleViewPressed = () => undefined,
-  fieldLabel = null,
-  fieldValue = null,
-}) => {
-  const { t } = useTranslation()
-  const { ListItems } = useTheme()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-  const styles = StyleSheet.create({
-    container: {
-      ...ListItems.recordContainer,
-      paddingHorizontal: bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10 ? 25 : 16,
-      paddingTop: 16,
-    },
-    border: {
-      ...ListItems.recordBorder,
-      borderBottomWidth: 2,
-      paddingTop: 12,
-    },
-    link: {
-      ...ListItems.recordLink,
-      paddingVertical: 2,
-    },
-    valueContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingTop: 5,
-    },
-    fieldLabel: {
-      flex: 3,
-    },
-    fieldValue: {
-      flex: 1,
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-    },
-    valueText: {
-      ...ListItems.recordAttributeText,
-      paddingVertical: 4,
-    },
-  })
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.valueContainer}>
-        <View style={styles.fieldLabel}>
-          {fieldLabel ? (
-            fieldLabel(field)
-          ) : (
-            <ThemedText style={ListItems.recordAttributeLabel} testID={testIdWithKey('AttributeName')}>
-              {field.label ?? startCase(field.name || '')}
-            </ThemedText>
-          )}
-        </View>
-
-        <View style={styles.fieldValue}>
-          {hideFieldValue ? (
-            <TouchableOpacity
-              accessible={true}
-              accessibilityLabel={shown ? t('Record.Hide') : t('Record.Show')}
-              accessibilityRole="button"
-              testID={testIdWithKey('ShowHide')}
-              activeOpacity={1}
-              onPress={onToggleViewPressed}
-              style={styles.link}
-            >
-              <ThemedText maxFontSizeMultiplier={1.2} style={ListItems.recordLink}>
-                {shown ? t('Record.Hide') : t('Record.Show')}
-              </ThemedText>
-            </TouchableOpacity>
-          ) : null}
-        </View>
-      </View>
-
-      <View style={styles.valueContainer}>
-        {fieldValue ? (
-          fieldValue(field)
-        ) : (
-          <>
-            <View style={styles.valueText}>
-              <AttributeValue field={field as Attribute} shown={shown} />
-            </View>
-          </>
-        )}
-      </View>
-      {<View style={[styles.border, hideBottomBorder && { borderBottomWidth: 0 }]} />}
-    </View>
-  )
-}
-
-export default RecordField

package/src/components/record/RecordFooter.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const RecordFooter: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: ColorPalette.brand.primaryBackground,
-      height: '100%',
-    },
-  })
-  return <View style={styles.container}>{children}</View>
-}
-
-export default RecordFooter

package/src/components/record/RecordHeader.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const RecordHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: ColorPalette.brand.primaryBackground,
-    },
-  })
-
-  return <View style={styles.container}>{children}</View>
-}
-
-export default RecordHeader

package/src/components/record/RecordRemove.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import { testIdWithKey } from '../../utils/testable'
-import { TOKENS, useServices } from '../../container-api'
-import { BrandingOverlayType } from '@bifold/oca/build/legacy'
-import { ThemedText } from '../texts/ThemedText'
-
-interface RecordRemoveProps {
-  onRemove?: GenericFn
-}
-
-const RecordRemove: React.FC<RecordRemoveProps> = ({ onRemove = () => null }) => {
-  const { t } = useTranslation()
-  const { TextTheme, ColorPalette, Assets } = useTheme()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-
-  const styles = StyleSheet.create({
-    headerText: {
-      ...TextTheme.normal,
-    },
-    footerText: {
-      color: ColorPalette.brand.link,
-    },
-    linkContainer: {
-      minHeight: TextTheme.normal.fontSize,
-      paddingVertical: 2,
-    },
-    credentialRemoveContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-    },
-  })
-
-  return (
-    <View
-      style={{
-        backgroundColor: ColorPalette.brand.secondaryBackground,
-        marginTop: 16,
-        paddingHorizontal: bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10 ? 25 : 16,
-        paddingVertical: 16,
-      }}
-    >
-      <TouchableOpacity
-        style={styles.credentialRemoveContainer}
-        accessible={true}
-        accessibilityLabel={t('CredentialDetails.RemoveFromWallet')}
-        accessibilityRole={'button'}
-        testID={testIdWithKey('RemoveFromWallet')}
-        activeOpacity={1}
-        onPress={onRemove}
-      >
-        <Assets.svg.iconDelete width={20} height={20} color={ColorPalette.semantic.error} />
-        <ThemedText style={[styles.footerText, { color: ColorPalette.semantic.error }]}>
-          {t('CredentialDetails.RemoveFromWallet')}
-        </ThemedText>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-export default RecordRemove

package/src/components/texts/HeaderTitle.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { ThemedText } from './ThemedText'
-
-interface Props {
-  children: React.ReactNode
-}
-
-// this component is used to create a custom header title that doesn't become oversized
-// https://reactnavigation.org/docs/native-stack-navigator#headertitle
-const HeaderTitle: React.FC<Props> = ({ children }) => {
-  return (
-    <ThemedText
-      adjustsFontSizeToFit
-      variant="headerTitle"
-      accessibilityRole="header"
-      numberOfLines={1}
-      ellipsizeMode="tail"
-      style={{ textAlign: 'center' }}
-    >
-      {children}
-    </ThemedText>
-  )
-}
-
-export default HeaderTitle

package/src/components/texts/HighlightTextBox.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from './ThemedText'
-
-export interface TextBoxProps {
-  children: string
-}
-
-const offset = 10
-
-const HighlightTextBox: React.FC<TextBoxProps> = ({ children }) => {
-  const { ColorPalette, OnboardingTheme } = useTheme()
-  const style = StyleSheet.create({
-    icon: {
-      marginRight: offset,
-    },
-    container: {
-      flexDirection: 'row',
-      backgroundColor: ColorPalette.brand.primaryBackground,
-    },
-    accentBox: {
-      marginRight: offset,
-      backgroundColor: ColorPalette.brand.highlight,
-      width: 8,
-    },
-    headerText: {
-      ...OnboardingTheme.bodyText,
-      flexShrink: 1,
-    },
-  })
-  return (
-    <View style={style.container}>
-      <View style={style.accentBox} />
-      <ThemedText style={[style.headerText, { paddingTop: offset, paddingBottom: offset }]}>{children}</ThemedText>
-    </View>
-  )
-}
-
-export default HighlightTextBox

package/src/components/texts/InfoTextBox.tsx

@@ -1,129 +0,0 @@
-import React from 'react'
-import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { useTheme } from '../../contexts/theme'
-import { InfoBoxType } from '../misc/InfoBox'
-import { ThemedText } from './ThemedText'
-
-export interface TextBoxProps {
-  children: React.ReactElement | string
-  type?: InfoBoxType
-  iconVerticalPosition?: 'high' | 'middle'
-  iconHorizontalPosition?: 'left' | 'right'
-  style?: ViewStyle
-  textStyle?: TextStyle
-}
-
-const iconSize = 30
-const offset = 10
-
-const InfoTextBox: React.FC<TextBoxProps> = ({
-  children,
-  type = InfoBoxType.Info,
-  iconVerticalPosition = 'high',
-  iconHorizontalPosition = 'left',
-  style = {},
-  textStyle = {},
-}) => {
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      padding: 10,
-      borderRadius: 5,
-      borderWidth: 1,
-      backgroundColor: ColorPalette.notification.info,
-      borderColor: ColorPalette.notification.infoBorder,
-      ...style,
-    },
-    row: {
-      flexDirection: iconHorizontalPosition === 'left' ? 'row' : 'row-reverse',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    text: {
-      alignSelf: 'center',
-      flex: 1,
-      flexWrap: 'wrap',
-      color: ColorPalette.notification.infoText,
-      ...textStyle,
-    },
-    iconContainer: {
-      marginRight: iconHorizontalPosition === 'left' ? offset : 0,
-      marginLeft: iconHorizontalPosition === 'right' ? offset : 0,
-      alignSelf: iconVerticalPosition === 'high' ? 'flex-start' : 'center',
-    },
-  })
-
-  let iconName = 'info'
-  let iconColor = ColorPalette.notification.infoIcon
-
-  switch (type) {
-    case InfoBoxType.Info:
-      break
-
-    case InfoBoxType.Success:
-      iconName = 'check-circle'
-      iconColor = ColorPalette.notification.successIcon
-      styles.container = {
-        ...styles.container,
-        backgroundColor: ColorPalette.notification.success,
-        borderColor: ColorPalette.notification.successBorder,
-      }
-      styles.text = {
-        ...styles.text,
-        color: ColorPalette.notification.successText,
-      }
-      break
-
-    case InfoBoxType.Warn:
-      iconName = 'warning'
-      iconColor = ColorPalette.notification.warnIcon
-      styles.container = {
-        ...styles.container,
-        backgroundColor: ColorPalette.notification.warn,
-        borderColor: ColorPalette.notification.warnBorder,
-      }
-      styles.text = {
-        ...styles.text,
-        color: ColorPalette.notification.warnText,
-      }
-      break
-
-    case InfoBoxType.Error:
-      iconName = 'error'
-      iconColor = ColorPalette.notification.errorIcon
-      styles.container = {
-        ...styles.container,
-        backgroundColor: ColorPalette.notification.error,
-        borderColor: ColorPalette.notification.errorBorder,
-      }
-      styles.text = {
-        ...styles.text,
-        color: ColorPalette.notification.errorText,
-      }
-      break
-
-    default:
-      throw new Error('InfoTextBox type needs to be set correctly')
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.row}>
-        <View style={styles.iconContainer}>
-          <Icon name={iconName} size={iconSize} color={iconColor} />
-        </View>
-        {typeof children === 'string' ? (
-          <ThemedText variant="bold" style={styles.text}>
-            {children}
-          </ThemedText>
-        ) : (
-          <>{children}</>
-        )}
-      </View>
-    </View>
-  )
-}
-
-export default InfoTextBox

package/src/components/texts/Link.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import { StyleSheet, TextStyle, TextProps } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdForAccessabilityLabel, testIdWithKey } from '../../utils/testable'
-import { ThemedText } from './ThemedText'
-
-interface LinkProps {
-  linkText: string
-  style?: TextStyle
-  textProps?: TextProps
-  onPress: () => void
-  testID?: string
-}
-
-const Link: React.FC<LinkProps> = ({ linkText, onPress, style = {}, testID, ...textProps }) => {
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    link: {
-      color: ColorPalette.brand.link,
-      textDecorationLine: 'underline',
-      alignSelf: 'flex-start',
-    },
-  })
-
-  return (
-    <ThemedText
-      style={[styles.link, style]}
-      accessibilityLabel={linkText}
-      accessible
-      accessibilityRole={'link'}
-      testID={testID ? testID : testIdWithKey(testIdForAccessabilityLabel(linkText))}
-      onPress={onPress}
-      {...textProps}
-    >
-      {linkText}
-    </ThemedText>
-  )
-}
-
-export default Link

package/src/components/texts/Text.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { Text as T, StyleSheet, TextStyle } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-interface Props {
-  children: React.ReactNode
-  style?: TextStyle
-}
-
-const Text: React.FC<Props> = ({ children, style }) => {
-  const { TextTheme } = useTheme()
-  const styles = StyleSheet.create({
-    text: {
-      color: TextTheme.normal.color,
-    },
-  })
-  return <T style={[styles.text, style]}>{children}</T>
-}
-
-export default Text

package/src/components/texts/ThemedText.tsx

@@ -1,24 +0,0 @@
-import { ITextTheme } from '../../theme'
-import { useTheme } from '../../contexts/theme'
-import { Text, type TextProps } from 'react-native'
-import React from 'react'
-
-export type ThemedTextProps = TextProps & {
-  variant?: keyof ITextTheme
-}
-
-/**
- *
- * @param {variant} variant - A key of the TextTheme object that is defined in the theme file
- * @param {maxFontSizeMultiplier} maxFontSizeMultiplier - It allows to override the maxFontSizeMultiplier. Default value is 2
- * @param {style} style - It allows to add extra styles to the component in addition to the one coming from the variant option
- * @param {rest} rest - It allows to pass the rest of the props to the Text component
- * @returns
- */
-export function ThemedText({ variant = 'normal', maxFontSizeMultiplier, style, ...rest }: ThemedTextProps) {
-  const { TextTheme, maxFontSizeMultiplier: maxFontSize } = useTheme()
-
-  return (
-    <Text maxFontSizeMultiplier={maxFontSizeMultiplier ?? maxFontSize} style={[TextTheme[variant], style]} {...rest} />
-  )
-}

package/src/components/toast/BaseToast.tsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import { View, useWindowDimensions, StyleSheet, 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 Toast from 'react-native-toast-message'
-import { ThemedText } from '../texts/ThemedText'
-
-interface BaseToastProps {
-  title?: string
-  body?: string
-  toastType: string
-  onPress?: GenericFn
-  onShow?: GenericFn
-  onHide?: GenericFn
-}
-
-export enum ToastType {
-  Success = 'success',
-  Info = 'info',
-  Warn = 'warn',
-  Error = 'error',
-}
-
-const BaseToast: React.FC<BaseToastProps> = ({ title, body, toastType, onPress = () => null }) => {
-  const { TextTheme, borderRadius, borderWidth, ColorPalette } = useTheme()
-  const { width } = useWindowDimensions()
-  const iconSize = 24
-  let iconName = ''
-  let backgroundColor = ''
-  let borderColor = ''
-  let iconColor = ''
-  let textColor = ''
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'flex-start',
-      flexDirection: 'row',
-      marginTop: 25,
-      borderWidth,
-      borderRadius,
-    },
-    textContainer: {
-      flexShrink: 1,
-      marginVertical: 15,
-      marginRight: 10,
-    },
-    icon: {
-      marginTop: 15,
-      marginHorizontal: 15,
-    },
-    title: {
-      fontWeight: TextTheme.bold.fontWeight,
-    },
-    body: {
-      marginTop: 10,
-    },
-  })
-  switch (toastType) {
-    case ToastType.Success:
-      iconName = 'check-circle'
-      backgroundColor = ColorPalette.notification.success
-      borderColor = ColorPalette.notification.successBorder
-      iconColor = ColorPalette.notification.successIcon
-      textColor = ColorPalette.notification.successText
-      break
-
-    case ToastType.Info:
-      iconName = 'info'
-      backgroundColor = ColorPalette.notification.info
-      borderColor = ColorPalette.notification.infoBorder
-      iconColor = ColorPalette.notification.infoIcon
-      textColor = ColorPalette.notification.infoText
-      break
-
-    case ToastType.Warn:
-      iconName = 'report-problem'
-      backgroundColor = ColorPalette.notification.warn
-      borderColor = ColorPalette.notification.warnBorder
-      iconColor = ColorPalette.notification.warnIcon
-      textColor = ColorPalette.notification.warnText
-      break
-
-    case ToastType.Error:
-      iconName = 'error'
-      backgroundColor = ColorPalette.notification.error
-      borderColor = ColorPalette.notification.errorBorder
-      iconColor = ColorPalette.notification.errorIcon
-      textColor = ColorPalette.notification.errorText
-      break
-
-    default:
-      throw new Error('ToastType was not set correctly.')
-  }
-
-  return (
-    <TouchableOpacity activeOpacity={1} onPress={() => onPress()}>
-      <View style={[styles.container, { backgroundColor, borderColor, width: width - width * 0.1 }]}>
-        <View style={{ flex: 1, flexDirection: 'row' }}>
-          <Icon style={styles.icon} name={iconName} color={iconColor} size={iconSize} />
-          <View style={styles.textContainer}>
-            <ThemedText style={[styles.title, { color: textColor }]} testID={testIdWithKey('ToastTitle')}>
-              {title}
-            </ThemedText>
-            {body && (
-              <ThemedText style={[styles.body, { color: textColor }]} testID={testIdWithKey('ToastBody')}>
-                {body}
-              </ThemedText>
-            )}
-          </View>
-        </View>
-        <View>
-          <TouchableOpacity
-            onPress={() => {
-              Toast.hide()
-            }}
-          >
-            <Icon style={styles.icon} name={'close'} color={iconColor} size={iconSize} />
-          </TouchableOpacity>
-        </View>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-export default BaseToast

package/src/components/toast/ToastConfig.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { ToastShowParams } from 'react-native-toast-message'
-
-import BaseToast, { ToastType } from './BaseToast'
-
-export const Config = {
-  success: (props: ToastShowParams) => (
-    <BaseToast title={props?.text1} body={props?.text2} toastType={ToastType.Success} />
-  ),
-  warn: (props: ToastShowParams) => (
-    <BaseToast title={props?.text1} body={props?.text2} toastType={ToastType.Warn} onPress={props?.onPress} />
-  ),
-  error: (props: ToastShowParams) => (
-    <BaseToast title={props?.text1} body={props?.text2} toastType={ToastType.Error} onPress={props?.onPress} />
-  ),
-  info: (props: ToastShowParams) => (
-    <BaseToast title={props?.text1} body={props?.text2} toastType={ToastType.Info} onPress={props?.onPress} />
-  ),
-}
-
-export default Config