@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Components/AmountDisplay/AmountDisplay.mdx

@@ -0,0 +1,284 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as AmountDisplayStories from './AmountDisplay.stories';
+import { AmountDisplay } from './AmountDisplay';
+import {
+  CustomTabs,
+  Tab,
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Communication/AmountDisplay' of={AmountDisplayStories} />
+
+# 🔢 AmountDisplay
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+The AmountDisplay component renders formatted monetary amounts with flexible currency positioning and decimal formatting. It uses a formatter function pattern that gives you full control over how amounts are displayed.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=85-227&p=f&m=dev).
+
+## Anatomy
+
+<Canvas of={AmountDisplayStories.Base} />
+
+- **Integer Part**: Large, bold text for the main amount
+- **Decimal Part**: Smaller, muted text for fractional values
+- **Currency Symbol**: Positioned before or after based on formatter
+- **Decimal Separator**: Configurable (either `.` or `,`)
+
+## Properties
+
+### Overview
+
+<Canvas of={AmountDisplayStories.Base} />
+<Controls of={AmountDisplayStories.Base} />
+
+### Privacy
+
+The `hidden` prop allows you to toggle amount visibility for privacy-sensitive applications. When set to `true`, the component displays bullet points (••••) instead of the actual amount, while keeping the currency symbol visible. The example below demonstrates toggling amount visibility with a button.
+
+<Canvas of={AmountDisplayStories.WithHideButton} />
+
+### Animation
+
+The `animate` prop controls whether the odometer-style animation plays when the value changes. When set to `true` (the default), digits smoothly transition between values. Set to `false` to display values instantly without animation.
+
+<Canvas of={AmountDisplayStories.AnimationShowcase} />
+
+### Loading State
+
+The `loading` prop displays a pulse animation to indicate that the amount is being fetched or updated. When set to `true`, the component applies a subtle pulsing effect while maintaining the displayed value.
+
+<Canvas of={AmountDisplayStories.Loading} />
+
+## Accessibility
+
+- Uses semantic components for proper screen reader support
+- Maintains readable text contrast ratios
+- Works with text zoom up to 200%
+
+</Tab>
+<Tab label="Implementation">
+
+## Installation
+
+```bash
+npm install @ledgerhq/lumen-ui-rnative
+```
+
+> **Note**: `@ledgerhq/lumen-design-core` and other peer dependencies (`react`, `react-native`, etc.) are required. See our Setup Guide for complete installation.
+
+## Basic Usage
+
+```tsx
+import { AmountDisplay } from '@ledgerhq/lumen-ui-rnative';
+import type { FormattedValue } from '@ledgerhq/lumen-ui-rnative';
+
+// Create a formatter function
+const usdFormatter = (value: number): FormattedValue => {
+  const [integerPart, decimalPart] = value.toFixed(2).split('.');
+  
+  return {
+    integerPart,
+    decimalPart,
+    currencyText: '$',
+    decimalSeparator: '.',
+    currencyPosition: 'start',
+  };
+};
+
+function MyComponent() {
+  return <AmountDisplay value={1234.56} formatter={usdFormatter} />;
+}
+
+// With privacy/hidden state
+function PrivateComponent() {
+  const [hidden, setHidden] = useState(false);
+  
+  return (
+    <AmountDisplay
+      value={1234.56}
+      formatter={usdFormatter}
+      hidden={hidden}
+    />
+  );
+}
+```
+
+## Custom Formatters
+
+### EUR with Comma Separator
+
+```tsx
+const eurFormatter = (value: number): FormattedValue => {
+  const [integerPart, decimalPart] = value.toFixed(2).split('.');
+  
+  return {
+    integerPart,
+    decimalPart,
+    currencyText: '€',
+    decimalSeparator: ',',
+    currencyPosition: 'end',
+  };
+};
+
+<AmountDisplay value={999.99} formatter={eurFormatter} />
+// Displays: 999,99 €
+```
+
+### Cryptocurrency with Variable Precision
+
+```tsx
+const btcFormatter = (value: number): FormattedValue => {
+  const [integerPart, decimalPart] = value.toFixed(8).split('.');
+  
+  return {
+    integerPart,
+    decimalPart,
+    currencyText: 'BTC',
+    decimalSeparator: '.',
+    currencyPosition: 'end',
+  };
+};
+
+<AmountDisplay value={0.00123456} formatter={btcFormatter} />
+// Displays: 0.00123456 BTC
+```
+
+### Hidden Amount for Privacy
+
+```tsx
+import { AmountDisplay } from '@ledgerhq/lumen-ui-rnative';
+import { IconButton } from '@ledgerhq/lumen-ui-rnative';
+import { Eye, EyeCross } from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+import { View } from 'react-native';
+
+function PrivateAmount() {
+  const [hidden, setHidden] = useState(false);
+  
+  const usdFormatter = (value: number): FormattedValue => {
+    const [integerPart, decimalPart] = value.toFixed(2).split('.');
+    return {
+      integerPart,
+      decimalPart,
+      currencyText: '$',
+      decimalSeparator: '.',
+      currencyPosition: 'start',
+    };
+  };
+  
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+      <AmountDisplay
+        formatter={usdFormatter}
+        value={1234.56}
+        hidden={hidden}
+      />
+      <IconButton
+        appearance='transparent'
+        size='sm'
+        icon={hidden ? EyeCross : Eye}
+        accessibilityLabel={hidden ? 'Show amount' : 'Hide amount'}
+        onPress={() => setHidden(!hidden)}
+      />
+    </View>
+  );
+}
+```
+
+## 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/dist/module/lib/Components/AmountDisplay/AmountDisplay.stories.js

