@ledgerhq/lumen-ui-rnative 0.0.42

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

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

package/src/lib/Components/ListItem/ListItem.mdx

@@ -0,0 +1,313 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ListItemStories from './ListItem.stories';
+import { ListItem } from './ListItem';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+
+<Meta title='Components/ListItem' of={ListItemStories} />
+
+# 📋 ListItem
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+ListItems are flexible interactive elements designed for lists in React Native applications. They provide a structured way to display a title with optional description, leading content (usually a Spot), description tag, and flexible trailing content with native touch interactions.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=2255-4155).
+
+## Anatomy
+
+<Canvas of={ListItemStories.Base} />
+
+- **Title**: The main label of the item (required)
+- **Leading Content (optional)**: Visually represents the item's category or action, usually using a Spot component
+- **Description (optional)**: Provides additional context
+- **Description Tag (optional)**: Small tag next to description for status or labels
+- **Trailing Content (optional)**: Arbitrary content to be displayed on the right side
+
+## Properties
+
+### Overview
+
+<Canvas of={ListItemStories.Base} />
+<Controls of={ListItemStories.Base} />
+
+### Trailing Content Variants
+
+ListItems support arbitrary trailing content to suit different interaction patterns:
+
+- **caret**: Navigation indicator (chevron right)
+- **value**: Displays a primary value with optional subvalue
+- **tag**: Shows a tag for status or category
+- **icon**: Custom trailing icon
+
+<Canvas of={ListItemStories.TrailingContentVariantsShowcase} />
+
+### States
+
+ListItems support standard states including active and disabled for touch interactions.
+
+<Canvas of={ListItemStories.StateShowcase} />
+
+## Responsive Layout
+
+ListItems adapt to their container width, truncating long titles and descriptions as needed.
+
+<Canvas of={ListItemStories.ResponsiveLayout} />
+
+> **Key behaviors:**
+>
+> - Automatically fits container width
+> - Title truncates to one line
+> - Description truncates to one line
+> - Icons and trailing content maintain fixed sizes
+
+## Accessibility
+
+React Native ListItem includes:
+
+- Native touch feedback with `Pressable`
+- Proper text truncation with ellipsis
+- Disabled state handling
+- Screen reader support through React Native's accessibility features
+
+</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 { ListItem } from '@ledgerhq/lumen-ui-rnative';
+import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <ListItem
+      title='Settings'
+      trailingContent={<ChevronRight size={24} />}
+      onPress={() => console.log('Pressed!')}
+    />
+  );
+}
+```
+
+### With Description
+
+Add a description below the title for additional context:
+
+```tsx
+import { ListItem } from '@ledgerhq/lumen-ui-rnative';
+import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <ListItem
+      title='Account Settings'
+      description='Manage your profile and preferences'
+      trailingContent={<ChevronRight size={24} />}
+      onPress={() => console.log('Pressed!')}
+    />
+  );
+}
+```
+
+### With Leading Content
+
+Include a Spot component as leading icon for visual identification:
+
+```tsx
+import { ListItem, Spot } from '@ledgerhq/lumen-ui-rnative';
+import { Settings, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <ListItem
+      title='Settings'
+      description='Manage your profile and preferences'
+      leadingContent={<Spot appearance='icon' icon={Settings} />}
+      trailingContent={<ChevronRight size={24} />}
+      onPress={() => console.log('Pressed!')}
+    />
+  );
+}
+```
+
+### Trailing Content
+
+The ListItem supports arbitrary trailing content variants. Below are some examples:
+
+```tsx
+import { ListItem, Tag } from '@ledgerhq/lumen-ui-rnative';
+import {
+  Settings,
+  PenEdit,
+  ChevronRight,
+  User,
+} from '@ledgerhq/lumen-ui-rnative/symbols';
+import { View, Text } from 'react-native';
+
+function ListVariants() {
+  return (
+    <View className='flex flex-col gap-2 max-w-md'>
+      {/* Chevron - For navigation items */}
+      <ListItem
+        title='Chevron Variant'
+        description='With description'
+        leadingContent={<Spot appearance='icon' icon={User} />}
+        trailingContent={<ChevronRight size={24} />}
+        onPress={() => console.log('Navigate')}
+      />
+
+      {/* Value - For displaying values */}
+      <ListItem
+        title='Account Balance'
+        description='Current available funds'
+        leadingContent={<Spot appearance='icon' icon={User} />}
+        trailingContent={
+          <View className='text-right'>
+            <Text className='body-2-semi-bold'>42.00</Text>
+            <Text className='text-muted body-3'>USD</Text>
+          </View>
+        }
+        onPress={() => console.log('View balance')}
+      />
+
+      {/* Tag - For status indicators */}
+      <ListItem
+        title='New Feature'
+        description='Recently added functionality'
+        leadingContent={<Spot appearance='icon' icon={User} />}
+        trailingContent={<Tag label='New' appearance='accent' />}
+        onPress={() => console.log('View feature')}
+      />
+
+      {/* Icon - For trailing icons */}
+      <ListItem
+        title='Edit Profile'
+        description='Modify your information'
+        leadingContent={<Spot appearance='icon' icon={User} />}
+        trailingContent={<PenEdit size={24} />}
+        onPress={() => console.log('Edit')}
+      />
+
+      {/* None - No trailing content */}
+      <ListItem
+        title='Simple Item'
+        description='No trailing elements'
+        leadingContent={<Spot appearance='icon' icon={User} />}
+        onPress={() => console.log('Simple action')}
+      />
+    </View>
+  );
+}
+```
+
+### With Description Tag
+
+Add a tag to the description for additional status information:
+
+```tsx
+import { ListItem, Tag } from '@ledgerhq/lumen-ui-rnative';
+import { Bolt } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <ListItem
+      title='New Item'
+      description='Recently added'
+      descriptionTag={
+        <Tag label='New' appearance='accent' icon={Bolt} size='sm' />
+      }
+      trailingContent={<ChevronRight size={24} />}
+      onPress={() => console.log('Pressed!')}
+    />
+  );
+}
+```
+
+### Disabled State
+
+Disable the ListItem to prevent interaction:
+
+```tsx
+<ListItem title='Disabled Option' description='Cannot be changed' disabled />
+```
+
+### Responsive Layout
+
+ListItem handles truncation responsively. Use container styles to control behavior:
+
+```tsx
+<View className='w-240 bg-base p-4'>
+  <ListItem
+    title='Very Long Title That Will Truncate'
+    description='Very long description that will also truncate appropriately'
+    leadingContent={<Spot appearance='icon' icon={User} />}
+    trailingContent={<ChevronRight size={24} />}
+    onPress={() => console.log('Pressed!')}
+  />
+</View>
+```
+
+### Custom Styling
+
+Use `className` for layout purposes only, such as maximum width:
+
+```tsx
+<ListItem
+  title='Constrained Width'
+  description='This item has a maximum width applied'
+  className='max-w-md'
+  onPress={() => console.log('Pressed!')}
+/>
+```
+
+## Do's and Don'ts
+
+The following guidelines ensure consistent usage of the ListItem component and maintain design system principles.
+
+<div className='flex flex-col gap-24'>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use in ScrollView with proper grouping'
+      description='ListItems work best when grouped in ScrollView containers for list contexts'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<ScrollView className='max-w-320'>
+  <ListItem title='Item 1' onPress={() => {}} />
+  <ListItem title='Item 2' onPress={() => {}} />
+</ScrollView>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use for non-list contexts"
+      description='Avoid using ListItem as standalone elements with custom borders or margins'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<ScrollView className='max-w-320'>
+  <ListItem title='Standalone' className='m-4 border' onPress={() => {}} />
+  <ListItem title='Another' className='m-4 border' onPress={() => {}} />
+</ScrollView>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</div>
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { View, Text } from 'react-native';
+import {
+  Settings,
+  Plus,
+  User,
+  PenEdit,
+  Cart,
+  Apps,
+  Chart1,
+  Bolt,
+  ChevronRight,
+} from '../../Symbols';
+import { cn } from '../../utils';
+import { Spot } from '../Spot/Spot';
+import { Tag } from '../Tag/Tag';
+import { ListItem } from './ListItem';
+
+const Balance = ({ disabled }: { disabled?: boolean }) => {
+  return (
+    <View className='items-end'>
+      <Text className={cn('body-2-semi-bold', disabled && 'text-disabled')}>
+        42.00
+      </Text>
+      <Text className={cn('text-muted body-3', disabled && 'text-disabled')}>
+        USD
+      </Text>
+    </View>
+  );
+};
+
+const meta: Meta<typeof ListItem> = {
+  component: ListItem,
+  title: 'Containment/ListItem',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The main title of the list item',
+    },
+    description: {
+      control: 'text',
+      description: 'Optional description',
+    },
+    descriptionTag: {
+      control: 'select',
+      options: ['None', 'Tag'],
+      mapping: {
+        None: undefined,
+        Tag: <Tag label='New' appearance='accent' icon={Bolt} size='sm' />,
+      },
+      if: { arg: 'description', exists: true },
+    },
+    leadingContent: {
+      control: 'select',
+      options: ['None', 'Settings', 'Plus'],
+      mapping: {
+        None: undefined,
+        Settings: <Spot appearance='icon' icon={Settings} />,
+        Plus: <Spot appearance='icon' icon={Plus} />,
+      },
+      description: 'Optional leading content',
+    },
+    trailingContent: {
+      control: 'select',
+      description: 'Optional trailing content to display on the right side',
+      options: ['icon', 'value', 'tag', 'none'],
+      mapping: {
+        icon: <PenEdit size={24} />,
+        value: <Balance />,
+        tag: <Tag label='New' appearance='accent' />,
+        none: undefined,
+      },
+    },
+    onPress: {
+      action: 'pressed',
+      description: 'The function to be called when the list item is pressed',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ListItem>;
+
+export const Base: Story = {
+  args: {
+    title: 'Item with Icon and Description',
+    leadingContent: <Spot appearance='icon' icon={Settings} />,
+    description: 'Additional information',
+    className: 'max-w-320',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<ListItem
+  title="Item with Icon and Description"
+  leadingContent={<Spot appearance="icon" icon={Settings} />}
+  description="Additional information"
+/>
+`,
+      },
+    },
+  },
+};
+
+export const WithDescriptionTag: Story = {
+  args: {
+    title: 'Item with Description Tag',
+    leadingContent: <Spot appearance='icon' icon={Settings} />,
+    description: 'Additional information',
+    descriptionTag: (
+      <Tag label='New' appearance='accent' icon={Bolt} size='sm' />
+    ),
+  },
+  render: (args) => (
+    <View className='max-w-320'>
+      <ListItem {...args} />
+    </View>
+  ),
+};
+
+export const TrailingContentVariantsShowcase: Story = {
+  render: () => {
+    return (
+      <View className='flex max-w-256 flex-col'>
+        <ListItem
+          title='Caret Variant'
+          description='With description'
+          leadingContent={<Spot appearance='icon' icon={User} />}
+          trailingContent={<ChevronRight size={24} />}
+        />
+        <ListItem
+          title='Value Variant'
+          description='With description'
+          leadingContent={<Spot appearance='icon' icon={Cart} />}
+          trailingContent={<Balance />}
+        />
+        <ListItem
+          title='Tag Variant'
+          description='With description'
+          leadingContent={<Spot appearance='icon' icon={Apps} />}
+          trailingContent={<Tag label='New' appearance='accent' />}
+        />
+        <ListItem
+          title='Icon Variant'
+          description='With description'
+          leadingContent={<Spot appearance='icon' icon={Settings} />}
+          trailingContent={<PenEdit size={24} />}
+        />
+        <ListItem
+          title='None Variant'
+          description='With description'
+          leadingContent={<Spot appearance='icon' icon={Chart1} />}
+        />
+      </View>
+    );
+  },
+};
+
+export const StateShowcase: Story = {
+  render: () => {
+    return (
+      <View className='flex flex-row gap-32'>
+        <View className='flex max-w-256 flex-col'>
+          <ListItem
+            title='Caret Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={User} />}
+            trailingContent={<ChevronRight size={24} className='text-muted' />}
+          />
+          <ListItem
+            title='Value Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Cart} />}
+            trailingContent={<Balance />}
+          />
+          <ListItem
+            title='Tag Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Apps} />}
+            trailingContent={<Tag label='New' appearance='accent' />}
+          />
+          <ListItem
+            title='Icon Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Settings} />}
+            trailingContent={<PenEdit size={24} />}
+          />
+          <ListItem
+            title='None Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Chart1} />}
+          />
+        </View>
+        <View className='flex max-w-256 flex-col'>
+          <ListItem
+            title='Caret Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={User} disabled />}
+            disabled
+            trailingContent={
+              <ChevronRight size={24} className='text-disabled' />
+            }
+          />
+          <ListItem
+            title='Value Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Cart} disabled />}
+            disabled
+            trailingContent={<Balance disabled />}
+          />
+          <ListItem
+            title='Tag Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Apps} disabled />}
+            disabled
+            trailingContent={
+              <Tag
+                label='New'
+                appearance='accent'
+                className='!bg-muted-transparent !text-disabled'
+              />
+            }
+          />
+          <ListItem
+            title='Icon Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Settings} disabled />}
+            disabled
+            trailingContent={<PenEdit size={24} className='text-disabled' />}
+          />
+          <ListItem
+            title='None Variant'
+            description='With description'
+            leadingContent={<Spot appearance='icon' icon={Chart1} disabled />}
+            disabled
+          />
+        </View>
+      </View>
+    );
+  },
+};
+
+export const ResponsiveLayout: Story = {
+  render: () => (
+    <View className='w-320 bg-muted-pressed p-16'>
+      <Text className='mb-16 text-muted body-4-semi-bold'>
+        Container: 320px wide
+      </Text>
+      <View className='flex flex-col gap-0'>
+        <ListItem
+          title='Short Title'
+          description='Short description'
+          leadingContent={<Spot appearance='icon' icon={Plus} />}
+          trailingContent={<ChevronRight size={24} className='text-muted' />}
+        />
+        <ListItem
+          title='Long Title that should truncate appropriately'
+          description='Long description that should truncate appropriately'
+          leadingContent={<Spot appearance='icon' icon={Plus} />}
+          trailingContent={<ChevronRight size={24} className='text-muted' />}
+        />
+        <ListItem
+          title='Long Title that should truncate appropriately'
+          description='Long description that should truncate appropriately'
+          descriptionTag={<Tag label='New' appearance='accent' size='sm' />}
+          leadingContent={<Spot appearance='icon' icon={Plus} />}
+          trailingContent={<ChevronRight size={24} className='text-muted' />}
+        />
+      </View>
+    </View>
+  ),
+};