@ledgerhq/lumen-ui-rnative 0.1.39 → 0.1.41

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

@@ -164,6 +164,12 @@ const useAnimatedDigitStrip = ({
   return { animatedStyle };
 };
 
+// Horizontal breathing room for the clip box so glyphs that are slightly wider
+// than the measured `targetWidth` are not cut on their left/right edges. RN has
+// no per-axis overflow, so we extend the clip box horizontally while keeping the
+// vertical clip tight to `lineHeight`
+const HORIZONTAL_CLIP_PADDING = 8;
+
 const DigitStrip = memo(
   ({ value, textStyle, animate, widths }: DigitStripProps) => {
     const targetWidth = widths[value];
@@ -179,23 +185,39 @@ const DigitStrip = memo(
 
     return (
       <Animated.View
-        style={{ height: lineHeight, overflow: 'hidden', width: width }}
+        style={{
+          height: lineHeight,
+          width: animate ? width : targetWidth,
+        }}
         accessibilityValue={{ text: String(value) }}
       >
-        <Animated.View style={[animatedStyle, { alignItems: 'center' }]}>
-          {DIGITS.map((d) => (
-            <Text
-              allowFontScaling={false}
-              key={d}
-              style={[
-                textStyle,
-                RuntimeConstants.isAndroid && { height: lineHeight },
-              ]}
-            >
-              {d}
-            </Text>
-          ))}
-        </Animated.View>
+        <View
+          pointerEvents='none'
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: -HORIZONTAL_CLIP_PADDING,
+            right: -HORIZONTAL_CLIP_PADDING,
+            overflow: 'hidden',
+            alignItems: 'center',
+          }}
+        >
+          <Animated.View style={[animatedStyle, { alignItems: 'center' }]}>
+            {DIGITS.map((d) => (
+              <Text
+                allowFontScaling={false}
+                key={d}
+                style={[
+                  textStyle,
+                  RuntimeConstants.isAndroid && { height: lineHeight },
+                ]}
+              >
+                {d}
+              </Text>
+            ))}
+          </Animated.View>
+        </View>
       </Animated.View>
     );
   },

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

@@ -0,0 +1,166 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { AmountInput } from './AmountInput';
+
+const hidden = { includeHiddenElements: true } as const;
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+describe('AmountInput', () => {
+  describe('Rendering', () => {
+    it('renders with an empty value', () => {
+      renderWithProvider(
+        <AmountInput value='' onChangeText={jest.fn()} testID='input' />,
+      );
+      expect(screen.getByTestId('input')).toBeTruthy();
+    });
+
+    it('renders the currency text', () => {
+      renderWithProvider(
+        <AmountInput value='' onChangeText={jest.fn()} currencyText='USD' />,
+      );
+      expect(screen.getByText('USD', hidden)).toBeTruthy();
+    });
+
+    it('displays 0 when value is empty', () => {
+      renderWithProvider(<AmountInput value='' onChangeText={jest.fn()} />);
+      expect(screen.getByText('0', hidden)).toBeTruthy();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('calls onChangeText with formatted text on change', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          testID='input'
+          thousandsSeparator={false}
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '123.45');
+      expect(onChangeText).toHaveBeenCalledWith('123.45');
+    });
+
+    it('formats with thousands separator on user input', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput value='' onChangeText={onChangeText} testID='input' />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '1000');
+      expect(onChangeText).toHaveBeenCalledWith('1 000');
+    });
+
+    it('strips decimal input when allowDecimals is false', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          allowDecimals={false}
+          thousandsSeparator={false}
+          testID='input'
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '12.34');
+      expect(onChangeText).toHaveBeenCalledWith('1234');
+    });
+
+    it('truncates decimal part with maxDecimalLength on user input', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          maxDecimalLength={2}
+          thousandsSeparator={false}
+          testID='input'
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '1.2345');
+      expect(onChangeText).toHaveBeenCalledWith('1.23');
+    });
+  });
+
+  describe('programmatic value formatting', () => {
+    it('formats a raw unformatted string on initial render', () => {
+      renderWithProvider(
+        <AmountInput value='2433.123456789' onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+    });
+
+    it('formats a number value on initial render', () => {
+      renderWithProvider(
+        <AmountInput value={2433.123456789} onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+    });
+
+    it('adds thousands grouping for a large number value', () => {
+      renderWithProvider(
+        <AmountInput value={1000000} onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('1 000 000', hidden)).toBeTruthy();
+    });
+
+    it('applies maxDecimalLength to a programmatically set value', () => {
+      renderWithProvider(
+        <AmountInput
+          value='2433.123456789'
+          maxDecimalLength={2}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('2 433.12', hidden)).toBeTruthy();
+    });
+
+    it('applies maxIntegerLength to a programmatically set value', () => {
+      renderWithProvider(
+        <AmountInput
+          value='1234567890'
+          maxIntegerLength={3}
+          allowDecimals={false}
+          thousandsSeparator={false}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('123', hidden)).toBeTruthy();
+    });
+
+    it('omits thousands separator when thousandsSeparator is false', () => {
+      renderWithProvider(
+        <AmountInput
+          value='2433.12'
+          thousandsSeparator={false}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('2433.12', hidden)).toBeTruthy();
+    });
+
+    it('formats consistently with what typing the same digits produces', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value='2433.123456789'
+          onChangeText={onChangeText}
+          testID='input'
+        />,
+      );
+
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+
+      fireEvent.changeText(screen.getByTestId('input'), '2433.123456789');
+      expect(onChangeText).toHaveBeenCalledWith('2 433.123456789');
+    });
+  });
+});

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -1,25 +1,28 @@
-import {
-  getFontSize,
-  textFormatter,
-  useDisabledContext,
-} from '@ledgerhq/lumen-utils-shared';
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { useImperativeHandle, useRef, useState } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
 import { Pressable, StyleSheet, TextInput, View } from 'react-native';
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
-import { useStyleSheet, useTheme } from '../../../styles';
+import Animated from 'react-native-reanimated';
+import { useStyleSheet } from '../../../styles';
 import { Box } from '../Utility';
