@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Banner } from '../Banner';
-import { AmountInput } from './AmountInput';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { AmountInput, type AmountInputProps } from './AmountInput';
 
 const meta: Meta<typeof AmountInput> = {
   component: AmountInput,
@@ -14,25 +15,187 @@ const meta: Meta<typeof AmountInput> = {
       },
     },
   },
+  argTypes: {
+    currencyText: {
+      control: 'text',
+      description: 'Currency text to display (e.g. USD, EUR, $)',
+    },
+    currencyPosition: {
+      control: 'radio',
+      options: ['left', 'right'],
+      description: 'Position of the currency text',
+    },
+    allowDecimals: {
+      control: 'boolean',
+      description: 'Whether to allow decimal values',
+    },
+    thousandsSeparator: {
+      control: 'boolean',
+      description: 'Whether to display thousands separator',
+    },
+    maxIntegerLength: {
+      control: 'number',
+      description: 'Maximum digits for integer part',
+    },
+    maxDecimalLength: {
+      control: 'number',
+      description: 'Maximum digits for decimal part',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the input is in error state',
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Whether the input is editable',
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof AmountInput>;
 
-export const WebPreviewWarning: Story = {
-  render: () => (
-    <Banner
-      appearance='warning'
-      title='Unsupported previews on web'
-      description='For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.'
-    />
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-      },
-    },
+const AmountInputStory = (args: AmountInputProps) => {
+  const [value, setValue] = useState(args.value?.toString() ?? '');
+
+  return (
+    <View className='flex min-h-400 items-center justify-center p-24'>
+      <View className='w-full max-w-320'>
+        <AmountInput {...args} value={value} onChangeText={setValue} />
+      </View>
+    </View>
+  );
+};
+
+export const Base: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    currencyText: 'USD',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    maxIntegerLength: 9,
+    maxDecimalLength: 9,
+    isInvalid: false,
+    editable: true,
+  },
+};
+
+export const WithValue: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1234.56',
+    currencyText: 'USD',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    isInvalid: false,
+    editable: true,
+  },
+};
+
+export const CurrencyPositionLeft: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1000',
+    currencyText: '$',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    isInvalid: false,
+    editable: true,
+  },
+};
+
+export const CurrencyPositionRight: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1000',
+    currencyText: 'ETH',
+    currencyPosition: 'right',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    isInvalid: false,
+    editable: true,
+  },
+};
+
+export const IntegerOnly: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1234',
+    currencyText: 'items',
+    currencyPosition: 'right',
+    allowDecimals: false,
+    thousandsSeparator: true,
+    isInvalid: false,
+    editable: true,
+  },
+};
+
+export const WithThousandsSeparator: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1000000',
+    currencyText: 'USD',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    isInvalid: false,
+    editable: true,
+  },
+};
+
+export const WithoutThousandsSeparator: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1000000',
+    currencyText: 'USD',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: false,
+    isInvalid: false,
+    editable: true,
+  },
+};
+
+export const ErrorState: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1234.56',
+    currencyText: 'USD',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    isInvalid: true,
+    editable: true,
+  },
+};
+
+export const DisabledAmountInput: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1234.56',
+    currencyText: 'USD',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    isInvalid: false,
+    editable: false,
+  },
+};
+
+export const CustomLengthLimits: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '123',
+    currencyText: '$',
+    currencyPosition: 'left',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    maxIntegerLength: 6,
+    maxDecimalLength: 2,
+    isInvalid: false,
+    editable: true,
   },
 };

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

@@ -102,21 +102,30 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
 
     useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
