@ledgerhq/lumen-ui-rnative 0.0.55 → 0.0.57-0

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

@@ -1,5 +1,5 @@
 import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import React, { ComponentType } from 'react';
+import { ComponentType } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -10,7 +10,6 @@ import {
   DeleteCircleFill,
   Close,
 } from '../../Symbols';
-import { ViewRef } from '../../types';
 import { IconProps } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Box } from '../Utility';
@@ -129,79 +128,75 @@ const iconsMap: Record<Appearance, ComponentType<IconProps>> = {
  *   closeAriaLabel="Close banner"
  * />
  */
-export const Banner = React.forwardRef<ViewRef, BannerProps>(
-  (
-    {
-      appearance = 'info',
-      title,
-      description,
-      primaryAction,
-      secondaryAction,
-      lx = {},
-      style,
-      onClose,
-      closeAriaLabel,
-      ...props
-    },
-    ref,
-  ) => {
-    const { t } = useCommonTranslation();
-    const styles = useStyles({ appearance });
-    const IconComponent = iconsMap[appearance];
-    const iconColor = iconColorMap[appearance];
+export const Banner = ({
+  appearance = 'info',
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  lx = {},
+  style,
+  onClose,
+  closeAriaLabel,
+  ref,
+  ...props
+}: BannerProps) => {
+  const { t } = useCommonTranslation();
+  const styles = useStyles({ appearance });
+  const IconComponent = iconsMap[appearance];
+  const iconColor = iconColorMap[appearance];
 
-    return (
-      <Box
-        ref={ref}
-        lx={lx}
-        style={StyleSheet.flatten([styles.root, style])}
-        {...props}
-      >
-        <View style={styles.iconWrapper}>
-          <IconComponent lx={{ color: iconColor }} />
-        </View>
-        <View style={styles.contentWrapper}>
-          <View style={styles.textWrapper}>
-            {title && (
-              <Text style={styles.title} numberOfLines={2}>
-                {title}
-              </Text>
-            )}
-            {description && (
-              <View>
-                <Wrap
-                  if={isTextChildren(description)}
-                  with={(children) => (
-                    <Text style={styles.description}>{children}</Text>
-                  )}
-                >
-                  {description}
-                </Wrap>
-              </View>
-            )}
-          </View>
-          {(primaryAction || secondaryAction) && (
-            <View style={styles.actionsWrapper}>
-              {primaryAction}
-              {secondaryAction}
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
+      {...props}
+    >
+      <View style={styles.iconWrapper}>
+        <IconComponent lx={{ color: iconColor }} />
+      </View>
+      <View style={styles.contentWrapper}>
+        <View style={styles.textWrapper}>
+          {title && (
+            <Text style={styles.title} numberOfLines={2}>
+              {title}
+            </Text>
+          )}
+          {description && (
+            <View>
+              <Wrap
+                if={isTextChildren(description)}
+                with={(children) => (
+                  <Text style={styles.description}>{children}</Text>
+                )}
+              >
+                {description}
+              </Wrap>
             </View>
           )}
         </View>
-        {onClose && (
-          <IconButton
-            testID='banner-close-button'
-            appearance='transparent'
-            size='xs'
-            icon={Close}
-            onPress={() => onClose()}
-            accessibilityLabel={
-              closeAriaLabel || t('components.banner.closeAriaLabel')
-            }
-          />
+        {(primaryAction || secondaryAction) && (
+          <View style={styles.actionsWrapper}>
+            {primaryAction}
+            {secondaryAction}
+          </View>
         )}
-      </Box>
-    );
-  },
-);
+      </View>
+      {onClose && (
+        <IconButton
+          testID='banner-close-button'
+          appearance='transparent'
+          size='xs'
+          icon={Close}
+          onPress={() => onClose()}
+          accessibilityLabel={
+            closeAriaLabel || t('components.banner.closeAriaLabel')
+          }
+        />
+      )}
+    </Box>
+  );
+};
 
 Banner.displayName = 'Banner';

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

@@ -1,4 +1,4 @@
-import React, {
+import {
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -13,161 +13,157 @@ import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, Pressable } from '../Utility';
 import { type BaseInputProps } from './types';
 
-export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
-  (
-    {
-      lx,
-      style,
-      containerStyle,
-      inputStyle,
-      labelStyle,
-      label,
-      errorMessage,
-      hideClearButton,
-      onChangeText: onChangeTextProp,
-      editable = true,
-      prefix,
-      suffix,
-      ...props
-    },
-    ref,
-  ) => {
-    const { t } = useCommonTranslation();
-    const { theme } = useTheme();
-    const inputRef = useRef<TextInput>(null);
-    useImperativeHandle(ref, () => inputRef.current as TextInput);
-
-    const [uncontrolledValue, setUncontrolledValue] = useState(
-      props.defaultValue || '',
-    );
-    const [isFocused, setIsFocused] = useState(false);
+export const BaseInput = ({
+  lx,
+  style,
+  containerStyle,
+  inputStyle,
+  labelStyle,
+  label,
+  errorMessage,
+  hideClearButton,
+  onChangeText: onChangeTextProp,
+  editable = true,
+  prefix,
+  suffix,
+  ref,
+  ...props
+}: BaseInputProps) => {
+  const { t } = useCommonTranslation();
+  const { theme } = useTheme();
+  const inputRef = useRef<TextInput>(null);
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
 
-    const isControlled = props.value !== undefined;
-    const value = isControlled ? props.value : uncontrolledValue;
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    props.defaultValue || '',
+  );
+  const [isFocused, setIsFocused] = useState(false);
 
-    const hasContent = isControlled
-      ? !!props.value && props.value.length > 0
-      : uncontrolledValue.length > 0;
+  const isControlled = props.value !== undefined;
+  const value = isControlled ? props.value : uncontrolledValue;
 
-    const isFloatingLabel = isFocused || hasContent;
-    const showClearButton = hasContent && editable && !hideClearButton;
+  const hasContent = isControlled
+    ? !!props.value && props.value.length > 0
+    : uncontrolledValue.length > 0;
 
-    const floatingAnimation = useRef(
-      new Animated.Value(isFloatingLabel ? 1 : 0),
-    ).current;
+  const isFloatingLabel = isFocused || hasContent;
+  const showClearButton = hasContent && editable && !hideClearButton;
 
-    useEffect(() => {
-      Animated.timing(floatingAnimation, {
-        toValue: isFloatingLabel ? 1 : 0,
-        duration: 150,
-        useNativeDriver: false,
-      }).start();
-    }, [isFloatingLabel, floatingAnimation]);
+  const floatingAnimation = useRef(
+    new Animated.Value(isFloatingLabel ? 1 : 0),
+  ).current;
 
-    const handleChangeText = useCallback(
-      (text: string) => {
-        if (!isControlled) {
-          setUncontrolledValue(text);
-        }
-        onChangeTextProp?.(text);
-      },
-      [isControlled, onChangeTextProp],
-    );
+  useEffect(() => {
+    Animated.timing(floatingAnimation, {
+      toValue: isFloatingLabel ? 1 : 0,
+      duration: 150,
+      useNativeDriver: false,
+    }).start();
+  }, [isFloatingLabel, floatingAnimation]);
 
-    const handleClear = () => {
+  const handleChangeText = useCallback(
+    (text: string) => {
       if (!isControlled) {
-        setUncontrolledValue('');
-      } else {
-        onChangeTextProp?.('');
+        setUncontrolledValue(text);
       }
-      props.onClear?.();
-    };
+      onChangeTextProp?.(text);
+    },
+    [isControlled, onChangeTextProp],
+  );
 
-    const styles = useStyles({
-      hasError: !!errorMessage,
-      isFocused,
-      isEditable: editable,
-      hasLabel: !!label,
-    });
+  const handleClear = () => {
+    if (!isControlled) {
+      setUncontrolledValue('');
+    } else {
+      onChangeTextProp?.('');
+    }
+    props.onClear?.();
+  };
 
-    const floatingLabelStyles = useFloatingLabelStyles({
-      floatingAnimation,
-      hasContent,
-      showClearButton,
-      hasError: !!errorMessage,
-      isEditable: editable,
-    });
+  const styles = useStyles({
+    hasError: !!errorMessage,
+    isFocused,
+    isEditable: editable,
+    hasLabel: !!label,
+  });
 
-    return (
-      <Box lx={lx} style={style}>
-        <Pressable
-          style={StyleSheet.flatten([styles.container, containerStyle])}
-          onPress={() => inputRef.current?.focus()}
-          disabled={!editable}
-        >
-          {prefix}
+  const floatingLabelStyles = useFloatingLabelStyles({
+    floatingAnimation,
+    hasContent,
+    showClearButton,
+    hasError: !!errorMessage,
+    isEditable: editable,
+  });
 
-          <TextInput
-            ref={inputRef}
-            value={value}
-            style={StyleSheet.flatten([
-              styles.input,
-              { lineHeight: 0 },
-              inputStyle,
-            ])}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            onChangeText={handleChangeText}
-            editable={editable}
-            autoCapitalize='none'
-            autoCorrect={false}
-            selectionColor={theme.colors.text.active}
-            placeholderTextColor={theme.colors.text.muted}
-            {...props}
-          />
+  return (
+    <Box lx={lx} style={style}>
+      <Pressable
+        style={StyleSheet.flatten([styles.container, containerStyle])}
+        onPress={() => inputRef.current?.focus()}
+        disabled={!editable}
+      >
+        {prefix}
 
-          {label && (
-            <Animated.Text
-              style={[
-                floatingLabelStyles.label,
-                floatingLabelStyles.animatedLabel,
-                labelStyle,
-              ]}
-              numberOfLines={1}
-            >
-              {label}
-            </Animated.Text>
-          )}
+        <TextInput
+          ref={inputRef}
+          value={value}
+          style={StyleSheet.flatten([
+            styles.input,
+            { lineHeight: 0 },
+            inputStyle,
+          ])}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          onChangeText={handleChangeText}
+          editable={editable}
+          autoCapitalize='none'
+          autoCorrect={false}
+          selectionColor={theme.colors.text.active}
+          placeholderTextColor={theme.colors.text.muted}
+          {...props}
+        />
 
-          {(suffix || (!hideClearButton && editable)) && (
-            <View style={styles.suffixContainer}>
-              {showClearButton ? (
-                <InteractiveIcon
-                  iconType='stroked'
-                  onPress={handleClear}
-                  accessibilityLabel={t(
-                    'components.baseInput.clearInputAriaLabel',
-                  )}
-                >
-                  <DeleteCircleFill size={20} />
-                </InteractiveIcon>
-              ) : (
-                suffix
-              )}
-            </View>
-          )}
-        </Pressable>
+        {label && (
+          <Animated.Text
+            style={[
+              floatingLabelStyles.label,
+              floatingLabelStyles.animatedLabel,
+              labelStyle,
+            ]}
+            numberOfLines={1}
+          >
+            {label}
+          </Animated.Text>
+        )}
 
-        {errorMessage && (
-          <View style={styles.errorContainer}>
-            <DeleteCircleFill size={16} color='error' />
-            <Text style={styles.errorText}>{errorMessage}</Text>
+        {(suffix || (!hideClearButton && editable)) && (
+          <View style={styles.suffixContainer}>
+            {showClearButton ? (
+              <InteractiveIcon
+                iconType='stroked'
+                onPress={handleClear}
+                accessibilityLabel={t(
+                  'components.baseInput.clearInputAriaLabel',
+                )}
+              >
+                <DeleteCircleFill size={20} />
+              </InteractiveIcon>
+            ) : (
+              suffix
+            )}
           </View>
         )}
-      </Box>
-    );
-  },
-);
+      </Pressable>
+
+      {errorMessage && (
+        <View style={styles.errorContainer}>
+          <DeleteCircleFill size={16} color='error' />
+          <Text style={styles.errorText}>{errorMessage}</Text>
+        </View>
+      )}
+    </Box>
+  );
+};
 
 const useStyles = ({
   hasError,

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

@@ -8,7 +8,7 @@ import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 // Mock react-native-gesture-handler which is used by @gorhom/bottom-sheet
 jest.mock('react-native-gesture-handler', () => ({}));
 
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     {children}
   </ThemeProvider>
@@ -31,15 +31,6 @@ describe('BottomSheet', () => {
     expect(useBottomSheetContext).toBeDefined();
   });
 
-  it('is a valid React component', () => {
-    const { BottomSheet } = require('./BottomSheet');
-
-    // Verify component exists and is a valid React component (forwardRef returns an object)
-    expect(BottomSheet).toBeDefined();
-    expect(typeof BottomSheet).toBe('object');
-    expect(BottomSheet.$$typeof).toBeDefined(); // React element type
-  });
-
   describe('rendering', () => {
     it('renders with children', () => {
       const { BottomSheet } = require('./BottomSheet');
@@ -221,31 +212,6 @@ describe('BottomSheet', () => {
       // If the component renders without errors, context is working
       expect(getByText('Content')).toBeTruthy();
     });
-
-    it('provides context with hideCloseButton prop', () => {
-      const { BottomSheet } = require('./BottomSheet');
-      const { getByText } = renderWithTheme(
-        <BottomSheet hideCloseButton testID='bottom-sheet'>
-          <Text>Content</Text>
-        </BottomSheet>,
-      );
-
-      // If the component renders without errors, context is working
-      expect(getByText('Content')).toBeTruthy();
-    });
-
-    it('provides context with both onBack and hideCloseButton', () => {
-      const { BottomSheet } = require('./BottomSheet');
-      const onBack = jest.fn();
-      const { getByText } = renderWithTheme(
-        <BottomSheet onBack={onBack} hideCloseButton testID='bottom-sheet'>
-          <Text>Content</Text>
-        </BottomSheet>,
-      );
-
-      // If the component renders without errors, context is working
-      expect(getByText('Content')).toBeTruthy();
-    });
   });
 
   describe('callbacks', () => {