-import {
-  type AmountInputAlign,
-  type AmountInputProps,
-  type AmountInputSize,
+import type {
+  AmountInputAlign,
+  AmountInputProps,
+  AmountInputSize,
 } from './types';
+import { useAmountInputAnimations } from './useAmountInputAnimations/useAmountInputAnimations';
+import { useAmountInputFormatting } from './useAmountInputFormatting/useAmountInputFormatting';
+
+type CurrencyProps = {
+  style: StyleProp<TextStyle>;
+  children: string;
+};
+
+const Currency = ({ style, children }: CurrencyProps) => (
+  <Animated.Text style={style} allowFontScaling={false}>
+    {children}
+  </Animated.Text>
+);
 
 /**
  * AmountInput component for handling numeric input with currency display.
@@ -46,109 +49,43 @@ export const AmountInput = ({
   ...props
 }: AmountInputProps) => {
   const inputRef = useRef<TextInput>(null);
-  const inputValue = String(value);
   const [isFocused, setIsFocused] = useState(false);
+
   const disabled = useDisabledContext({
     consumerName: 'AmountInput',
     mergeWith: { disabled: disabledProp },
   });
 
-  const translateX = useSharedValue(0);
-  const animatedFontSize = useSharedValue(getFontSize(inputValue, size));
-  const caretOpacity = useSharedValue(0);
+  const { formattedValue, handleChangeText } = useAmountInputFormatting({
+    value,
+    onChangeText,
+    formatOptions: {
+      allowDecimals,
+      thousandsSeparator,
+      maxIntegerLength,
+      maxDecimalLength,
+    },
+  });
 
-  useImperativeHandle(ref, () => inputRef.current as TextInput, []);
+  const { animatedInputStyle, animatedCurrencyStyle, animatedCaretStyle } =
+    useAmountInputAnimations({
+      formattedValue,
+      size,
+      isFocused,
+      disabled,
+    });
 
-  const { theme } = useTheme();
   const styles = useStyles({
     size,
     align,
-    hasValue: !!inputValue,
+    hasValue: !!formattedValue,
     isEditable: !disabled,
     isInvalid,
   });
-  const caretFixedHeight = size === 'sm' ? theme.sizes.s28 : 0;
-
-  const animatedInputStyle = useAnimatedStyle(
-    () => ({
-      transform: [{ translateX: translateX.value }],
-      fontSize: animatedFontSize.value,
-      letterSpacing: 0,
-    }),
-    [translateX, animatedFontSize],
-  );
-
-  const animatedCurrencyStyle = useAnimatedStyle(
-    () => ({
-      fontSize: animatedFontSize.value,
-      letterSpacing: 0,
-    }),
-    [animatedFontSize],
-  );
 
-  const animatedCaretStyle = useAnimatedStyle(
-    () => ({
-      opacity: caretOpacity.value,
-      height: size === 'sm' ? caretFixedHeight : animatedFontSize.value,
-    }),
-    [caretOpacity, animatedFontSize, size, caretFixedHeight],
-  );
-
-  useEffect(() => {
-    const newSize = getFontSize(inputValue, size);
-
-    translateX.value = withSequence(
-      withTiming(4, { duration: 0 }),
-      withTiming(0, {
-        duration: 250,
-        easing: Easing.bezier(0.4, 0, 0.2, 1),
-      }),
-    );
-
-    animatedFontSize.value = withTiming(newSize, {
-      duration: 250,
-      easing: Easing.bezier(0.4, 0, 0.2, 1),
-    });
-  }, [inputValue, size, animatedFontSize, translateX]);
-
-  useEffect(() => {
-    if (isFocused && !disabled) {
-      caretOpacity.value = withRepeat(
-        withSequence(
-          withTiming(1, { duration: 150, easing: Easing.ease }),
-          withTiming(1, { duration: 500 }),
-          withTiming(0, { duration: 150, easing: Easing.ease }),
-          withTiming(0, { duration: 500 }),
-        ),
-        -1,
-        false,
-      );
-    } else {
-      caretOpacity.value = 0;
-    }
-  }, [isFocused, disabled, caretOpacity]);
-
-  const handleChangeText = (text: string) => {
-    const formatted = textFormatter(text, {
-      allowDecimals,
-      thousandsSeparator,
-      maxIntegerLength,
-      maxDecimalLength,
-    });
-
-    onChangeText(formatted);
-  };
-
-  const CurrencyText = currencyText ? (
-    <Animated.Text
-      style={[styles.currency, animatedCurrencyStyle]}
-      allowFontScaling={false}
-    >
-      {currencyText}
-    </Animated.Text>
-  ) : null;
+  useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
-  const handlePress = () => {
+  const handlePress = (): void => {
     if (!disabled) {
       inputRef.current?.focus();
     }
@@ -161,7 +98,7 @@ export const AmountInput = ({
         ref={inputRef}
         keyboardType='decimal-pad'
         editable={editable !== false && !disabled}
-        value={inputValue}
+        value={formattedValue}
         onChangeText={handleChangeText}
         onFocus={(e) => {
           setIsFocused(true);
@@ -180,20 +117,28 @@ export const AmountInput = ({
           style={styles.pressable}
           accessibilityLabel={props.accessibilityLabel || 'Amount input'}
         >
-          {currencyPosition === 'left' && CurrencyText}
+          {currencyText && currencyPosition === 'left' && (
+            <Currency style={[styles.currency, animatedCurrencyStyle]}>
+              {currencyText}
+            </Currency>
+          )}
 
           {/** display text that mirrors the hidden input's value */}
           <Animated.Text
             style={[styles.displayText, animatedInputStyle, style]}
             allowFontScaling={false}
           >
