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

package/src/screens/backup-screen.tsx

@@ -1,92 +0,0 @@
-import React, { FC, PropsWithChildren } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import BackButton from '../buttons/back-button';
-import { Button, ButtonType } from '../buttons/button';
-import ScrollViewScreen from '../screens/scroll-view-screen';
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { concatTestID } from '../utils/testID';
-
-export enum BackupScreenMode {
-  Create = 'create',
-  Restore = 'restore',
-}
-
-export type BackupScreenProps = PropsWithChildren<{
-  cta: string;
-  description: string;
-  isCtaDisabled?: boolean;
-  onBack: () => void;
-  onCta: () => void;
-  testID: string;
-  title: string;
-}>;
-
-const BackupScreen: FC<BackupScreenProps> = ({
-  children,
-  cta,
-  description,
-  isCtaDisabled,
-  onBack,
-  onCta,
-  testID,
-  title,
-}) => {
-  const colorScheme = useAppColorScheme();
-
-  return (
-    <ScrollViewScreen
-      header={{
-        backgroundColor: colorScheme.white,
-        leftItem: <BackButton onPress={onBack} testID={concatTestID(testID, 'back')} />,
-        title,
-      }}
-      scrollView={{
-        testID: concatTestID(testID, 'scroll'),
-      }}
-      style={{ backgroundColor: colorScheme.white }}
-      testID={testID}>
-      <View style={styles.contentWrapper}>
-        <View style={styles.content}>
-          <Typography color={colorScheme.text} style={styles.description}>
-            {description}
-          </Typography>
-
-          {children}
-        </View>
-
-        <View style={styles.bottom}>
-          <Button
-            disabled={isCtaDisabled}
-            onPress={onCta}
-            testID={concatTestID(testID, 'mainButton')}
-            title={cta}
-            type={isCtaDisabled ? ButtonType.Border : ButtonType.Primary}
-          />
-        </View>
-      </View>
-    </ScrollViewScreen>
-  );
-};
-
-const styles = StyleSheet.create({
-  bottom: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    minHeight: 84,
-  },
-  content: {
-    marginHorizontal: 8,
-  },
-  contentWrapper: {
-    flex: 1,
-    marginHorizontal: 12,
-  },
-  description: {
-    marginBottom: 24,
-    opacity: 0.7,
-  },
-});
-
-export default BackupScreen;

package/src/screens/image-preview-screen.stories.tsx

@@ -1,28 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import ImagePreviewScreen from './image-preview-screen';
-
-const profileImage = require('../../storybook/assets/ProfileImage.png');
-
-const Basic: ComponentStory<typeof ImagePreviewScreen> = ({ ...args }) => {
-  return <ImagePreviewScreen {...args} image={profileImage} />;
-};
-
-Basic.args = {
-  title: 'Title',
-};
-
-export { Basic as ImagePreviewScreen };
-
-export default {
-  title: 'screen/Image Preview Screen',
-  component: ImagePreviewScreen,
-  parameters: {
-    noSafeArea: true,
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=493-79444&m=dev',
-    },
-  },
-} as ComponentMeta<typeof ImagePreviewScreen>;

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

@@ -1,82 +0,0 @@
-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 { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
-import { NavigationHeader } from '../header';
-import { CloseIcon } from '../icons';
-import { useAppColorScheme } from '../theme';
-import { concatTestID, ContrastingStatusBar } from '../utils';
-
-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/screens/nerd-mode-screen.tsx

@@ -1,150 +0,0 @@
-import React, { FunctionComponent, useState } from 'react';
-import { SectionList, StyleSheet, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import NerdModeItem, { NerdModeItemProps } from '..//nerd-view/nerd-mode-item';
-import EntityCluster from '../entity/entity-cluster';
-import NavigationHeader from '../header/navigation-header';
-import { CloseIcon } from '../icons/icons';
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import ContrastingStatusBar from '../utils/contrasting-status-bar';
-import { concatTestID } from '../utils/testID';
-
-const styles = StyleSheet.create({
-  entityCluster: {
-    paddingHorizontal: 24,
-    paddingVertical: 20,
-  },
-  sectionHeaderContainer: {
-    justifyContent: 'center',
-    marginTop: 20,
-    paddingVertical: 16,
-  },
-  sectionHeaderText: {
-    opacity: 0.7,
-    paddingHorizontal: 20,
-  },
-});
-
-export type NerdModeSection = {
-  data: Array<Omit<NerdModeItemProps, 'labels' | 'onCopyToClipboard'>>;
-  title: string;
-};
-
-export type NerdModeScreenProps = {
-  entityCluster?: {
-    entityName: string;
-  };
-  labels: {
-    expand: string;
-    collapse: string;
-  };
-  onClose: () => void;
-  onCopyToClipboard: (value: string) => void;
-  sections: NerdModeSection[];
-  testID: string;
-  title: string;
-};
-
-const AnimatedSectionList = Animated.createAnimatedComponent(
-  SectionList<Omit<NerdModeItemProps, 'labels' | 'onCopyToClipboard'>>,
-);
-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.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 ? (
-            <EntityCluster
-              entityName={entityCluster?.entityName}
-              style={[
-                styles.entityCluster,
-                {
-                  backgroundColor: colorScheme.nerdView.background,
-                },
-              ]}
-              testID={concatTestID(testID, 'entityCluster')}
-              textColor={colorScheme.white}
-            />
-          ) : null
-        }
-        onScroll={onScroll}
-        renderItem={({ item, section }) => (
-          <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 (
-            <View style={styles.sectionHeaderContainer} testID={concatTestID(testID, section.title)}>
-              <Typography color={colorScheme.white} style={styles.sectionHeaderText}>
-                {section.title}
-              </Typography>
-            </View>
-          );
-        }}
-        scrollEventThrottle={16}
-        sections={sections}
-        stickySectionHeadersEnabled={false}
-        style={{ backgroundColor: colorScheme.nerdView.background }}
-        testID={testID}
-      />
-    </>
-  );
-};
-
-export default NerdModeScreen;

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

@@ -1,37 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React, { useEffect } from 'react';
-import { useCameraPermission } from 'react-native-vision-camera';
-
-import QRCodeScannerScreen from './qr-code-scanner-screen';
-
-const Basic: ComponentStory<typeof QRCodeScannerScreen> = (args) => {
-  const { hasPermission, requestPermission } = useCameraPermission();
-  useEffect(() => {
-    if (!hasPermission) {
-      requestPermission();
-    }
-  }, [hasPermission, requestPermission]);
-
-  return <QRCodeScannerScreen {...args} />;
-};
-
-Basic.args = {
-  title: 'Scan QR Code to connect.',
-};
-
-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 ComponentMeta<typeof QRCodeScannerScreen>;

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

@@ -1,124 +0,0 @@
-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 { 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';
-import { ContrastingStatusBar } from '../utils';
-import { colorWithAlphaComponent } from '../utils/color';
-
-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/screens/scroll-view-screen.tsx

@@ -1,91 +0,0 @@
-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 NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
-import ListTitleHeader from '../list/list-title-header';
-import { useAppColorScheme } from '../theme/color-scheme-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';
-
-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/screens/section-list-screen.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { SectionList, SectionListProps, StyleSheet, View, ViewProps } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
-import ListTitleHeader from '../list/list-title-header';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { useOnScrollHeaderState } from '../utils/hooks/header/on-scroll-header-state';
-import { useListContentInset } from '../utils/hooks/list/list-content-inset';
-
-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;