@ledgerhq/lumen-ui-rnative 0.1.14 → 0.1.16

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

@@ -0,0 +1,179 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, waitFor } from '@testing-library/react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { MediaImage } from './MediaImage';
+
+const { sizes, borderRadius } = ledgerLiveThemes.dark;
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('MediaImage Component', () => {
+  const validSrc = 'https://crypto-icons.ledger.com/ADA.png';
+
+  it('should render with image when valid src is provided', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaImage src={validSrc} alt='Cardano' />
+      </TestWrapper>,
+    );
+
+    const img = getByTestId('media-image-img');
+    expect(img.props.source).toEqual({ uri: validSrc });
+  });
+
+  it('should render fallback when no src is provided', () => {
+    const { queryByTestId } = render(
+      <TestWrapper>
+        <MediaImage alt='Empty' />
+      </TestWrapper>,
+    );
+
+    expect(queryByTestId('media-image-img')).toBeNull();
+  });
+
+  it('should render fallback when src is empty string', () => {
+    const { queryByTestId } = render(
+      <TestWrapper>
+        <MediaImage src='' alt='Empty' />
+      </TestWrapper>,
+    );
+
+    expect(queryByTestId('media-image-img')).toBeNull();
+  });
+
+  it('should render fallback when image fails to load', async () => {
+    const { getByTestId, queryByTestId, rerender } = render(
+      <TestWrapper>
+        <MediaImage src='https://broken-link.com/404.png' alt='Broken' />
+      </TestWrapper>,
+    );
+
+    const img = getByTestId('media-image-img');
+    img.props.onError();
+
+    rerender(
+      <TestWrapper>
+        <MediaImage src='https://broken-link.com/404.png' alt='Broken' />
+      </TestWrapper>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('media-image-img')).toBeNull();
+    });
+  });
+
+  it('should reset error state when src changes', async () => {
+    const { getByTestId, rerender } = render(
+      <TestWrapper>
+        <MediaImage src='https://broken-link.com/404.png' alt='Test' />
+      </TestWrapper>,
+    );
+
+    const img = getByTestId('media-image-img');
+    img.props.onError();
+
+    rerender(
+      <TestWrapper>
+        <MediaImage src={validSrc} alt='Test' />
+      </TestWrapper>,
+    );
+
+    await waitFor(() => {
+      const newImg = getByTestId('media-image-img');
+      expect(newImg.props.source).toEqual({ uri: validSrc });
+    });
+  });
+
+  it('should apply default size (48)', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaImage testID='mi' src={validSrc} alt='Test' />
+      </TestWrapper>,
+    );
+
+    const root = getByTestId('mi');
+    expect(root.props.style.width).toBe(sizes.s48);
+    expect(root.props.style.height).toBe(sizes.s48);
+  });
+
+  it('should apply specified size', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaImage testID='mi' src={validSrc} alt='Test' size={24} />
+      </TestWrapper>,
+    );
+
+    const root = getByTestId('mi');
+    expect(root.props.style.width).toBe(sizes.s24);
+    expect(root.props.style.height).toBe(sizes.s24);
+  });
+
+  it('should apply circle shape', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaImage testID='mi' src={validSrc} alt='Test' shape='circle' />
+      </TestWrapper>,
+    );
+
+    const root = getByTestId('mi');
+    expect(root.props.style.borderRadius).toBe(borderRadius.full);
+  });
+
+  it('should apply square shape with correct border radius', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaImage
+          testID='mi'
+          src={validSrc}
+          alt='Test'
+          size={48}
+          shape='square'
+        />
+      </TestWrapper>,
+    );
+
+    const root = getByTestId('mi');
+    expect(root.props.style.borderRadius).toBe(borderRadius.md);
+  });
+
+  it('should set accessibility label from alt prop', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <MediaImage src={validSrc} alt='Cardano icon' />
+      </TestWrapper>,
+    );
+
+    expect(getByLabelText('Cardano icon')).toBeTruthy();
+  });
+
+  it('should apply custom styles', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaImage
+          testID='mi'
+          src={validSrc}
+          alt='Test'
+          style={{ borderWidth: 2 }}
+        />
+      </TestWrapper>,
+    );
+
+    const root = getByTestId('mi');
+    expect(root.props.style.borderWidth).toBe(2);
+  });
+
+  it('should pass additional props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaImage testID='custom-id' src={validSrc} alt='Test' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('custom-id')).toBeTruthy();
+  });
+});

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
+import { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
+
+type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
+  12: 'xs',
+  16: 'xs',
+  20: 'xs',
+  24: 'sm',
+  32: 'sm',
+  40: 'md',
+  48: 'md',
+  56: 'lg',
+};
+
+export const mediaImageDotSizeMap: Record<MediaImageSize, number> = {
+  12: 8,
+  16: 8,
+  20: 8,
+  24: 10,
+  32: 12,
+  40: 16,
+  48: 20,
+  56: 24,
+} as const;
+
+const useStyles = ({
+  size,
+  shape,
+}: {
+  size: MediaImageSize;
+  shape: MediaImageShape;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizeValue = t.sizes[`s${size}` as keyof typeof t.sizes] as number;
+      const radius =
+        shape === 'circle'
+          ? t.borderRadius.full
+          : t.borderRadius[borderRadiusMap[size]];
+
+      return {
+        root: {
+          width: sizeValue,
+          height: sizeValue,
+          borderRadius: radius,
+          overflow: 'hidden' as const,
+          alignItems: 'center' as const,
+          justifyContent: 'center' as const,
+          backgroundColor: t.colors.bg.mutedTransparent,
+        },
+        image: {
+          width: '100%' as const,
+          height: '100%' as const,
+        },
+      };
+    },
+    [size, shape],
+  );
+};
+
+/**
+ * A generic media image component that displays an image with optional shape variants.
+ * Supports square and circular appearances with consistent sizing.
+ *
+ * When the image fails to load or no src is provided, displays a background placeholder.
+ *
+ * @example
+ * import { MediaImage } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <MediaImage src="https://example.com/icon.png" alt="Bitcoin" size={32} />
+ */
+export const MediaImage = ({
+  src,
+  alt,
+  size = 48,
+  shape = 'square',
+  lx = {},
+  style,
+  ref,
+  ...props
+}: MediaImageProps) => {
+  const [error, setError] = useState(false);
+  const shouldFallback = !src || error;
+  const styles = useStyles({ size, shape });
+
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
+      accessibilityRole='image'
+      accessibilityLabel={alt}
+      {...props}
+    >
+      {!shouldFallback && (
+        <Image
+          source={{ uri: src }}
+          style={styles.image}
+          accessible={false}
+          onError={() => setError(true)}
+          testID='media-image-img'
+        />
+      )}
+    </Box>
+  );
+};
+
+MediaImage.displayName = 'MediaImage';

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

