@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,4 +1,3 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, {
   useCallback,
   useEffect,
@@ -6,81 +5,23 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Pressable,
-  Text,
-  TextInput,
-  type TextInputProps,
-  View,
-} from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet, useTheme } from '../../../styles';
 import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
 import { InteractiveIcon } from '../InteractiveIcon';
-
-export type BaseInputProps = TextInputProps & {
-  /**
-   *  The label text that floats above the input when focused or filled.
-   */
-  label?: string;
-  /**
-   *  Additional class names to apply to the container element.
-   */
-  className?: string;
-  /**
-   *  Additional class names to apply to the input element.
-   */
-  inputClassName?: string;
-  /**
-   *  Additional class names to apply to the label element.
-   */
-  labelClassName?: string;
-  /**
-   * An optional error message displayed below the input.
-   */
-  errorMessage?: string;
-  /**
-   * Custom content to render after the input (right side in LTR).
-   * @example suffix={<Icon />}
-   */
-  suffix?: React.ReactNode;
-  /**
-   * Custom content to render before the input (left side in LTR).
-   * @example prefix={<Icon />}
-   */
-  prefix?: React.ReactNode;
-  /**
-   * Optional function to extend the default clear behavior with custom logic.
-   */
-  onClear?: () => void;
-  /**
-   * Hide the clear button (shown by default when input has content).
-   */
-  hideClearButton?: boolean;
-};
-
-const baseContainerStyles = cn(
-  'relative flex-row h-48 w-full items-center gap-8 px-16 rounded-sm bg-muted transition-colors border-2 border-transparent overflow-hidden',
-);
-
-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);
+import { Box, Pressable } from '../Utility';
+import { type BaseInputProps } from './types';
 
 export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
   (
     {
+      lx,
+      style,
+      inputStyle,
+      labelStyle,
       label,
       errorMessage,
-      className,
-      inputClassName,
-      labelClassName,
       hideClearButton,
       onChangeText: onChangeTextProp,
       editable = true,
@@ -91,6 +32,7 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
     ref,
   ) => {
     const { t } = useCommonTranslation();
+    const { theme } = useTheme();
     const inputRef = useRef<TextInput>(null);
     useImperativeHandle(ref, () => inputRef.current as TextInput);
 
@@ -106,29 +48,20 @@ 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;
 
+    const floatingAnimation = useRef(
+      new Animated.Value(isFloatingLabel ? 1 : 0),
+    ).current;
+
     useEffect(() => {
-      labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-        duration: 200,
-      });
-      labelTop.value = withTiming(isFloatingLabel ? 8 : 14, {
-        duration: 200,
-      });
-    }, [isFloatingLabel, labelFontSize, labelTop]);
+      Animated.timing(floatingAnimation, {
+        toValue: isFloatingLabel ? 1 : 0,
+        duration: 150,
+        useNativeDriver: false,
+      }).start();
+    }, [isFloatingLabel, floatingAnimation]);
 
     const handleChangeText = useCallback(
       (text: string) => {
@@ -149,15 +82,25 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
       props.onClear?.();
     };
 
+    const styles = useStyles({
+      hasError: !!errorMessage,
+      isFocused,
+      isEditable: editable,
+      hasLabel: !!label,
+    });
+
+    const floatingLabelStyles = useFloatingLabelStyles({
+      floatingAnimation,
+      hasContent,
+      showClearButton,
+      hasError: !!errorMessage,
+      isEditable: editable,
+    });
+
     return (
-      <View className={className}>
+      <Box lx={lx} style={style}>
         <Pressable
-          className={cn(
-            baseContainerStyles,
-            errorMessage && 'border-error',
-            isFocused && !errorMessage && editable && 'border-active',
-            !editable && 'bg-disabled text-disabled',
-          )}
+          style={styles.container}
           onPress={() => inputRef.current?.focus()}
           disabled={!editable}
         >
@@ -166,62 +109,197 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
           <TextInput
             ref={inputRef}
             value={value}
-            className={cn(
-              baseInputStyles,
-              !label && 'py-0',
-              !editable && 'bg-disabled text-disabled',
-              inputClassName,
-            )}
-            // TODO: eventually move to token system
-            // `body-1` is inconsistent in RN, e.g., line-height is calculated differently
-            style={{ fontWeight: '500', lineHeight: 0 }}
+            style={[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}
           />
 
           {label && (
-            <AnimatedLabel
-              className={cn(
-                'absolute left-16 text-muted w-full',
-                hasContent && showClearButton && 'w-[92%]',
-                !editable && 'text-disabled',
-                errorMessage && 'text-error',
-                labelClassName,
-              )}
-              style={animatedLabelStyle}
+            <Animated.Text
+              style={[
+                floatingLabelStyles.label,
+                floatingLabelStyles.animatedLabel,
+                labelStyle,
+              ]}
               numberOfLines={1}
             >
               {label}
-            </AnimatedLabel>
+            </Animated.Text>
           )}
 
-          {showClearButton && (
-            <InteractiveIcon
-              iconType='filled'
-              onPress={handleClear}
-              accessibilityLabel={t('components.baseInput.clearInputAriaLabel')}
-            >
-              <DeleteCircleFill size={20} />
-            </InteractiveIcon>
+          {(suffix || (!hideClearButton && editable)) && (
+            <View style={styles.suffixContainer}>
+              {showClearButton ? (
+                <InteractiveIcon
+                  iconType='stroked'
+                  onPress={handleClear}
+                  accessibilityLabel={t(
+                    'components.baseInput.clearInputAriaLabel',
+                  )}
+                >
+                  <DeleteCircleFill size={20} />
+                </InteractiveIcon>
+              ) : (
+                suffix
+              )}
+            </View>
           )}
-
-          {!showClearButton && suffix}
         </Pressable>
 
         {errorMessage && (
-          <View className='mt-8 flex-row items-center gap-2'>
-            <DeleteCircleFill size={16} className='shrink-0 text-error' />
-            <Text className='text-error body-3'>{errorMessage}</Text>
+          <View style={styles.errorContainer}>
+            <DeleteCircleFill size={16} color='error' />
+            <Text style={styles.errorText}>{errorMessage}</Text>
           </View>
         )}
-      </View>
+      </Box>
     );
   },
 );
 
+const useStyles = ({
+  hasError,
+  isFocused,
+  isEditable,
+  hasLabel,
+}: {
+  hasError: boolean;
+  isFocused: boolean;
+  isEditable: boolean;
+  hasLabel: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      return {
+        container: StyleSheet.flatten([
+          {
+            position: 'relative',
+            flexDirection: 'row',
+            height: t.sizes.s48,
+            width: t.sizes.full,
+            alignItems: 'center',
+            gap: t.spacings.s8,
+            paddingHorizontal: t.spacings.s16,
+            borderRadius: t.borderRadius.sm,
+            backgroundColor: t.colors.bg.muted,
+            borderWidth: t.borderWidth.s2,
+            borderColor: 'transparent',
+            overflow: 'hidden',
+          },
+          hasError && {
+            borderColor: t.colors.border.error,
+          },
+          !isEditable && {
+            backgroundColor: t.colors.bg.disabled,
+          },
+          isFocused &&
+            !hasError &&
+            isEditable && { borderColor: t.colors.border.active },
+        ]),
+        input: StyleSheet.flatten([
+          {
+            position: 'relative',
+            flex: 1,
+            height: t.sizes.full,
+            width: t.sizes.full,
+            color: t.colors.text.base,
+            backgroundColor: t.colors.bg.muted,
+            outlineWidth: 0,
+            outlineColor: 'transparent',
+            ...t.typographies.body1,
+          },
+          hasLabel && {
+            paddingTop: t.spacings.s16,
+            paddingBottom: t.spacings.s2,
+            ...t.typographies.body2,
+          },
+          !isEditable && {
+            backgroundColor: t.colors.bg.disabled,
+            color: t.colors.text.disabled,
+          },
+        ]),
+        errorContainer: {
+          marginTop: t.spacings.s8,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s2,
+        },
+        errorText: {
+          color: t.colors.text.error,
+          ...t.typographies.body3,
+        },
+        suffixContainer: {
+          minWidth: t.sizes.s20,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      };
+    },
+    [hasError, isFocused, isEditable, hasLabel],
+  );
+};
+
+const useFloatingLabelStyles = ({
+  floatingAnimation,
+  hasContent,
+  showClearButton,
+  hasError,
+  isEditable,
+}: {
+  floatingAnimation: Animated.Value;
+  hasContent: boolean;
+  showClearButton: boolean;
+  hasError: boolean;
+  isEditable: boolean;
+}) => {
+  const { theme } = useTheme();
+
+  const label = useStyleSheet(
+    (t) => ({
+      label: StyleSheet.flatten([
+        {
+          position: 'absolute',
+          left: t.spacings.s16,
+          width: t.sizes.full,
+          color: t.colors.text.muted,
+        },
+        hasContent &&
+          showClearButton && {
+            width: '92%',
+          },
+        !isEditable && {
+          color: t.colors.text.disabled,
+        },
+        hasError && {
+          color: t.colors.text.error,
+        },
+      ]),
+    }),
+    [hasContent, showClearButton, hasError, isEditable],
+  );
+
+  const animatedLabel = {
+    top: floatingAnimation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [theme.spacings.s14, theme.spacings.s8],
+    }),
+    fontSize: floatingAnimation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        theme.typographies.body2.fontSize,
+        theme.typographies.body4.fontSize,
+      ],
+    }),
+  };
+
+  return { label: label.label, animatedLabel };
+};
+
 BaseInput.displayName = 'BaseInput';

