@ledgerhq/lumen-ui-rnative 0.1.1 → 0.1.3

package/src/lib/Components/AmountDisplay/AmountDisplay.test.tsx

@@ -12,6 +12,8 @@ const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </ThemeProvider>
 );
 
+const hidden = { includeHiddenElements: true } as const;
+
 describe('AmountDisplay', () => {
   const createFormatter =
     (overrides: Partial<FormattedValue> = {}) =>
@@ -24,17 +26,65 @@ describe('AmountDisplay', () => {
       ...overrides,
     });
 
+  type TestNode = {
+    type: unknown;
+    props: {
+      accessibilityValue?: { text?: string };
+      [key: string]: unknown;
+    };
+  };
+
+  const getDigitStripValues = (): number[] => {
+    return screen.root
+      .findAll(
+        (node: TestNode) =>
+          typeof node.type !== 'function' &&
+          node.props.accessibilityValue?.text !== undefined,
+      )
+      .map((node: TestNode) => Number(node.props.accessibilityValue?.text));
+  };
+
   it('renders with basic formatter', () => {
     const formatter = createFormatter();
     render(
       <TestWrapper>
-        <AmountDisplay value={1234.56} formatter={formatter} />
+        <AmountDisplay value={1234.56} formatter={formatter} hidden={false} />
+      </TestWrapper>,
+    );
+
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+    expect(getDigitStripValues()).toEqual([1, 2, 3, 4, 5, 6]);
+  });
+
+  it('handles zero value', () => {
+    const formatter = createFormatter({
+      integerPart: '0',
+      decimalPart: '00',
+    });
+    render(
+      <TestWrapper>
+        <AmountDisplay value={0} formatter={formatter} />
+      </TestWrapper>,
+    );
+
+    expect(getDigitStripValues()).toEqual([0, 0, 0]);
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+  });
+
+  it('handles large numbers', () => {
+    const formatter = createFormatter({
+      integerPart: '1234567',
+      decimalPart: '89',
+    });
+    render(
+      <TestWrapper>
+        <AmountDisplay value={1234567.89} formatter={formatter} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('USD')).toBeTruthy();
-    expect(screen.getByText('1234')).toBeTruthy();
-    expect(screen.getByText('.56')).toBeTruthy();
+    expect(getDigitStripValues()).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9]);
+    expect(screen.getByText('.', hidden)).toBeTruthy();
   });
 
   it('renders currency at start position', () => {
@@ -45,8 +95,7 @@ describe('AmountDisplay', () => {
       </TestWrapper>,
     );
 
-    expect(screen.getByText('USD')).toBeTruthy();
-    expect(screen.getByText('1234')).toBeTruthy();
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
   });
 
   it('renders currency at end position', () => {
@@ -57,8 +106,7 @@ describe('AmountDisplay', () => {
       </TestWrapper>,
     );
 
-    expect(screen.getByText('USD')).toBeTruthy();
-    expect(screen.getByText('.56')).toBeTruthy();
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
   });
 
   it('renders without decimal part', () => {
@@ -69,8 +117,7 @@ describe('AmountDisplay', () => {
       </TestWrapper>,
     );
 
-    expect(screen.getByText('1234')).toBeTruthy();
-    expect(screen.queryByText(/\./)).toBeNull();
+    expect(screen.queryByText('.', hidden)).toBeNull();
   });
 
   it('uses comma as decimal separator', () => {
@@ -81,18 +128,18 @@ describe('AmountDisplay', () => {
       </TestWrapper>,
     );
 
-    expect(screen.getByText(',56')).toBeTruthy();
+    expect(screen.getByText(',', hidden)).toBeTruthy();
   });
 
-  it('uses default dot separator when not specified', () => {
-    const formatter = createFormatter({ decimalSeparator: undefined });
+  it('uses default dot separator', () => {
+    const formatter = createFormatter();
     render(
       <TestWrapper>
         <AmountDisplay value={1234.56} formatter={formatter} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('.56')).toBeTruthy();
+    expect(screen.getByText('.', hidden)).toBeTruthy();
   });
 
   it('forwards additional props', () => {
@@ -110,85 +157,88 @@ describe('AmountDisplay', () => {
     expect(screen.getByTestId('amount-display')).toBeTruthy();
   });
 
-  it('handles zero value', () => {
-    const formatter = createFormatter({
-      integerPart: '0',
-      decimalPart: '00',
-    });
+  it('displays bullet points when hidden is true', () => {
+    const formatter = createFormatter();
     render(
       <TestWrapper>
-        <AmountDisplay value={0} formatter={formatter} />
+        <AmountDisplay value={1234.56} formatter={formatter} hidden={true} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('0')).toBeTruthy();
-    expect(screen.getByText('.00')).toBeTruthy();
+    expect(screen.getByText('••••', hidden)).toBeTruthy();
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.queryByText('.', hidden)).toBeNull();
   });
 
-  it('handles large numbers', () => {
-    const formatter = createFormatter({
-      integerPart: '1,234,567',
-      decimalPart: '89',
-    });
+  it('renders correctly when loading is true', () => {
+    const formatter = createFormatter();
     render(
       <TestWrapper>
-        <AmountDisplay value={1234567.89} formatter={formatter} />
+        <AmountDisplay value={1234.56} formatter={formatter} loading={true} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('1,234,567')).toBeTruthy();
-    expect(screen.getByText('.89')).toBeTruthy();
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.getByText('.', hidden)).toBeTruthy();
   });
 
-  it('displays bullet points when hidden is true', () => {
+  it('renders correctly when loading is false', () => {
     const formatter = createFormatter();
     render(
       <TestWrapper>
-        <AmountDisplay value={1234.56} formatter={formatter} hidden={true} />
+        <AmountDisplay value={1234.56} formatter={formatter} loading={false} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('••••')).toBeTruthy();
-    expect(screen.getByText('USD')).toBeTruthy();
-    expect(screen.queryByText('1234')).toBeNull();
-    expect(screen.queryByText('.56')).toBeNull();
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.getByText('.', hidden)).toBeTruthy();
   });
 
-  it('displays amount normally when hidden is false', () => {
-    const formatter = createFormatter();
+  it('sets accessibilityLabel with currency at start', () => {
+    const formatter = createFormatter({ currencyPosition: 'start' });
     render(
       <TestWrapper>
-        <AmountDisplay value={1234.56} formatter={formatter} hidden={false} />
+        <AmountDisplay value={1234.56} formatter={formatter} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('1234')).toBeTruthy();
-    expect(screen.getByText('.56')).toBeTruthy();
-    expect(screen.queryByText('••••')).toBeNull();
+    expect(screen.getByLabelText('USD 1234.56')).toBeTruthy();
   });
 
-  it('hides decimal part and shows only bullets when hidden', () => {
+  it('sets accessibilityLabel with currency at end', () => {
     const formatter = createFormatter({ currencyPosition: 'end' });
     render(
       <TestWrapper>
-        <AmountDisplay value={1234.56} formatter={formatter} hidden={true} />
+        <AmountDisplay value={1234.56} formatter={formatter} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('••••')).toBeTruthy();
-    expect(screen.queryByText('.56')).toBeNull();
+    expect(screen.getByLabelText('1234.56 USD')).toBeTruthy();
   });
 
-  it('renders correctly when loading is true', () => {
+  it('sets accessibilityLabel to "Amount hidden" when hidden', () => {
     const formatter = createFormatter();
     render(
       <TestWrapper>
-        <AmountDisplay value={1234.56} formatter={formatter} loading={true} />
+        <AmountDisplay value={1234.56} formatter={formatter} hidden={true} />
+      </TestWrapper>,
+    );
+
+    expect(screen.getByLabelText('Amount hidden')).toBeTruthy();
+  });
+
+  it('renders group separators', () => {
+    const formatter = createFormatter({
+      integerPart: '1,234,567',
+      decimalPart: '89',
+      decimalSeparator: '.',
+    });
+    render(
+      <TestWrapper>
+        <AmountDisplay value={1234567.89} formatter={formatter} />
       </TestWrapper>,
     );
 
-    expect(screen.getByText('USD')).toBeTruthy();
-    expect(screen.getByText('1234')).toBeTruthy();
-    expect(screen.getByText('.56')).toBeTruthy();
+    expect(screen.getAllByText(',', hidden)).toHaveLength(2);
   });
 });

package/src/lib/Components/AmountDisplay/AmountDisplay.tsx

@@ -1,15 +1,67 @@
-import { View, Text } from 'react-native';
+import { useSplitText, buildAriaLabel } from '@ledgerhq/lumen-utils-shared';
+import { memo, useEffect } from 'react';
+import { Text, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { Pulse } from '../../Animations/Pulse';
 import { Box } from '../Utility';
-import { AmountDisplayProps } from './types';
+import {
+  AmountDisplayProps,
+  DigitStripListProps,
+  DigitStripProps,
+  DIGITS,
+} from './types';
+
+const INTEGER_DIGIT_WIDTHS = {
+  0: 24.5,
+  1: 15,
+  2: 23,
+  3: 24,
+  4: 25,
+  5: 23,
+  6: 24.5,
+  7: 21.5,
+  8: 24,
+  9: 24,
+};
+
+const DECIMAL_DIGIT_WIDTHS = {
+  0: 17,
+  1: 10.5,
+  2: 16,
+  3: 16.5,
+  4: 17.2,
+  5: 15.7,
+  6: 17,
+  7: 14.7,
+  8: 16.5,
+  9: 16.5,
+};
+
+const TIMING_CONFIG = {
+  duration: 600,
+  easing: Easing.inOut(Easing.ease),
+};
 
 const useStyles = () => {
   return useStyleSheet(
     (t) => ({
       container: {
         flexDirection: 'row',
-        alignItems: 'baseline',
+        alignItems: 'flex-end',
+      },
+      integerPartContainer: {
+        flexDirection: 'row',
+      },
+      decimalPartContainer: {
+        flexDirection: 'row',
+        paddingBottom: t.spacings.s2,
       },
       integerText: {
         ...t.typographies.heading1SemiBold,
@@ -38,6 +90,73 @@ const useStyles = () => {
   );
 };
 
+const DigitStrip = memo(
+  ({ value, textStyle, animate, type }: DigitStripProps) => {
+    const targetWidth = (
+      type === 'integer' ? INTEGER_DIGIT_WIDTHS : DECIMAL_DIGIT_WIDTHS
+    )[value];
+    const lineHeight = textStyle.lineHeight;
+    const translateY = useSharedValue(-value * lineHeight);
+    const width = useSharedValue<number>(targetWidth);
+
+    useEffect(() => {
+      if (animate) {
+        translateY.value = withTiming(-value * lineHeight, TIMING_CONFIG);
+        width.value = withTiming(targetWidth, TIMING_CONFIG);
+      } else {
+        translateY.value = -value * lineHeight;
+        width.value = targetWidth;
+      }
+    }, [value, lineHeight, translateY, animate, width, targetWidth]);
+
+    const animatedStyle = useAnimatedStyle(
+      () => ({
+        transform: [{ translateY: translateY.value }],
+      }),
+      [translateY],
+    );
+
+    return (
+      <Animated.View
+        style={{ height: lineHeight, overflow: 'hidden', width: width }}
+        accessibilityValue={{ text: String(value) }}
+      >
+        <Animated.View style={[animatedStyle, { alignItems: 'center' }]}>
+          {DIGITS.map((d) => (
+            <Text key={d} style={textStyle}>
+              {d}
+            </Text>
+          ))}
+        </Animated.View>
+      </Animated.View>
+    );
+  },
+);
+
+const DigitStripList = memo(
+  ({ items, textStyle, animate, type }: DigitStripListProps) => {
+    return items.map((item, index) => {
+      const key = items.length - index;
+      if (item.type === 'separator') {
+        return (
+          <Text key={key} style={textStyle}>
+            {item.value}
+          </Text>
+        );
+      }
+      return (
+        <DigitStrip
+          key={key}
+          value={Number(item.value) as DigitStripProps['value']}
+          animate={animate}
+          textStyle={textStyle}
+          type={type}
+        />
+      );
+    });
+  },
+);
+
 /**
  * AmountDisplay - Renders formatted monetary amounts with flexible currency positioning and decimal formatting.
  *
@@ -76,34 +195,66 @@ export const AmountDisplay = ({
   formatter,
   hidden = false,
   loading = false,
+  animate = true,
   ...props
 }: AmountDisplayProps) => {
   const styles = useStyles();
+  const { t } = useCommonTranslation();
   const parts = formatter(value);
+  const splitDigits = useSplitText(parts);
+  const ariaLabel = buildAriaLabel(
+    parts,
+    hidden,
+    t('components.amountDisplay.amountHiddenAriaLabel'),
+  );
 
   return (
-    <Box {...props}>
+    <Box
+      accessibilityLabel={ariaLabel}
+      accessibilityState={{ busy: loading }}
+      {...props}
+    >
       <Pulse animate={loading}>
-        <View style={styles.container}>
-          {(parts.currencyPosition === undefined ||
-            parts.currencyPosition === 'start') && (
-            <Text style={[styles.currencyStartText, styles.spacingStart]}>
-              {parts.currencyText}
-            </Text>
-          )}
-          <Text style={styles.integerText}>
-            {hidden ? '••••' : parts.integerPart}
-          </Text>
-          {parts.decimalPart && !hidden && (
-            <Text style={styles.decimalText}>
-              {(parts.decimalSeparator || '.') + parts.decimalPart}
-            </Text>
-          )}
-          {parts.currencyPosition === 'end' && (
-            <Text style={[styles.currencyEndText, styles.spacingEnd]}>
-              {parts.currencyText}
-            </Text>
-          )}
+        <View
+          style={styles.container}
+          accessibilityElementsHidden
+          importantForAccessibility='no-hide-descendants'
+        >
+          <View style={styles.integerPartContainer}>
+            {parts.currencyPosition === 'start' && (
+              <Text style={[styles.currencyStartText, styles.spacingStart]}>
+                {parts.currencyText}
+              </Text>
+            )}
+            {hidden ? (
+              <Text style={styles.integerText}>••••</Text>
+            ) : (
+              <DigitStripList
+                items={splitDigits.integerPart}
+                textStyle={styles.integerText}
+                animate={animate}
+                type='integer'
+              />
+            )}
+          </View>
+          <View style={styles.decimalPartContainer}>
+            {!hidden && parts.decimalPart && (
+              <Text style={styles.decimalText}>{parts.decimalSeparator}</Text>
+            )}
+            {parts.decimalPart && !hidden && (
+              <DigitStripList
+                items={splitDigits.decimalPart}
+                textStyle={styles.decimalText}
+                animate={animate}
+                type='decimal'
+              />
+            )}
+            {parts.currencyPosition === 'end' && (
+              <Text style={[styles.currencyEndText, styles.spacingEnd]}>
+                {parts.currencyText}
+              </Text>
+            )}
+          </View>
         </View>
       </Pulse>
     </Box>

package/src/lib/Components/AmountDisplay/types.ts

@@ -1,32 +1,24 @@
-import { ViewProps } from 'react-native';
+import type { FormattedValue, SplitChar } from '@ledgerhq/lumen-utils-shared';
+import { ViewProps, TextStyle } from 'react-native';
 import { StyledViewProps } from '../../../styles';
 
-export type FormattedValue = {
-  /**
-   * The whole number portion of the amount (e.g., "1234" from 1234.56)
-   */
-  integerPart: string;
-  /**
-   * The fractional portion of the amount without the separator (e.g., "56" from 1234.56)
-   * @optional
-   */
-  decimalPart?: string;
-  /**
-   * The currency text or symbol (e.g., "$", "USD", "€", "BTC")
-   */
-  currencyText: string;
-  /**
-   * The character which separates integer and fractional parts.
-   */
-  decimalSeparator: '.' | ',';
-  /**
-   * Position of the currency text relative to the amount.
-   * @optional
-   * @default 'start'
-   */
-  currencyPosition?: 'start' | 'end';
+export type { FormattedValue };
+
+export const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;
+
+type IntegerDigit = (typeof DIGITS)[number];
+
+export type DigitStripProps = {
+  value: IntegerDigit;
+  animate: boolean;
+  textStyle: TextStyle & { lineHeight: number };
+  type: 'integer' | 'decimal';
 };
 
+export type DigitStripListProps = {
+  items: SplitChar[];
+} & Omit<DigitStripProps, 'value'>;
+
 /**
  * Props for the AmountDisplay component.
  */
@@ -51,4 +43,9 @@ export type AmountDisplayProps = ViewProps & {
    * @default false
    */
   loading?: boolean;
+  /**
+   * Whether the odometer animation should play on value change or not
+   * @default true
+   */
+  animate?: boolean;
 } & Omit<StyledViewProps, 'children'>;