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

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { ButtonType } from '../buttons';
+import BackButton from '../buttons/back-button';
+import { LoaderViewState } from './loader';
+import LoadingResultScreen from './loading-result';
+
+type Args = {
+  label: string;
+  state: LoaderViewState;
+  withButton1: boolean;
+  withButton2: boolean;
+  withButton3: boolean;
+  withHeader: boolean;
+};
+
+const Render = ({ label, state, withButton1, withButton2, withButton3, withHeader }: Args) => {
+  return (
+    <LoadingResultScreen
+      button={withButton1 ? { title: 'Button 1' } : undefined}
+      secondaryButton={withButton2 ? { type: ButtonType.Secondary, title: 'Button 2' } : undefined}
+      tertiaryButton={withButton3 ? { type: ButtonType.Secondary, title: 'Button 3' } : undefined}
+      header={
+        withHeader
+          ? {
+              leftItem: BackButton,
+              title: 'Title',
+            }
+          : undefined
+      }
+      loader={{
+        animate: true,
+        state,
+        label,
+      }}
+    />
+  );
+};
+
+const Basic: StoryObj<Args> = {
+  args: {
+    label: 'Loading...',
+    state: LoaderViewState.InProgress,
+    withButton1: true,
+    withButton2: false,
+    withButton3: false,
+    withHeader: true,
+  },
+  render: Render,
+};
+
+export { Basic as LoadingResultScreen };
+
+export default {
+  title: 'component/loader/LoadingResultScreen',
+  component: LoadingResultScreen,
+  argTypes: {
+    state: {
+      options: [LoaderViewState.InProgress, LoaderViewState.Success, LoaderViewState.Warning],
+      control: { type: 'radio' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=444-44894&mode=design&t=YI1oD2BfBie5HcvJ-0',
+    },
+  },
+} as Meta<typeof LoadingResultScreen>;

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

@@ -0,0 +1,97 @@
+import React, { FC } from 'react';
+import { Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Button, ButtonProps } from '../buttons/button';
+import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import LoaderView, { LoaderViewProps } from './loader';
+
+export type LoadingResultScreenProps = ViewProps & {
+  button?: ButtonProps;
+  header?: NavigationHeaderProps;
+  loader: LoaderViewProps & {
+    label?: string;
+  };
+  secondaryButton?: ButtonProps;
+  tertiaryButton?: ButtonProps;
+};
+
+const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
+  button,
+  header,
+  loader: { label, ...loaderProps },
+  secondaryButton: button2,
+  style,
+  tertiaryButton: button3,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const { top, bottom } = useSafeAreaInsets();
+
+  let headerPaddingStyle: ViewStyle | undefined;
+  if (Platform.OS === 'android') {
+    headerPaddingStyle = {
+      paddingTop: top,
+    };
+  } else if (!header?.modalHandleVisible && Platform.OS === 'ios') {
+    headerPaddingStyle = styles.modalHeaderWithoutHandle;
+  }
+
+  let buttonsWrapperMarginStyle: ViewStyle = {
+    marginBottom: bottom,
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>
+      <View style={[styles.headerWrapper, headerPaddingStyle]}>
+        <NavigationHeader {...header} />
+      </View>
+      <View style={styles.loaderWrapper}>
+        <LoaderView {...loaderProps} />
+        <Typography align="center" color={colorScheme.text} preset="regular" style={styles.label}>
+          {label}
+        </Typography>
+      </View>
+      <View style={[styles.buttonWrapper, buttonsWrapperMarginStyle]}>
+        {button && <Button {...button}>{button.title}</Button>}
+        {button2 && <Button {...button2}>{button2.title}</Button>}
+        {button3 && <Button {...button3}>{button3.title}</Button>}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonWrapper: {
+    gap: 12,
+    height: 274,
+    justifyContent: 'flex-end',
+    padding: 12,
+  },
+  container: {
+    alignItems: 'stretch',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  headerWrapper: {
+    height: 215,
+  },
+  label: {
+    marginHorizontal: 20,
+    marginTop: 20,
+  },
+  loaderWrapper: {
+    alignItems: 'center',
+    flexDirection: 'column',
+    height: 108,
+    justifyContent: 'space-between',
+  },
+  modalHeaderWithoutHandle: {
+    paddingTop: 15,
+  },
+});
+
+export default LoadingResultScreen;

package/src/ui-components/nerd-view/index.ts

@@ -0,0 +1,4 @@
+import type { NerdModeItemProps } from './nerd-mode-item';
+import NerdModeItem, { ActionIcon } from './nerd-mode-item';
+
+export { ActionIcon, NerdModeItem, NerdModeItemProps };

package/src/ui-components/nerd-view/nerd-mode-item.tsx

@@ -0,0 +1,299 @@
+import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
+import { Dimensions, LayoutChangeEvent, Linking, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, {
+  clamp,
+  SharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { reportException } from '../../utils';
+import { concatTestID } from '../../utils/testID';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { Button, ButtonType } from '../buttons/button';
+import { CopyContentIcon, OpenLinkIcon } from '../icons/nerd-view';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+const VALUE_PREVIEW_LENGTH = 80;
+const ICON_HEIGHT = 48;
+const CONTAINER_PADDING = 8;
+
+// The onExpand and expandedAttributes props are used to notify other expanded fields
+// that the layout (and thus the scrollOffset / icon position) has changed. This
+// will trigger a view measurement and repositioning of the icon on all expanded fields.
+
+export type NerdModeItemProps = {
+  attributeKey: string;
+  attributeText?: string;
+  canBeCopied?: boolean;
+  element?: React.ReactElement;
+  expandedAttributes?: number;
+  highlightedText?: string;
+  labels: {
+    expand: string;
+    collapse: string;
+  };
+  last?: boolean;
+  link?: string;
+  onCopyToClipboard: (value: string) => void;
+  onExpand?: (expanded: boolean) => void;
+  scrollOffset?: SharedValue<number>;
+  testID?: string;
+};
+
+const styles = StyleSheet.create({
+  actionIcon: {
+    alignItems: 'center',
+    flex: 0.15,
+    height: ICON_HEIGHT,
+    justifyContent: 'center',
+  },
+  actionIconSingleLine: {
+    height: 24,
+  },
+  attributeLabel: {
+    marginBottom: 4,
+    paddingHorizontal: 6,
+  },
+  attributeValue: {
+    flex: 0.85,
+    flexGrow: 1,
+  },
+  attributeValueContainer: {
+    borderRadius: 2,
+    borderWidth: 0.2,
+    flexDirection: 'row',
+    padding: CONTAINER_PADDING,
+  },
+  container: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+  },
+  expandValueButton: {
+    borderRadius: 4,
+    borderWidth: 0,
+    marginTop: 4,
+  },
+  lastAttribute: {
+    paddingBottom: 30,
+  },
+});
+
+export const ActionIcon: FunctionComponent<{
+  copy?: boolean;
+  link?: string;
+  onCopyToClipboard: (value: string) => void;
+  style?: ViewStyle;
+  testID?: string;
+  value: string;
+}> = ({ value, link, onCopyToClipboard, testID, copy }) => {
+  const handleCopy = useCallback(() => {
+    onCopyToClipboard(value);
+  }, [onCopyToClipboard, value]);
+
+  const openLink = useCallback(() => {
+    if (link) {
+      Linking.openURL(link).catch((e) => {
+        reportException(e, 'Error opening nerd link');
+      });
+    }
+  }, [link]);
+
+  if (copy) {
+    return (
+      <TouchableOpacity onPress={handleCopy} testID={testID}>
+        <CopyContentIcon />
+      </TouchableOpacity>
+    );
+  }
+
+  if (link) {
+    return (
+      <TouchableOpacity onPress={openLink} testID={testID}>
+        <OpenLinkIcon />
+      </TouchableOpacity>
+    );
+  }
+
+  return null;
+};
+
+const TextWithHighlight: FunctionComponent<{
+  highlightedText: string;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  testID: string;
+  text: string;
+}> = ({ highlightedText, onLayout, testID, text }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Typography
+      color={colorScheme.white}
+      onLayout={onLayout}
+      preset="s/code"
+      style={styles.attributeValue}
+      testID={testID}>
+      <Typography color={colorScheme.nerdView.codeHighlightText} preset="s/code">
+        {highlightedText}
+      </Typography>
+      {text}
+    </Typography>
+  );
+};
+
+const NerdModeItem: FunctionComponent<NerdModeItemProps> = ({
+  highlightedText = '',
+  attributeText = '',
+  attributeKey,
+  labels,
+  link,
+  canBeCopied,
+  onCopyToClipboard,
+  onExpand,
+  expandedAttributes,
+  last = false,
+  scrollOffset,
+  element,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const valueViewRef = React.useRef<View>(null);
+  const [isSingleLine, setIsSingleLine] = useState<boolean>();
+
+  const expandedView = useSharedValue({
+    expandedAtOffset: 0,
+    viewHeight: 0,
+    viewStart: 0,
+  });
+
+  const expandable = attributeText.length > VALUE_PREVIEW_LENGTH;
+  const [expanded, setExpanded] = useState(!expandable);
+
+  const screenMiddle = useMemo(() => Dimensions.get('screen').height / 2, []);
+
+  const iconTopPosition = useDerivedValue(() => {
+    if (isSingleLine === undefined) {
+      return 0;
+    }
+    if (!expanded || !expandable || !scrollOffset || isSingleLine) {
+      const iconHeight = isSingleLine ? 0 : ICON_HEIGHT;
+      return expandedView.value.viewHeight / 2 - iconHeight / 2;
+    }
+
+    const viewEnd = expandedView.value.viewStart + expandedView.value.viewHeight;
+    let zeroedOffset = scrollOffset.value - expandedView.value.expandedAtOffset;
+
+    if (expandedView.value.viewStart > screenMiddle) {
+      zeroedOffset = zeroedOffset - (expandedView.value.viewStart - screenMiddle + ICON_HEIGHT / 2);
+    } else {
+      if (viewEnd < screenMiddle + ICON_HEIGHT) {
+        zeroedOffset = zeroedOffset + (screenMiddle - expandedView.value.viewStart - ICON_HEIGHT / 2);
+      } else if (expandedView.value.viewStart < screenMiddle && viewEnd > screenMiddle) {
+        zeroedOffset = zeroedOffset + (screenMiddle - expandedView.value.viewStart - ICON_HEIGHT / 2);
+      }
+    }
+
+    return clamp(zeroedOffset, 0, expandedView.value.viewHeight - ICON_HEIGHT - 8);
+  });
+
+  const iconStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: iconTopPosition.value,
+        },
+      ],
+    };
+  }, [iconTopPosition]);
+
+  const previewText = expanded ? attributeText : attributeText.slice(0, VALUE_PREVIEW_LENGTH) + '...';
+
+  useEffect(() => {
+    if (!scrollOffset || isSingleLine === undefined) {
+      return;
+    }
+
+    setTimeout(() => {
+      valueViewRef.current?.measure((x, y, w, h, px, py) => {
+        expandedView.value = {
+          expandedAtOffset: isSingleLine ? 0 : scrollOffset.value,
+          viewHeight: isSingleLine ? 0 : h - 2 * CONTAINER_PADDING,
+          viewStart: py,
+        };
+      });
+    }, 0);
+    // We only recompute when any attribute is expanded
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expandedAttributes, isSingleLine]);
+
+  const onTextLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setIsSingleLine(height <= 24);
+  }, []);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colorScheme.nerdView.attributeSectionBackground },
+        last ? styles.lastAttribute : {},
+      ]}
+      testID={testID}>
+      <Typography
+        color={colorScheme.nerdView.attributeLabel}
+        preset="s/code"
+        style={styles.attributeLabel}
+        testID={concatTestID(testID, 'attributeLabel')}>
+        {attributeKey}
+      </Typography>
+      <View
+        ref={valueViewRef}
+        style={[
+          styles.attributeValueContainer,
+          {
+            backgroundColor: colorScheme.nerdView.attributeValueBackground,
+            borderColor: colorScheme.nerdView.attributeValueBorder,
+          },
+        ]}>
+        {element ? (
+          element
+        ) : (
+          <TextWithHighlight
+            highlightedText={highlightedText}
+            onLayout={onTextLayout}
+            testID={concatTestID(testID, 'attributeValue')!}
+            text={previewText}
+          />
+        )}
+        {(canBeCopied || link) && isSingleLine !== undefined ? (
+          <Animated.View style={[styles.actionIcon, isSingleLine ? styles.actionIconSingleLine : undefined, iconStyle]}>
+            {
+              <ActionIcon
+                copy={canBeCopied}
+                link={link}
+                onCopyToClipboard={onCopyToClipboard}
+                testID={concatTestID(testID, 'actionIcon')}
+                value={`${highlightedText}${attributeText}`}
+              />
+            }
+          </Animated.View>
+        ) : null}
+      </View>
+      {expandable ? (
+        <Button
+          onPress={() => {
+            onExpand && onExpand(!expanded);
+            setExpanded(!expanded);
+          }}
+          style={styles.expandValueButton}
+          testID={concatTestID(testID, 'expandValueButton')}
+          title={expanded ? labels.collapse : labels.expand}
+          type={ButtonType.SmallTech}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+export default NerdModeItem;

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

@@ -0,0 +1,5 @@
+import { Biometry } from './keypad';
+import { PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps } from './pin-code-screen';
+import PinLockModal, { PinLockModalLabels } from './pin-lock';
+
+export { Biometry, PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps, PinLockModal, PinLockModalLabels };

package/src/ui-components/pin/keypad.tsx

@@ -0,0 +1,166 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { LayoutChangeEvent, LayoutRectangle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import { FaceIDIcon, FingerprintIcon, KeypadBackspaceIcon, KeypadClearIcon } from '../icons/keypad';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+interface DigitKeyProps {
+  testID: string | undefined;
+  digit: number;
+  onPress?: (digit: number) => void;
+}
+
+const DigitKey = React.forwardRef<TouchableOpacityRef, DigitKeyProps>(({ onPress, testID, digit }, ref) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <TouchableOpacity
+      testID={concatTestID(testID, String(digit))}
+      ref={ref}
+      accessibilityRole="button"
+      style={[styles.key, { backgroundColor: colorScheme.background }]}
+      disabled={!onPress}
+      onPress={() => onPress?.(digit)}>
+      <Typography maxFontSizeMultiplier={1.5} color={colorScheme.text} preset="xl">
+        {digit}
+      </Typography>
+    </TouchableOpacity>
+  );
+});
+
+DigitKey.displayName = 'DigitKey';
+
+export enum Biometry {
+  FaceID = 'faceID',
+  Other = 'other',
+}
+
+export interface KeypadProps {
+  testID?: string;
+  biometry?: Biometry | null;
+  onBiometricPress?: () => void;
+  onPressDigit?: (digit: number) => void;
+  onPressDelete?: () => void;
+  style?: StyleProp<ViewStyle>;
+  onDeleteAll?: () => void;
+}
+
+const MIN_HEIGHT = 360;
+const MIN_WIDTH = 264;
+const KEY_SIZE = 72;
+
+export const Keypad = React.forwardRef<TouchableOpacityRef, KeypadProps>(
+  ({ testID, onPressDigit, onPressDelete, biometry, onBiometricPress, style, onDeleteAll }, ref) => {
+    const t = useAccessibilityTranslation();
+    const colorScheme = useAppColorScheme();
+
+    const [layout, setLayout] = useState<LayoutRectangle>();
+    const onLayout = useCallback((event: LayoutChangeEvent) => setLayout(event.nativeEvent.layout), []);
+
+    const { width, height } = useMemo(() => {
+      if (!layout) {
+        return {};
+      }
+
+      const RATIO = MIN_WIDTH / MIN_HEIGHT;
+      if (layout.width > layout.height * RATIO) {
+        return { height: layout.height, width: layout.height * RATIO };
+      } else {
+        return { width: layout.width, height: layout.width / RATIO };
+      }
+    }, [layout]);
+
+    const gap = width ? (width - 3 * KEY_SIZE) / 4 : undefined;
+    const lineStyles = [styles.line, { width, marginBottom: gap }];
+
+    return (
+      <View testID={testID} style={[styles.cover, style]} onLayout={onLayout}>
+        <View style={{ height }}>
+          <View style={lineStyles}>
+            <DigitKey testID={testID} ref={ref} digit={1} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={2} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={3} onPress={onPressDigit} />
+          </View>
+          <View style={lineStyles}>
+            <DigitKey testID={testID} digit={4} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={5} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={6} onPress={onPressDigit} />
+          </View>
+          <View style={lineStyles}>
+            <DigitKey testID={testID} digit={7} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={8} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={9} onPress={onPressDigit} />
+          </View>
+          <View style={lineStyles}>
+            <TouchableOpacity
+              testID={concatTestID(testID, 'delete-all')}
+              accessibilityRole="button"
+              accessibilityLabel={t('accessibility.control.clear')}
+              style={styles.key}
+              disabled={!onDeleteAll}
+              onPress={onDeleteAll}>
+              {onDeleteAll ? <KeypadClearIcon color={colorScheme.text} /> : null}
+            </TouchableOpacity>
+            <DigitKey testID={testID} digit={0} onPress={onPressDigit} />
+            {biometry ? (
+              <TouchableOpacity
+                testID={concatTestID(testID, 'biometry')}
+                accessibilityRole="button"
+                accessibilityLabel={t(
+                  biometry === Biometry.FaceID ? 'accessibility.key.faceId' : 'accessibility.key.fingerprint',
+                )}
+                style={styles.key}
+                disabled={!onBiometricPress}
+                onPress={onBiometricPress}>
+                {biometry === Biometry.FaceID ? (
+                  <FaceIDIcon color={colorScheme.text} />
+                ) : (
+                  <FingerprintIcon color={colorScheme.text} />
+                )}
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity
+                testID={concatTestID(testID, 'delete')}
+                accessibilityRole="button"
+                accessibilityLabel={t('accessibility.control.delete')}
+                style={styles.key}
+                disabled={!onPressDelete}
+                onPress={onPressDelete}>
+                {onPressDelete ? <KeypadBackspaceIcon color={colorScheme.text} /> : null}
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  },
+);
+
+Keypad.displayName = 'Keypad';
+
+const styles = StyleSheet.create({
+  cover: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    maxHeight: 2 * MIN_HEIGHT,
+    maxWidth: 2 * MIN_WIDTH,
+    minHeight: MIN_HEIGHT,
+    minWidth: MIN_WIDTH,
+    width: '100%',
+  },
+  key: {
+    alignItems: 'center',
+    borderRadius: KEY_SIZE / 2,
+    height: KEY_SIZE,
+    justifyContent: 'center',
+    width: KEY_SIZE,
+  },
+  line: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+});