@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/src/styles/index.ts

@@ -1,6 +1,4 @@
-export { LumenStyleSheetProvider } from './Provider/LumenStyleSheetProvider';
-export { LumenStyleSheet } from './LumenStyleSheet';
+export { LumenStyleSheetProvider } from './provider/LumenStyleSheetProvider';
+export { useTheme, useStyleSheet } from './hooks';
 export * from './types';
-export * from './factories/createStyledText';
-export * from './factories/createStyledView';
-export * from './utils/styleVarianceAuthority';
+export * from './lx';

package/src/styles/lx/areLxPropsEqual.ts

@@ -0,0 +1,32 @@
+import {
+  StyledPressableProps,
+  StyledTextProps,
+  StyledViewProps,
+} from '../types';
+
+type UnknownRecord = Record<string, unknown>;
+
+/**
+ * Shallow equal for all props
+ */
+const shallowEqual = (a: UnknownRecord, b: UnknownRecord): boolean => {
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) return false;
+  return keysA.every((k) => a[k] === b[k]);
+};
+
+export const areLxPropsEqual = (
+  prevProps: StyledViewProps | StyledTextProps | StyledPressableProps,
+  nextProps: StyledViewProps | StyledTextProps | StyledPressableProps,
+): boolean => {
+  const { lx: prevLx = {}, ...prevRest } = prevProps;
+  const { lx: nextLx = {}, ...nextRest } = nextProps;
+
+  return (
+    shallowEqual(prevLx, nextLx) &&
+    shallowEqual(
+      prevRest as Record<string, unknown>,
+      nextRest as Record<string, unknown>,
+    )
+  );
+};

package/src/styles/lx/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/lx/createStyledPressable.tsx

@@ -0,0 +1,85 @@
+import { ElementRef, forwardRef, memo } from 'react';
+import { StyleSheet } from 'react-native';
+import type {
+  Pressable,
+  PressableStateCallbackType,
+  ViewStyle,
+} from 'react-native';
+import { StyledPressableProps, PressableStyleItem } from '../types';
+import { areLxPropsEqual } from './areLxPropsEqual';
+import { useResolveViewStyle } from './resolveStyle';
+
+/**
+ * Check if any style item (including nested arrays) is a function
+ */
+const hasStyleFunction = (style: PressableStyleItem): 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: PressableStyleItem,
+  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<ElementRef<typeof Pressable>, StyledPressableProps>(
+      ({ lx = {}, style, ...props }, ref) => {
+        const resolvedStyle = useResolveViewStyle(lx);
+
+        if (!hasStyleFunction(style)) {
+          const finalStyle = StyleSheet.flatten([
+            style as ViewStyle,
+            resolvedStyle,
+          ]);
+          return <Component ref={ref} {...props} style={finalStyle} />;
+        }
+
+        const mergedStyle = (state: PressableStateCallbackType): ViewStyle => {
+          const resolvedBareStyle = resolveStyleFunctions(style, state);
+          return StyleSheet.flatten([resolvedBareStyle, 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 → lx}/createStyledText.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react-native';
 import React, { createRef } from 'react';
 import { Text, TextProps } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledText } from './createStyledText';
 
 const testThemes: any = {
@@ -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/lx/createStyledText.tsx

@@ -0,0 +1,45 @@
+import { ElementRef, forwardRef, memo } from 'react';
+import { StyleSheet } from 'react-native';
+import type { Text, TextStyle } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { StyledTextProps } from '../types';
+import { areLxPropsEqual } from './areLxPropsEqual';
+import { useResolveTextStyle } from './resolveStyle';
+
+/**
+ * Factory function to create a styled Text component.
+ *
+ * ```tsx
+ * // Create a basic Text
+ * const StyledText = createStyledText(Text);
+ * ```
+ */
+export const createStyledText = (Component: typeof Text) => {
+  const StyledComponent = memo(
+    forwardRef<ElementRef<typeof Text>, StyledTextProps>(
+      ({ typography = 'body3', lx = {}, style, ...props }, ref) => {
+        const { theme } = useTheme();
+        const resolvedStyle = useResolveTextStyle(lx);
+        const typographyStyle = theme.typographies[typography] as TextStyle;
+
+        const finalStyle = StyleSheet.flatten([
+          typographyStyle,
+          style,
+          resolvedStyle,
+        ]);
+
+        return <Component ref={ref} {...props} style={finalStyle} />;
+      },
+    ),
+    areLxPropsEqual,
+  );
+
+  // Set display name for debugging
+  const componentName =
+    (Component as { displayName?: string }).displayName ||
+    (Component as { name?: string }).name ||
+    'Component';
+  StyledComponent.displayName = `StyledText(${componentName})`;
+
+  return StyledComponent;
+};

package/src/styles/{factories → lx}/createStyledView.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react-native';
 import React, { createRef } from 'react';
 import { View, ViewProps } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledView } from './createStyledView';
 
 const testThemes: any = {
@@ -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>,
       );