@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,73 +1,17 @@
-import { cn, getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
+import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Pressable, TextInput, View, type TextInputProps } from 'react-native';
+import { Pressable, StyleSheet, TextInput } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
   useSharedValue,
+  withRepeat,
   withSequence,
   withTiming,
-  withRepeat,
 } from 'react-native-reanimated';
-
-export type AmountInputProps = Omit<
-  TextInputProps,
-  'value' | 'onChangeText'
-> & {
-  /**
-   * The controlled value of the input
-   * @required
-   */
-  value: string | number;
-  /**
-   * Change handler
-   * @required
-   */
-  onChangeText: (text: string) => void;
-  /**
-   * The currency text (e.g. USD, EUR)
-   */
-  currencyText?: string;
-  /**
-   * Position of the currency text.
-   * @default 'left'
-   */
-  currencyPosition?: 'left' | 'right';
-  /**
-   * Maximum length for integer part (before decimal)
-   * @default 9
-   */
-  maxIntegerLength?: number;
-  /**
-   * Maximum length for decimal part (after decimal)
-   * @default 9
-   */
-  maxDecimalLength?: number;
-  /**
-   * Allow decimal values
-   * @default true
-   */
-  allowDecimals?: boolean;
-  /**
-   * Additional class names
-   */
-  className?: string;
-  /**
-   * Whether to use thousands separator (e.g. 1 000 for 1000)
-   * @default true
-   */
-  thousandsSeparator?: boolean;
-  /**
-   * Mark input as invalid (e.g. for error display)
-   * @default false
-   */
-  isInvalid?: boolean;
-};
-
-const inputStyles = cn(
-  'heading-0 h-56 bg-transparent text-base outline-none items-start',
-);
-const currencyStyles = cn('heading-0 text-base');
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
+import { type AmountInputProps } from './types';
 
 /**
  * AmountInput component for handling numeric input with currency display.
@@ -77,7 +21,8 @@ const currencyStyles = cn('heading-0 text-base');
 export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
   (
     {
-      className,
+      lx = {},
+      style,
       currencyText,
       currencyPosition = 'left',
       editable = true,
@@ -102,21 +47,36 @@ 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 styles = useStyles({
+      hasValue: !!inputValue,
+      isEditable: editable,
+      isInvalid,
+    });
+
+    const animatedInputStyle = useAnimatedStyle(
+      () => ({
+        transform: [{ translateX: translateX.value }],
+        fontSize: animatedFontSize.value,
+        letterSpacing: 0,
+      }),
+      [translateX, animatedFontSize],
+    );
 
-    const animatedCurrencyStyle = useAnimatedStyle(() => ({
-      fontSize: animatedFontSize.value,
-      letterSpacing: 0,
-    }));
+    const animatedCurrencyStyle = useAnimatedStyle(
+      () => ({
+        fontSize: animatedFontSize.value,
+        letterSpacing: 0,
+      }),
+      [animatedFontSize],
+    );
 
-    const animatedCaretStyle = useAnimatedStyle(() => ({
-      opacity: caretOpacity.value,
-      height: animatedFontSize.value,
-    }));
+    const animatedCaretStyle = useAnimatedStyle(
+      () => ({
+        opacity: caretOpacity.value,
+        height: animatedFontSize.value,
+      }),
+      [caretOpacity, animatedFontSize],
+    );
 
     useEffect(() => {
       const newSize = getFontSize(inputValue);
@@ -137,7 +97,6 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
 
     useEffect(() => {
       if (isFocused && editable) {
-        // custom caret animation
         caretOpacity.value = withRepeat(
           withSequence(
             withTiming(1, { duration: 150, easing: Easing.ease }),
@@ -165,15 +124,7 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
     };
 
     const CurrencyText = currencyText ? (
-      <Animated.Text
-        className={cn(
-          currencyStyles,
-          !inputValue && 'text-muted-subtle',
-          !editable && 'text-disabled',
-          isInvalid && 'text-error',
-        )}
-        style={animatedCurrencyStyle}
-      >
+      <Animated.Text style={[styles.currency, animatedCurrencyStyle]}>
         {currencyText}
       </Animated.Text>
     ) : null;
@@ -185,7 +136,7 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
     };
 
     return (
-      <View className='relative'>
+      <Box lx={lx} style={styles.container}>
         {/** hidden text input because of flickering issue */}
         <TextInput
           ref={inputRef}
@@ -201,49 +152,99 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
             setIsFocused(false);
             props.onBlur?.(e);
           }}
-          className='absolute size-full opacity-0'
+          style={styles.hiddenInput}
           {...props}
         />
         <Pressable
           onPress={handlePress}
-          className='flex-row items-center justify-center'
+          style={styles.pressable}
           accessibilityLabel={props.accessibilityLabel || 'Amount input'}
         >
           {currencyPosition === 'left' && CurrencyText}
 
           {/** display text that mirrors the hidden input's value */}
           <Animated.Text
