@procivis/one-react-native-components 0.1.63 → 0.3.22

package/src/ui-components/screens/image-preview-screen.tsx

@@ -0,0 +1,82 @@
+import React, { FC, useCallback, useState } from 'react';
+import { Image, ImageSourcePropType, ImageStyle, LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { concatTestID, ContrastingStatusBar } from '../../utils';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { NavigationHeader } from '../header';
+import { CloseIcon } from '../icons';
+import { useAppColorScheme } from '../theme';
+
+export type ImagePreviewScreenProps = ViewProps & {
+  image: ImageSourcePropType;
+  onClose: () => void;
+  title: string;
+};
+
+const ImagePreviewScreen: FC<ImagePreviewScreenProps> = ({ image, onClose, title, testID, style, ...viewProps }) => {
+  const colorScheme = useAppColorScheme();
+  const insets = useSafeAreaInsets();
+
+  const [imageSize, setImageSize] = useState<ImageStyle>();
+  const layoutHandler = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setImageSize({ height, width });
+  }, []);
+
+  return (
+    <View
+      style={[styles.screen, { backgroundColor: colorScheme.nerdView.background }, style]}
+      testID={testID}
+      {...viewProps}>
+      <ContrastingStatusBar backgroundColor={colorScheme.nerdView.background} />
+      <NavigationHeader
+        backgroundColor="transparent"
+        blurred={false}
+        leftItem={
+          <TouchableOpacity onPress={onClose} testID={concatTestID(testID, 'close')}>
+            <CloseIcon color={colorScheme.white} />
+          </TouchableOpacity>
+        }
+        style={{
+          paddingTop: insets.top,
+        }}
+        title={title}
+        titleColor={colorScheme.white}
+        testID={concatTestID(testID, 'header')}
+      />
+
+      <View onLayout={layoutHandler} style={styles.imageContainer}>
+        {imageSize && (
+          <Image
+            accessibilityLabel={title}
+            accessibilityRole="image"
+            accessible={true}
+            resizeMethod="resize"
+            resizeMode="contain"
+            source={image}
+            style={[styles.image, imageSize]}
+            testID={concatTestID(testID, 'image')}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    position: 'absolute',
+  },
+  imageContainer: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    marginHorizontal: 18,
+  },
+  screen: {
+    flex: 1,
+  },
+});
+
+export default ImagePreviewScreen;

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

@@ -0,0 +1,19 @@
+import type { BackupScreenProps } from './backup-screen';
+import BackupScreen, { BackupScreenMode } from './backup-screen';
+import type { ImagePreviewScreenProps } from './image-preview-screen';
+import ImagePreviewScreen from './image-preview-screen';
+import type { NerdModeScreenProps, NerdModeSection } from './nerd-mode-screen';
+import NerdModeScreen from './nerd-mode-screen';
+import type { QRCodeScannerScreenProps } from './qr-code-scanner-screen';
+import QRCodeScannerScreen from './qr-code-scanner-screen';
+import type { ScrollViewScreenProps } from './scroll-view-screen';
+import ScrollViewScreen from './scroll-view-screen';
+import type { SectionListScreenProps } from './section-list-screen';
+import SectionListScreen from './section-list-screen';
+
+export { BackupScreen, BackupScreenMode, BackupScreenProps };
+export { ImagePreviewScreen, ImagePreviewScreenProps };
+export { NerdModeScreen, NerdModeScreenProps, NerdModeSection };
+export { QRCodeScannerScreen, QRCodeScannerScreenProps };
+export { ScrollViewScreen, ScrollViewScreenProps };
+export { SectionListScreen, SectionListScreenProps };

package/src/ui-components/screens/nerd-mode-screen.tsx

