@ledgerhq/lumen-ui-rnative 0.1.14 → 0.1.16

package/src/lib/Components/ListItem/ListItem.tsx

@@ -1,24 +1,20 @@
 import {
   createSafeContext,
   DisabledProvider,
-  isTextChildren,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
-import React, { Ref } from 'react';
+import { ElementRef, ReactNode, Ref } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useStyleSheet, useTheme } from '../../../styles';
-import { Spot } from '../Spot';
+import { useStyleSheet } from '../../../styles';
 import { Box, Pressable, Text } from '../Utility';
 import {
   ListItemContentProps,
+  ListItemContentRowProps,
   ListItemDescriptionProps,
-  ListItemIconProps,
   ListItemLeadingProps,
   ListItemProps,
-  ListItemSpotProps,
   ListItemTitleProps,
   ListItemTrailingProps,
-  ListItemTruncateProps,
 } from './types';
 
 const [ListItemTrailingProvider, useListItemTrailingContext] =
@@ -64,17 +60,17 @@ const useRootStyles = ({ pressed }: { pressed: boolean }) => {
  * import {
  *   ListItem,
  *   ListItemLeading,
- *   ListItemSpot,
  *   ListItemContent,
  *   ListItemTitle,
  *   ListItemDescription,
  *   ListItemTrailing,
+ *   Spot,
  * } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <ListItem onPress={() => console.log('Clicked!')}>
  *   <ListItemLeading>
- *     <ListItemSpot appearance="icon" icon={Wallet} />
+ *     <Spot size={48} appearance="icon" icon={Wallet} />
  *     <ListItemContent>
  *       <ListItemTitle>Balance</ListItemTitle>
  *       <ListItemDescription>Optional description</ListItemDescription>
@@ -127,7 +123,7 @@ const ListItemInner = ({
   children,
 }: {
   pressed: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
   const styles = useRootStyles({ pressed });
   return (
@@ -139,7 +135,7 @@ const ListItemInner = ({
 
 /**
  * Container for the leading (left) part of the list item.
- * Contains the visual element (ListItemSpot, Avatar, Icon) and the content (title + description).
+ * Contains the visual element (Spot, Avatar, Icon) and the content (title + description).
  */
 export const ListItemLeading = ({
   children,
@@ -195,8 +191,8 @@ export const ListItemContent = ({
       content: {
         flex: isInTrailing ? 0 : 1,
         minWidth: 0,
-        flexDirection: 'column',
         gap: t.spacings.s4,
+        alignItems: isInTrailing ? 'flex-end' : 'flex-start',
       },
     }),
     [isInTrailing],
@@ -217,16 +213,52 @@ export const ListItemContent = ({
 ListItemContent.displayName = 'ListItemContent';
 
 /**
- * The main title of the list item. Can contain text directly or
- * ListItemTruncate + Tag for more complex layouts.
+ * Horizontal row container within ListItemContent to place a title or description
+ * alongside additional inline content (e.g. Tag) while preserving text truncation.
  */
-export const ListItemTitle = ({
+export const ListItemContentRow = ({
   children,
   lx = {},
   style,
   ref,
   ...viewProps
-}: ListItemTitleProps & { ref?: Ref<View> }) => {
+}: ListItemContentRowProps & { ref?: Ref<View> }) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: 0,
+        gap: t.spacings.s8,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.row, style])}
+      {...viewProps}
+    >
+      {children}
+    </Box>
+  );
+};
+
+ListItemContentRow.displayName = 'ListItemContentRow';
+
+/**
+ * The main title of the list item.
+ */
+export const ListItemTitle = ({
+  children,
+  lx = {},
+  style,
+  ref,
+  ...textProps
+}: ListItemTitleProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemTitle',
     contextRequired: true,
@@ -237,65 +269,37 @@ export const ListItemTitle = ({
   });
 
   const styles = useStyleSheet(
-    (t) => {
-      const { boxStyle } = StyleSheet.create({
-        boxStyle: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: t.spacings.s4,
-          width: '100%',
+    (t) => ({
+      title: StyleSheet.flatten([
+        t.typographies.body2SemiBold,
+        {
+          minWidth: 0,
           textAlign: isInTrailing ? 'right' : 'left',
-          justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
         } as const,
-      });
-
-      return {
-        asBox: boxStyle,
-        asText: StyleSheet.flatten([
-          t.typographies.body2SemiBold,
-          {
-            ...boxStyle,
-            color: disabled ? t.colors.text.disabled : t.colors.text.base,
-          },
-        ]),
-      };
-    },
-    [disabled],
+      ]),
+    }),
+    [disabled, isInTrailing],
   );
 
-  // If children is a string, render it directly as Text with truncation
-  if (isTextChildren(children)) {
-    return (
-      <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
-        lx={lx}
-        style={StyleSheet.flatten([styles.asText, style])}
-        numberOfLines={1}
-        ellipsizeMode='tail'
-      >
-        {children}
-      </Text>
-    );
-  }
-
-  // Otherwise, render as a row container for ListItemTruncate + Tag
   return (
-    <Box
+    <Text
       ref={ref}
       lx={lx}
-      style={StyleSheet.flatten([styles.asBox, style])}
-      {...viewProps}
+      style={StyleSheet.flatten([styles.title, style])}
+      numberOfLines={1}
+      ellipsizeMode='tail'
+      {...textProps}
     >
       {children}
-    </Box>
+    </Text>
   );
 };
 
 ListItemTitle.displayName = 'ListItemTitle';
 
 /**
- * Optional description below the title. Can contain text directly or
- * ListItemTruncate + Tag for more complex layouts.
+ * Optional description text below the title.
  * Automatically applies disabled styling when the parent ListItem is disabled.
  */
 export const ListItemDescription = ({
@@ -303,8 +307,8 @@ export const ListItemDescription = ({
   lx = {},
   style,
   ref,
-  ...viewProps
-}: ListItemDescriptionProps & { ref?: Ref<View> }) => {
+  ...textProps
+}: ListItemDescriptionProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemDescription',
     contextRequired: true,
@@ -315,57 +319,30 @@ export const ListItemDescription = ({
   });
 
   const styles = useStyleSheet(
-    (t) => {
-      const { boxStyle } = StyleSheet.create({
-        boxStyle: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: t.spacings.s4,
-          width: '100%',
+    (t) => ({
+      description: StyleSheet.flatten([
+        t.typographies.body3,
+        {
+          minWidth: 0,
           textAlign: isInTrailing ? 'right' : 'left',
-          justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
+          color: disabled ? t.colors.text.disabled : t.colors.text.muted,
         } as const,
-      });
-
-      return {
-        asBox: boxStyle,
-        asText: StyleSheet.flatten([
-          t.typographies.body3,
-          {
-            ...boxStyle,
-            color: disabled ? t.colors.text.disabled : t.colors.text.muted,
-          },
-        ]),
-      };
-    },
+      ]),
+    }),
     [disabled, isInTrailing],
   );
 
-  // If children is a string, render it directly as Text with truncation
-  if (isTextChildren(children)) {
-    return (
-      <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
-        lx={lx}
-        style={StyleSheet.flatten([styles.asText, style])}
-        numberOfLines={1}
-        ellipsizeMode='tail'
-      >
-        {children}
-      </Text>
-    );
-  }
-
-  // Otherwise, render as a row container for ListItemTruncate + Tag
   return (
-    <Box
+    <Text
       ref={ref}
       lx={lx}
-      style={StyleSheet.flatten([styles.asBox, style])}
-      {...viewProps}
+      style={StyleSheet.flatten([styles.description, style])}
+      numberOfLines={1}
+      ellipsizeMode='tail'
+      {...textProps}
     >
       {children}
-    </Box>
+    </Text>
   );
 };
 
@@ -386,7 +363,6 @@ export const ListItemTrailing = ({
     () => ({
       trailing: {
         flexShrink: 0,
-        flexDirection: 'row',
         alignItems: 'center',
       },
     }),
@@ -408,109 +384,3 @@ export const ListItemTrailing = ({
 };
 
 ListItemTrailing.displayName = 'ListItemTrailing';
-
-/**
- * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
- * Fixed at size 48 for consistent list item appearance.
- */
-export const ListItemSpot = (props: ListItemSpotProps) => {
-  const disabled = useDisabledContext({
-    consumerName: 'ListItemSpot',
-    contextRequired: true,
-  });
-
-  return <Spot {...props} size={48} disabled={disabled} />;
-};
-
-ListItemSpot.displayName = 'ListItemSpot';
-
-/**
- * Icon adapter for ListItem. Automatically inherits disabled state from parent ListItem.
- * Fixed at size 24 for consistent list item appearance.
- */
-export const ListItemIcon = ({
-  icon: Icon,
-  color,
-  lx = {},
-  style,
-  ...viewProps
-}: ListItemIconProps) => {
-  const { theme } = useTheme();
-  const disabled = useDisabledContext({
-    consumerName: 'ListItemIcon',
-    contextRequired: true,
-  });
-
-  return (
-    <Box
-      lx={lx}
-      style={StyleSheet.flatten([{ flexShrink: 0 }, style])}
-      {...viewProps}
-    >
-      <Icon
-        size={24}
-        style={{
-          color: disabled
-            ? theme.colors.text.disabled
-            : (color ?? theme.colors.text.base),
-        }}
-      />
-    </Box>
-  );
-};
-
-ListItemIcon.displayName = 'ListItemIcon';
-
-/**
- * Text wrapper that truncates when space is limited.
- * Use inside ListItemTitle or ListItemDescription when combining text with a Tag.
- * Set variant='title' for title styling or variant='description' (default) for description styling.
- */
-export const ListItemTruncate = ({
-  children,
-  variant = 'description',
-  lx = {},
-  style,
-  ref,
-  ...textProps
-}: ListItemTruncateProps & { ref?: Ref<React.ElementRef<typeof Text>> }) => {
-  const disabled = useDisabledContext({
-    consumerName: 'ListItemTruncate',
-    contextRequired: true,
-  });
-
-  const styles = useStyleSheet(
-    (t) => ({
-      truncate: StyleSheet.flatten([
-        variant === 'title'
-          ? t.typographies.body2SemiBold
-          : t.typographies.body3,
-        {
-          color: disabled
-            ? t.colors.text.disabled
-            : variant === 'title'
-              ? t.colors.text.base
-              : t.colors.text.muted,
-          minWidth: 0,
-          flexShrink: 1,
-        },
-      ]),
-    }),
-    [disabled, variant],
-  );
-
-  return (
-    <Text
-      ref={ref}
-      lx={lx}
-      style={StyleSheet.flatten([styles.truncate, style])}
-      numberOfLines={1}
-      ellipsizeMode='tail'
-      {...textProps}
-    >
-      {children}
-    </Text>
-  );
-};
-
-ListItemTruncate.displayName = 'ListItemTruncate';

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

@@ -1,11 +1,8 @@
-import React from 'react';
 import {
-  LumenTextStyle,
   StyledPressableProps,
   StyledTextProps,
   StyledViewProps,
 } from '../../../styles';
-import { DiscriminatedSpotProps } from '../Spot';
 
 /**
  * Context value for passing state to sub-components
@@ -52,6 +49,16 @@ export type ListItemContentProps = {
   children: React.ReactNode;
 } & Omit<StyledViewProps, 'children'>;
 
+/**
+ * Props for the ListItemContentRow component
+ */
+export type ListItemContentRowProps = {
+  /**
+   * The row content (ListItemTitle or ListItemDescription alongside inline elements like Tag)
+   */
+  children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
 /**
  * Props for the ListItemTitle component
  */
@@ -81,41 +88,3 @@ export type ListItemTrailingProps = {
    */
   children: React.ReactNode;
 } & Omit<StyledViewProps, 'children'>;
-
-/**
- * Props for the ListItemTruncate component
- * Used to truncate text that should when ListItemDescription or ListItemTitle contain custom content
- */
-export type ListItemTruncateProps = {
-  /**
-   * The text content to truncate
-   */
-  children: string;
-  /**
-   * The variant determines typography and color styling.
-   * Use 'title' inside ListItemTitle and 'description' inside ListItemDescription.
-   * @default 'description'
-   */
-  variant?: 'title' | 'description';
-} & Omit<StyledTextProps, 'children'>;
-
-/**
- * Props for the ListItemSpot component
- * Spot adapter that inherits disabled state from parent ListItem
- */
-export type ListItemSpotProps = DiscriminatedSpotProps &
-  Omit<StyledViewProps, 'children'>;
-
-/**
- * Props for the ListItemIcon component
- */
-export type ListItemIconProps = {
-  /**
-   * The icon component to render
-   */
-  icon: React.ComponentType<any>;
-  /**
-   * Optional color override. If not provided, uses theme color with disabled state handling.
-   */
-  color?: LumenTextStyle['color'];
-} & Omit<StyledViewProps, 'children'>;

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>
+  ),
+};