-    const animatedInputStyle = useAnimatedStyle(() => ({
-      transform: [{ translateX: translateX.value }],
-      fontSize: animatedFontSize.value,
-      letterSpacing: 0,
-    }));
-
-    const animatedCurrencyStyle = useAnimatedStyle(() => ({
-      fontSize: animatedFontSize.value,
-      letterSpacing: 0,
-    }));
-
-    const animatedCaretStyle = useAnimatedStyle(() => ({
-      opacity: caretOpacity.value,
-      height: animatedFontSize.value,
-    }));
+    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: animatedFontSize.value,
+      }),
+      [caretOpacity, animatedFontSize],
+    );
 
     useEffect(() => {
       const newSize = getFontSize(inputValue);

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

@@ -1,12 +1,23 @@
 import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
 import { Button } from '../Button';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Banner } from './Banner';
 
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
 describe('Banner Component', () => {
   it('should render correctly with minimal props', () => {
     const { getByText } = render(
-      <Banner title='banner-title' description='banner-description' />,
+      <TestWrapper>
+        <Banner title='banner-title' description='banner-description' />
+      </TestWrapper>,
     );
     getByText('banner-title');
     getByText('banner-description');
@@ -14,33 +25,51 @@ describe('Banner Component', () => {
 
   it('should render with different appearances', () => {
     const { getByTestId, rerender } = render(
-      <Banner testID='banner-id' title='Info Banner' appearance='info' />,
+      <TestWrapper>
+        <Banner testID='banner-id' title='Info Banner' appearance='info' />
+      </TestWrapper>,
     );
     expect(getByTestId('banner-id').props.className).toContain('bg-surface');
 
     rerender(
-      <Banner testID='banner-id' title='Success Banner' appearance='success' />,
+      <TestWrapper>
+        <Banner
+          testID='banner-id'
+          title='Success Banner'
+          appearance='success'
+        />
+      </TestWrapper>,
     );
     expect(getByTestId('banner-id').props.className).toContain('bg-success');
 
     rerender(
-      <Banner testID='banner-id' title='Warning Banner' appearance='warning' />,
+      <TestWrapper>
+        <Banner
+          testID='banner-id'
+          title='Warning Banner'
+          appearance='warning'
+        />
+      </TestWrapper>,
     );
     expect(getByTestId('banner-id').props.className).toContain('bg-warning');
 
     rerender(
-      <Banner testID='banner-id' title='Error Banner' appearance='error' />,
+      <TestWrapper>
+        <Banner testID='banner-id' title='Error Banner' appearance='error' />
+      </TestWrapper>,
     );
     expect(getByTestId('banner-id').props.className).toContain('bg-error');
   });
 
   it('should render primary and secondary actions', () => {
     const { getByText } = render(
-      <Banner
-        title='Banner with Primary'
-        primaryAction={<Button>Primary</Button>}
-        secondaryAction={<Button>Secondary</Button>}
-      />,
+      <TestWrapper>
+        <Banner
+          title='Banner with Primary'
+          primaryAction={<Button>Primary</Button>}
+          secondaryAction={<Button>Secondary</Button>}
+        />
+      </TestWrapper>,
     );
 
     getByText('Primary');
@@ -50,10 +79,12 @@ describe('Banner Component', () => {
   it('should handle primaryAction button clicks', () => {
     const onPressMock = jest.fn();
     const { getByText } = render(
-      <Banner
-        title='Banner with Primary'
-        primaryAction={<Button onPress={onPressMock}>Primary</Button>}
-      />,
+      <TestWrapper>
+        <Banner
+          title='Banner with Primary'
+          primaryAction={<Button onPress={onPressMock}>Primary</Button>}
+        />
+      </TestWrapper>,
     );
 
     expect(onPressMock).not.toHaveBeenCalled();
@@ -64,7 +95,9 @@ describe('Banner Component', () => {
   it('should handle onClose button clicks', () => {
     const onCloseMock = jest.fn();
     const { getByTestId } = render(
-      <Banner title='Banner with Primary' onClose={onCloseMock} />,
+      <TestWrapper>
+        <Banner title='Banner with Primary' onClose={onCloseMock} />
+      </TestWrapper>,
     );
 
     expect(onCloseMock).not.toHaveBeenCalled();

package/src/lib/Components/BaseInput/BaseInput.tsx

@@ -1,7 +1,6 @@
 import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, {
   useCallback,
-  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -13,11 +12,6 @@ import {
   type TextInputProps,
   View,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
 import { useCommonTranslation } from '../../../i18n';
 import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
 import { InteractiveIcon } from '../InteractiveIcon';
@@ -71,8 +65,6 @@ const baseInputStyles = cn(
   'relative flex-1 pt-16 pb-2 size-full text-base transition-colors bg-muted outline-none',
 );
 
-const AnimatedLabel = Animated.createAnimatedComponent(Animated.Text);
-
 export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
   (
     {
@@ -106,30 +98,9 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
       ? !!props.value && props.value.length > 0
       : uncontrolledValue.length > 0;
 
-    // floating label styling
-    const labelFontSize = useSharedValue(14);
-    const labelTop = useSharedValue(14);
     const isFloatingLabel = isFocused || hasContent;
-
-    const animatedLabelStyle = useAnimatedStyle(
-      () => ({
-        fontSize: labelFontSize.value,
-        top: labelTop.value,
-      }),
-      [],
-    );
-
     const showClearButton = hasContent && editable && !hideClearButton;
 
-    useEffect(() => {
-      labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-        duration: 200,
-      });
-      labelTop.value = withTiming(isFloatingLabel ? 8 : 14, {
-        duration: 200,
-      });
-    }, [isFloatingLabel, labelFontSize, labelTop]);
-
     const handleChangeText = useCallback(
       (text: string) => {
         if (!isControlled) {
@@ -185,24 +156,24 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
           />
 
           {label && (
-            <AnimatedLabel
+            <Text
               className={cn(
-                'absolute left-16 text-muted w-full',
+                'absolute left-16 text-muted w-full transition-all duration-200',
+                isFloatingLabel ? 'top-6 body-4' : 'top-12 body-2',
                 hasContent && showClearButton && 'w-[92%]',
                 !editable && 'text-disabled',
                 errorMessage && 'text-error',
                 labelClassName,
               )}
-              style={animatedLabelStyle}
               numberOfLines={1}
             >
               {label}
-            </AnimatedLabel>
+            </Text>
           )}
 
           {showClearButton && (
             <InteractiveIcon
-              iconType='filled'
+              iconType='stroked'
               onPress={handleClear}
               accessibilityLabel={t('components.baseInput.clearInputAriaLabel')}
             >
@@ -215,7 +186,7 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
 
         {errorMessage && (
           <View className='mt-8 flex-row items-center gap-2'>
-            <DeleteCircleFill size={16} className='shrink-0 text-error' />
+            <DeleteCircleFill size={16} className='text-error shrink-0' />
             <Text className='text-error body-3'>{errorMessage}</Text>
           </View>
         )}

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

@@ -98,7 +98,7 @@ export const Base: Story = {
 
     return (
       <View className='h-320 w-full items-center justify-center pt-32'>
-        <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
+        <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>
@@ -140,7 +140,7 @@ export const TitleExpanded: Story = {
 
     return (
       <View className='h-320 w-full items-center justify-center pt-32'>
-        <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
+        <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>
@@ -178,7 +178,7 @@ export const DynamicSizingWithoutSnapPoints: Story = {
 
     return (
       <View className='h-320 w-full items-center justify-center'>
-        <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
+        <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>
@@ -214,7 +214,7 @@ export const DynamicSizingWithSnapPoints: Story = {
     return (
       <View className='h-320 w-full items-center justify-center'>
         <Button
-          size='xs'
+          size='sm'
           onPress={() => bottomSheetRef.current?.snapToIndex(1)}
         >
           Toggle open
@@ -253,7 +253,7 @@ export const PreventClose: Story = {
 
     return (
       <View className='h-320 w-full items-center justify-center pt-32'>
-        <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
+        <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>
@@ -288,7 +288,7 @@ export const ScrollView: Story = {
 
     return (
       <View className='h-320 w-full items-center justify-center bg-base pt-32'>
-        <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
+        <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>
@@ -336,7 +336,7 @@ export const VirtualList: Story = {
 
     return (
       <View className='h-320 w-full items-center justify-center pt-32'>
-        <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
+        <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>
@@ -396,7 +396,7 @@ export const VirtualizedList: Story = {
 
     return (
       <View className='h-320 w-full items-center justify-center pt-32'>
-        <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
+        <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>

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

@@ -33,7 +33,7 @@ const bottomSheetVariants = {
   root: cva('mb-16 w-full flex-1 rounded-t-xl bg-canvas-sheet', {
     variants: {
       shadow: {
-        true: 'shadow-lg shadow-base',
+        true: 'shadow-base shadow-lg',
         false: '',
       },
     },