@@ -0,0 +1,214 @@
+import { DidListItem } from '@procivis/react-native-one-core';
+import React, { FunctionComponent, useState } from 'react';
+import { SectionList, StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import EntityDetailsWithButtons, { ContextRole } from '../../components/entity/entity-details-with-buttons';
+import ContrastingStatusBar from '../../utils/contrasting-status-bar';
+import { concatTestID } from '../../utils/testID';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import SectionEntityCluster from '../entity/entity-cluster';
+import NavigationHeader from '../header/navigation-header';
+import { CloseIcon } from '../icons/icons';
+import NerdModeItem, { NerdModeItemProps } from '../nerd-view/nerd-mode-item';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export interface EntityLabels {
+  trusted: string;
+  unknownIssuer: string;
+  unknownVerifier: string;
+  visitWebsite: string;
+  termsAndServices: string;
+  privacyPolicy: string;
+}
+
+export interface AttributesLabels {
+  trustRegistry: string;
+  issuerDid: string;
+  entityDid: string;
+  role: string;
+  expand: string;
+  collapse: string;
+}
+
+interface SectionEntityCluster {
+  did?: DidListItem;
+  subline?: string;
+  entityLabels: EntityLabels;
+  role: ContextRole;
+  testID?: string;
+}
+
+type SectionAttribute = Omit<NerdModeItemProps, 'labels' | 'onCopyToClipboard'>;
+
+type NerdModeSectionItem = SectionAttribute | SectionEntityCluster;
+
+export type NerdModeSection = {
+  data: NerdModeSectionItem[];
+  title?: string;
+};
+
+export type NerdModeScreenProps = {
+  entityCluster?: SectionEntityCluster;
+  labels: AttributesLabels;
+  onClose: () => void;
+  onCopyToClipboard: (value: string) => void;
+  sections: NerdModeSection[];
+  testID: string;
+  title: string;
+};
+
+export enum EntityType {
+  CredentialEntity,
+  ProofEntity,
+}
+
+function isSectionEntityCluster(item: NerdModeSectionItem): item is SectionEntityCluster {
+  return (item as SectionEntityCluster).did !== undefined;
+}
+
+const AnimatedSectionList = Animated.createAnimatedComponent(SectionList<NerdModeSectionItem>);
+
+const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
+  sections,
+  labels,
+  onClose,
+  onCopyToClipboard,
+  entityCluster,
+  testID,
+  title,
+}) => {
+  const insets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+  const scrollOffset = useSharedValue(0);
+  const [expandedAttributes, setExpandedAttributes] = useState(0);
+
+  // This is a bit of a hack. It's used to notify attributes that another attribute has been expanded
+  // which will allow them to update their scroll offset accordingly.
+  const onExpand = (expanded: boolean) => {
+    setExpandedAttributes((prev) => (expanded ? prev + 1 : prev - 1));
+  };
+
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: ({ contentOffset }) => {
+      scrollOffset.value = contentOffset.y;
+    },
+  });
+
+  const lastElementsForSection = sections.reduce((acc, { title: sectionTitle = '', data }) => {
+    const lastElement = data[data.length - 1];
+    return {
+      ...acc,
+      [sectionTitle]: lastElement && !isSectionEntityCluster(lastElement) ? lastElement.attributeKey : '',
+    };
+  }, {} as Record<string, string>);
+
+  return (
+    <>
+      <ContrastingStatusBar backgroundColor={colorScheme.nerdView.background} />
+      <NavigationHeader
+        leftItem={
+          <TouchableOpacity onPress={onClose} testID={concatTestID(testID, 'closeIcon')}>
+            <CloseIcon color={colorScheme.white} />
+          </TouchableOpacity>
+        }
+        style={{
+          backgroundColor: colorScheme.nerdView.background,
+          paddingTop: insets.top,
+        }}
+        title={title}
+        titleColor={colorScheme.white}
+      />
+      <AnimatedSectionList
+        ListHeaderComponent={
+          entityCluster ? (
+            <EntityDetailsWithButtons
+              {...entityCluster}
+              entityType={EntityType.ProofEntity}
+              entityLabels={entityCluster.entityLabels}
+              attributesLabels={labels}
+              style={[
+                styles.entityCluster,
+                {
+                  backgroundColor: colorScheme.nerdView.background,
+                },
+              ]}
+              onCopyToClipboard={onCopyToClipboard}
+              testID={entityCluster.testID ?? concatTestID(testID, 'entityCluster')}
+              textColor={colorScheme.white}
+            />
+          ) : null
+        }
+        onScroll={onScroll}
+        renderItem={({ item, section, index }) => {
+          if (isSectionEntityCluster(item)) {
+            return (
+              <EntityDetailsWithButtons
+                {...item}
+                entityType={EntityType.CredentialEntity}
+                entityLabels={item!.entityLabels}
+                attributesLabels={labels}
+                style={[
+                  styles.entityCluster,
+                  {
+                    backgroundColor: colorScheme.nerdView.background,
+                  },
+                ]}
+                onCopyToClipboard={onCopyToClipboard}
+                testID={item.testID ?? concatTestID(testID, 'sectionEntityCluster', index.toString())}
+                textColor={colorScheme.white}
+              />
+            );
+          } else {
+            return (
+              <NerdModeItem
+                {...item}
+                expandedAttributes={expandedAttributes}
+                labels={labels}
+                last={lastElementsForSection[section.title] === item.attributeKey}
+                onCopyToClipboard={onCopyToClipboard}
+                onExpand={onExpand}
+                scrollOffset={scrollOffset}
+                testID={concatTestID(testID, item.testID)}
+              />
+            );
+          }
+        }}
+        renderSectionHeader={({ section }) => {
+          return section.title ? (
+            <View style={styles.sectionHeaderContainer} testID={concatTestID(testID, section.title)}>
+              <Typography color={colorScheme.white} style={styles.sectionHeaderText}>
+                {section.title}
+              </Typography>
+            </View>
+          ) : null;
+        }}
+        scrollEventThrottle={16}
+        sections={sections}
+        stickySectionHeadersEnabled={false}
+        style={{ backgroundColor: colorScheme.nerdView.background }}
+        testID={testID}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  entityCluster: {
+    paddingHorizontal: 24,
+    paddingVertical: 20,
+  },
+  sectionHeaderContainer: {
+    justifyContent: 'center',
+    marginTop: 20,
+    paddingVertical: 16,
+  },
+  sectionHeaderText: {
+    opacity: 0.7,
+    paddingHorizontal: 20,
+  },
+});
+
+export default NerdModeScreen;