-            {inputValue || '0'}
+            {formattedValue || '0'}
           </Animated.Text>
 
           {/** custom caret */}
           <Animated.View style={[styles.caret, animatedCaretStyle]} />
 
-          {currencyPosition === 'right' && CurrencyText}
+          {currencyText && currencyPosition === 'right' && (
+            <Currency style={[styles.currency, animatedCurrencyStyle]}>
+              {currencyText}
+            </Currency>
+          )}
         </Pressable>
       </View>
     </Box>

package/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts

@@ -0,0 +1,100 @@
+import { getFontSize } from '@ledgerhq/lumen-utils-shared';
+import { useEffect } from 'react';
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTheme } from '../../../../styles';
+import type { AmountInputSize } from '../types';
+
+type UseAmountInputAnimationsArgs = {
+  formattedValue: string;
+  size: AmountInputSize;
+  isFocused: boolean;
+  disabled: boolean;
+};
+
+type UseAmountInputAnimationsReturn = {
+  animatedInputStyle: ReturnType<typeof useAnimatedStyle>;
+  animatedCurrencyStyle: ReturnType<typeof useAnimatedStyle>;
+  animatedCaretStyle: ReturnType<typeof useAnimatedStyle>;
+};
+
+export const useAmountInputAnimations = ({
+  formattedValue,
+  size,
+  isFocused,
+  disabled,
+}: UseAmountInputAnimationsArgs): UseAmountInputAnimationsReturn => {
+  const { theme } = useTheme();
+  const caretFixedHeight = size === 'sm' ? theme.sizes.s28 : 0;
+
+  const translateX = useSharedValue(0);
+  const animatedFontSize = useSharedValue(getFontSize(formattedValue, size));
+  const caretOpacity = useSharedValue(0);
+
+  const animatedInputStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: translateX.value }],
+      fontSize: animatedFontSize.value,
+      letterSpacing: 0,
+    }),
+    [translateX, animatedFontSize],
+  );
+
+  const animatedCurrencyStyle = useAnimatedStyle(
+    () => ({
+      fontSize: animatedFontSize.value,
+      letterSpacing: 0,
+    }),
+    [animatedFontSize],
+  );
+
+  const animatedCaretStyle = useAnimatedStyle(
+    () => ({
+      opacity: caretOpacity.value,
+      height: size === 'sm' ? caretFixedHeight : animatedFontSize.value,
+    }),
+    [caretOpacity, animatedFontSize, size, caretFixedHeight],
+  );
+
+  useEffect(() => {
+    const newSize = getFontSize(formattedValue, size);
+
+    translateX.value = withSequence(
+      withTiming(4, { duration: 0 }),
+      withTiming(0, {
+        duration: 250,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+      }),
+    );
+
+    animatedFontSize.value = withTiming(newSize, {
+      duration: 250,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+    });
+  }, [formattedValue, size, animatedFontSize, translateX]);
+
+  useEffect(() => {
+    if (isFocused && !disabled) {
+      caretOpacity.value = withRepeat(
+        withSequence(
+          withTiming(1, { duration: 150, easing: Easing.ease }),
+          withTiming(1, { duration: 500 }),
+          withTiming(0, { duration: 150, easing: Easing.ease }),
+          withTiming(0, { duration: 500 }),
+        ),
+        -1,
+        false,
+      );
+    } else {
+      caretOpacity.value = 0;
+    }
+  }, [isFocused, disabled, caretOpacity]);
+
+  return { animatedInputStyle, animatedCurrencyStyle, animatedCaretStyle };
+};