package/src/lib/Components/BaseInput/index.ts

@@ -1 +1,2 @@
 export * from './BaseInput';
+export * from './types';

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

@@ -0,0 +1,49 @@
+import {
+  TextStyle,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import { BoxProps } from '../Utility';
+
+export type BaseInputProps = {
+  /**
+   * The label text that floats above the input when focused or filled.
+   */
+  label?: string;
+  /**
+   * Additional styles to apply to the container element.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Additional styles to apply to the input element.
+   */
+  inputStyle?: StyleProp<TextStyle>;
+  /**
+   * Additional styles to apply to the label element.
+   */
+  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * An optional error message displayed below the input.
+   */
+  errorMessage?: string;
+  /**
+   * Custom content to render after the input (right side in LTR).
+   * @example suffix={<Icon />}
+   */
+  suffix?: React.ReactNode;
+  /**
+   * Custom content to render before the input (left side in LTR).
+   * @example prefix={<Icon />}
+   */
+  prefix?: React.ReactNode;
+  /**
+   * Optional function to extend the default clear behavior with custom logic.
+   */
+  onClear?: () => void;
+  /**
+   * Hide the clear button (shown by default when input has content).
+   */
+  hideClearButton?: boolean;
+} & Omit<TextInputProps, 'style'> &
+  BoxProps;

package/src/lib/Components/BottomSheet/BottomSheet.mdx

@@ -3,7 +3,8 @@ import * as BottomSheetStories from './BottomSheet.stories';
 import { BottomSheet } from './BottomSheet';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility';
 
 <Meta title="Components/BottomSheet" of={BottomSheetStories} />
 
@@ -103,8 +104,8 @@ BottomSheet is built on top of [@gorhom/bottom-sheet v5](https://gorhom.dev/reac
 ### Basic Usage
 
 ```tsx
-import { BottomSheet, BottomSheetView, BottomSheetHeader, useBottomSheetRef } from '@ledgerhq/lumen-ui-rnative';
-import { Button, View, Text } from 'react-native';
+import { BottomSheet, BottomSheetView, BottomSheetHeader, useBottomSheetRef, Box, Text } from '@ledgerhq/lumen-ui-rnative';
+import { Button } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
   const bottomSheetRef = useBottomSheetRef();
@@ -122,7 +123,7 @@ function MyComponent() {
             appearance="compact"
             description="Get started with our platform"
           />
-          <Text>Your content here</Text>
+          <Text typography='body2' lx={{ color: 'base' }}>Your content here</Text>
         </BottomSheetView>
       </BottomSheet>
     </>
@@ -225,7 +226,7 @@ import {
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use specialized scrollable components'
@@ -237,7 +238,7 @@ import {
 <BottomSheet ref={bottomSheetRef} snapPoints='full'>
   <BottomSheetScrollView>
     <BottomSheetHeader title='Title' appearance='compact' />
-    <Text>Content</Text>
+    <Text typography='body2' lx={{ color: 'base' }}>Content</Text>
   </BottomSheetScrollView>
 </BottomSheet>
 ```
@@ -253,7 +254,7 @@ import {
 <BottomSheet ref={bottomSheetRef} snapPoints='full'>
   <ScrollView>
     <BottomSheetHeader title='Title' appearance='compact' />
-    <Text>Content</Text>
+    <Text typography='body2' lx={{ color: 'base' }}>Content</Text>
   </ScrollView>
 </BottomSheet>
 ```
@@ -310,7 +311,7 @@ bottomSheetRef.current.close();
   backdropPressBehavior='none'
 >
   <BottomSheetView>
-    <Text>Critical content</Text>
+    <Text typography='body2' lx={{ color: 'base' }}>Critical content</Text>
   </BottomSheetView>
 </BottomSheet>
 ```
@@ -329,7 +330,7 @@ bottomSheetRef.current.close();
   hideCloseButton
 >
   <BottomSheetView>
-    <Text>Critical content</Text>
+    <Text typography='body2' lx={{ color: 'base' }}>Critical content</Text>
   </BottomSheetView>
 </BottomSheet>
 ```
@@ -339,7 +340,7 @@ bottomSheetRef.current.close();
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 ## Learn More