package/src/ui-components/screens/qr-code-scanner-screen.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useEffect } from 'react';
+import { useCameraPermission } from 'react-native-vision-camera';
+
+import QRCodeScannerScreen, { QRCodeScannerScreenProps } from './qr-code-scanner-screen';
+
+const Render = (args: QRCodeScannerScreenProps) => {
+  const { hasPermission, requestPermission } = useCameraPermission();
+  useEffect(() => {
+    if (!hasPermission) {
+      requestPermission().catch(() => {});
+    }
+  }, [hasPermission, requestPermission]);
+
+  return <QRCodeScannerScreen {...args} />;
+};
+
+const Basic: StoryObj<typeof QRCodeScannerScreen> = {
+  args: {
+    title: 'Scan QR Code to connect.',
+  },
+  render: Render,
+}
+
+export { Basic as QRCodeScannerScreen };
+
+export default {
+  title: 'screen/QR Code Scanner Screen',
+  component: QRCodeScannerScreen,
+  parameters: {
+    noSafeArea: true,
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=651%3A22601&mode=design&t=NuPAMUrC62C0azQ4-1',
+    },
+  },
+  argTypes: {
+    onQRCodeRead: { action: 'onQRCodeRead' },
+  },
+} as Meta<typeof QRCodeScannerScreen>;

package/src/ui-components/screens/qr-code-scanner-screen.tsx