package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { renderHook, act } from '@testing-library/react-native';
+import { useAmountInputFormatting } from './useAmountInputFormatting';
+
+const defaultFormatOptions = {
+  allowDecimals: true,
+  thousandsSeparator: true,
+  maxIntegerLength: 9,
+  maxDecimalLength: 9,
+};
+
+describe('useAmountInputFormatting', () => {
+  it('formats the value prop', () => {
+    const { result } = renderHook(() =>
+      useAmountInputFormatting({
+        value: '1000',
+        onChangeText: jest.fn(),
+        formatOptions: defaultFormatOptions,
+      }),
+    );
+
+    expect(result.current.formattedValue).toBe('1 000');
+  });
+
+  it('updates formattedValue when the value prop changes', () => {
+    const { result, rerender } = renderHook<
+      ReturnType<typeof useAmountInputFormatting>,
+      { value: string }
+    >(
+      ({ value }) =>
+        useAmountInputFormatting({
+          value,
+          onChangeText: jest.fn(),
+          formatOptions: defaultFormatOptions,
+        }),
+      { initialProps: { value: '100' } },
+    );
+
+    expect(result.current.formattedValue).toBe('100');
+
+    rerender({ value: '2000' });
+
+    expect(result.current.formattedValue).toBe('2 000');
+  });
+
+  it('formats user input and calls onChangeText with the cleaned value', () => {
+    const onChangeText = jest.fn();
+    const { result } = renderHook(() =>
+      useAmountInputFormatting({
+        value: '',
+        onChangeText,
+        formatOptions: defaultFormatOptions,
+      }),
+    );
+
+    act(() => {
+      result.current.handleChangeText('1000');
+    });
+
+    expect(onChangeText).toHaveBeenCalledWith('1 000');
+  });
+});

