@ledgerhq/lumen-ui-rnative 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/dist/package.json +1 -1
  2. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
  3. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.js +5 -1
  4. package/jest.config.ts +0 -1
  5. package/package.json +1 -1
  6. package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +8 -1
  7. package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx +1 -1
  8. package/tsconfig.json +3 -16
  9. package/tsconfig.lib.json +5 -0
  10. package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts +0 -9
  11. package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts.map +0 -1
  12. package/dist/src/lib/Animations/Pulse/Pulse.stories.js +0 -38
  13. package/dist/src/lib/Animations/Spin/Spin.stories.d.ts +0 -9
  14. package/dist/src/lib/Animations/Spin/Spin.stories.d.ts.map +0 -1
  15. package/dist/src/lib/Animations/Spin/Spin.stories.js +0 -27
  16. package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts +0 -13
  17. package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts.map +0 -1
  18. package/dist/src/lib/Components/AddressInput/AddressInput.stories.js +0 -128
  19. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts +0 -10
  20. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts.map +0 -1
  21. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.js +0 -127
  22. package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts +0 -16
  23. package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts.map +0 -1
  24. package/dist/src/lib/Components/AmountInput/AmountInput.stories.js +0 -186
  25. package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts +0 -22
  26. package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts.map +0 -1
  27. package/dist/src/lib/Components/Avatar/Avatar.stories.js +0 -72
  28. package/dist/src/lib/Components/Banner/Banner.stories.d.ts +0 -16
  29. package/dist/src/lib/Components/Banner/Banner.stories.d.ts.map +0 -1
  30. package/dist/src/lib/Components/Banner/Banner.stories.js +0 -268
  31. package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts +0 -87
  32. package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts.map +0 -1
  33. package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.js +0 -266
  34. package/dist/src/lib/Components/Button/Button.stories.d.ts +0 -16
  35. package/dist/src/lib/Components/Button/Button.stories.d.ts.map +0 -1
  36. package/dist/src/lib/Components/Button/Button.stories.js +0 -143
  37. package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts +0 -16
  38. package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts.map +0 -1
  39. package/dist/src/lib/Components/CardButton/CardButton.stories.js +0 -208
  40. package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts +0 -14
  41. package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts.map +0 -1
  42. package/dist/src/lib/Components/Checkbox/Checkbox.stories.js +0 -72
  43. package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts +0 -11
  44. package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts.map +0 -1
  45. package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.js +0 -91
  46. package/dist/src/lib/Components/Divider/Divider.stories.d.ts +0 -9
  47. package/dist/src/lib/Components/Divider/Divider.stories.d.ts.map +0 -1
  48. package/dist/src/lib/Components/Divider/Divider.stories.js +0 -51
  49. package/dist/src/lib/Components/Icon/Icon.stories.d.ts +0 -15
  50. package/dist/src/lib/Components/Icon/Icon.stories.d.ts.map +0 -1
  51. package/dist/src/lib/Components/Icon/Icon.stories.js +0 -137
  52. package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts +0 -10
  53. package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts.map +0 -1
  54. package/dist/src/lib/Components/IconButton/IconButton.stories.js +0 -74
  55. package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts +0 -11
  56. package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts.map +0 -1
  57. package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.js +0 -90
  58. package/dist/src/lib/Components/Link/Link.stories.d.ts +0 -17
  59. package/dist/src/lib/Components/Link/Link.stories.d.ts.map +0 -1
  60. package/dist/src/lib/Components/Link/Link.stories.js +0 -275
  61. package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts +0 -10
  62. package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts.map +0 -1
  63. package/dist/src/lib/Components/ListItem/ListItem.stories.js +0 -106
  64. package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts +0 -10
  65. package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts.map +0 -1
  66. package/dist/src/lib/Components/NavBar/NavBar.stories.js +0 -72
  67. package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts +0 -27
  68. package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts.map +0 -1
  69. package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.js +0 -42
  70. package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts +0 -12
  71. package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts.map +0 -1
  72. package/dist/src/lib/Components/SearchInput/SearchInput.stories.js +0 -98
  73. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts +0 -58
  74. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts.map +0 -1
  75. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.js +0 -61
  76. package/dist/src/lib/Components/Select/Select.stories.d.ts +0 -11
  77. package/dist/src/lib/Components/Select/Select.stories.d.ts.map +0 -1
  78. package/dist/src/lib/Components/Select/Select.stories.js +0 -83
  79. package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts +0 -11
  80. package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts.map +0 -1
  81. package/dist/src/lib/Components/Skeleton/Skeleton.stories.js +0 -49
  82. package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts +0 -9
  83. package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts.map +0 -1
  84. package/dist/src/lib/Components/Spinner/Spinner.stories.js +0 -50
  85. package/dist/src/lib/Components/Spot/Spot.stories.d.ts +0 -12
  86. package/dist/src/lib/Components/Spot/Spot.stories.d.ts.map +0 -1
  87. package/dist/src/lib/Components/Spot/Spot.stories.js +0 -156
  88. package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts +0 -9
  89. package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts.map +0 -1
  90. package/dist/src/lib/Components/Stepper/Stepper.stories.js +0 -35
  91. package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts +0 -10
  92. package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts.map +0 -1
  93. package/dist/src/lib/Components/Subheader/Subheader.stories.js +0 -34
  94. package/dist/src/lib/Components/Switch/Switch.stories.d.ts +0 -14
  95. package/dist/src/lib/Components/Switch/Switch.stories.d.ts.map +0 -1
  96. package/dist/src/lib/Components/Switch/Switch.stories.js +0 -65
  97. package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts +0 -50
  98. package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts.map +0 -1
  99. package/dist/src/lib/Components/TabBar/TabBar.stories.js +0 -60
  100. package/dist/src/lib/Components/Tag/Tag.stories.d.ts +0 -10
  101. package/dist/src/lib/Components/Tag/Tag.stories.d.ts.map +0 -1
  102. package/dist/src/lib/Components/Tag/Tag.stories.js +0 -45
  103. package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts +0 -14
  104. package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts.map +0 -1
  105. package/dist/src/lib/Components/TextInput/TextInput.stories.js +0 -128
  106. package/dist/src/lib/Components/Tile/Tile.stories.d.ts +0 -14
  107. package/dist/src/lib/Components/Tile/Tile.stories.d.ts.map +0 -1
  108. package/dist/src/lib/Components/Tile/Tile.stories.js +0 -117
  109. package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts +0 -12
  110. package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts.map +0 -1
  111. package/dist/src/lib/Components/TileButton/TileButton.stories.js +0 -63
  112. package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts +0 -10
  113. package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts.map +0 -1
  114. package/dist/src/lib/Components/Tooltip/Tooltip.stories.js +0 -50
  115. package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts +0 -7
  116. package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts.map +0 -1
  117. package/dist/src/lib/Components/Utility/Box/Box.stories.js +0 -42
  118. package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts +0 -11
  119. package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts.map +0 -1
  120. package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.js +0 -105
  121. package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts +0 -10
  122. package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts.map +0 -1
  123. package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js +0 -101
  124. package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts +0 -7
  125. package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts.map +0 -1
  126. package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.js +0 -47
  127. package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts +0 -7
  128. package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts.map +0 -1
  129. package/dist/src/lib/Components/Utility/Text/Text.stories.js +0 -33
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-rnative",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "license": "Apache-2.0",
5
5
  "keywords": [
6
6
  "react-native",
@@ -1 +1 @@
1
- {"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,kBAAkB,EAInB,MAAM,SAAS,CAAC;AA6IjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;+DAOvB,kBAAkB;;CA8DpB,CAAC"}
1
+ {"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAmJjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;+DAOvB,kBAAkB;;CA8DpB,CAAC"}
@@ -6,6 +6,7 @@ import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from
6
6
  import { useCommonTranslation } from '../../../i18n';
7
7
  import { useStyleSheet } from '../../../styles';
8
8
  import { Pulse } from '../../Animations/Pulse';
9
+ import { RuntimeConstants } from '../../utils';
9
10
  import { Box } from '../Utility';
10
11
  import { DIGITS, } from './types';
11
12
  const INTEGER_DIGIT_WIDTHS = {
@@ -91,7 +92,10 @@ const DigitStrip = memo(({ value, textStyle, animate, type }) => {
91
92
  const animatedStyle = useAnimatedStyle(() => ({
92
93
  transform: [{ translateY: translateY.value }],
93
94
  }), [translateY]);
94
- return (_jsx(Animated.View, { style: { height: lineHeight, overflow: 'hidden', width: width }, accessibilityValue: { text: String(value) }, children: _jsx(Animated.View, { style: [animatedStyle, { alignItems: 'center' }], children: DIGITS.map((d) => (_jsx(Text, { style: textStyle, children: d }, d))) }) }));
95
+ return (_jsx(Animated.View, { style: { height: lineHeight, overflow: 'hidden', width: width }, accessibilityValue: { text: String(value) }, children: _jsx(Animated.View, { style: [animatedStyle, { alignItems: 'center' }], children: DIGITS.map((d) => (_jsx(Text, { style: [
96
+ textStyle,
97
+ RuntimeConstants.isAndroid && { height: lineHeight },
98
+ ], children: d }, d))) }) }));
95
99
  });
96
100
  const DigitStripList = memo(({ items, textStyle, animate, type }) => {
97
101
  return items.map((item, index) => {
package/jest.config.ts CHANGED
@@ -13,7 +13,6 @@ export default {
13
13
  displayName: '@ledgerhq/lumen-ui-rnative',
14
14
  preset: 'react-native',
15
15
  setupFiles: ['<rootDir>/jest.setup.ts'],
16
- setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
17
16
  transformIgnorePatterns: [
18
17
  `node_modules/(?!(.pnpm|${transformIncludePatterns.join('|')})/)`,
19
18
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-rnative",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "license": "Apache-2.0",
5
5
  "keywords": [
6
6
  "react-native",
@@ -10,6 +10,7 @@ import Animated, {
10
10
  import { useCommonTranslation } from '../../../i18n';
11
11
  import { useStyleSheet } from '../../../styles';
12
12
  import { Pulse } from '../../Animations/Pulse';
13
+ import { RuntimeConstants } from '../../utils';
13
14
  import { Box } from '../Utility';
14
15
  import {
15
16
  AmountDisplayProps,
@@ -123,7 +124,13 @@ const DigitStrip = memo(
123
124
  >
124
125
  <Animated.View style={[animatedStyle, { alignItems: 'center' }]}>
125
126
  {DIGITS.map((d) => (
126
- <Text key={d} style={textStyle}>
127
+ <Text
128
+ key={d}
129
+ style={[
130
+ textStyle,
131
+ RuntimeConstants.isAndroid && { height: lineHeight },
132
+ ]}
133
+ >
127
134
  {d}
128
135
  </Text>
129
136
  ))}
@@ -1,5 +1,5 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { useTheme } from 'src/styles';
2
+ import { useTheme } from '../../../../../styles';
3
3
  import { Box } from '../../Box';
4
4
  import { Text } from '../../Text';
5
5
  import { LinearGradient } from './LinearGradient';
package/tsconfig.json CHANGED
@@ -6,20 +6,7 @@
6
6
  "files": [],
7
7
  "include": [],
8
8
  "references": [
9
- {
10
- "path": "../design-core"
11
- },
12
- {
13
- "path": "../utils-shared"
14
- },
15
- {
16
- "path": "./tsconfig.lib.json"
17
- },
18
- {
19
- "path": "./tsconfig.spec.json"
20
- },
21
- {
22
- "path": "./tsconfig.storybook.json"
23
- }
24
- ],
9
+ { "path": "./tsconfig.lib.json" },
10
+ { "path": "./tsconfig.spec.json" }
11
+ ]
25
12
  }
package/tsconfig.lib.json CHANGED
@@ -15,6 +15,11 @@
15
15
  "src/**/*.test.tsx",
16
16
  "src/**/*.test.js",
17
17
  "src/**/*.test.jsx",
18
+ "src/**/*.stories.ts",
19
+ "src/**/*.stories.tsx",
20
+ "src/**/*.stories.js",
21
+ "src/**/*.stories.jsx",
22
+ "src/**/*.mdx",
18
23
  "eslint.config.js",
19
24
  "eslint.config.cjs",
20
25
  "eslint.config.mjs",
@@ -1,9 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { Pulse } from './Pulse';
3
- declare const meta: Meta<typeof Pulse>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Base: Story;
7
- export declare const DurationShowcase: Story;
8
- export declare const WithAmountDisplay: Story;
9
- //# sourceMappingURL=Pulse.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Pulse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Pulse/Pulse.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAchC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAMC,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC"}
@@ -1,38 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { View } from 'react-native';
3
- import { AmountDisplay } from '../../Components/AmountDisplay';
4
- import { Box, Text } from '../../Components/Utility';
5
- import { Pulse } from './Pulse';
6
- const usdFormatter = (value) => {
7
- const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
8
- return {
9
- integerPart,
10
- decimalPart,
11
- currencyText: '$',
12
- decimalSeparator: '.',
13
- currencyPosition: 'start',
14
- };
15
- };
16
- const meta = {
17
- title: 'Animations/Pulse',
18
- component: Pulse,
19
- parameters: {
20
- layout: 'centered',
21
- },
22
- };
23
- export default meta;
24
- export const Base = {
25
- args: {
26
- duration: 2000,
27
- animate: true,
28
- children: (_jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } })),
29
- },
30
- };
31
- export const DurationShowcase = {
32
- render: () => (_jsxs(View, { style: { flexDirection: 'row', gap: 24, alignItems: 'center' }, children: [_jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 1000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "1000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 2000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "2000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 3000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "3000ms" })] })] })),
33
- };
34
- export const WithAmountDisplay = {
35
- render: () => {
36
- return (_jsx(View, { style: { flexDirection: 'column', alignItems: 'center', gap: 16 }, children: _jsx(AmountDisplay, { formatter: usdFormatter, value: 1234.56, loading: true }) }));
37
- },
38
- };
@@ -1,9 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { Spin } from './Spin';
3
- declare const meta: Meta<typeof Spin>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Base: Story;
7
- export declare const DurationShowcase: Story;
8
- export declare const WithSpinner: Story;
9
- //# sourceMappingURL=Spin.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Spin.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Spin/Spin.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAMC,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}
@@ -1,27 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { View } from 'react-native';
3
- import { Spinner } from '../../Components/Spinner';
4
- import { Box, Text } from '../../Components/Utility';
5
- import { Spin } from './Spin';
6
- const meta = {
7
- title: 'Animations/Spin',
8
- component: Spin,
9
- parameters: {
10
- layout: 'centered',
11
- },
12
- };
13
- export default meta;
14
- export const Base = {
15
- args: {
16
- duration: 1000,
17
- children: (_jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } })),
18
- },
19
- };
20
- export const DurationShowcase = {
21
- render: () => (_jsxs(View, { style: { flexDirection: 'row', gap: 24, alignItems: 'center' }, children: [_jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 500, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "500ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 1000, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "1000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 2000, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "2000ms" })] })] })),
22
- };
23
- export const WithSpinner = {
24
- render: () => {
25
- return (_jsx(View, { style: { flexDirection: 'column', alignItems: 'center', gap: 16 }, children: _jsx(Spinner, { size: 40 }) }));
26
- },
27
- };
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { AddressInput } from './AddressInput';
3
- declare const meta: Meta<typeof AddressInput>;
4
- export default meta;
5
- type Story = StoryObj<typeof AddressInput>;
6
- export declare const Base: Story;
7
- export declare const WithContent: Story;
8
- export declare const WithCustomPrefix: Story;
9
- export declare const WithoutQrCode: Story;
10
- export declare const WithError: Story;
11
- export declare const DisabledAddressInput: Story;
12
- export declare const WithHiddenClearButton: Story;
13
- //# sourceMappingURL=AddressInput.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AddressInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAkCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AA6B3C,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AA2BF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}
@@ -1,128 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { View } from 'react-native';
4
- import { AddressInput } from './AddressInput';
5
- const meta = {
6
- component: AddressInput,
7
- title: 'Input/AddressInput',
8
- parameters: {
9
- docs: {
10
- source: {
11
- language: 'tsx',
12
- format: true,
13
- type: 'code',
14
- },
15
- },
16
- },
17
- argTypes: {
18
- placeholder: {
19
- control: 'text',
20
- description: 'Placeholder text when input is empty',
21
- },
22
- prefix: {
23
- control: 'text',
24
- description: 'Custom prefix text (default: "To:")',
25
- },
26
- errorMessage: {
27
- control: 'text',
28
- description: 'Error message to display below input',
29
- },
30
- editable: {
31
- control: 'boolean',
32
- description: 'Whether the input is editable',
33
- },
34
- hideClearButton: {
35
- control: 'boolean',
36
- description: 'Hide the clear button',
37
- },
38
- },
39
- };
40
- export default meta;
41
- const AddressInputStory = (args) => {
42
- const [address, setAddress] = useState(args.value?.toString() ?? '');
43
- return (_jsx(View, { style: {
44
- flex: 1,
45
- minHeight: 96,
46
- alignItems: 'center',
47
- justifyContent: 'center',
48
- padding: 24,
49
- }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: args.onQrCodeClick ?? (() => alert('QR code scanner opened')) }) }) }));
50
- };
51
- export const Base = {
52
- render: (args) => _jsx(AddressInputStory, { ...args }),
53
- args: {
54
- placeholder: 'Enter address or ENS',
55
- prefix: 'To:',
56
- editable: true,
57
- hideClearButton: false,
58
- },
59
- };
60
- export const WithContent = {
61
- render: (args) => _jsx(AddressInputStory, { ...args }),
62
- args: {
63
- placeholder: 'Enter address or ENS',
64
- value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
65
- prefix: 'To:',
66
- editable: true,
67
- hideClearButton: false,
68
- },
69
- };
70
- export const WithCustomPrefix = {
71
- render: (args) => _jsx(AddressInputStory, { ...args }),
72
- args: {
73
- placeholder: 'Enter sender address',
74
- prefix: 'From:',
75
- editable: true,
76
- hideClearButton: false,
77
- },
78
- };
79
- const AddressInputWithoutQrStory = (args) => {
80
- const [address, setAddress] = useState(args.value?.toString() ?? '');
81
- return (_jsx(View, { style: {
82
- flex: 1,
83
- minHeight: 96,
84
- alignItems: 'center',
85
- justifyContent: 'center',
86
- padding: 24,
87
- }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: undefined }) }) }));
88
- };
89
- export const WithoutQrCode = {
90
- render: (args) => _jsx(AddressInputWithoutQrStory, { ...args }),
91
- args: {
92
- placeholder: 'Enter address or ENS',
93
- prefix: 'To:',
94
- editable: true,
95
- hideClearButton: false,
96
- },
97
- };
98
- export const WithError = {
99
- render: (args) => _jsx(AddressInputStory, { ...args }),
100
- args: {
101
- placeholder: 'Enter address or ENS',
102
- value: 'invalid-address',
103
- errorMessage: 'Invalid address format',
104
- prefix: 'To:',
105
- editable: true,
106
- hideClearButton: false,
107
- },
108
- };
109
- export const DisabledAddressInput = {
110
- render: (args) => _jsx(AddressInputStory, { ...args }),
111
- args: {
112
- placeholder: 'Enter address or ENS',
113
- value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
114
- prefix: 'To:',
115
- editable: false,
116
- hideClearButton: false,
117
- },
118
- };
119
- export const WithHiddenClearButton = {
120
- render: (args) => _jsx(AddressInputStory, { ...args }),
121
- args: {
122
- placeholder: 'Enter address or ENS',
123
- value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
124
- prefix: 'To:',
125
- editable: true,
126
- hideClearButton: true,
127
- },
128
- };
@@ -1,10 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { AmountDisplay } from './AmountDisplay';
3
- declare const meta: Meta<typeof AmountDisplay>;
4
- export default meta;
5
- type Story = StoryObj<typeof AmountDisplay>;
6
- export declare const Base: Story;
7
- export declare const WithHideButton: Story;
8
- export declare const AnimationShowcase: Story;
9
- export declare const Loading: Story;
10
- //# sourceMappingURL=AmountDisplay.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AmountDisplay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAuChD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAiDpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}
@@ -1,127 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect, useState } from 'react';
3
- import { View } from 'react-native';
4
- import { Eye, EyeCross } from '../../Symbols';
5
- import { IconButton } from '../IconButton';
6
- import { AmountDisplay } from './AmountDisplay';
7
- const usdFormatter = (value) => {
8
- const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
9
- return {
10
- integerPart,
11
- decimalPart,
12
- currencyText: '$',
13
- decimalSeparator: '.',
14
- currencyPosition: 'start',
15
- };
16
- };
17
- const eurFormatter = (value) => {
18
- const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
19
- return {
20
- integerPart,
21
- decimalPart,
22
- currencyText: '€',
23
- decimalSeparator: ',',
24
- currencyPosition: 'end',
25
- };
26
- };
27
- const btcFormatter = (value) => {
28
- const [integerPart, decimalPart] = value.toFixed(8).split(/\.|,/);
29
- return {
30
- integerPart,
31
- decimalPart,
32
- currencyText: 'BTC',
33
- decimalSeparator: '.',
34
- currencyPosition: 'end',
35
- };
36
- };
37
- const meta = {
38
- component: AmountDisplay,
39
- title: 'Communication/AmountDisplay',
40
- args: {
41
- formatter: eurFormatter,
42
- hidden: false,
43
- animate: true,
44
- },
45
- argTypes: {
46
- formatter: {
47
- options: ['EUR', 'USD', 'BTC'],
48
- mapping: {
49
- USD: usdFormatter,
50
- EUR: eurFormatter,
51
- BTC: btcFormatter,
52
- },
53
- control: {
54
- type: 'select',
55
- },
56
- description: 'Function that formats a number. Returns an object with:\n' +
57
- '- `integerPart`: string\n' +
58
- '- `decimalPart?`: string\n' +
59
- '- `currencyText`: string\n' +
60
- '- `decimalSeparator`: "." | ","\n' +
61
- '- `currencyPosition?`: "start" | "end"',
62
- },
63
- hidden: {
64
- control: {
65
- type: 'boolean',
66
- },
67
- },
68
- animate: {
69
- control: {
70
- type: 'boolean',
71
- },
72
- },
73
- },
74
- parameters: {
75
- layout: 'centered',
76
- backgrounds: { default: 'light' },
77
- docs: {
78
- source: {
79
- language: 'tsx',
80
- format: true,
81
- type: 'code',
82
- },
83
- },
84
- },
85
- };
86
- export default meta;
87
- export const Base = {
88
- args: {
89
- value: 1234.56,
90
- },
91
- parameters: {
92
- docs: {
93
- source: {
94
- code: `<AmountDisplay value={1234.56} />`,
95
- },
96
- },
97
- },
98
- };
99
- export const WithHideButton = {
100
- render: (props) => {
101
- const [hidden, setHidden] = useState(false);
102
- return (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(AmountDisplay, { formatter: props.formatter, value: 1234.56, hidden: hidden }), _jsx(IconButton, { appearance: 'transparent', size: 'sm', icon: hidden ? EyeCross : Eye, accessibilityLabel: hidden ? 'Show amount' : 'Hide amount', onPress: () => setHidden((v) => !v) })] }));
103
- },
104
- };
105
- export const AnimationShowcase = {
106
- args: {
107
- value: 1234.56,
108
- },
109
- render: (props) => {
110
- const [currentValue, setCurrentValue] = useState(props.value);
111
- useEffect(() => {
112
- const interval = setInterval(() => {
113
- setCurrentValue((prev) => {
114
- const delta = prev * (Math.random() * 0.02 - 0.01);
115
- return Math.round((prev + delta) * 100) / 100;
116
- });
117
- }, 2000);
118
- return () => clearInterval(interval);
119
- }, []);
120
- return _jsx(AmountDisplay, { ...props, value: currentValue });
121
- },
122
- };
123
- export const Loading = {
124
- render: (props) => {
125
- return (_jsx(AmountDisplay, { formatter: props.formatter, value: 1234.56, loading: true }));
126
- },
127
- };
@@ -1,16 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { AmountInput } from './AmountInput';
3
- declare const meta: Meta<typeof AmountInput>;
4
- export default meta;
5
- type Story = StoryObj<typeof AmountInput>;
6
- export declare const Base: Story;
7
- export declare const WithValue: Story;
8
- export declare const CurrencyPositionLeft: Story;
9
- export declare const CurrencyPositionRight: Story;
10
- export declare const IntegerOnly: Story;
11
- export declare const WithThousandsSeparator: Story;
12
- export declare const WithoutThousandsSeparator: Story;
13
- export declare const ErrorState: Story;
14
- export declare const DisabledAmountInput: Story;
15
- export declare const CustomLengthLimits: Story;
16
- //# sourceMappingURL=AmountInput.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+ClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAsB1C,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAWpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAWvC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC"}