-            className={cn(
-              inputStyles,
-              isInvalid && 'text-error',
-              !editable && 'text-disabled',
-              !inputValue && 'text-muted-subtle',
-              className,
-            )}
-            style={animatedInputStyle}
+            style={[styles.displayText, animatedInputStyle, style]}
           >
             {inputValue || '0'}
           </Animated.Text>
 
           {/** custom caret */}
-          <Animated.View
-            className='mx-2'
-            // TODO: use theme object here
-            style={[
-              animatedCaretStyle,
-              {
-                width: 3,
-                borderRadius: 1.5,
-                backgroundColor: '#007AFF',
-              },
-            ]}
-          />
+          <Animated.View style={[styles.caret, animatedCaretStyle]} />
 
           {currencyPosition === 'right' && CurrencyText}
         </Pressable>
-      </View>
+      </Box>
     );
   },
 );
 
+const useStyles = ({
+  hasValue,
+  isEditable,
+  isInvalid,
+}: {
+  hasValue: boolean;
+  isEditable: boolean;
+  isInvalid: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        position: 'relative',
+      },
+      hiddenInput: {
+        position: 'absolute',
+        width: t.sizes.full,
+        height: t.sizes.full,
+        opacity: 0,
+      },
+      pressable: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      displayText: StyleSheet.flatten([
+        {
+          height: t.sizes.s56,
+          backgroundColor: 'transparent',
+          color: t.colors.text.base,
+          alignItems: 'flex-start',
+          ...t.typographies.heading0SemiBold,
+        },
+        !hasValue && {
+          color: t.colors.text.mutedSubtle,
+        },
+        !isEditable && {
+          color: t.colors.text.disabled,
+        },
+        isInvalid && {
+          color: t.colors.text.error,
+        },
+      ]),
+      currency: StyleSheet.flatten([
+        {
+          color: t.colors.text.base,
+          ...t.typographies.heading0SemiBold,
+        },
+        !hasValue && {
+          color: t.colors.text.mutedSubtle,
+        },
+        !isEditable && {
+          color: t.colors.text.disabled,
+        },
+        isInvalid && {
+          color: t.colors.text.error,
+        },
+      ]),
+      caret: {
+        marginHorizontal: t.spacings.s2,
+        width: t.sizes.s2,
+        backgroundColor: t.colors.text.active,
+      },
+    }),
+    [hasValue, isEditable, isInvalid],
+  );
+};
+
 AmountInput.displayName = 'AmountInput';

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

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

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

@@ -0,0 +1,56 @@
+import { TextInputProps, ViewStyle } from 'react-native';
+import { BoxProps } from '../Utility';
+
+export type AmountInputProps = Omit<
+  TextInputProps,
+  'value' | 'onChangeText'
+> & {
+  /**
+   * The controlled value of the input
+   * @required
+   */
+  value: string | number;
+  /**
+   * Change handler
+   * @required
+   */
+  onChangeText: (text: string) => void;
+  /**
+   * The currency text (e.g. USD, EUR)
+   */
+  currencyText?: string;
+  /**
+   * Position of the currency text.
+   * @default 'left'
+   */
+  currencyPosition?: 'left' | 'right';
+  /**
+   * Maximum length for integer part (before decimal)
+   * @default 9
+   */
+  maxIntegerLength?: number;
+  /**
+   * Maximum length for decimal part (after decimal)
+   * @default 9
+   */
+  maxDecimalLength?: number;
+  /**
+   * Allow decimal values
+   * @default true
+   */
+  allowDecimals?: boolean;
+  /**
+   * Additional style
+   */
+  style?: ViewStyle;
+  /**
+   * Whether to use thousands separator (e.g. 1 000 for 1000)
+   * @default true
+   */
+  thousandsSeparator?: boolean;
+  /**
+   * Mark input as invalid (e.g. for error display)
+   * @default false
+   */
+  isInvalid?: boolean;
+} & BoxProps;

package/src/lib/Components/Banner/Banner.mdx

@@ -1,9 +1,10 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as BannerStories from './Banner.stories';
 import { Banner } from './Banner';
+import { Box } from '../Utility';
 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';
 
 <Meta title='Components/Banner' of={BannerStories} />
 
@@ -99,7 +100,7 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ### Basic Usage
 
 ```tsx
-import { Banner } from '@ledgerhq/lumen-ui-react';
+import { Banner } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
   return (
@@ -117,11 +118,11 @@ function MyComponent() {
 The Banner component supports four different appearances, each with its own semantic meaning and visual styling:
 
 ```tsx
