@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

package/src/lib/Components/AddressInput/AddressInput.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as AddressInputStories from './AddressInput.stories';
 import { AddressInput } from './AddressInput';
 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/AddressInput' of={AddressInputStories} />
 
@@ -453,187 +451,6 @@ function AddressForm() {
 }
 ```
 
-## Do's and Don'ts
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use controlled input pattern'
-      description='Use value and onChangeText props for controlled input state management'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [address, setAddress] = useState('');
-
-<AddressInput
-  placeholder='Enter address or ENS'
-  value={address}
-  onChangeText={setAddress}
-  onQrCodeClick={() => openQrScanner()}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix controlled and uncontrolled patterns"
-      description='Avoid using both value and defaultValue props together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [address, setAddress] = useState('');
-
-<AddressInput
-  placeholder='Enter address or ENS'
-  value={address}
-  defaultValue='initial'
-  onChangeText={setAddress}
-/>
-```
-
-    </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
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [address, setAddress] = useState('');
-const [error, setError] = useState('');
-
-<AddressInput
-  placeholder='Enter address or ENS'
-  value={address}
-  onChangeText={setAddress}
-  onClear={() => {
-    // Default clearing happens automatically
-    setError(''); // Clear error state
-  }}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't manually clear value in onClear"
-      description='Value clearing happens automatically - no need to call setAddress'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [address, setAddress] = useState('');
-const [error, setError] = useState('');
-
-<AddressInput
-  placeholder='Enter address or ENS'
-  value={address}
-  onChangeText={setAddress}
-  onClear={() => setAddress('')}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use short, descriptive prefixes'
-      description='Keep prefix text concise - typically 1-3 words'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AddressInput
-  prefix='To:'
-  placeholder='Enter recipient'
-  value={address}
-  onChangeText={setAddress}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use overly long prefixes"
-      description='Long prefixes take up too much space and reduce usability'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AddressInput
-  prefix="Please enter the recipient's wallet address:"
-  placeholder='Enter recipient'
-  value={address}
-  onChangeText={setAddress}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always provide onQrCodeClick for QR scanning'
-      description='Enable QR code scanning to improve user experience'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AddressInput
-  placeholder='Enter address or ENS'
-  value={address}
-  onChangeText={setAddress}
-  onQrCodeClick={() => openQrScanner()}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit QR scanning capability"
-      description='Users should not have to manually type long addresses'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AddressInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AddressInput
-  placeholder='Enter address or ENS'
-  value={address}
-  onChangeText={setAddress}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

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

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { AmountDisplay } from './AmountDisplay';
+
+figma.connect(
+  AmountDisplay,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11065-2691',
+  {
+    imports: [
+      "import { AmountDisplay } from '@ledgerhq/lumen-ui-rnative'",
+      "import type { FormattedValue } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      hidden: figma.boolean('hide-amount', {
+        true: true,
+        false: false,
+      }),
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+    },
+    example: (props) => (
+      <AmountDisplay
+        value={2258.93}
+        hidden={props.hidden}
+        size={props.size}
+        formatter={() => ({
+          integerPart: '2568',
+          decimalPart: '93',
+          currencyText: '$',
+          decimalSeparator: '.',
+          currencyPosition: 'start',
+        })}
+      />
+    ),
+  },
+);

package/src/lib/Components/AmountDisplay/AmountDisplay.mdx

@@ -4,11 +4,7 @@ import { AmountDisplay } from './AmountDisplay';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/AmountDisplay' of={AmountDisplayStories} />
 