@@ -0,0 +1,2 @@
+export { MediaImage, mediaImageDotSizeMap } from './MediaImage';
+export * from './types';

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

@@ -0,0 +1,27 @@
+import { StyledViewProps } from '../../../styles';
+
+export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
+
+export type MediaImageShape = 'square' | 'circle';
+
+export type MediaImageProps = {
+  /**
+   * Image source URL. When undefined or on load error, displays a fallback.
+   * @optional
+   */
+  src?: string;
+  /**
+   * The shape of the media image.
+   * @default 'square'
+   */
+  shape?: MediaImageShape;
+  /**
+   * The size of the media image in pixels.
+   * @default 48
+   */
+  size?: MediaImageSize;
+  /**
+   * Alternative text for the image, used for accessibility.
+   */
+  alt?: string;
+} & Omit<StyledViewProps, 'children'>;

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

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import {
   NavBar,

package/src/lib/Components/NavBar/NavBar.tsx

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { ReactNode } from 'react';
+import { Children, isValidElement, ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -35,8 +35,8 @@ function extractSlots(children: ReactNode): Slots {
     trailing: null,
   };
 
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
       return;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,8 +1,8 @@
 import { describe, expect, it } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import React from 'react';
 
+import { createRef } from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { PageIndicator } from './PageIndicator';
 
@@ -162,7 +162,7 @@ describe('PageIndicator Component', () => {
 
   describe('Props', () => {
     it('should accept ref prop', () => {
-      const ref = React.createRef<React.ElementRef<typeof PageIndicator>>();
+      const ref = createRef<React.ElementRef<typeof PageIndicator>>();
       renderWithProvider(
         <PageIndicator
           ref={ref}

package/src/lib/Components/SearchInput/SearchInput.mdx

@@ -57,10 +57,14 @@ Use `onClear` to extend the default clear behavior with custom logic.
 
 ### Disabled State
 
-The search input can be disabled using the `editable` prop set to `false`.
+The search input can be fully disabled using the `disabled` prop, which prevents interaction and applies a muted visual style.
 
 <Canvas of={SearchInputStories.DisabledSearchInput} />
 
+### Read-Only State
+
+Alternatively, use `editable={false}` to prevent editing without applying the muted visual style. This is useful for displaying non-editable values that should still look like regular inputs.
+
 ### Error State
 
 The search component supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
@@ -273,7 +277,15 @@ Use the `keyboardType` prop to show the appropriate keyboard:
 
 ### Disabled State
 
-Use the `editable` prop to disable the search input:
+Use the `disabled` prop to disable the search input with a muted visual style:
+
+```tsx
+<SearchInput placeholder='Search' value='Current search' disabled />
+```
+
+### Read-Only State
+
+Use the `editable` prop to make the search input non-editable without the muted visual style:
 
 ```tsx
 <SearchInput placeholder='Search' value='Current search' editable={false} />

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

@@ -19,24 +19,6 @@ const meta: Meta<typeof SearchInput> = {
       },
     },
   },
-  argTypes: {
-    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',
-    },
-  },
 };
 
 export default meta;
@@ -105,7 +87,7 @@ export const DisabledSearchInput: Story = {
   ),
   args: {
     placeholder: 'Search products',
-    editable: false,
+    disabled: true,
     hideClearButton: false,
   },
 };

package/src/lib/Components/SearchInput/SearchInput.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from '../../../styles';
 import { Search as SearchIcon } from '../../Symbols';
 import { BaseInput } from '../BaseInput';
@@ -8,18 +9,24 @@ export const SearchInput = ({
   style,
   containerStyle,
   inputStyle,
+  disabled: disabledProp,
   ref,
   ...props
 }: SearchInputProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'SearchInput',
+    mergeWith: { disabled: disabledProp },
+  });
   const styles = useAppearanceStyles(appearance);
 
   return (
     <BaseInput
       ref={ref}
-      prefix={<SearchIcon size={20} color='muted' accessible={false} />}
+      prefix={<SearchIcon size={20} accessible={false} disabled={disabled} />}
       style={style}
       containerStyle={[containerStyle, styles.container]}
       inputStyle={[inputStyle, styles.input]}
+      disabled={disabledProp}
       {...props}
     />
   );

package/src/lib/Components/SegmentedControl/SegmentedControl.mdx

@@ -61,7 +61,6 @@ Use the library as part of `@ledgerhq/lumen-ui-rnative`. See the [Setup Guide
 Control selected value in state at the top level and pass it to SegmentedControl. Buttons use value to identify themselves; selected state is derived from context.
 
 ```tsx
-import React from 'react';
 import { SegmentedControl, SegmentedControlButton } from '@ledgerhq/lumen-ui-rnative';
 
 export default function Example() {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
 import { Box } from '../Utility';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
@@ -14,29 +14,22 @@ const meta = {
     layout: 'centered',
     backgrounds: { default: 'light' },
   },
-  argTypes: {
-    onSelectedChange: {
-      action: 'change',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    appearance: {
-      options: ['background', 'no-background'],
-      control: 'radio',
-    },
-    accessibilityLabel: {
-      control: 'text',
-    },
-    selectedValue: {
-      control: 'text',
-    },
-    children: {
-      control: false,
-    },
-  },
+  decorators: [
+    (Story) => (
+      <Box
+        lx={{
+          width: 's320',
+          flexDirection: 'row',
+          justifyContent: 'center',
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
   args: {
     appearance: 'background',
+    tabLayout: 'fixed',
   },
 } satisfies Meta<typeof SegmentedControl>;
 
@@ -49,20 +42,16 @@ export const Base: Story = {
     const [state, setState] = useState('send');
 
     return (
-      <Box lx={{ width: 's256' }}>
-        <SegmentedControl
-          {...args}
-          selectedValue={state}
-          onSelectedChange={setState}
-          accessibilityLabel='Transaction type'
-        >
-          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
-          <SegmentedControlButton value='receive'>
-            Receive
-          </SegmentedControlButton>
-          <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
-        </SegmentedControl>
-      </Box>
+      <SegmentedControl
+        {...args}
+        selectedValue={state}
+        onSelectedChange={setState}
+        accessibilityLabel='Transaction type'
+      >
+        <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+        <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
+        <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+      </SegmentedControl>
     );
   },
 };
@@ -96,23 +85,60 @@ export const WithIcons: Story = {
   },
 };
 
+export const TabLayoutShowcase: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: (args) => {
+    const [fitState, setFitState] = useState('send');
+    const [fixedState, setFixedState] = useState('send');
+
+    return (
+      <Box lx={{ gap: 's24' }} style={{ width: '100%' }}>
+        <SegmentedControl
+          {...args}
+          tabLayout='fit'
+          selectedValue={fitState}
+          onSelectedChange={setFitState}
+          accessibilityLabel='Fit layout'
+        >
+          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+          <SegmentedControlButton value='receive'>
+            Receive
+          </SegmentedControlButton>
+          <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+        </SegmentedControl>
+        <SegmentedControl
+          {...args}
+          tabLayout='fixed'
+          selectedValue={fixedState}
+          onSelectedChange={setFixedState}
+          accessibilityLabel='Fixed layout'
+        >
+          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+          <SegmentedControlButton value='receive'>
+            Receive
+          </SegmentedControlButton>
+          <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+        </SegmentedControl>
+      </Box>
+    );
+  },
+};
+
 export const Disabled: Story = {
   args: {} as React.ComponentProps<typeof SegmentedControl>,
   render: (args) => (
-    <Box lx={{ width: 's256' }}>
-      <SegmentedControl
-        {...args}
-        selectedValue='receive'
-        onSelectedChange={() => {
-          /* empty */
-        }}
-        accessibilityLabel='Transaction type (disabled)'
-        disabled
-      >
-        <SegmentedControlButton value='send'>Send</SegmentedControlButton>
-        <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
-        <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
-      </SegmentedControl>
-    </Box>
+    <SegmentedControl
+      {...args}
+      selectedValue='receive'
+      onSelectedChange={() => {
+        /* empty */
+      }}
+      accessibilityLabel='Transaction type (disabled)'
+      disabled
+    >
+      <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+      <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
+      <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+    </SegmentedControl>
   ),
 };

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

@@ -1,7 +1,6 @@
 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 { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';