-import { Banner } from '@ledgerhq/lumen-ui-react';
+import { Banner, Box } from '@ledgerhq/lumen-ui-rnative';
 
 function NotificationSystem() {
   return (
-    <View className='space-y-4'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
       {/* Info - Default informational messages */}
       <Banner
         appearance='info'
@@ -149,7 +150,7 @@ function NotificationSystem() {
         title='Error'
         description='Something went wrong, please try again'
       />
-    </View>
+    </Box>
   );
 }
 ```
@@ -159,7 +160,7 @@ function NotificationSystem() {
 Banners can include primary and secondary action buttons to allow user interaction:
 
 ```tsx
-import { Banner, Button } from '@ledgerhq/lumen-ui-react';
+import { Banner, Button } from '@ledgerhq/lumen-ui-rnative';
 
 function ActionableBanner() {
   const handleAccept = () => {
@@ -195,7 +196,7 @@ function ActionableBanner() {
 Add a close button to make banners dismissible by the user:
 
 ```tsx
-import { Banner } from '@ledgerhq/lumen-ui-react';
+import { Banner } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function DismissibleBanner() {
@@ -229,33 +230,31 @@ Banners automatically flow to fill their parent container width. No additional p
 />
 ```
 
-To control banner width, use container elements:
+To control banner width, use container elements with the `lx` prop:
 
 ```tsx
-{
-  /* Full viewport width */
-}
+import { Banner, Box } from '@ledgerhq/lumen-ui-rnative';
+
+{/* Full viewport width */}
 <Banner
   title='Full Width'
   description='This banner fills the viewport width'
-/>;
+/>
 
-{
-  /* Constrained width */
-}
-<View className='max-w-4xl mx-auto'>
+{/* Constrained width */}
+<Box lx={{ maxWidth: 's400' }}>
   <Banner
     title='Constrained'
     description='This banner is limited by its container'
   />
-</View>;
+</Box>
 
-{
-  /* Responsive width */
-}
-<View className='w-full lg:max-w-2xl'>
-  <Banner title='Responsive' description='Width adapts based on screen size' />
-</View>;
+{/* With margin */}
+<Banner
+  title='With Layout Adjustment'
+  description='Use lx prop for layout adjustments'
+  lx={{ marginTop: 's16' }}
+/>
 ```
 
 ### Complete Example
@@ -263,7 +262,7 @@ To control banner width, use container elements:
 Here's a comprehensive example showing all Banner features:
 
 ```tsx
-import { Banner, Button } from '@ledgerhq/lumen-ui-react';
+import { Banner, Button, Box } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function NotificationCenter() {
@@ -299,7 +298,7 @@ function NotificationCenter() {
   };
 
   return (
-    <View className='space-y-4'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
       {notifications.map((notification) => (
         <Banner
           key={notification.id}
@@ -332,20 +331,20 @@ function NotificationCenter() {
           }
         />
       ))}
-    </View>
+    </Box>
   );
 }
 ```
 
-### Custom Styling
+### Layout Adjustments with lx
 
-While the component comes with predefined styles, you can extend them using Tailwind classes for layout purposes:
+Use the `lx` prop for layout adjustments like margins or positioning:
 
 ```tsx
 <Banner
-  title='Mobile Alert'
-  description='This banner only shows on mobile devices'
-  className='md:hidden mb-4' // Custom responsive display and margin
+  title='With Margin'
+  description='This banner has a top margin'
+  lx={{ marginTop: 's16', marginBottom: 's8' }}
   appearance='info'
 />
 ```
@@ -354,40 +353,38 @@ While the component comes with predefined styles, you can extend them using Tail
 
 The following guidelines ensure consistent usage of the Banner component and maintain design system principles.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's16' }}>
+
   <DoVsDontRow>
     <DoBlockItem
-      title='Use container elements to control width'
-      description='Wrap Banner in container elements to control its width and layout'
+      title='Use lx for layout adjustments only'
+      description='Use the lx prop for margins, positioning, and other layout adjustments'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<View className='max-w-md'>
-  <Banner
-    title='System Notice'
-    description='Maintenance scheduled for tonight'
-    appearance='warning'
-  />
-</View>
+<Banner
+  title='System Notice'
+  description='Maintenance scheduled for tonight'
+  lx={{ marginTop: 's16' }}
+  appearance='warning'
+/>
 ```
 
     </DoBlockItem>
     <DontBlockItem
-      title="Don't use className for width control"
-      description='Avoid using className to set width directly on Banner'
+      title="Don't use lx for appearance changes"
+      description='Avoid using lx to modify colors, padding, or other core appearance styles'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<View className='max-w-md'>
-  <Banner
-    title='System Notice'
-    description='Maintenance scheduled for tonight'
-    className='w-80'
-    appearance='warning'
-  />
-</View>
+<Banner
+  title='System Notice'
+  description='Maintenance scheduled for tonight'
+  lx={{ backgroundColor: 'accent', padding: 's24' }}
+  appearance='warning'
+/>
 ```
 
     </DontBlockItem>
@@ -435,7 +432,7 @@ The following guidelines ensure consistent usage of the Banner component and mai
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>