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

package/src/pin/pin-code-screen.tsx

@@ -1,195 +0,0 @@
-import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-import type { TouchableOpacityRef } from '../accessibility';
-import { BackButton } from '../buttons';
-import { Typography } from '../text';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils';
-import ContrastingStatusBar from '../utils/contrasting-status-bar';
-import { Biometry, Keypad } from './keypad';
-import { Pins } from './pins';
-
-export type PinCodeScreenProps = {
-  title: string;
-
-  testID?: string;
-  length: number;
-  enteredLength: number;
-  onBack?: () => void;
-  error?: string;
-
-  keypadRef?: Ref<TouchableOpacityRef>;
-  onPressDigit: (digit: number) => void;
-  onPressDelete: () => void;
-  onDeleteAll: () => void;
-
-  biometry?: Biometry | null;
-  onBiometricPress?: () => void;
-} & (
-  | {
-      instruction: string;
-      onAccessibilityAnnounced?: (finished: boolean) => void;
-    }
-  | {
-      instruction?: undefined;
-      onAccessibilityAnnounced?: undefined;
-    }
-);
-
-export interface PinCodeScreenActions {
-  shakeKeypad: (params?: { amount?: number; duration?: number }) => Promise<{ finished: boolean }>;
-}
-const SHAKE_ITERATIONS = 4;
-const animationConfig = {
-  useNativeDriver: true,
-  easing: Easing.linear,
-};
-
-export const PinCodeScreen = forwardRef<PinCodeScreenActions, PinCodeScreenProps>(
-  (
-    {
-      testID,
-      length,
-      instruction,
-      title,
-      onBack,
-      enteredLength,
-      error,
-      onPressDigit,
-      onPressDelete,
-      biometry,
-      onBiometricPress,
-      keypadRef,
-      onDeleteAll,
-      ...props
-    },
-    ref,
-  ) => {
-    const colorScheme = useAppColorScheme();
-    const [shakePosition] = useState(() => new Animated.Value(0));
-    useImperativeHandle(
-      ref,
-      () => ({
-        shakeKeypad: (params) => {
-          const { amount = 10, duration = 300 } = params ?? {};
-          const partialDuration = duration / SHAKE_ITERATIONS / 4;
-          return new Promise((resolve) =>
-            Animated.loop(
-              Animated.sequence([
-                Animated.timing(shakePosition, { ...animationConfig, toValue: -amount, duration: partialDuration }),
-                Animated.timing(shakePosition, {
-                  ...animationConfig,
-                  toValue: amount,
-                  duration: 2 * partialDuration,
-                }),
-                Animated.timing(shakePosition, { ...animationConfig, toValue: 0, duration: partialDuration }),
-              ]),
-              { iterations: SHAKE_ITERATIONS },
-            ).start(resolve),
-          );
-        },
-      }),
-      [shakePosition],
-    );
-
-    return (
-      <SafeAreaView testID={testID} style={[styles.container, { backgroundColor: colorScheme.white }]}>
-        <ContrastingStatusBar backgroundColor={colorScheme.white} />
-        <View style={styles.backButton}>
-          {onBack && <BackButton testID={concatTestID(testID, 'back')} onPress={onBack} />}
-        </View>
-        <View style={styles.content}>
-          <View style={styles.upperContent}>
-            <Typography
-              testID={concatTestID(testID, 'title')}
-              accessible={false}
-              color={colorScheme.text}
-              align="center"
-              preset="l"
-              style={styles.title}>
-              {title}
-            </Typography>
-            <Pins style={styles.pins} enteredLength={enteredLength} maxLength={length} />
-            {instruction ? (
-              <Typography
-                testID={concatTestID(testID, 'instruction')}
-                align="center"
-                announcementActive={true}
-                onAnnouncementFinished={props.onAccessibilityAnnounced}
-                color={colorScheme.text}
-                style={styles.instruction}>
-                {instruction}
-              </Typography>
-            ) : null}
-            <Typography
-              testID={concatTestID(testID, 'error')}
-              announcementActive={true}
-              accessible={Boolean(error)}
-              color={colorScheme.error}>
-              {error ?? '' /* always displayed to keep the same layout */}
-            </Typography>
-          </View>
-          <Animated.View
-            style={[
-              styles.keyboard,
-              {
-                transform: [{ translateX: shakePosition }],
-              },
-            ]}>
-            <Keypad
-              testID={concatTestID(testID, 'keypad')}
-              ref={keypadRef}
-              onPressDigit={enteredLength < length ? onPressDigit : undefined}
-              onPressDelete={enteredLength && enteredLength < length ? onPressDelete : undefined}
-              biometry={!enteredLength ? biometry : undefined}
-              onBiometricPress={onBiometricPress}
-              onDeleteAll={enteredLength && enteredLength < length ? onDeleteAll : undefined}
-            />
-          </Animated.View>
-        </View>
-      </SafeAreaView>
-    );
-  },
-);
-
-const styles = StyleSheet.create({
-  backButton: {
-    minHeight: 24,
-    paddingHorizontal: 24,
-  },
-  container: {
-    flex: 1,
-    paddingTop: 8,
-  },
-  content: {
-    flex: 1,
-    justifyContent: 'space-between',
-    paddingHorizontal: 24,
-  },
-  instruction: {
-    marginVertical: 24,
-    opacity: 0.7,
-  },
-  keyboard: {
-    alignItems: 'center',
-    flex: 5,
-    justifyContent: 'center',
-    marginVertical: 24,
-  },
-  pins: {
-    paddingHorizontal: 20,
-  },
-  title: {
-    marginBottom: 24,
-  },
-  upperContent: {
-    alignItems: 'center',
-    flex: 3,
-    marginTop: 12,
-    paddingHorizontal: 20,
-  },
-});
-
-PinCodeScreen.displayName = 'PinCodeScreen';

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/index.ts

@@ -1,13 +0,0 @@
-import BackupScreen, { BackupScreenMode, BackupScreenProps } from './backup-screen';
-import ImagePreviewScreen, { ImagePreviewScreenProps } from './image-preview-screen';
-import NerdModeScreen, { NerdModeScreenProps, NerdModeSection } from './nerd-mode-screen';
-import QRCodeScannerScreen, { QRCodeScannerScreenProps } from './qr-code-scanner-screen';
-import ScrollViewScreen, { ScrollViewScreenProps } from './scroll-view-screen';
-import SectionListScreen, { SectionListScreenProps } 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/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>;