@@ -0,0 +1,151 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { Eye, EyeCross } from "../../Symbols/index.js";
+import { IconButton } from "../IconButton/index.js";
+import { AmountDisplay } from "./AmountDisplay.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const usdFormatter = value => {
+  const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
+  return {
+    integerPart,
+    decimalPart,
+    currencyText: '$',
+    decimalSeparator: '.',
+    currencyPosition: 'start'
+  };
+};
+const eurFormatter = value => {
+  const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
+  return {
+    integerPart,
+    decimalPart,
+    currencyText: '€',
+    decimalSeparator: ',',
+    currencyPosition: 'end'
+  };
+};
+const btcFormatter = value => {
+  const [integerPart, decimalPart] = value.toFixed(8).split(/\.|,/);
+  return {
+    integerPart,
+    decimalPart,
+    currencyText: 'BTC',
+    decimalSeparator: '.',
+    currencyPosition: 'end'
+  };
+};
+const meta = {
+  component: AmountDisplay,
+  title: 'Communication/AmountDisplay',
+  args: {
+    formatter: eurFormatter,
+    hidden: false,
+    animate: true
+  },
+  argTypes: {
+    formatter: {
+      options: ['EUR', 'USD', 'BTC'],
+      mapping: {
+        USD: usdFormatter,
+        EUR: eurFormatter,
+        BTC: btcFormatter
+      },
+      control: {
+        type: 'select'
+      },
+      description: 'Function that formats a number. Returns an object with:\n' + '- `integerPart`: string\n' + '- `decimalPart?`: string\n' + '- `currencyText`: string\n' + '- `decimalSeparator`: "." | ","\n' + '- `currencyPosition?`: "start" | "end"'
+    },
+    hidden: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    animate: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'light'
+    },
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    value: 1234.56
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<AmountDisplay value={1234.56} />`
+      }
+    }
+  }
+};
+export const WithHideButton = {
+  render: props => {
+    const [hidden, setHidden] = useState(false);
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12
+      },
+      children: [/*#__PURE__*/_jsx(AmountDisplay, {
+        formatter: props.formatter,
+        value: 1234.56,
+        hidden: hidden
+      }), /*#__PURE__*/_jsx(IconButton, {
+        appearance: "transparent",
+        size: "sm",
+        icon: hidden ? EyeCross : Eye,
+        accessibilityLabel: hidden ? 'Show amount' : 'Hide amount',
+        onPress: () => setHidden(v => !v)
+      })]
+    });
+  }
+};
+export const AnimationShowcase = {
+  args: {
+    value: 1234.56
+  },
+  render: props => {
+    const [currentValue, setCurrentValue] = useState(props.value);
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setCurrentValue(prev => {
+          const delta = prev * (Math.random() * 0.02 - 0.01);
+          return Math.round((prev + delta) * 100) / 100;
+        });
+      }, 2000);
+      return () => clearInterval(interval);
+    }, []);
+    return /*#__PURE__*/_jsx(AmountDisplay, {
+      ...props,
+      value: currentValue
+    });
+  }
+};
+export const Loading = {
+  render: props => {
+    return /*#__PURE__*/_jsx(AmountDisplay, {
+      formatter: props.formatter,
+      value: 1234.56,
+      loading: true
+    });
+  }
+};
+//# sourceMappingURL=AmountDisplay.stories.js.map

package/dist/module/lib/Components/AmountDisplay/AmountDisplay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","View","Eye","EyeCross","IconButton","AmountDisplay","jsx","_jsx","jsxs","_jsxs","usdFormatter","value","integerPart","decimalPart","toFixed","split","currencyText","decimalSeparator","currencyPosition","eurFormatter","btcFormatter","meta","component","title","args","formatter","hidden","animate","argTypes","options","mapping","USD","EUR","BTC","control","type","description","parameters","layout","backgrounds","default","docs","source","language","format","Base","code","WithHideButton","render","props","setHidden","style","flexDirection","alignItems","gap","children","appearance","size","icon","accessibilityLabel","onPress","v","AnimationShowcase","currentValue","setCurrentValue","interval","setInterval","prev","delta","Math","random","round","clearInterval","Loading","loading"],"sourceRoot":"../../../../../src","sources":["lib/Components/AmountDisplay/AmountDisplay.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/AmountDisplay/AmountDisplay.test.js

@@ -0,0 +1,230 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { AmountDisplay } from "./AmountDisplay.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+const hidden = {
+  includeHiddenElements: true
+};
+describe('AmountDisplay', () => {
+  const createFormatter = (overrides = {}) => () => ({
+    integerPart: '1234',
+    decimalPart: '56',
+    currencyText: 'USD',
+    currencyPosition: 'start',
+    decimalSeparator: '.',
+    ...overrides
+  });
+  const getDigitStripValues = () => {
+    return screen.root.findAll(node => typeof node.type !== 'function' && node.props.accessibilityValue?.text !== undefined).map(node => Number(node.props.accessibilityValue?.text));
+  };
+  it('renders with basic formatter', () => {
+    const formatter = createFormatter();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter,
+        hidden: false
+      })
+    }));
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+    expect(getDigitStripValues()).toEqual([1, 2, 3, 4, 5, 6]);
+  });
+  it('handles zero value', () => {
+    const formatter = createFormatter({
+      integerPart: '0',
+      decimalPart: '00'
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 0,
+        formatter: formatter
+      })
+    }));
+    expect(getDigitStripValues()).toEqual([0, 0, 0]);
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+  });
+  it('handles large numbers', () => {
+    const formatter = createFormatter({
+      integerPart: '1234567',
+      decimalPart: '89'
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234567.89,
+        formatter: formatter
+      })
+    }));
+    expect(getDigitStripValues()).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9]);
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+  });
+  it('renders currency at start position', () => {
+    const formatter = createFormatter({
+      currencyPosition: 'start'
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter
+      })
+    }));
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+  });
+  it('renders currency at end position', () => {
+    const formatter = createFormatter({
+      currencyPosition: 'end'
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter
+      })
+    }));
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+  });
+  it('renders without decimal part', () => {
+    const formatter = createFormatter({
+      decimalPart: undefined
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234,
+        formatter: formatter
+      })
+    }));
+    expect(screen.queryByText('.', hidden)).toBeNull();
+  });
+  it('uses comma as decimal separator', () => {
+    const formatter = createFormatter({
+      decimalSeparator: ','
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter
+      })
+    }));
+    expect(screen.getByText(',', hidden)).toBeTruthy();
+  });
+  it('uses default dot separator', () => {
+    const formatter = createFormatter();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter
+      })
+    }));
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+  });
+  it('forwards additional props', () => {
+    const formatter = createFormatter();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter,
+        testID: "amount-display"
+      })
+    }));
+    expect(screen.getByTestId('amount-display')).toBeTruthy();
+  });
+  it('displays bullet points when hidden is true', () => {
+    const formatter = createFormatter();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter,
+        hidden: true
+      })
+    }));
+    expect(screen.getByText('••••', hidden)).toBeTruthy();
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.queryByText('.', hidden)).toBeNull();
+  });
+  it('renders correctly when loading is true', () => {
+    const formatter = createFormatter();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter,
+        loading: true
+      })
+    }));
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+  });
+  it('renders correctly when loading is false', () => {
+    const formatter = createFormatter();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter,
+        loading: false
+      })
+    }));
+    expect(screen.getByText('USD', hidden)).toBeTruthy();
+    expect(screen.getByText('.', hidden)).toBeTruthy();
+  });
+  it('sets accessibilityLabel with currency at start', () => {
+    const formatter = createFormatter({
+      currencyPosition: 'start'
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter
+      })
+    }));
+    expect(screen.getByLabelText('USD 1234.56')).toBeTruthy();
+  });
+  it('sets accessibilityLabel with currency at end', () => {
+    const formatter = createFormatter({
+      currencyPosition: 'end'
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter
+      })
+    }));
+    expect(screen.getByLabelText('1234.56 USD')).toBeTruthy();
+  });
+  it('sets accessibilityLabel to "Amount hidden" when hidden', () => {
+    const formatter = createFormatter();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234.56,
+        formatter: formatter,
+        hidden: true
+      })
+    }));
+    expect(screen.getByLabelText('Amount hidden')).toBeTruthy();
+  });
+  it('renders group separators', () => {
+    const formatter = createFormatter({
+      integerPart: '1,234,567',
+      decimalPart: '89',
+      decimalSeparator: '.'
+    });
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        value: 1234567.89,
+        formatter: formatter
+      })
+    }));
+    expect(screen.getAllByText(',', hidden)).toHaveLength(2);
+  });
+});
+//# sourceMappingURL=AmountDisplay.test.js.map

package/dist/module/lib/Components/AmountDisplay/AmountDisplay.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","screen","React","ThemeProvider","AmountDisplay","jsx","_jsx","TestWrapper","children","themes","colorScheme","locale","hidden","includeHiddenElements","createFormatter","overrides","integerPart","decimalPart","currencyText","currencyPosition","decimalSeparator","getDigitStripValues","root","findAll","node","type","props","accessibilityValue","text","undefined","map","Number","formatter","value","getByText","toBeTruthy","toEqual","queryByText","toBeNull","testID","getByTestId","loading","getByLabelText","getAllByText","toHaveLength"],"sourceRoot":"../../../../../src","sources":["lib/Components/AmountDisplay/AmountDisplay.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/AmountDisplay/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { AmountDisplay } from "./AmountDisplay.js";
+//# sourceMappingURL=index.js.map