@@ -199,92 +195,6 @@ function PrivateAmount() {
 }
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use formatter for all display logic'
-      description='Keep all formatting logic in the formatter function'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const formatter = (value: number): FormattedValue => {
-  const [integerPart, decimalPart] = value.toFixed(2).split('.');
-  return {
-    integerPart,
-    decimalPart,
-    currencyText: '$',
-    decimalSeparator: '.',
-    currencyPosition: 'start',
-  };
-};
-
-<AmountDisplay value={1234.56} formatter={formatter} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't format the value outside the component"
-      description='Pass the raw number value, not a pre-formatted string'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const formattedValue = `$${value.toFixed(2)}`;
-
-<AmountDisplay
-  value={formattedValue}
-  formatter={(v) => ({ integerPart: v, currencyText: '' })}
-/>
-```
-
-    </DontBlockItem>
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the hidden prop for privacy'
-      description='Use the built-in hidden prop to toggle amount visibility'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [hidden, setHidden] = useState(false);
-
-<AmountDisplay
-  value={1234.56}
-  formatter={usdFormatter}
-  hidden={hidden}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't create separate formatters for hiding"
-      description='Avoid creating custom formatters just to show bullet points'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const hiddenFormatter = () => ({
-  integerPart: '••••',
-  currencyText: '$',
-  currencyPosition: 'start',
-});
-
-<AmountDisplay
-  value={1234.56}
-  formatter={hidden ? hiddenFormatter : usdFormatter}
-/>
-```
-
-    </DontBlockItem>
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,78 @@
+import figma from '@figma/code-connect';
+import { AmountInput } from './AmountInput';
+
+figma.connect(
+  AmountInput,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=17523-37413',
+  {
+    imports: ["import { AmountInput } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      value: figma.string('amount'),
+      currencyText: figma.enum('currency', {
+        $: '$',
+        '€': '€',
+        '£': '£',
+      }),
+      currencyPosition: figma.enum('currency', {
+        $: 'left',
+        '£': 'left',
+        '€': 'right',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      isInvalid: figma.enum('state', {
+        error: true,
+      }),
+    },
+    example: (props) => (
+      <AmountInput
+        size={props.size}
+        disabled={props.disabled}
+        isInvalid={props.isInvalid}
+        value={props.value}
+        onChangeText={() => {}}
+        currencyText={props.currencyText}
+        currencyPosition={props.currencyPosition}
+      />
+    ),
+  },
+);
+
+figma.connect(
+  AmountInput,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=17523-37413',
+  {
+    imports: ["import { AmountInput } from '@ledgerhq/lumen-ui-rnative'"],
+    variant: { currency: 'crypto' },
+    props: {
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      value: figma.string('amount'),
+      currencyText: figma.string('crypto'),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      isInvalid: figma.enum('state', {
+        error: true,
+      }),
+    },
+    example: (props) => (
+      <AmountInput
+        size={props.size}
+        disabled={props.disabled}
+        isInvalid={props.isInvalid}
+        value={props.value}
+        onChangeText={() => {}}
+        currencyText={props.currencyText}
+        currencyPosition='right'
+      />
+    ),
+  },
+);

package/src/lib/Components/AmountInput/AmountInput.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as AmountInputStories from './AmountInput.stories';
 import { AmountInput } from './AmountInput';
 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/AmountInput' of={AmountInputStories} />
 
@@ -277,194 +275,6 @@ Use the `editable` prop to disable the input:
 <AmountInput value='1000' currencyText='USD' editable={false} />
 ```
 
-## Do's and Don'ts
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use integer-only for whole number scenarios'
-      description='Disable decimals for quantities, counts, or other whole number inputs'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [quantity, setQuantity] = useState('');
-
-// Use integer-only for whole number scenarios (quantity, age, etc.)
-<AmountInput
-  value={quantity}
-  onChangeText={setQuantity}
-  currencyText='items'
-  allowDecimals={false}
-  maxIntegerLength={4}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't allow decimals for count-based inputs"
-      description='Items, quantities, and counts should always be whole numbers'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [quantity, setQuantity] = useState('');
-
-<AmountInput
-  value={quantity}
-  onChangeText={setQuantity}
-  currencyText='items'
-  allowDecimals={true}
-  maxIntegerLength={4}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always use controlled input pattern'
-      description='AmountInput requires both value and onChangeText props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use uncontrolled pattern"
-      description='AmountInput does not support defaultValue - always use controlled pattern'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<AmountInput
-  defaultValue='0.00'
-  currencyText='USD'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use isInvalid for error states'
-      description='Use the isInvalid prop to indicate validation errors'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-const [hasError, setHasError] = useState(false);
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-  isInvalid={hasError}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use custom error props"
-      description='Use the isInvalid prop for error styling. AmountInput does not accept ad-hoc validation props.'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-const [hasError, setHasError] = useState(false);
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-  status={hasError ? 'error' : undefined}
-  helperText={hasError ? 'Invalid amount' : undefined}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use appropriate length limits'
-      description='Set maxIntegerLength and maxDecimalLength based on your use case'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AmountInput
-  value={amount}
-  onChangeText={setAmount}
-  currencyText='$'
-  maxIntegerLength={9}
-  maxDecimalLength={2}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use overly restrictive or excessive limits"
-      description='Length limits should match real-world requirements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AmountInput
-  value={amount}
-  onChangeText={setAmount}
-  currencyText='$'
-  maxIntegerLength={1}
-  maxDecimalLength={25}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

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

@@ -201,6 +201,20 @@ export const WithoutThousandsSeparator: Story = {
   },
 };
 
+export const DecimalSeparatorComma: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1234.5',
+    currencyText: '€',
+    currencyPosition: 'right',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    decimalSeparator: ',',
+    isInvalid: false,
+    editable: true,
+  },
+};
+
 export const ErrorState: Story = {
   render: (args) => <AmountInputStory {...args} />,
   args: {

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -42,6 +42,7 @@ export const AmountInput = ({
   maxDecimalLength = 9,
   allowDecimals = true,
   thousandsSeparator = true,
+  decimalSeparator = '.',
   value,
   onChangeText,
   isInvalid = false,
@@ -64,6 +65,7 @@ export const AmountInput = ({
       thousandsSeparator,
       maxIntegerLength,
       maxDecimalLength,
+      decimalSeparator,
     },
   });
 

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

@@ -69,6 +69,14 @@ export type AmountInputProps = Omit<
    * @default true
    */
   thousandsSeparator?: boolean;
+  /**
+   * Character used to display the decimal separator (e.g. `1 234,5` vs `1 234.5`).
+   * Typing always accepts both `,` and `.` regardless of this value, so it stays
+   * compatible with any locale keyboard. The value returned by `onChangeText`
+   * uses this separator.
+   * @default '.'
+   */
+  decimalSeparator?: '.' | ',';
   /**
    * Mark input as invalid (e.g. for error display)
    * @default false

package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.ts

@@ -7,6 +7,7 @@ const defaultFormatOptions = {
   thousandsSeparator: true,
   maxIntegerLength: 9,
   maxDecimalLength: 9,
+  decimalSeparator: '.' as const,
 };
 
 describe('useAmountInputFormatting', () => {
@@ -59,4 +60,23 @@ describe('useAmountInputFormatting', () => {
 
     expect(onChangeText).toHaveBeenCalledWith('1 000');
   });
+
+  it('displays and emits the configured decimal separator', () => {
+    const onChangeText = jest.fn();
+    const { result } = renderHook(() =>
+      useAmountInputFormatting({
+        value: '1234.5',
+        onChangeText,
+        formatOptions: { ...defaultFormatOptions, decimalSeparator: ',' },
+      }),
+    );
+
+    expect(result.current.formattedValue).toBe('1 234,5');
+
+    act(() => {
+      result.current.handleChangeText('12,5');
+    });
+
+    expect(onChangeText).toHaveBeenCalledWith('12,5');
+  });
 });