@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/lib/Components/MediaCard/MediaCard.figma.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Tag } from '../Tag';
+import { MediaCard, MediaCardTitle } from './MediaCard';
+
+figma.connect(
+  MediaCard,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=15160-2853',
+  {
+    imports: [
+      "import { MediaCard, MediaCardTitle } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      title: figma.string('title'),
+      tag: figma.boolean('show-tag', {
+        true: <Tag label='Label' appearance='base' />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <MediaCard imageUrl='/image.jpg' onPress={() => {}} onClose={() => {}}>
+        {props.tag}
+        <MediaCardTitle>{props.title}</MediaCardTitle>
+      </MediaCard>
+    ),
+  },
+);

package/src/lib/Components/MediaCard/MediaCard.mdx

@@ -1,7 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as MediaCardStories from './MediaCard.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/MediaCard' of={MediaCardStories} />
 
@@ -105,7 +104,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 </MediaCard>
 ```
 
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

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

@@ -2,7 +2,6 @@ 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='Core/MediaImage' of={MediaImageStories} />

package/src/lib/Components/MediaTag/MediaTag.figma.tsx

@@ -0,0 +1,116 @@
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import { MediaTag } from './MediaTag';
+
+figma.connect(
+  MediaTag,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16793-36383',
+  {
+    imports: [
+      "import { MediaTag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'leading-icon': 'coin' },
+    props: {
+      label: figma.string('label'),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        gray: 'gray',
+        accent: 'accent',
+        'accent-subtle': 'accent-subtle',
+        success: 'success',
+        error: 'error',
+        warning: 'warning',
+        white: 'white',
+      }),
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      tagSize: figma.enum('size', {
+        md: 16,
+        sm: 12,
+      }),
+      disabled: figma.enum('appearance', {
+        disabled: true,
+      }),
+      coin: figma.nestedProps('coin', {
+        asset: figma.enum('asset', {
+          btc: 'btc',
+          eth: 'eth',
+        }),
+      }),
+    },
+    example: (props) => (
+      <MediaTag
+        disabled={props.disabled}
+        label={props.label}
+        appearance={props.appearance}
+        size={props.size}
+        leadingContent={
+          <CryptoIcon
+            ticker={props.coin.asset}
+            ledgerId={props.coin.asset}
+            size={props.tagSize}
+          />
+        }
+      />
+    ),
+  },
+);
+
+figma.connect(
+  MediaTag,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16793-36383',
+  {
+    imports: [
+      "import { MediaTag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'leading-icon': 'network' },
+    props: {
+      label: figma.string('label'),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        gray: 'gray',
+        accent: 'accent',
+        'accent-subtle': 'accent-subtle',
+        success: 'success',
+        error: 'error',
+        warning: 'warning',
+        white: 'white',
+      }),
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      tagSize: figma.enum('size', {
+        md: 16,
+        sm: 12,
+      }),
+      disabled: figma.enum('appearance', {
+        disabled: true,
+      }),
+      network: figma.nestedProps('network', {
+        ticker: figma.enum('network', {
+          eth: 'eth',
+        }),
+      }),
+    },
+    example: (props) => (
+      <MediaTag
+        disabled={props.disabled}
+        label={props.label}
+        appearance={props.appearance}
+        size={props.size}
+        leadingContent={
+          <CryptoIcon
+            ticker={props.network.ticker}
+            ledgerId={props.network.ticker}
+            size={props.tagSize}
+          />
+        }
+      />
+    ),
+  },
+);

package/src/lib/Components/MediaTag/MediaTag.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as MediaTagStories from './MediaTag.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 
 <Meta title='Core/MediaTag' of={MediaTagStories} />

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

@@ -0,0 +1,84 @@
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import {
+  IconButton,
+  NavBarCoinCapsule,
+  NavBarTrailing,
+  TileDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Settings } from '../../Symbols';
+import { NavBar, NavBarBackButton, NavBarContent, NavBarTitle } from './NavBar';
+
+figma.connect(
+  NavBar,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=1426-4697',
+  {
+    imports: [
+      "import { NavBar, NavBarBackButton, NavBarContent, NavBarTitle } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      density: figma.enum('density', {
+        compact: 'compact',
+        expanded: 'expanded',
+      }),
+      backButton: figma.boolean('show-back', {
+        true: <NavBarBackButton onPress={() => {}} />,
+        false: undefined,
+      }),
+      title: figma.boolean('show-title', {
+        true: <NavBarTitle>Title</NavBarTitle>,
+        false: undefined,
+      }),
+      description: figma.boolean('show-description', {
+        true: figma.boolean('show-network', {
+          true: (
+            <TileDescription>
+              Description{' '}
+              <CryptoIcon ledgerId='ethereum' ticker='ETH' size={20} />
+            </TileDescription>
+          ),
+          false: <TileDescription>Description</TileDescription>,
+        }),
+        false: undefined,
+      }),
+      coinCapsule: figma.enum('content', {
+        asset: (
+          <NavBarCoinCapsule
+            ticker='Bitcoin'
+            leadingContent={
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />
+            }
+          />
+        ),
+      }),
+      trailing: figma.boolean('show-trailing-icon', {
+        true: (
+          <NavBarTrailing>
+            <IconButton icon={Settings} accessibilityLabel='Settings' />
+          </NavBarTrailing>
+        ),
+        false: undefined,
+      }),
+      secondaryTrailing: figma.boolean('show-second-trailing-icon', {
+        true: (
+          <NavBarTrailing>
+            <IconButton icon={Settings} accessibilityLabel='Settings' />
+          </NavBarTrailing>
+        ),
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <NavBar density={props.density}>
+        {props.backButton}
+        <NavBarContent>
+          {props.title}
+          {props.description}
+        </NavBarContent>
+        {props.coinCapsule}
+        {props.trailing}
+        {props.secondaryTrailing}
+      </NavBar>
+    ),
+  },
+);

package/src/lib/Components/NavBar/NavBar.mdx

@@ -3,7 +3,6 @@ import { Box } from '../Utility';
 import * as NavBarStories from './NavBar.stories';
 import { NavBar, NavBarBackButton, NavBarContent } from './NavBar';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/NavBar' of={NavBarStories} />
 
@@ -253,7 +252,6 @@ export default function DetailsScreen() {
 }
 ```
 
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/OptionList/OptionList.mdx

@@ -3,9 +3,6 @@ import * as OptionListStories from './OptionList.stories';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
 
 <Meta title='Core/OptionList' of={OptionListStories} />
@@ -276,93 +273,6 @@ const items = [
 />
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-
-<DoVsDontRow>
-<DoBlockItem
-title='Pass items as a flat array'
-description='Use the group field for grouping — the component handles labels and separators automatically.'
->
-
-{/* prettier-ignore */}
-```tsx
-<OptionList
-  items={[
-    { value: 'a', label: 'A', group: 'Group 1' },
-    { value: 'b', label: 'B', group: 'Group 2' },
-  ]}
-  value={value}
-  onValueChange={setValue}
->
-  <OptionListContent renderItem={...} />
-</OptionList>
-```
-
-</DoBlockItem>
-<DontBlockItem
-title="Don't manually render group labels or separators"
-description='OptionListContent handles group rendering internally based on item data.'
->
-
-{/* prettier-ignore */}
-```tsx
-<OptionList
-  items={items}
-  value={value}
-  onValueChange={setValue}
->
-  <Text>Group 1</Text>
-  <OptionListContent renderItem={...} />
-  <Divider />
-  <Text>Group 2</Text>
-  <OptionListContent renderItem={...} />
-</OptionList>
-```
-
-</DontBlockItem>
-</DoVsDontRow>
-
-<DoVsDontRow>
-<DoBlockItem
-title='Compose OptionList inside your own container'
-description='OptionList is display-only — wrap it in a BottomSheet, screen, or any layout.'
->
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet ref={ref}>
-  <BottomSheetView>
-    <OptionList items={items} value={value} onValueChange={setValue}>
-      <OptionListContent renderItem={...} />
-    </OptionList>
-  </BottomSheetView>
-</BottomSheet>
-```
-
-</DoBlockItem>
-<DontBlockItem
-title="Don't expect OptionList to manage the BottomSheet"
-description='Use OptionListTrigger to open the sheet yourself — OptionList only handles selection state, not the container.'
->
-
-{/* prettier-ignore */}
-```tsx
-<OptionList
-  items={items}
-  value={value}
-  onValueChange={setValue}
-  trigger={<Button>Open</Button>}
->
-  <OptionListContent renderItem={...} />
-</OptionList>
-```
-
-</DontBlockItem>
-</DoVsDontRow>
-
-</div>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { PageIndicator } from './PageIndicator';
+
+figma.connect(
+  PageIndicator,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11768-12849',
+  {
+    imports: ["import { PageIndicator } from '@ledgerhq/lumen-ui-rnative'"],
+    example: () => <PageIndicator currentPage={2} totalPages={5} />,
+  },
+);

package/src/lib/Components/PageIndicator/PageIndicator.mdx

@@ -2,7 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as PageIndicatorStories from './PageIndicator.stories';
 import { PageIndicator } from './PageIndicator';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/PageIndicator' of={PageIndicatorStories} />
 
@@ -118,7 +117,6 @@ function MyComponent() {
 }
 ```
 
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+import { SearchInput } from './SearchInput';
+
+figma.connect(
+  SearchInput,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2248%3A3468',
+  {
+    imports: ["import { SearchInput } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      appearance: figma.enum('appearance', {
+        plain: 'plain',
+        transparent: 'transparent',
+      }),
+      placeholder: figma.enum('search-state', {
+        placeholder: figma.string('placeholder'),
+      }),
+      value: figma.enum('search-state', {
+        typing: figma.string('value'),
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: (props) => (
+      <SearchInput
+        appearance={props.appearance}
+        placeholder={props.placeholder}
+        value={props.value}
+        disabled={props.disabled}
+        onChangeText={() => {}}
+      />
+    ),
+  },
+);

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

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as SearchInputStories from './SearchInput.stories';
 import { SearchInput } from './SearchInput';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/SearchInput' of={SearchInputStories} />
 
@@ -326,203 +324,6 @@ function MyComponent() {
 }
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the SearchInput component and maintain design system principles.
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use placeholder text'
-      description='SearchInput uses placeholder text instead of labels for optimal search UX'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  placeholder='Search by name or email'
-  value={query}
-  onChangeText={setQuery}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use label prop"
-      description='SearchInput component does not support labels as they are not suitable for search UX patterns'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  label='Search' // Not supported, will cause error
-  placeholder='Search by name or email'
-  value={query}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the built-in search icon'
-      description='The search icon is automatically included and cannot be changed'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  placeholder='Search products'
-  value={query}
-  onChangeText={handleChange}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't override the search icon"
-      description='The prefix prop is not available on SearchInput component'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  prefix={<CustomIcon />} // Not supported, will cause error
-  placeholder='Search products'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use onClear for custom logic only'
-      description='Let the component handle clearing automatically, add onClear only for additional logic'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  placeholder='Search'
-  value={query}
-  onChangeText={setQuery}
-  onClear={() => {
-    // Default clearing happens automatically
-    analytics.track('search_cleared');
-  }}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't manually clear in onClear"
-      description='Value clearing happens automatically - no need to call setQuery'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  placeholder='Search'
-  value={query}
-  onChangeText={setQuery}
-  onClear={() => setQuery('')}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Debounce expensive search operations'
-      description='Use debouncing for API calls or expensive filtering to improve performance'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const debouncedSearch = useCallback(
-  debounce((text: string) => performSearch(text), 500),
-  []
-);
-
-<SearchInput
-  placeholder='Search'
-  value={query}
-  onChangeText={(text) => {
-    setQuery(text);
-    debouncedSearch(text);
-  }}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't perform expensive operations on every keystroke"
-      description='Avoid running expensive operations on every input change without debouncing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const debouncedSearch = useCallback(
-  debounce((text: string) => performSearch(text), 500),
-  []
-);
-
-<SearchInput
-  placeholder='Search'
-  value={query}
-  onChangeText={(text) => {
-    setQuery(text);
-    performExpensiveAPICall(text); // Should be debounced
-  }}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide descriptive placeholder text'
-      description='Use clear, specific placeholder text that describes what users can search for'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  placeholder='Search by name or email'
-  value={query}
-  onChangeText={setQuery}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use vague placeholder text"
-      description='Avoid generic or unclear placeholder text that does not help users'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<SearchInput
-  placeholder='Type here'
-  value={query}
-  onChangeText={setQuery}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

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

@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
+
+figma.connect(
+  SegmentedControl,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=1170-2345',
+  {
+    imports: [
+      "import { SegmentedControl, SegmentedControlButton } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      appearance: figma.enum('appearance', {
+        background: 'background',
+        'no-background': 'no-background',
+      }),
+      tabLayout: figma.enum('tab-width', {
+        fixed: 'fixed',
+        hug: 'fit',
+      }),
+    },
+    example: (props) => (
+      <SegmentedControl
+        selectedValue='tab1'
+        onSelectedChange={() => {}}
+        appearance={props.appearance}
+        tabLayout={props.tabLayout}
+      >
+        <SegmentedControlButton value='tab1'>Tab 1</SegmentedControlButton>
+        <SegmentedControlButton value='tab2'>Tab 2</SegmentedControlButton>
+        <SegmentedControlButton value='tab3'>Tab 3</SegmentedControlButton>
+      </SegmentedControl>
+    ),
+  },
+);