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

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

@@ -1,296 +0,0 @@
-import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
-import { Dimensions, LayoutChangeEvent, Linking, StyleSheet, View, ViewStyle } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import Animated, {
-  clamp,
-  SharedValue,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-
-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';
-import { concatTestID } from '../utils/testID';
-
-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);
-    }
-  }, [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,
-        },
-      ],
-    };
-  });
-
-  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/pin/index.ts

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

package/src/pin/keypad.tsx

@@ -1,166 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { LayoutChangeEvent, LayoutRectangle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-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';
-import { concatTestID } from '../utils/testID';
-
-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',
-  },
-});

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';