@bifold/core 1.0.0

package/src/components/texts/InfoTextBox.tsx

@@ -0,0 +1,129 @@
+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 { ColorPallet } = useTheme()
+  const styles = StyleSheet.create({
+    container: {
+      padding: 10,
+      borderRadius: 5,
+      borderWidth: 1,
+      backgroundColor: ColorPallet.notification.info,
+      borderColor: ColorPallet.notification.infoBorder,
+      ...style,
+    },
+    row: {
+      flexDirection: iconHorizontalPosition === 'left' ? 'row' : 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    text: {
+      alignSelf: 'center',
+      flex: 1,
+      flexWrap: 'wrap',
+      color: ColorPallet.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 = ColorPallet.notification.infoIcon
+
+  switch (type) {
+    case InfoBoxType.Info:
+      break
+
+    case InfoBoxType.Success:
+      iconName = 'check-circle'
+      iconColor = ColorPallet.notification.successIcon
+      styles.container = {
+        ...styles.container,
+        backgroundColor: ColorPallet.notification.success,
+        borderColor: ColorPallet.notification.successBorder,
+      }
+      styles.text = {
+        ...styles.text,
+        color: ColorPallet.notification.successText,
+      }
+      break
+
+    case InfoBoxType.Warn:
+      iconName = 'warning'
+      iconColor = ColorPallet.notification.warnIcon
+      styles.container = {
+        ...styles.container,
+        backgroundColor: ColorPallet.notification.warn,
+        borderColor: ColorPallet.notification.warnBorder,
+      }
+      styles.text = {
+        ...styles.text,
+        color: ColorPallet.notification.warnText,
+      }
+      break
+
+    case InfoBoxType.Error:
+      iconName = 'error'
+      iconColor = ColorPallet.notification.errorIcon
+      styles.container = {
+        ...styles.container,
+        backgroundColor: ColorPallet.notification.error,
+        borderColor: ColorPallet.notification.errorBorder,
+      }
+      styles.text = {
+        ...styles.text,
+        color: ColorPallet.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/Label.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+
+import Text from './Text'
+
+interface Props {
+  title: string
+  subtitle?: string
+  label?: string
+}
+
+const Label: React.FC<Props> = ({ title, subtitle, label }) => {
+  const { TextTheme } = useTheme()
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '90%',
+      marginTop: 10,
+    },
+    titleContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    title: {
+      ...TextTheme.labelTitle,
+      marginRight: 7,
+    },
+    subtitle: {
+      ...TextTheme.labelSubtitle,
+    },
+    label: {
+      marginLeft: 10,
+      ...TextTheme.labelText,
+    },
+  })
+  return (
+    <View style={styles.container}>
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>{title}:</Text>
+        <Text style={styles.subtitle}>{subtitle}</Text>
+      </View>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  )
+}
+
+export default Label

package/src/components/texts/Link.tsx

@@ -0,0 +1,41 @@
+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 { ColorPallet } = useTheme()
+  const styles = StyleSheet.create({
+    link: {
+      color: ColorPallet.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

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

@@ -0,0 +1,24 @@
+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/texts/Title.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Text, StyleSheet } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+
+interface Props {
+  children: React.ReactNode
+  style?: any
+}
+
+const Title: React.FC<Props> = ({ children, style }) => {
+  const { TextTheme } = useTheme()
+  const styles = StyleSheet.create({
+    title: {
+      ...TextTheme.title,
+    },
+  })
+  return (
+    <Text adjustsFontSizeToFit style={[styles.title, style]}>
+      {children}
+    </Text>
+  )
+}
+
+export default Title

package/src/components/toast/BaseToast.tsx

@@ -0,0 +1,128 @@
+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, ColorPallet } = 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 = ColorPallet.notification.success
+      borderColor = ColorPallet.notification.successBorder
+      iconColor = ColorPallet.notification.successIcon
+      textColor = ColorPallet.notification.successText
+      break
+
+    case ToastType.Info:
+      iconName = 'info'
+      backgroundColor = ColorPallet.notification.info
+      borderColor = ColorPallet.notification.infoBorder
+      iconColor = ColorPallet.notification.infoIcon
+      textColor = ColorPallet.notification.infoText
+      break
+
+    case ToastType.Warn:
+      iconName = 'report-problem'
+      backgroundColor = ColorPallet.notification.warn
+      borderColor = ColorPallet.notification.warnBorder
+      iconColor = ColorPallet.notification.warnIcon
+      textColor = ColorPallet.notification.warnText
+      break
+
+    case ToastType.Error:
+      iconName = 'error'
+      backgroundColor = ColorPallet.notification.error
+      borderColor = ColorPallet.notification.errorBorder
+      iconColor = ColorPallet.notification.errorIcon
+      textColor = ColorPallet.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

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

package/src/components/tour/AttachTourStep.tsx

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

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

package/src/components/tour/CredentialsTourSteps.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 credentialsTourSteps: TourStep[] = [
+  {
+    Render: (props: RenderProps) => {
+      const { currentTour, currentStep, next, stop, previous } = props
+      const { t } = useTranslation()
+      const { ColorPallet, 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: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.AddCredentialsDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+]