@@ -0,0 +1,124 @@
+import React, { FunctionComponent, memo, ReactElement, useMemo } from 'react';
+import { Dimensions, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useCameraDevice } from 'react-native-vision-camera';
+
+import { ContrastingStatusBar } from '../../utils';
+import { colorWithAlphaComponent } from '../../utils/color';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import BlurView from '../blur/blur-view';
+import { GhostButton } from '../buttons';
+import CameraOverlay from '../camera/camera-overlay';
+import QRCodeScanner, { QRCodeScannerProps } from '../camera/qr-code-scanner';
+import { CloseIcon } from '../icons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export interface QRCodeScannerScreenProps {
+  codeTypes?: QRCodeScannerProps['codeTypes'];
+  footer?: React.ComponentType<any> | React.ReactElement;
+  onQRCodeRead: QRCodeScannerProps['onQRCodeRead'];
+  onClose: () => void;
+  overlayStyle?: StyleProp<ViewStyle>;
+  noCameraView?: JSX.Element;
+  title: ReactElement | string;
+}
+
+const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
+  codeTypes,
+  footer,
+  onQRCodeRead,
+  onClose,
+  overlayStyle,
+  noCameraView = null,
+  title,
+}) => {
+  const t = useAccessibilityTranslation();
+  const insets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+
+  const footerView: React.ReactElement | undefined = useMemo(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if (React.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer as React.ComponentType<any>;
+      return <FooterComponent />;
+    }
+  }, [footer]);
+
+  const minBottomBlurViewHeight = Dimensions.get('window').height * 0.15;
+
+  const device = useCameraDevice('back');
+  if (!device) {
+    return noCameraView;
+  }
+
+  return (
+    <View style={styles.container}>
+      <QRCodeScanner
+        cameraOverlay={<CameraOverlay style={overlayStyle} />}
+        codeTypes={codeTypes}
+        onQRCodeRead={onQRCodeRead}
+        style={StyleSheet.absoluteFill}
+      />
+      <ContrastingStatusBar backgroundColor={colorScheme.black} />
+      <BlurView
+        darkMode={true}
+        blurStyle="soft"
+        style={[styles.topBlurView, { backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5) }]}>
+        <View style={[styles.headerSection, { top: insets.top }]}>
+          <GhostButton
+            icon={<CloseIcon color={colorScheme.white} />}
+            onPress={onClose}
+            accessibilityLabel={t('accessibility.nav.close')}
+          />
+        </View>
+      </BlurView>
+      <BlurView
+        darkMode={true}
+        blurStyle="soft"
+        style={[
+          styles.bottomBlurView,
+          {
+            backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5),
+            minHeight: minBottomBlurViewHeight,
+            paddingBottom: Math.max(insets.bottom, 32),
+          },
+        ]}>
+        <Typography align="center" style={styles.title} color={colorScheme.white}>
+          {title}
+        </Typography>
+        {footerView}
+      </BlurView>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  bottomBlurView: {
+    bottom: 0,
+    position: 'absolute',
+    width: '100%',
+  },
+  container: {
+    flex: 1,
+  },
+  headerSection: {
+    paddingHorizontal: 22,
+    paddingTop: 16,
+    position: 'absolute',
+  },
+  title: {
+    marginTop: 32,
+  },
+  topBlurView: {
+    height: '15%',
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+  },
+});
+
+export default memo(QRCodeScannerScreen);

package/src/ui-components/screens/scroll-view-screen.tsx

@@ -0,0 +1,91 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { Platform, ScrollView, ScrollViewProps, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useOnScrollHeaderState } from '../../utils/hooks/header/on-scroll-header-state';
+import { useListContentInset } from '../../utils/hooks/list/list-content-inset';
+import { concatTestID } from '../../utils/testID';
+import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
+import ListTitleHeader from '../list/list-title-header';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type ScrollViewScreenProps = ViewProps & {
+  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {
+    static?: boolean;
+    title: string;
+  };
+  modalPresentation?: boolean;
+  scrollView?: Omit<ScrollViewProps, 'onScroll'>;
+};
+
+const ScrollViewScreen: FC<PropsWithChildren<ScrollViewScreenProps>> = ({
+  children,
+  header,
+  modalPresentation,
+  scrollView,
+  style,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const { top } = useSafeAreaInsets();
+  const contentInsetsStyle = useListContentInset({
+    additionalBottomPadding: 24,
+    headerHeight: modalPresentation && Platform.OS === 'ios' ? 63 : 48,
+    modalPresentation,
+  });
+  const { titleVisible, onScroll } = useOnScrollHeaderState();
+  const { contentContainerStyle, ...scrollViewProps } = scrollView ?? {};
+
+  let headerPaddingStyle: ViewStyle | undefined;
+  if (!modalPresentation || Platform.OS === 'android') {
+    headerPaddingStyle = {
+      paddingTop: top,
+    };
+  } else if (modalPresentation && !header.modalHandleVisible && Platform.OS === 'ios') {
+    headerPaddingStyle = styles.modalHeaderWithoutHandle;
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} testID={testID} {...viewProps}>
+      <ScrollView
+        contentContainerStyle={[styles.contentContainer, contentInsetsStyle, contentContainerStyle]}
+        onScroll={onScroll}
+        scrollEventThrottle={100}
+        {...scrollViewProps}>
+        <View style={styles.content} testID={concatTestID(testID, 'content')}>
+          {!header.static && <ListTitleHeader title={header.title} />}
+          {children}
+        </View>
+      </ScrollView>
+      <NavigationHeader
+        animate
+        blurred
+        style={[styles.header, headerPaddingStyle]}
+        titleVisible={header.static || titleVisible}
+        {...header}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+  },
+  modalHeaderWithoutHandle: {
+    paddingTop: 15,
+  },
+});
+
+export default ScrollViewScreen;

