@ledgerhq/lumen-ui-rnative 0.1.15 → 0.1.16

package/src/lib/Components/BaseInput/BaseInput.tsx

@@ -1,4 +1,7 @@
-import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import {
+  DisabledProvider,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import {
   useCallback,
   useEffect,
@@ -33,7 +36,8 @@ export const BaseInput = ({
   errorMessage,
   hideClearButton,
   onChangeText: onChangeTextProp,
-  editable: editableProp = true,
+  editable,
+  disabled: disabledProp = false,
   prefix,
   suffix,
   ref,
@@ -41,7 +45,7 @@ export const BaseInput = ({
 }: BaseInputProps) => {
   const disabled = useDisabledContext({
     consumerName: 'BaseInput',
-    mergeWith: { disabled: !editableProp },
+    mergeWith: { disabled: disabledProp },
   });
   const { t } = useCommonTranslation();
   const { theme } = useTheme();
@@ -97,68 +101,70 @@ export const BaseInput = ({
   });
 
   return (
-    <Box lx={lx} style={style}>
-      <Pressable
-        style={StyleSheet.flatten([styles.container, containerStyle])}
-        onPress={() => inputRef.current?.focus()}
-        disabled={disabled}
-      >
-        {prefix}
+    <DisabledProvider value={{ disabled }}>
+      <Box lx={lx} style={style}>
+        <Pressable
+          style={StyleSheet.flatten([styles.container, containerStyle])}
+          onPress={() => inputRef.current?.focus()}
+          disabled={disabled}
+        >
+          {prefix}
 
-        <TextInput
-          ref={inputRef}
-          value={value}
-          style={StyleSheet.flatten([styles.input, inputStyle])}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          onChangeText={handleChangeText}
-          editable={!disabled}
-          autoCapitalize='none'
-          autoCorrect={false}
-          selectionColor={theme.colors.text.active}
-          placeholderTextColor={theme.colors.text.muted}
-          {...props}
-        />
+          <TextInput
+            ref={inputRef}
+            value={value}
+            style={StyleSheet.flatten([styles.input, inputStyle])}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onChangeText={handleChangeText}
+            editable={editable !== false && !disabled}
+            autoCapitalize='none'
+            autoCorrect={false}
+            selectionColor={theme.colors.text.active}
+            placeholderTextColor={theme.colors.text.muted}
+            {...props}
+          />
 
-        {label && (
-          <Animated.Text
-            style={[
-              floatingLabelStyles.label,
-              floatingLabelStyles.animatedStyle,
-              labelStyle,
-            ]}
-            numberOfLines={1}
-          >
-            {label}
-          </Animated.Text>
-        )}
+          {label && (
+            <Animated.Text
+              style={[
+                floatingLabelStyles.label,
+                floatingLabelStyles.animatedStyle,
+                labelStyle,
+              ]}
+              numberOfLines={1}
+            >
+              {label}
+            </Animated.Text>
+          )}
 
-        {(suffix || (!hideClearButton && !disabled)) && (
-          <View style={styles.suffixContainer}>
-            {showClearButton ? (
-              <InteractiveIcon
-                iconType='stroked'
-                onPress={handleClear}
-                accessibilityLabel={t(
-                  'components.baseInput.clearInputAriaLabel',
-                )}
-              >
-                <DeleteCircleFill size={20} />
-              </InteractiveIcon>
-            ) : (
-              suffix
-            )}
+          {(suffix || (!hideClearButton && !disabled)) && (
+            <View style={styles.suffixContainer}>
+              {showClearButton ? (
+                <InteractiveIcon
+                  iconType='stroked'
+                  onPress={handleClear}
+                  accessibilityLabel={t(
+                    'components.baseInput.clearInputAriaLabel',
+                  )}
+                >
+                  <DeleteCircleFill size={20} />
+                </InteractiveIcon>
+              ) : (
+                suffix
+              )}
+            </View>
+          )}
+        </Pressable>
+
+        {errorMessage && (
+          <View style={styles.errorContainer}>
+            <DeleteCircleFill size={16} color='error' />
+            <Text style={styles.errorText}>{errorMessage}</Text>
           </View>
         )}
-      </Pressable>
-
-      {errorMessage && (
-        <View style={styles.errorContainer}>
-          <DeleteCircleFill size={16} color='error' />
-          <Text style={styles.errorText}>{errorMessage}</Text>
-        </View>
-      )}
-    </Box>
+      </Box>
+    </DisabledProvider>
   );
 };
 

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

@@ -11,6 +11,13 @@ export type BaseInputProps = {
    * The label text that floats above the input when focused or filled.
    */
   label?: string;
+  /**
+   * Whether the input is disabled.
+   * When true, the input is not editable and displays a muted visual style.
+   * This differs from `editable={false}` which only prevents interaction.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Additional styles to apply to the outer wrapper element.
    */

package/src/lib/Components/MediaImage/MediaImage.mdx

@@ -0,0 +1,103 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaImageStories from './MediaImage.stories';
+import { MediaImage } from './MediaImage';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+
+<Meta title='Communication/MediaImage' of={MediaImageStories} />
+
+# MediaImage
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaImage displays an image with consistent sizing and shape. When the image fails to load or no source is provided, a background placeholder is shown automatically. This React Native implementation ensures consistent behavior across mobile platforms.
+
+> View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
+
+## Anatomy
+
+<Canvas of={MediaImageStories.Base} />
+
+- **Container**: Sized wrapper with rounded corners and overflow clipping
+- **Image**: Fills the container using React Native's `Image` component
+- **Fallback**: Background placeholder shown on missing or broken source
+
+## Properties
+
+### Overview
+
+<Canvas of={MediaImageStories.Base} />
+<Controls of={MediaImageStories.Base} />
+
+### Sizes
+
+Eight sizes are available (12, 16, 20, 24, 32, 40, 48, 56). Border radius scales with size.
+
+<Canvas of={MediaImageStories.SizeShowcase} />
+
+### Shapes
+
+<Canvas of={MediaImageStories.ShapeShowcase} />
+
+- **square** (default): Rounded corners that scale with size
+- **circle**: Fully rounded
+
+## Accessibility
+
+- The root element uses `accessibilityRole="image"` with `accessibilityLabel` derived from `alt`.
+- The inner `Image` is marked `accessible={false}` to avoid duplicate announcements.
+- Always provide a meaningful `alt` prop so screen readers can announce the image.
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <MediaImage src='https://example.com/icon.png' alt='Bitcoin' size={32} />;
+}
+```
+
+### With Circle Shape
+
+```tsx
+<MediaImage src='https://example.com/icon.png' alt='Ethereum' size={48} shape='circle' />
+```
+
+### Custom Styling
+
+Use the `lx` prop for token-based layout adjustments:
+
+```tsx
+<MediaImage
+  src='https://example.com/icon.png'
+  alt='Token'
+  size={40}
+  lx={{ marginRight: 's8' }}
+/>
+```
+
+You can also use the `style` prop for escape-hatch styling:
+
+```tsx
+<MediaImage
+  src='https://example.com/icon.png'
+  alt='Token'
+  size={40}
+  style={{ marginRight: 8 }}
+/>
+```
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box } from '../Utility';
+import { MediaImage } from './MediaImage';
+
+const meta = {
+  component: MediaImage,
+  title: 'Communication/MediaImage',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+} satisfies Meta<typeof MediaImage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const exampleSrc = 'https://crypto-icons.ledger.com/ADA.png';
+
+export const Base: Story = {
+  args: {
+    src: exampleSrc,
+    alt: 'Cardano',
+    size: 40,
+    shape: 'square',
+  },
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's16' }}>
+      <MediaImage src={exampleSrc} alt='Size 12' size={12} />
+      <MediaImage src={exampleSrc} alt='Size 16' size={16} />
+      <MediaImage src={exampleSrc} alt='Size 20' size={20} />
+      <MediaImage src={exampleSrc} alt='Size 24' size={24} />
+      <MediaImage src={exampleSrc} alt='Size 32' size={32} />
+      <MediaImage src={exampleSrc} alt='Size 40' size={40} />
+      <MediaImage src={exampleSrc} alt='Size 48' size={48} />
+      <MediaImage src={exampleSrc} alt='Size 56' size={56} />
+    </Box>
+  ),
+};
+
+export const ShapeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's24' }}>
+      <MediaImage src={exampleSrc} alt='Square' size={48} shape='square' />
+      <MediaImage src={exampleSrc} alt='Circle' size={48} shape='circle' />
+    </Box>
+  ),
+};

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/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} />