package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.ts

@@ -0,0 +1,48 @@
+import { textFormatter } from '@ledgerhq/lumen-utils-shared';
+import { useCallback, useMemo } from 'react';
+
+type FormatOptions = {
+  allowDecimals: boolean;
+  thousandsSeparator: boolean;
+  maxIntegerLength: number;
+  maxDecimalLength: number;
+};
+
+type UseAmountInputFormattingArgs = {
+  value: string | number;
+  onChangeText: (text: string) => void;
+  formatOptions: FormatOptions;
+};
+
+type UseAmountInputFormattingReturn = {
+  formattedValue: string;
+  handleChangeText: (text: string) => void;
+};
+
+export const useAmountInputFormatting = ({
+  value,
+  onChangeText,
+  formatOptions,
+}: UseAmountInputFormattingArgs): UseAmountInputFormattingReturn => {
+  const format = useCallback(
+    (v: string | number): string => textFormatter(String(v), formatOptions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      formatOptions.allowDecimals,
+      formatOptions.thousandsSeparator,
+      formatOptions.maxIntegerLength,
+      formatOptions.maxDecimalLength,
+    ],
+  );
+
+  const formattedValue = useMemo(() => format(value), [value, format]);
+
+  const handleChangeText = useCallback(
+    (text: string): void => {
+      onChangeText(format(text));
+    },
+    [format, onChangeText],
+  );
+
+  return { formattedValue, handleChangeText };
+};

package/src/lib/Components/Avatar/Avatar.figma.tsx

@@ -7,6 +7,10 @@ figma.connect(
   {
     imports: ["import { Avatar } from '@ledgerhq/lumen-ui-rnative'"],
     props: {
+      appearance: figma.enum('appearance', {
+        gray: 'gray',
+        transparent: 'transparent',
+      }),
       size: figma.enum('size', {
         sm: 'sm',
         md: 'md',
@@ -21,6 +25,7 @@ figma.connect(
     example: (props) => (
       <Avatar
         src='https://example-image.com'
+        appearance={props.appearance}
         size={props.size}
         alt="John Doe's Avatar"
         showNotification={props.showNotification}

package/src/lib/Components/Avatar/Avatar.mdx

@@ -40,6 +40,15 @@ Avatars come in four different sizes:
 
 <Canvas of={AvatarStories.SizeShowcase} />
 
+### Appearance
+
+The `appearance` prop controls the background color of the avatar container.
+
+- **`gray`**: Uses a muted gray background
+- **`transparent`**: Uses a semi-transparent muted background — default
+
+<Canvas of={AvatarStories.AppearanceShowcase} />
+
 ### States
 
 The Avatar component handles two primary states automatically: