@ledgerhq/lumen-ui-rnative 0.1.40 → 0.1.42

package/dist/typescript/src/lib/Components/Trend/Trend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Trend.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Trend/Trend.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAW1C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,EAAO,EACP,QAAQ,EAAE,YAAoB,EAC9B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,2CAmDZ"}
+{"version":3,"file":"Trend.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Trend/Trend.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA4B1C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,EAAO,EACP,QAAQ,EAAE,YAAoB,EAC9B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,2CAoCZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.16",
+    "@ledgerhq/lumen-design-core": "0.1.17",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^4.1.0",

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,114 +49,43 @@ export const AmountInput = ({
   ...props
 }: AmountInputProps) => {
   const inputRef = useRef<TextInput>(null);
-  const inputValue = textFormatter(String(value), {
-    allowDecimals,
-    thousandsSeparator,
-    maxIntegerLength,
-    maxDecimalLength,
-  });
   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();
     }
@@ -166,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);
@@ -185,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/Banner/Banner.tsx

@@ -13,7 +13,6 @@ import {
 import type { IconProps } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Box } from '../Utility';
-import { Wrap } from '../Wrap';
 import type { BannerProps } from './types';
 
 type Appearance = NonNullable<BannerProps['appearance']>;
@@ -82,6 +81,7 @@ const useStyles = ({ appearance }: { appearance: Appearance }) => {
         ]),
         actionsWrapper: {
           flexDirection: 'row',
+          flexWrap: 'wrap',
           gap: t.spacings.s4,
         },
       };
@@ -169,16 +169,13 @@ export const Banner = ({
           )}
           {description && (
             <View>
-              <Wrap
-                if={isTextChildren(description)}
-                with={(children) => (
-                  <Text style={styles.description} numberOfLines={5}>
-                    {children}
-                  </Text>
-                )}
-              >
-                {description}
-              </Wrap>
+              {isTextChildren(description) ? (
+                <Text style={styles.description} numberOfLines={5}>
+                  {description}
+                </Text>
+              ) : (
+                description
+              )}
             </View>
           )}
         </View>

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

@@ -9,7 +9,7 @@ export type BannerProps = {
   /**
    * The main title of the banner.
    */
-  title?: string;
+  title?: ReactNode;
   /**
    * Optional descriptive text.
    */
@@ -17,11 +17,11 @@ export type BannerProps = {
   /**
    * Optional primary action.
    */
-  primaryAction?: React.ReactNode;
+  primaryAction?: ReactNode;
   /**
    * Optional secondary action.
    */
-  secondaryAction?: React.ReactNode;
+  secondaryAction?: ReactNode;
   /**
    * Optional close action.
    */

package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx

@@ -119,10 +119,6 @@ export const BottomSheetHeader = ({
     hidden: !hasIcons && density !== 'compact',
   });
 
-  if (!hasTitleSection && !onBack && hideCloseButton) {
-    return null;
-  }
-
   const titleComponent = hasTitleSection ? (
     <Box style={styles.textWrapper}>
       {title && (

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

@@ -57,7 +57,7 @@ describe('Icon', () => {
       </Icon>,
     );
 
-    expect(screen.getByTestId('icon').props.color).toBe('#fca6a7');
+    expect(screen.getByTestId('icon').props.color).toBe('#f87274');
   });
 
   it('should forward ref and spread additional props', () => {