@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.45

package/src/lib/Components/TextInput/TextInput.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Banner } from '../Banner';
-import { TextInput } from './TextInput';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { TextInput, type TextInputProps } from './TextInput';
 
 const meta: Meta<typeof TextInput> = {
   component: TextInput,
@@ -14,25 +15,140 @@ const meta: Meta<typeof TextInput> = {
       },
     },
   },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Floating label text',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when input is empty',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display below input',
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Whether the input is editable',
+    },
+    hideClearButton: {
+      control: 'boolean',
+      description: 'Hide the clear button',
+    },
+    keyboardType: {
+      control: 'select',
+      options: ['default', 'email-address', 'numeric', 'phone-pad', 'url'],
+      description: 'Keyboard type for input',
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof TextInput>;
 
-export const WebPreviewWarning: Story = {
-  render: () => (
-    <Banner
-      appearance='warning'
-      title='Unsupported previews on web'
-      description='For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.'
+const TextInputStory = (args: TextInputProps & { initialValue?: string }) => {
+  const [value, setValue] = useState(args.initialValue ?? '');
+
+  return (
+    <View className='flex min-h-400 items-center justify-center p-24'>
+      <View className='w-full max-w-320'>
+        <TextInput
+          {...args}
+          value={value}
+          onChangeText={setValue}
+          onClear={args.onClear}
+        />
+      </View>
+    </View>
+  );
+};
+
+export const Base: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Username',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithContent: Story = {
+  render: (args) => <TextInputStory {...args} initialValue='johndoe' />,
+  args: {
+    label: 'Username',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <TextInputStory {...args} initialValue='ab' />,
+  args: {
+    label: 'Username',
+    errorMessage: 'Username must be at least 3 characters',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const DisabledTextInput: Story = {
+  render: (args) => <TextInputStory {...args} initialValue='johndoe' />,
+  args: {
+    label: 'Username',
+    editable: false,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithHiddenClearButton: Story = {
+  render: (args) => (
+    <TextInputStory {...args} initialValue='Content with hidden clear' />
+  ),
+  args: {
+    label: 'Label',
+    editable: true,
+    hideClearButton: true,
+    keyboardType: 'default',
+  },
+};
+
+export const WithClearCallback: Story = {
+  render: (args) => (
+    <TextInputStory
+      {...args}
+      initialValue='Click clear to see callback'
+      onClear={() => alert('Input cleared!')}
     />
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-      },
-    },
+  args: {
+    label: 'Label',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const EmailKeyboard: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Email',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'email-address',
+  },
+};
+
+export const PhoneKeyboard: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Phone Number',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'phone-pad',
   },
 };

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

@@ -1,19 +1,30 @@
 import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
+import React from 'react';
 import { Text } from 'react-native';
 
 import { Settings } from '../../Symbols';
 import { Spot } from '../Spot';
 import { Tag } from '../Tag';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Tile } from './Tile';
 
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
 describe('Tile Component', () => {
   const mockSpot = <Spot appearance='icon' icon={Settings} />;
   const mockTitle = 'Test Item';
 
   it('should render correctly with required props', () => {
     const { getByText, getByTestId } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     expect(getByTestId('tile')).toBeTruthy();
@@ -23,12 +34,14 @@ describe('Tile Component', () => {
   it('should render description when provided', () => {
     const description = 'Test description';
     const { getByText } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        description={description}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          description={description}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByText(mockTitle)).toBeTruthy();
@@ -37,7 +50,9 @@ describe('Tile Component', () => {
 
   it('should render without description when not provided', () => {
     const { getByText, queryByText } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     expect(getByText(mockTitle)).toBeTruthy();
@@ -49,12 +64,14 @@ describe('Tile Component', () => {
     const tagText = 'Test Tag';
     const mockTag = <Tag label={tagText} />;
     const { getByText } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        trailingContent={mockTag}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          trailingContent={mockTag}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByText(mockTitle)).toBeTruthy();
@@ -65,12 +82,14 @@ describe('Tile Component', () => {
     const trailingText = 'Custom Trailing';
     const mockTrailing = <Text testID='custom-trailing'>{trailingText}</Text>;
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        trailingContent={mockTrailing}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          trailingContent={mockTrailing}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByTestId('custom-trailing')).toBeTruthy();
@@ -79,12 +98,14 @@ describe('Tile Component', () => {
   it('should call onPress handler when pressed', () => {
     const handlePress = jest.fn();
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        onPress={handlePress}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          onPress={handlePress}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     fireEvent.press(getByTestId('tile'));
@@ -94,7 +115,9 @@ describe('Tile Component', () => {
 
   it('should not call onPress when not provided', () => {
     const { getByTestId } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     // Should not throw error when pressing without onPress handler
@@ -106,12 +129,14 @@ describe('Tile Component', () => {
   it('should call onLongPress handler when long pressed', () => {
     const handleLongPress = jest.fn();
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        onLongPress={handleLongPress}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          onLongPress={handleLongPress}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     fireEvent(getByTestId('tile'), 'onLongPress');
@@ -123,13 +148,15 @@ describe('Tile Component', () => {
     const handlePress = jest.fn();
     const handleLongPress = jest.fn();
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        onPress={handlePress}
-        onLongPress={handleLongPress}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     fireEvent.press(getByTestId('tile'));
@@ -144,7 +171,9 @@ describe('Tile Component', () => {
   it('should forward testID prop to Pressable', () => {
     const testId = 'custom-tile-id';
     const { getByTestId } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID={testId} />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID={testId} />
+      </TestWrapper>,
     );
 
     expect(getByTestId(testId)).toBeTruthy();
@@ -152,12 +181,14 @@ describe('Tile Component', () => {
 
   it('should forward additional Pressable props', () => {
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        testID='tile'
-        disabled={true}
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          testID='tile'
+          disabled={true}
+        />
+      </TestWrapper>,
     );
 
     const pressable = getByTestId('tile');
@@ -167,12 +198,14 @@ describe('Tile Component', () => {
   it('should support custom accessibility label', () => {
     const customLabel = 'Custom accessibility label';
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        testID='tile'
-        accessibilityLabel={customLabel}
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          testID='tile'
+          accessibilityLabel={customLabel}
+        />
+      </TestWrapper>,
     );
 
     const pressable = getByTestId('tile');
@@ -184,7 +217,9 @@ describe('Tile Component', () => {
       <Text testID='custom-leading'>Custom Leading Content</Text>
     );
     const { getByTestId } = render(
-      <Tile leadingContent={customLeading} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={customLeading} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     expect(getByTestId('custom-leading')).toBeTruthy();
@@ -196,15 +231,17 @@ describe('Tile Component', () => {
     const mockTag = <Tag label={tagText} />;
 
     const { getByText, getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        description={description}
-        trailingContent={mockTag}
-        onPress={jest.fn()}
-        onLongPress={jest.fn()}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          description={description}
+          trailingContent={mockTag}
+          onPress={jest.fn()}
+          onLongPress={jest.fn()}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByTestId('tile')).toBeTruthy();

package/src/lib/Components/Tile/Tile.tsx

@@ -43,7 +43,7 @@ const tileVariants = {
       },
     },
   ),
-  title: cva('body-3-semi-bold w-full truncate text-center', {
+  title: cva('w-full truncate text-center body-3-semi-bold', {
     variants: {
       disabled: {
         true: 'text-disabled',
@@ -54,7 +54,7 @@ const tileVariants = {
       disabled: false,
     },
   }),
-  description: cva('body-3 w-full overflow-hidden truncate text-center', {
+  description: cva('w-full overflow-hidden truncate text-center body-3', {
     variants: {
       disabled: {
         true: 'text-disabled',

package/src/lib/Components/Tooltip/Tooltip.stories.tsx

@@ -53,7 +53,7 @@ export const WithCustomContent: Story = {
                   Ut enim ad minim veniam, quis nostrud exercitation ullamco
                   laboris nisi ut aliquip ex ea commodo consequat.
                 </Text>
-                <Button size='xs' appearance='accent'>
+                <Button size='sm' appearance='accent'>
                   Custom tooltip action
                 </Button>
               </View>
@@ -92,7 +92,7 @@ export const WithMultipleTooltips: Story = {
 
         <Tooltip>
           <TooltipTrigger asChild>
-            <InteractiveIcon iconType='filled' aria-label='Info'>
+            <InteractiveIcon iconType='filled' accessibilityLabel='Info'>
               <Information />
             </InteractiveIcon>
           </TooltipTrigger>

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

@@ -1,16 +1,20 @@
 import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import { Text, View } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
 import { GlobalTooltipProvider } from './GlobalTooltipContext';
 import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
 
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <GlobalTooltipProvider>
-    {children}
-    <GlobalTooltipBottomSheet />
-  </GlobalTooltipProvider>
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    <GlobalTooltipProvider>
+      {children}
+      <GlobalTooltipBottomSheet />
+    </GlobalTooltipProvider>
+  </ThemeProvider>
 );
 
 describe('Tooltip', () => {

package/src/lib/Components/{Box → Utility/Box}/Box.mdx

@@ -1,11 +1,16 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as BoxStories from './Box.stories';
+import { CustomTabs, Tab } from '../../../../../.storybook/components';
 
 <Meta title='Utility/Box' of={BoxStories} />
 
 # Box
 
-Box is a utility primitive that wraps React Native's `View` component with token-constrained style props from the design system theme.
+<CustomTabs>
+  <Tab label="Overview ">
+Box is a utility primitive that wraps React Native's `View` component with token-constrained style props from the design system theme.  
+
+Box exposes the `lx` property to consume tokens from the `ledgerLiveTheme`, see [lx documentation](/?path=/docs/style-system-lx--docs).
 
 ## Interactive Example
 
@@ -20,10 +25,12 @@ import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
 function Card() {
   return (
     <Box
-      padding='s16'
-      backgroundColor='accent'
-      borderRadius='md'
-      gap='s8'
+      lx={{
+        padding: 's16',
+        backgroundColor: 'accent',
+        borderRadius: 'md',
+        gap: 's8',
+      }}
     >
       <Text>Card content</Text>
     </Box>
@@ -31,18 +38,13 @@ function Card() {
 }
 ```
 
-## Theme Tokens
-
-Box consumes tokens from the `ledgerLiveTheme` for spacing, sizes, colors, and border radius.
-
 ## Escape Hatch
 
 For values not covered by tokens, use raw numbers or the `style` prop:
 
 ```tsx
-// Raw number for one-off values
-<Box width={127} marginTop='s4' />
-
 // Style prop for complete override
-<Box marginTop='s4' style={{ width: 127 }} />
+<Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
 ```
+</Tab>
+</CustomTabs>

package/src/lib/Components/{Box → Utility/Box}/Box.stories.tsx

@@ -20,23 +20,25 @@ type Story = StoryObj<typeof Box>;
 
 export const Base: Story = {
   args: {
-    height: 's48',
-    width: 's48',
-    backgroundColor: 'accent',
-    borderRadius: 'md',
-    alignSelf: 'center',
+    lx: {
+      height: 's48',
+      width: 's48',
+      backgroundColor: 'accent',
+      borderRadius: 'md',
+    },
   },
-  render: (args) => <Box {...args}></Box>,
   parameters: {
     docs: {
       source: {
         code: `
 <Box
-  height='s48'
-  width='s48'
-  backgroundColor='accent'
-  borderRadius='md'
-  alignSelf='center'
+  lx={{
+    height: 's48',
+    width: 's48',
+    backgroundColor: 'accent',
+    borderRadius: 'md',
+    alignSelf: 'center',
+  }}
 />
 `,
       },

package/src/lib/Components/{Box → Utility/Box}/Box.tsx

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { createStyledView, type LumenViewStyleProps } from '../../../styles';
+import { createStyledView, type StyledViewProps } from '../../../../styles';
 
 /**
  * Box - A layout primitive component with token-constrained style props.
@@ -14,28 +14,27 @@ import { createStyledView, type LumenViewStyleProps } from '../../../styles';
  * import { Box } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic usage with token props
- * <Box width='s400' marginTop='s4' gap='s12' alignItems='center'>
+ * <Box lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}>
  *   <Text>Content</Text>
  * </Box>
  *
  * // With background and border
  * <Box
- *   padding='s16'
- *   backgroundColor='surface'
- *   borderRadius='md'
- *   borderColor='muted'
- *   borderWidth={1}
+ *   lx={{
+ *    padding: 's16',
+ *    backgroundColor: 'surface',
+ *    borderRadius: 'md',
+ *    borderColor: 'muted',
+ *    borderWidth: 1
+ *   }}
  * >
  *   <Text>Card content</Text>
  * </Box>
  *
- * // Raw numbers allowed as escape hatch
- * <Box width={127} marginTop='s4' />
- *
  * // style prop for complete override
- * <Box marginTop='s4' style={{ width: 127 }} />
+ * <Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
  * ```
  */
 export const Box = createStyledView(View);
 
-export type BoxProps = LumenViewStyleProps;
+export type BoxProps = StyledViewProps;

package/src/lib/Components/Utility/Box/index.ts

@@ -0,0 +1 @@
+export * from './Box';