package/src/ui-components/screens/section-list-screen.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { SectionList, SectionListProps, StyleSheet, View, ViewProps } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useOnScrollHeaderState } from '../../utils/hooks/header/on-scroll-header-state';
+import { useListContentInset } from '../../utils/hooks/list/list-content-inset';
+import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
+import ListTitleHeader from '../list/list-title-header';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type SectionListScreenProps<ItemT, SectionT> = ViewProps & {
+  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {
+    static?: boolean;
+    title: string;
+  };
+  list: Omit<SectionListProps<ItemT, SectionT>, 'ListHeaderComponent' | 'onScroll'>;
+};
+
+const SectionListScreen = <ItemT, SectionT>({
+  header,
+  list: { contentContainerStyle, stickySectionHeadersEnabled, ...listProps },
+  style,
+  ...viewProps
+}: SectionListScreenProps<ItemT, SectionT>) => {
+  const colorScheme = useAppColorScheme();
+  const safeAreaInsets = useSafeAreaInsets();
+  const contentInsetsStyle = useListContentInset();
+  const { titleVisible, onScroll } = useOnScrollHeaderState();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>
+      <SectionList<ItemT, SectionT>
+        ListHeaderComponent={!header.static ? <ListTitleHeader title={header.title} /> : undefined}
+        contentContainerStyle={[contentInsetsStyle, contentContainerStyle]}
+        onScroll={onScroll}
+        scrollEventThrottle={100}
+        stickySectionHeadersEnabled={stickySectionHeadersEnabled ?? false}
+        {...listProps}
+      />
+      <NavigationHeader
+        animate
+        blurred
+        style={[styles.header, { paddingTop: safeAreaInsets.top }]}
+        titleVisible={header.static || titleVisible}
+        {...header}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+  },
+});
+
+export default SectionListScreen;

package/src/ui-components/searchbar/search-bar.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import SearchBar, { SearchBarProps } from './search-bar';
+
+const Render = (args: Omit<SearchBarProps, 'searchPhrase' | 'onSearchPhraseChange'>) => {
+  const [searchPhrase, setSearchPhrase] = useState('');
+  return <SearchBar {...args} searchPhrase={searchPhrase} onSearchPhraseChange={setSearchPhrase} />;
+};
+
+const Basic: StoryObj<Omit<SearchBarProps, 'searchPhrase' | 'onSearchPhraseChange'>> = {
+  args: {
+    placeholder: 'Search',
+    style: { margin: 24 },
+  },
+  render: Render,
+};
+
+
+export { Basic as SearchBar };
+
+export default {
+  title: 'base/input/Search Bar',
+  component: SearchBar,
+  parameters: {
+    controls: {
+      exclude: ['searchPhrase', 'onSearchPhraseChange'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=KAAJ0oKY3xb6VNtA-4',
+    },
+  },
+  argTypes: {
+    searchPhrase: { control: { type: undefined, disable: true } },
+    onSearchPhraseChange: { control: { type: undefined, disable: true } },
+  },
+} as Meta<typeof SearchBar>;