@procivis/one-react-native-components 0.3.62 → 0.3.86

package/src/ui-components/buttons/share-button.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ShareButton from './share-button';
+
+const Basic: StoryObj<typeof ShareButton> = {
+  args: {
+    title: 'qr-code-date.com',
+  },
+};
+
+export { Basic as ShareButton };
+
+export default {
+  title: 'base/button/Share Button',
+  component: ShareButton,
+  argTypes: {
+    onPress: { action: 'onPress' },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4237-32033&node-type=frame&t=TJ4R3WHLQ1CsXNeT-0',
+    },
+  },
+} as Meta<typeof ShareButton>;

package/src/ui-components/buttons/share-button.tsx

@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { TouchableHighlight } from '../accessibility';
+import { LinkIcon } from '../icons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export type ShareButtonProps = {
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  title?: string;
+  testID?: string;
+};
+
+const ShareButton: FC<ShareButtonProps> = ({
+  onPress,
+  style,
+  title,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <TouchableHighlight onPress={onPress} style={[styles.button, style]} testID={testID}>
+      <View style={[styles.container, { backgroundColor: colorScheme.white }]}>
+        <LinkIcon color={colorScheme.text} />
+        {title && (
+          <Typography testID={concatTestID(testID, 'title')} color={colorScheme.text} preset="s">
+            {title}
+          </Typography>
+        )}
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 5,
+    overflow: 'hidden',
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 5,
+    height: 32,
+    paddingLeft: 4,
+    paddingRight: 6,
+    paddingVertical: 5,
+  },
+});
+
+export default ShareButton;

package/src/ui-components/camera/qr-code-scanner.tsx

@@ -1,7 +1,9 @@
+import { useIsFocused } from '@react-navigation/native';
 import React, { FunctionComponent, useMemo } from 'react';
 import { StyleSheet, View, ViewProps } from 'react-native';
 import { Camera, Code, CodeType, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
 
+import { useIsAppActive } from '../../utils';
 import CameraOverlay from './camera-overlay';
 
 export type QRCodeScannerProps = ViewProps & {
@@ -18,6 +20,8 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
   noCameraView = null,
   ...viewProps
 }) => {
+  const isFocused = useIsFocused();
+  const isAppActive = useIsAppActive();
   const qrCodeScanner = useCodeScanner({
     codeTypes,
     onCodeScanned: onQRCodeRead,
@@ -25,7 +29,7 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
 
   const device = useCameraDevice('back');
 
-  const cameraOverlayView: React.ReactElement | undefined = useMemo(() => {
+  const cameraOverlayView = useMemo(() => {
     if (!cameraOverlay) {
       return <CameraOverlay />;
     }
@@ -43,7 +47,12 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
 
   return (
     <View {...viewProps}>
-      <Camera codeScanner={qrCodeScanner} device={device} isActive={true} style={StyleSheet.absoluteFill} />
+      <Camera
+        codeScanner={qrCodeScanner}
+        device={device}
+        isActive={isFocused && isAppActive !== false}
+        style={StyleSheet.absoluteFill}
+      />
       {cameraOverlayView}
     </View>
   );

package/src/ui-components/credential/card/credential-details-list-item.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import React, { FC, useCallback, useState } from 'react';
+import { LayoutChangeEvent, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { CredentialCardRatio, CredentialCardShadow } from './credential-card';
 import CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';
@@ -17,64 +17,43 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
   style,
   ...props
 }) => {
-  const [cardWidth, setCardWidth] = useState<number>();
-  const [minHeight, setMinHeight] = useState<number>();
   const [detailsCardHeight, setDetailsCardHeight] = useState<number>();
-
-  const cardListItemHeight = useSharedValue<number | undefined>(undefined);
-
-  useEffect(() => {
-    if (!detailsCardHeight || !minHeight) {
-      return;
-    }
-    const newValue = expanded ? detailsCardHeight : minHeight;
-    if (cardListItemHeight.value === undefined) {
-      cardListItemHeight.value = newValue;
-      return;
-    }
-    cardListItemHeight.value = withTiming(newValue, {
-      duration: 250,
-    });
-  }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);
-
-  const animatedCardWrapperStyle = useAnimatedStyle(() => {
-    if (cardListItemHeight.value !== undefined) {
-      return {
-        height: cardListItemHeight.value,
-      };
-    }
-    if (lastItem || expanded) {
-      return {};
-    }
-    return {
-      height: 60,
-    };
-  }, [cardListItemHeight, lastItem, expanded]);
-
-  const cardWrapperStyle: ViewStyle = {
-    minHeight: cardWidth ? Math.ceil(cardWidth / CredentialCardRatio) : undefined,
-  }
+  const cardWidth = props.card.width;
+  const minHeight = lastItem ? Math.ceil(cardWidth / CredentialCardRatio) : 60;
 
   const onContentLayout = useCallback(
     (event: LayoutChangeEvent) => {
-      const { width, height } = event.nativeEvent.layout;
+      const { height } = event.nativeEvent.layout;
       const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;
       const cardHeight = Math.round(height) + 2 * borderWidth;
       if (cardHeight === detailsCardHeight) {
         return;
       }
-      setCardWidth(width);
-      if (!minHeight) {
-        setMinHeight(lastItem ? Math.ceil(width / CredentialCardRatio) : 60);
-      }
       setDetailsCardHeight(cardHeight);
     },
-    [lastItem, minHeight, style, detailsCardHeight],
+    [style, detailsCardHeight],
   );
 
   return (
-    <Animated.View style={[styles.animatedWrapper, animatedCardWrapperStyle, style]}>
-      <View style={[styles.cardWrapper, cardWrapperStyle]}>
+    <Animated.View
+      layout={LinearTransition}
+      style={[
+        styles.animatedWrapper,
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          height: expanded ? 'auto' : minHeight,
+        },
+        style,
+      ]}>
+      <Animated.View
+        layout={LinearTransition}
+        style={[
+          styles.cardWrapper,
+          // eslint-disable-next-line react-native/no-inline-styles
+          {
+            height: expanded ? 'auto' : Math.ceil(cardWidth / CredentialCardRatio),
+          },
+        ]}>
         <CredentialDetailsCard
           animate={false}
           expanded={true}
@@ -82,7 +61,7 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
           style={detailsCardStyle}
           {...props}
         />
-      </View>
+      </Animated.View>
     </Animated.View>
   );
 };
@@ -93,7 +72,6 @@ const styles = StyleSheet.create({
   },
   cardWrapper: {
     borderRadius: 10,
-    height: '100%',
     overflow: 'hidden',
   },
 });

package/src/ui-components/credential/credential-attribute-item.tsx

@@ -357,6 +357,8 @@ const styles = StyleSheet.create({
   },
   rightAccessory: {
     paddingHorizontal: 8,
+    position: 'absolute',
+    right: 0,
   },
   separator: {
     height: 1,

package/src/ui-components/credential/group/credential-group-header.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useMemo } from 'react';
+import { AccessibilityProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../../utils';
+import { Typography } from '../../text';
+import { useAppColorScheme } from '../../theme';
+
+export interface CredentialGroupHeaderProps extends AccessibilityProps {
+  accessory?: React.ComponentType<any> | React.ReactElement;
+  name: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const CredentialGroupHeader: FC<CredentialGroupHeaderProps> = ({ accessory, name, style, testID, ...props }) => {
+  const colorScheme = useAppColorScheme();
+
+  const accessoryView: React.ReactElement | undefined = useMemo(() => {
+    if (!accessory) {
+      return undefined;
+    }
+    if (React.isValidElement(accessory)) {
+      return accessory;
+    } else {
+      const AccessoryComponent = accessory as React.ComponentType<any>;
+      return <AccessoryComponent />;
+    }
+  }, [accessory]);
+
+  return (
+    <View {...props} style={[styles.container, style]} testID={testID}>
+      <View style={styles.text}>
+        <Typography
+          color={colorScheme.white}
+          ellipsizeMode={'tail'}
+          numberOfLines={1}
+          preset="regular"
+          style={styles.nameText}
+          testID={concatTestID(testID, 'name')}>
+          {name}
+        </Typography>
+      </View>
+      {accessoryView && <View style={styles.accessory}>{accessoryView}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  accessory: {
+    alignItems: 'center',
+    height: 44,
+    justifyContent: 'center',
+    width: 44,
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 60,
+    padding: 8,
+  },
+  nameText: {
+    marginTop: 2,
+  },
+  text: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
+
+export default CredentialGroupHeader;

package/src/ui-components/credential/group/index.ts

@@ -0,0 +1,4 @@
+import type { CredentialGroupHeaderProps } from './credential-group-header';
+import CredentialGroupHeader from './credential-group-header';
+
+export { CredentialGroupHeader, CredentialGroupHeaderProps };

package/src/ui-components/credential/index.ts

@@ -12,3 +12,4 @@ export { CredentialAttribute, CredentialAttributeItem, CredentialAttributeItemPr
 export { Barcode, Mrz, QrCode };
 export { Selector, SelectorStatus };
 export * from './card';
+export * from './group';

package/src/ui-components/header/foldable-header.tsx

@@ -12,6 +12,7 @@ export type FoldableHeaderProps = {
   searchBar?: Omit<AnimatedSearchBarProps, 'collapsed'>;
   // if true, the header won't fold / fade out on scroll
   staticHeader?: boolean;
+  withNotice?: boolean;
 };
 
 const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
@@ -19,12 +20,17 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
   scrollOffset,
   searchBar,
   header,
+  withNotice,
 }) => {
   const safeAreaInsets = useSafeAreaInsets();
   const colorScheme = useAppColorScheme();
   const [collapsed, setCollapsed] = useState(header ? false : true);
   const [headerHeight, setHeaderHeight] = useState<number>();
 
+  const containerPaddingStyle = {
+    paddingTop: withNotice ? 15 : safeAreaInsets.top,
+  };
+
   useEffect(() => {
     const id = scrollOffset.addListener(({ value }) => {
       if (!headerHeight) {
@@ -46,15 +52,11 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
 
   const scrollHeaderAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation
     ? {
-        transform: [
-          {
-            translateY: scrollOffset.interpolate({
-              extrapolate: 'clamp',
-              inputRange: [0, headerHeight],
-              outputRange: [0, -headerHeight],
-            }),
-          },
-        ],
+        paddingTop: scrollOffset.interpolate({
+          extrapolate: 'clamp',
+          inputRange: [0, headerHeight],
+          outputRange: [headerHeight, 0]
+        })
       }
     : undefined;
 
@@ -79,29 +81,42 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
     <Animated.View
       style={[
         styles.headerContainer,
-        {
-          paddingTop: safeAreaInsets.top,
-        },
-        scrollHeaderAnimatedStyle,
+        containerPaddingStyle,
+        withNotice ? styles.noticeBorderRadius : undefined,
       ]}>
-      <BlurView blurStyle={'header'} color={colorScheme.background} style={StyleSheet.absoluteFill} />
+      <View style={[styles.blurWrapper, StyleSheet.absoluteFill]}>
+        <BlurView blurStyle={'header'} color={colorScheme.background} style={[
+          StyleSheet.absoluteFill,
+          withNotice ? styles.noticeBorderRadius : undefined,
+        ]} />
+      </View>
       <View>
+        <Animated.View style={scrollHeaderAnimatedStyle}>
+          {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}
+        </Animated.View>
         {header && (
-          <Animated.View onLayout={onHeaderLayout} style={fadeHeaderOutAnimatedStyle}>
+          <Animated.View onLayout={onHeaderLayout} style={[styles.headerContainer, fadeHeaderOutAnimatedStyle]}>
             {header}
           </Animated.View>
         )}
-        {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}
       </View>
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
+  blurWrapper: {
+    overflow: 'hidden',
+  },
   headerContainer: {
     position: 'absolute',
     width: '100%',
   },
+  noticeBorderRadius: {
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    overflow: 'hidden',
+  },
 });
 
 export default FoldableSearchHeader;

package/src/ui-components/icons/icons.tsx

@@ -230,3 +230,25 @@ export const StatusWarningIcon: FC<SvgProps> = ({ ...props }) => (
     />
   </Svg>
 );
+
+export const NFCIcon: FC<SvgProps> = ({ color, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  const iconColor = color ?? colorScheme.black;
+
+  return (
+    <Svg fill="none" height={64} viewBox="0 0 65 64" width={65} {...props}>
+      <Path
+        d="M37.459 53.317c12.2-12.201 12.2-31.984 0-44.186A1.6 1.6 0 0139.72 6.87c13.451 13.45 13.451 35.26 0 48.71a1.601 1.601 0 01-2.262-2.262z"
+        fill={iconColor}
+      />
+      <Path
+        d="M31.653 47.508c8.994-8.994 8.994-23.576 0-32.57a1.6 1.6 0 012.262-2.263c10.245 10.244 10.244 26.852 0 37.096a1.6 1.6 0 11-2.262-2.263z"
+        fill={iconColor}
+      />
+      <Path
+        d="M25.847 41.705c5.788-5.789 5.788-15.174 0-20.962a1.6 1.6 0 012.262-2.263c7.038 7.038 7.038 18.45 0 25.487a1.6 1.6 0 01-2.262-2.262zM21.172 33.159a2.737 2.737 0 11-3.87-3.87 2.737 2.737 0 013.87 3.87z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};

package/src/ui-components/index.ts

@@ -16,7 +16,9 @@ export * from './input';
 export * from './list';
 export * from './loader';
 export * from './nerd-view';
+export * from './nfc';
 export * from './pin';
+export * from './proof-request';
 export * from './screens';
 export * from './searchbar';
 export * from './settings';

package/src/ui-components/loader/loading-result.stories.tsx

@@ -13,13 +13,15 @@ type Args = {
   withButton2: boolean;
   withButton3: boolean;
   withHeader: boolean;
+  withShareButton: boolean;
 };
 
-const Render = ({ label, state, withButton1, withButton2, withButton3, withHeader }: Args) => {
+const Render = ({ label, state, withButton1, withButton2, withButton3, withHeader, withShareButton }: Args) => {
   return (
     <LoadingResultScreen
       button={withButton1 ? { title: 'Button 1' } : undefined}
       secondaryButton={withButton2 ? { type: ButtonType.Secondary, title: 'Button 2' } : undefined}
+      shareButton={withShareButton ? { title: 'qr-code-date.com' } : undefined}
       tertiaryButton={withButton3 ? { type: ButtonType.Secondary, title: 'Button 3' } : undefined}
       header={
         withHeader
@@ -46,6 +48,7 @@ const Basic: StoryObj<Args> = {
     withButton2: false,
     withButton3: false,
     withHeader: true,
+    withShareButton: false,
   },
   render: Render,
 };

package/src/ui-components/loader/loading-result.tsx

@@ -3,6 +3,7 @@ import { Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Button, ButtonProps } from '../buttons/button';
+import ShareButton, { ShareButtonProps } from '../buttons/share-button';
 import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
@@ -15,6 +16,7 @@ export type LoadingResultScreenProps = ViewProps & {
     label?: string;
   };
   secondaryButton?: ButtonProps;
+  shareButton?: ShareButtonProps;
   tertiaryButton?: ButtonProps;
 };
 
@@ -23,6 +25,7 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
   header,
   loader: { label, ...loaderProps },
   secondaryButton: button2,
+  shareButton,
   style,
   tertiaryButton: button3,
   ...viewProps
@@ -55,6 +58,7 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
         </Typography>
       </View>
       <View style={[styles.buttonWrapper, buttonsWrapperMarginStyle]}>
+        {shareButton && <ShareButton {...shareButton} style={styles.shareButton} />}
         {button && <Button {...button}>{button.title}</Button>}
         {button2 && <Button {...button2}>{button2.title}</Button>}
         {button3 && <Button {...button3}>{button3.title}</Button>}
@@ -92,6 +96,9 @@ const styles = StyleSheet.create({
   modalHeaderWithoutHandle: {
     paddingTop: 15,
   },
+  shareButton: {
+    alignSelf: 'center',
+  },
 });
 
 export default LoadingResultScreen;

package/src/ui-components/nfc/index.ts

@@ -0,0 +1,3 @@
+import NFCProcess from './nfc-process';
+
+export { NFCProcess };

package/src/ui-components/nfc/nfc-process.tsx

@@ -0,0 +1,80 @@
+import React, { FC, memo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+
+import { HeaderCloseButton } from '../../components';
+import { useAppColorScheme } from '../../ui-components';
+import { concatTestID } from '../../utils';
+import { Typography } from '..';
+import { Button, ButtonType } from '../buttons';
+import { NFCIcon, StatusWarningIcon } from '../icons';
+import { LoaderViewState } from '../loader';
+import { ScrollViewScreen } from '../screens';
+
+interface NFCProcessProps {
+  testID: string;
+  processState: LoaderViewState;
+  handleButtonClick: () => void;
+  labels: {
+    share: string;
+    connectivity: string;
+    close: string;
+    tryAgain: string;
+    conectivityInfo: string;
+    shareInfo: string;
+  };
+}
+
+const NFCProcess: FC<NFCProcessProps> = ({ testID, processState, labels, handleButtonClick }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <ScrollViewScreen
+      header={{
+        leftItem: <HeaderCloseButton testID={concatTestID(testID, 'header.back')} />,
+        modalHandleVisible: Platform.OS === 'ios',
+        static: true,
+        testID: concatTestID(testID, 'header'),
+        title: processState === LoaderViewState.InProgress ? labels.share : labels.connectivity,
+      }}
+      scrollView={{
+        testID: concatTestID(testID, 'scroll'),
+      }}
+      testID={testID}>
+      <View style={styles.content} testID={concatTestID(testID, 'content')}>
+        <View style={styles.info}>
+          {processState === LoaderViewState.InProgress ? <NFCIcon width={50} height={50} /> : <StatusWarningIcon />}
+          <Typography align="center" color={colorScheme.black}>
+            {processState === LoaderViewState.InProgress ? labels.shareInfo : labels.conectivityInfo}
+          </Typography>
+        </View>
+      </View>
+      <View style={styles.bottom}>
+        <Button
+          onPress={handleButtonClick}
+          testID={concatTestID(testID, 'button')}
+          title={processState === LoaderViewState.InProgress ? labels.close : labels.tryAgain}
+          type={processState === LoaderViewState.InProgress ? ButtonType.Secondary : ButtonType.Primary}
+        />
+      </View>
+    </ScrollViewScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottom: {
+    paddingHorizontal: 12,
+    paddingTop: 16,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  info: {
+    alignItems: 'center',
+    flex: 1,
+    gap: 20,
+    justifyContent: 'center',
+  },
+});
+
+export default memo(NFCProcess);