@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.45

package/src/styles/factories/createStyledPressable.test.tsx

@@ -0,0 +1,253 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import {
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  View,
+} from 'react-native';
+import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { createStyledPressable } from './createStyledPressable';
+
+const testThemes: any = {
+  light: {
+    spacings: { s8: 8, s16: 16 },
+    sizes: { s48: 48, full: '100%' },
+    colors: { bg: { surface: '#F0F0F0', accent: '#6B21A8' }, border: {} },
+    borderRadius: { md: 12 },
+    shadows: {},
+    typographies: { sm: {} },
+  },
+  dark: {
+    spacings: { s8: 8, s16: 16 },
+    sizes: { s48: 48, full: '100%' },
+    colors: { bg: { surface: '#1C1C1E', accent: '#A855F7' }, border: {} },
+    borderRadius: { md: 12 },
+    shadows: {},
+    typographies: { sm: {} },
+  },
+};
+
+const renderWithProvider = (children: React.ReactElement) =>
+  render(
+    <LumenStyleSheetProvider themes={testThemes}>
+      {children}
+    </LumenStyleSheetProvider>,
+  );
+
+describe('createStyledPressable', () => {
+  const StyledPressable = createStyledPressable(Pressable);
+
+  it('should have correct display name', () => {
+    expect(StyledPressable.displayName).toBe('StyledPressable(Pressable)');
+  });
+
+  it('should resolve token props to styles', () => {
+    renderWithProvider(
+      <StyledPressable
+        testID='pressable'
+        lx={{
+          padding: 's16',
+          width: 's48',
+          backgroundColor: 'surface',
+          borderRadius: 'md',
+        }}
+      />,
+    );
+
+    const pressable = screen.getByTestId('pressable');
+    expect(pressable.props.style).toMatchObject({
+      padding: 16,
+      width: 48,
+      backgroundColor: '#F0F0F0',
+      borderRadius: 12,
+    });
+  });
+
+  it('should resolve full size token to 100%', () => {
+    renderWithProvider(
+      <StyledPressable testID='pressable' lx={{ width: 'full' }} />,
+    );
+
+    const pressable = screen.getByTestId('pressable');
+    expect(pressable.props.style.width).toBe('100%');
+  });
+
+  it('should merge static style prop with resolved tokens', () => {
+    renderWithProvider(
+      <StyledPressable
+        testID='pressable'
+        lx={{ padding: 's16' }}
+        style={{ opacity: 0.5 }}
+      />,
+    );
+
+    const pressable = screen.getByTestId('pressable');
+    expect(pressable.props.style.padding).toBe(16);
+    expect(pressable.props.style.opacity).toBe(0.5);
+  });
+
+  it('should merge style prop with resolved tokens', () => {
+    renderWithProvider(
+      <StyledPressable
+        testID='pressable'
+        lx={{ backgroundColor: 'surface' }}
+        style={{ opacity: 0.8 }}
+      />,
+    );
+
+    const pressable = screen.getByTestId('pressable');
+    expect(pressable.props.style.backgroundColor).toBe('#F0F0F0');
+    expect(pressable.props.style.opacity).toBe(0.8);
+  });
+
+  it('should support function-based style prop', () => {
+    renderWithProvider(
+      <StyledPressable
+        testID='pressable'
+        lx={{ backgroundColor: 'surface' }}
+        style={({ pressed }) => ({
+          opacity: pressed ? 0.7 : 1,
+        })}
+      />,
+    );
+
+    const pressable = screen.getByTestId('pressable');
+    expect(pressable.props.style.backgroundColor).toBe('#F0F0F0');
+    expect(pressable.props.style.opacity).toBe(1);
+  });
+
+  describe('array style support', () => {
+    it('should support array of static styles', () => {
+      renderWithProvider(
+        <StyledPressable
+          testID='pressable'
+          lx={{ padding: 's16' }}
+          style={[{ opacity: 0.5 }, { flex: 1 }]}
+        />,
+      );
+
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.padding).toBe(16);
+      expect(pressable.props.style.opacity).toBe(0.5);
+      expect(pressable.props.style.flex).toBe(1);
+    });
+
+    it('should support array with function-based style', () => {
+      renderWithProvider(
+        <StyledPressable
+          testID='pressable'
+          lx={{ backgroundColor: 'surface' }}
+          style={[
+            { flex: 1 },
+            ({ pressed }: PressableStateCallbackType) => ({
+              opacity: pressed ? 0.7 : 1,
+            }),
+          ]}
+        />,
+      );
+
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.backgroundColor).toBe('#F0F0F0');
+      expect(pressable.props.style.flex).toBe(1);
+      expect(pressable.props.style.opacity).toBe(1);
+    });
+
+    it('should support array with mixed static and function styles', () => {
+      renderWithProvider(
+        <StyledPressable
+          testID='pressable'
+          style={[
+            { padding: 10 },
+            ({ pressed }: PressableStateCallbackType) => ({
+              opacity: pressed ? 0.5 : 1,
+            }),
+            { margin: 5 },
+          ]}
+        />,
+      );
+
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.padding).toBe(10);
+      expect(pressable.props.style.margin).toBe(5);
+      expect(pressable.props.style.opacity).toBe(1);
+    });
+
+    it('should handle null/undefined in style array', () => {
+      renderWithProvider(
+        <StyledPressable
+          testID='pressable'
+          style={[null, { opacity: 0.8 }, undefined]}
+        />,
+      );
+
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.opacity).toBe(0.8);
+    });
+  });
+
+  it('should forward ref', () => {
+    const ref = createRef<View>();
+    renderWithProvider(<StyledPressable ref={ref} testID='pressable' />);
+    expect(ref.current).toBeTruthy();
+  });
+
+  it('should handle onPress callback', () => {
+    const onPress = jest.fn();
+    renderWithProvider(
+      <StyledPressable testID='pressable' onPress={onPress} />,
+    );
+
+    fireEvent.press(screen.getByTestId('pressable'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  describe('performance (memo)', () => {
+    it('should not re-render when props are unchanged', () => {
+      const renderCount = jest.fn();
+      const TrackedPressable = (props: PressableProps) => {
+        renderCount();
+        return <Pressable {...props} />;
+      };
+      const StyledTracked = createStyledPressable(TrackedPressable as any);
+
+      const { rerender } = renderWithProvider(
+        <StyledTracked testID='pressable' lx={{ padding: 's16' }} />,
+      );
+
+      expect(renderCount).toHaveBeenCalledTimes(1);
+
+      rerender(
+        <LumenStyleSheetProvider themes={testThemes}>
+          <StyledTracked testID='pressable' lx={{ padding: 's16' }} />
+        </LumenStyleSheetProvider>,
+      );
+
+      expect(renderCount).toHaveBeenCalledTimes(1);
+    });
+
+    it('should re-render when token props change', () => {
+      const renderCount = jest.fn();
+      const TrackedPressable = (props: PressableProps) => {
+        renderCount();
+        return <Pressable {...props} />;
+      };
+      const StyledTracked = createStyledPressable(TrackedPressable as any);
+
+      const { rerender } = renderWithProvider(
+        <StyledTracked testID='pressable' lx={{ padding: 's16' }} />,
+      );
+
+      expect(renderCount).toHaveBeenCalledTimes(1);
+
+      rerender(
+        <LumenStyleSheetProvider themes={testThemes}>
+          <StyledTracked testID='pressable' lx={{ width: 's48' }} />
+        </LumenStyleSheetProvider>,
+      );
+
+      expect(renderCount).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/src/styles/factories/createStyledPressable.tsx

@@ -0,0 +1,97 @@
+import React, { forwardRef, memo } from 'react';
+import { StyleSheet } from 'react-native';
+import type {
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '../Provider/useTheme';
+import { resolveViewStyle } from '../resolveStyle/resolveStyle';
+import { LumenPressableStyleLX } from '../types';
+import { areLxPropsEqual } from './areLxPropsEqual';
+
+type PressableRef = React.ElementRef<typeof Pressable>;
+type StyleFn = (state: PressableStateCallbackType) => ViewStyle;
+type StyleItem = ViewStyle | StyleFn | StyleItem[] | null | undefined;
+
+export type StyledPressableProps = LumenPressableStyleLX &
+  Omit<PressableProps, 'style'> & {
+    style?: StyleItem;
+  };
+
+/**
+ * Check if any style item (including nested arrays) is a function
+ */
+const hasStyleFunction = (style: StyleItem): boolean => {
+  if (Array.isArray(style)) {
+    return style.some((s) => hasStyleFunction(s));
+  }
+  return typeof style === 'function';
+};
+
+/**
+ * Resolve all style functions in a style tree
+ */
+const resolveStyleFunctions = (
+  style: StyleItem,
+  state: PressableStateCallbackType,
+): ViewStyle | (ViewStyle | null | undefined)[] | null | undefined => {
+  if (Array.isArray(style)) {
+    return style.map((s) => resolveStyleFunctions(s, state)) as (
+      | ViewStyle
+      | null
+      | undefined
+    )[];
+  }
+  return typeof style === 'function' ? style(state) : style;
+};
+
+/**
+ * Factory function to create a styled Pressable component.
+ *
+ * Supports `style` as an object, function, or array of objects/functions (including nested).
+ *
+ * ```tsx
+ * // Create a styled Pressable
+ * const Pressable = createStyledPressable(RNPressable);
+ *
+ * // Usage with array of styles
+ * <Pressable style={[props.style, ({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })]} />
+ * ```
+ */
+export const createStyledPressable = (Component: typeof Pressable) => {
+  const StyledComponent = memo(
+    forwardRef<PressableRef, StyledPressableProps>(
+      ({ lx = {}, style, ...props }, ref) => {
+        const { theme } = useTheme();
+        const resolvedLxStyle = resolveViewStyle(theme, lx);
+
+        if (!hasStyleFunction(style)) {
+          const finalStyle = StyleSheet.flatten([
+            resolvedLxStyle,
+            style as ViewStyle,
+          ]);
+          return <Component ref={ref} {...props} style={finalStyle} />;
+        }
+
+        const mergedStyle = (state: PressableStateCallbackType): ViewStyle => {
+          const resolvedStyle = resolveStyleFunctions(style, state);
+          return StyleSheet.flatten([resolvedLxStyle, resolvedStyle]);
+        };
+
+        return <Component ref={ref} {...props} style={mergedStyle} />;
+      },
+    ),
+    areLxPropsEqual,
+  );
+
+  // Set display name for debugging
+  const componentName =
+    (Component as { displayName?: string }).displayName ||
+    (Component as { name?: string }).name ||
+    'Component';
+  StyledComponent.displayName = `StyledPressable(${componentName})`;
+
+  return StyledComponent;
+};

package/src/styles/factories/createStyledText.test.tsx

@@ -64,9 +64,9 @@ describe('createStyledText', () => {
     expect(StyledText.displayName).toBe('StyledText(Text)');
   });
 
-  it('should apply typography typo', () => {
+  it('should apply typography typography', () => {
     renderWithProvider(
-      <StyledText testID='text' typo='body1'>
+      <StyledText testID='text' typography='body1'>
         Hello
       </StyledText>,
     );
@@ -81,25 +81,34 @@ describe('createStyledText', () => {
 
   it('should apply color token', () => {
     renderWithProvider(
-      <StyledText testID='text' color='muted'>
+      <StyledText testID='text' lx={{ color: 'muted' }}>
         Muted
       </StyledText>,
     );
+
     expect(screen.getByTestId('text').props.style.color).toBe('#666666');
   });
 
-  it('should combine typo, color and spacing', () => {
+  it('should combine typography, color and spacing', () => {
     renderWithProvider(
-      <StyledText testID='text' typo='body1' color='base' marginTop='s8'>
+      <StyledText
+        testID='text'
+        typography='body1'
+        lx={{ color: 'base', marginTop: 's8' }}
+      >
         Styled
       </StyledText>,
     );
 
     const style = screen.getByTestId('text').props.style;
+
     expect(style).toMatchObject({
-      fontSize: 16,
       color: '#000000',
       marginTop: 8,
+      fontSize: 16,
+      fontWeight: '500',
+      lineHeight: 24,
+      letterSpacing: 0,
     });
   });
 
@@ -107,18 +116,17 @@ describe('createStyledText', () => {
     renderWithProvider(
       <StyledText
         testID='text'
-        typo='body1'
+        typography='body1'
         style={{ textDecorationLine: 'underline' }}
       >
         Underlined
       </StyledText>,
     );
 
-    const [stylesFromProps, otherStyles] =
-      screen.getByTestId('text').props.style;
+    const style = screen.getByTestId('text').props.style;
 
-    expect(stylesFromProps.fontSize).toBe(16);
-    expect(otherStyles.textDecorationLine).toBe('underline');
+    expect(style.fontSize).toBe(16);
+    expect(style.textDecorationLine).toBe('underline');
   });
 
   it('should forward ref', () => {
@@ -138,10 +146,10 @@ describe('createStyledText', () => {
         renderCount();
         return <Text {...props} />;
       };
-      const StyledTracked = createStyledText(TrackedText);
+      const StyledTracked = createStyledText(TrackedText as any);
 
       const { rerender } = renderWithProvider(
-        <StyledTracked testID='text' typo='body1'>
+        <StyledTracked testID='text' typography='body1'>
           Hello
         </StyledTracked>,
       );
@@ -151,7 +159,7 @@ describe('createStyledText', () => {
       // Re-render with same props
       rerender(
         <LumenStyleSheetProvider themes={testThemes}>
-          <StyledTracked testID='text' typo='body1'>
+          <StyledTracked testID='text' typography='body1'>
             Hello
           </StyledTracked>
         </LumenStyleSheetProvider>,
@@ -167,10 +175,10 @@ describe('createStyledText', () => {
         renderCount();
         return <Text {...props} />;
       };
-      const StyledTracked = createStyledText(TrackedText);
+      const StyledTracked = createStyledText(TrackedText as any);
 
       const { rerender } = renderWithProvider(
-        <StyledTracked testID='text' typo='body1'>
+        <StyledTracked testID='text' typography='body1'>
           Hello
         </StyledTracked>,
       );
@@ -180,7 +188,7 @@ describe('createStyledText', () => {
       // Re-render with different props
       rerender(
         <LumenStyleSheetProvider themes={testThemes}>
-          <StyledTracked testID='text' color='muted'>
+          <StyledTracked testID='text' lx={{ color: 'muted' }}>
             Hello
           </StyledTracked>
         </LumenStyleSheetProvider>,
@@ -196,10 +204,10 @@ describe('createStyledText', () => {
         renderCount();
         return <Text {...props} />;
       };
-      const StyledTracked = createStyledText(TrackedText);
+      const StyledTracked = createStyledText(TrackedText as any);
 
       const { rerender } = renderWithProvider(
-        <StyledTracked testID='text' typo='body1'>
+        <StyledTracked testID='text' typography='body1'>
           Hello
         </StyledTracked>,
       );
@@ -209,7 +217,7 @@ describe('createStyledText', () => {
       // Re-render with different children
       rerender(
         <LumenStyleSheetProvider themes={testThemes}>
-          <StyledTracked testID='text' typo='body1'>
+          <StyledTracked testID='text' typography='body1'>
             World
           </StyledTracked>
         </LumenStyleSheetProvider>,

package/src/styles/factories/createStyledText.tsx

@@ -1,68 +1,48 @@
-import React, { forwardRef, memo, MemoExoticComponent } from 'react';
+import React, { forwardRef, memo } from 'react';
+import { StyleSheet } from 'react-native';
 import type { Text, TextProps, TextStyle } from 'react-native';
 import { useTheme } from '../Provider/useTheme';
-import {
-  resolveTextStyle,
-  extractLumenTextStyleProps,
-} from '../resolveStyle/resolveStyle';
-import type { LumenTextProps } from '../types';
+import { resolveTextStyle } from '../resolveStyle/resolveStyle';
+import type { LumenStyleSheetTheme, LumenTextStyleLX } from '../types';
+import { areLxPropsEqual } from './areLxPropsEqual';
 
 type TextRef = React.ElementRef<typeof Text>;
-type ReturnComponentType = MemoExoticComponent<
-  React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<LumenTextProps> & React.RefAttributes<TextRef>
-  >
->;
+export type StyledTextProps = LumenTextStyleLX &
+  TextProps & {
+    /**
+     * Typography preset
+     */
+    typography?: keyof LumenStyleSheetTheme['typographies'];
+  };
 
 /**
  * Factory function to create a styled Text component.
  *
- * Creates a component that accepts token-constrained style props directly,
- * plus a `typo` prop for typography presets, resolving them to actual
- * values at runtime using the current theme.
- *
- * @param Component - The base Text-like component to wrap
- *
- * @example
  * ```tsx
- * import { Text } from 'react-native';
- * import { createStyledText } from '@ledgerhq/lumen-ui-rnative/styles';
- *
  * // Create a basic Text
  * const StyledText = createStyledText(Text);
- *
- * // Usage - token props and typo are resolved
- * <StyledText typo='body1'>Hello World</StyledText>
- * <StyledText typo='heading2SemiBold' marginTop='s8' color='muted'>
- *   Subtitle
- * </StyledText>
- *
- * // style prop for escape hatch
- * <StyledText typo='body1' style={{ letterSpacing: 2 }} />
  * ```
  */
-export const createStyledText = (
-  Component: React.ComponentType<LumenTextProps>,
-): ReturnComponentType => {
+export const createStyledText = (Component: typeof Text) => {
   const StyledComponent = memo(
-    forwardRef<TextRef, LumenTextProps>((props, ref) => {
-      const { theme } = useTheme();
-      const { lumenStyle, rest } = extractLumenTextStyleProps(props);
-      const resolvedStyle = resolveTextStyle(theme, lumenStyle);
+    forwardRef<TextRef, StyledTextProps>(
+      ({ typography = 'body3', lx = {}, style, ...props }, ref) => {
+        const { theme } = useTheme();
+        const resolvedStyle = resolveTextStyle(theme, lx);
+        const resolvedTypographyStyles = theme.typographies[
+          typography
+        ] as TextStyle;
 
-      const { style: propsStyle, ...componentProps } = rest;
-      const finalStyle = propsStyle
-        ? ([resolvedStyle, propsStyle] as TextStyle[])
-        : resolvedStyle;
+        const finalStyle = StyleSheet.flatten([
+          resolvedStyle,
+          resolvedTypographyStyles,
+          style,
+        ]);
 
-      return (
-        <Component
-          {...({ ...componentProps, ref, style: finalStyle } as TextProps & {
-            ref: React.Ref<Text>;
-          })}
-        />
-      );
-    }),
+        return <Component ref={ref} {...props} style={finalStyle} />;
+      },
+    ),
+    areLxPropsEqual,
   );
 
   // Set display name for debugging

package/src/styles/factories/createStyledView.test.tsx

@@ -42,10 +42,12 @@ describe('createStyledView', () => {
     renderWithProvider(
       <StyledView
         testID='view'
-        padding='s16'
-        width='s48'
-        backgroundColor='surface'
-        borderRadius='md'
+        lx={{
+          padding: 's16',
+          width: 's48',
+          backgroundColor: 'surface',
+          borderRadius: 'md',
+        }}
       />,
     );
 
@@ -59,20 +61,23 @@ describe('createStyledView', () => {
   });
 
   it('should resolve full size token to 100%', () => {
-    renderWithProvider(<StyledView testID='view' width='full' />);
+    renderWithProvider(<StyledView testID='view' lx={{ width: 'full' }} />);
     expect(screen.getByTestId('view').props.style.width).toBe('100%');
   });
 
   it('should merge style prop with resolved tokens', () => {
     renderWithProvider(
-      <StyledView testID='view' padding='s16' style={{ opacity: 0.5 }} />,
+      <StyledView
+        testID='view'
+        lx={{ padding: 's16' }}
+        style={{ opacity: 0.5 }}
+      />,
     );
 
-    const [stylesFromProps, otherStyles] =
-      screen.getByTestId('view').props.style;
+    const style = screen.getByTestId('view').props.style;
 
-    expect(stylesFromProps.padding).toBe(16);
-    expect(otherStyles.opacity).toBe(0.5);
+    expect(style.padding).toBe(16);
+    expect(style.opacity).toBe(0.5);
   });
 
   it('should forward ref', () => {
@@ -88,10 +93,10 @@ describe('createStyledView', () => {
         renderCount();
         return <View {...props} />;
       };
-      const StyledTracked = createStyledView(TrackedView);
+      const StyledTracked = createStyledView(TrackedView as any);
 
       const { rerender } = renderWithProvider(
-        <StyledTracked testID='view' padding='s16' />,
+        <StyledTracked testID='view' lx={{ padding: 's16' }} />,
       );
 
       expect(renderCount).toHaveBeenCalledTimes(1);
@@ -99,7 +104,7 @@ describe('createStyledView', () => {
       // Re-render with same props
       rerender(
         <LumenStyleSheetProvider themes={testThemes}>
-          <StyledTracked testID='view' padding='s16' />
+          <StyledTracked testID='view' lx={{ padding: 's16' }} />
         </LumenStyleSheetProvider>,
       );
 
@@ -113,10 +118,11 @@ describe('createStyledView', () => {
         renderCount();
         return <View {...props} />;
       };
-      const StyledTracked = createStyledView(TrackedView);
+
+      const StyledTracked = createStyledView(TrackedView as any);
 
       const { rerender } = renderWithProvider(
-        <StyledTracked testID='view' padding='s16' />,
+        <StyledTracked testID='view' lx={{ padding: 's16' }} />,
       );
 
       expect(renderCount).toHaveBeenCalledTimes(1);
@@ -124,7 +130,7 @@ describe('createStyledView', () => {
       // Re-render with different props
       rerender(
         <LumenStyleSheetProvider themes={testThemes}>
-          <StyledTracked testID='view' width='s48' />
+          <StyledTracked testID='view' lx={{ width: 's48' }} />
         </LumenStyleSheetProvider>,
       );