@procivis/one-react-native-components 0.1.63

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

@@ -0,0 +1,80 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React, { useRef } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Button } from '../buttons';
+import { Biometry } from './keypad';
+import { PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps } from './pin-code-screen';
+
+type Props = PinCodeScreenProps & {
+  withBackButton: boolean;
+  showActions: boolean;
+};
+
+const styles = StyleSheet.create({
+  actionButton: { position: 'absolute', right: 24, top: 40 },
+});
+
+const Basic: Story<Props> = ({
+  title,
+  instruction,
+  onAccessibilityAnnounced,
+  withBackButton,
+  onBack,
+  showActions,
+  ...args
+}) => {
+  const subtitle = instruction ? { instruction, onAccessibilityAnnounced } : {};
+  const actionsRef = useRef<PinCodeScreenActions>(null);
+
+  return (
+    <>
+      <PinCodeScreen
+        ref={actionsRef}
+        title={title}
+        {...subtitle}
+        onBack={withBackButton ? onBack : undefined}
+        {...args}
+      />
+      {showActions && (
+        <Button style={styles.actionButton} onPress={() => actionsRef.current?.shakeKeypad()} title="shake" />
+      )}
+    </>
+  );
+};
+
+Basic.args = {
+  length: 6,
+  enteredLength: 0,
+  withBackButton: true,
+  title: 'Title',
+  instruction: 'Instruction',
+  error: '',
+  biometry: Biometry.FaceID,
+  showActions: false,
+};
+
+export { Basic as PINScreen };
+
+export default {
+  title: 'screen/PIN Screen',
+  component: PinCodeScreen,
+  parameters: {
+    noSafeArea: true,
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=621-21892&mode=design&t=nCa9UdCDzPYtOPgu-4',
+    },
+  },
+  argTypes: {
+    onBack: { action: 'onBack' },
+    onBiometricPress: { action: 'onBiometricPress' },
+    onPressDigit: { action: 'onPressDigit' },
+    onPressDelete: { action: 'onPressDelete' },
+    onDeleteAll: { action: 'onDeleteAll' },
+    biometry: {
+      options: [Biometry.FaceID, Biometry.Other],
+      control: { type: 'radio' },
+    },
+  },
+} as ComponentMeta<typeof PinCodeScreen>;

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

@@ -0,0 +1,195 @@
+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/pin/pins.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { StyleSheet, View, ViewProps } from 'react-native';
+
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import { useAppColorScheme } from '../theme';
+
+export interface PinsProps extends ViewProps {
+  enteredLength: number;
+  maxLength: number;
+}
+
+export const Pins: FC<PinsProps> = ({ enteredLength, maxLength, style, ...props }) => {
+  const t = useAccessibilityTranslation();
+  const colorScheme = useAppColorScheme();
+  return (
+    <View
+      style={[styles.pinsWrapper, style]}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ text: t('accessibility.control.progress', { current: enteredLength, length: maxLength }) }}
+      {...props}>
+      {Array.from({ length: maxLength }).map((_, index) => (
+        <View
+          key={`pin${index}`}
+          style={[
+            styles.pin,
+            {
+              backgroundColor: enteredLength > index ? colorScheme.black : colorScheme.background,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  pin: {
+    borderRadius: 3,
+    height: 10,
+    width: 10,
+  },
+  pinsWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    width: '100%',
+  },
+});

package/src/screens/backup-screen.tsx

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

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

@@ -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 { 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

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

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