@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/i18n/locales/es.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "Importe oculto"
     },
     "avatar": {
-      "defaultAlt": "Avatar de usuario",
-      "notificationAriaLabel": "Tiene notificación",
-      "fallbackIconAriaLabel": "Ícono alternativo"
+      "defaultAriaLabel": "Avatar de usuario"
     },
     "baseInput": {
       "clearInputAriaLabel": "Borrar entrada"

package/src/i18n/locales/fr.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "Montant masqué"
     },
     "avatar": {
-      "defaultAlt": "Avatar de l'utilisateur",
-      "notificationAriaLabel": "A une notification",
-      "fallbackIconAriaLabel": "Icône par défaut"
+      "defaultAriaLabel": "Avatar de l'utilisateur"
     },
     "baseInput": {
       "clearInputAriaLabel": "Effacer la saisie"

package/src/i18n/locales/ja.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "金額非表示"
     },
     "avatar": {
-      "defaultAlt": "ユーザーアバター",
-      "notificationAriaLabel": "通知あり",
-      "fallbackIconAriaLabel": "フォールバックアイコン"
+      "defaultAriaLabel": "ユーザーアバター"
     },
     "baseInput": {
       "clearInputAriaLabel": "インプットを削除"

package/src/i18n/locales/ko.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "금액 숨김"
     },
     "avatar": {
-      "defaultAlt": "사용자 아바타",
-      "notificationAriaLabel": "알림 있음",
-      "fallbackIconAriaLabel": "대체 아이콘"
+      "defaultAriaLabel": "사용자 아바타"
     },
     "baseInput": {
       "clearInputAriaLabel": "입력 값 지우기"

package/src/i18n/locales/pt.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "Valor oculto"
     },
     "avatar": {
-      "defaultAlt": "Avatar do usuário",
-      "notificationAriaLabel": "Tem notificação",
-      "fallbackIconAriaLabel": "Ícone fallback"
+      "defaultAriaLabel": "Avatar do usuário"
     },
     "baseInput": {
       "clearInputAriaLabel": "Limpar input"

package/src/i18n/locales/ru.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "Сумма скрыта"
     },
     "avatar": {
-      "defaultAlt": "Аватар пользователя",
-      "notificationAriaLabel": "Есть уведомление",
-      "fallbackIconAriaLabel": "Стандартная иконка"
+      "defaultAriaLabel": "Аватар пользователя"
     },
     "baseInput": {
       "clearInputAriaLabel": "Очистить поле"

package/src/i18n/locales/th.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "ยอดเงินถูกซ่อน"
     },
     "avatar": {
-      "defaultAlt": "อวาตาร์ผู้ใช้",
-      "notificationAriaLabel": "มีการแจ้งเตือน",
-      "fallbackIconAriaLabel": "ไอคอนสำรอง"
+      "defaultAriaLabel": "อวาตาร์ผู้ใช้"
     },
     "baseInput": {
       "clearInputAriaLabel": "ล้างอินพุต"

package/src/i18n/locales/tr.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "Tutar gizlendi"
     },
     "avatar": {
-      "defaultAlt": "Kullanıcı avatarı",
-      "notificationAriaLabel": "Bildirim var",
-      "fallbackIconAriaLabel": "Yedek simge"
+      "defaultAriaLabel": "Kullanıcı avatarı"
     },
     "baseInput": {
       "clearInputAriaLabel": "Girdiyi temizle"

package/src/i18n/locales/zh.json

@@ -10,9 +10,7 @@
       "amountHiddenAriaLabel": "金额已隐藏"
     },
     "avatar": {
-      "defaultAlt": "用户头像",
-      "notificationAriaLabel": "有通知",
-      "fallbackIconAriaLabel": "备用图标"
+      "defaultAriaLabel": "用户头像"
     },
     "baseInput": {
       "clearInputAriaLabel": "清空输入框"

package/src/lib/Animations/Pulse/Pulse.mdx

@@ -5,7 +5,6 @@ import {
   CustomTabs,
   Tab,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Primitives/Pulse' of={PulseStories} />
 

package/src/lib/Animations/Pulse/Pulse.tsx

@@ -1,6 +1,7 @@
 import { useEffect, memo } from 'react';
 import Animated, {
   cancelAnimation,
+  ReduceMotion,
   useAnimatedStyle,
   useSharedValue,
   withRepeat,
@@ -29,7 +30,13 @@ export const Pulse = memo(
 
     useEffect(() => {
       if (animate) {
-        sv.value = withRepeat(withTiming(MIN_OPACITY, timingConfig), -1, true);
+        sv.value = withRepeat(
+          withTiming(MIN_OPACITY, timingConfig),
+          -1,
+          true,
+          undefined,
+          ReduceMotion.System,
+        );
       } else {
         cancelAnimation(sv);
         sv.value = withTiming(1, timingConfig);

package/src/lib/Animations/Spin/Spin.mdx

@@ -5,7 +5,6 @@ import {
   CustomTabs,
   Tab,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Primitives/Spin' of={SpinStories} />
 

package/src/lib/Animations/Spin/Spin.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect } from 'react';
 import Animated, {
   cancelAnimation,
+  ReduceMotion,
   useAnimatedStyle,
   useSharedValue,
   withRepeat,
@@ -23,7 +24,13 @@ export const Spin = memo(({ children, timing }: SpinProps) => {
   });
 
   useEffect(() => {
-    sv.value = withRepeat(withTiming(1, timingConfig), -1);
+    sv.value = withRepeat(
+      withTiming(1, timingConfig),
+      -1,
+      false,
+      undefined,
+      ReduceMotion.System,
+    );
 
     return () => cancelAnimation(sv);
   }, [sv, timingConfig]);

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

@@ -0,0 +1,39 @@
+import figma from '@figma/code-connect';
+import { AddressInput } from './AddressInput';
+
+figma.connect(
+  AddressInput,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=7887-67',
+  {
+    imports: ["import { AddressInput } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      placeholder: figma.enum('input-state', {
+        placeholder: figma.string('placeholder'),
+      }),
+      value: figma.enum('input-state', {
+        'input-address': figma.string('value'),
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      status: figma.enum('state', {
+        error: 'error',
+        success: 'success',
+      }),
+      helperText: figma.nestedProps('.status', {
+        label: figma.string('label'),
+      }),
+    },
+    example: (props) => (
+      <AddressInput
+        disabled={props.disabled}
+        value={props.value}
+        placeholder={props.placeholder}
+        onQrCodeClick={() => {}}
+        helperText={props.helperText.label}
+        status={props.status}
+        onChangeText={() => {}}
+      />
+    ),
+  },
+);

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