@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45
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.
- package/.storybook/Decorator.tsx +78 -13
- package/.storybook/docs/getting-started/ThemeProvider.mdx +1 -1
- package/.storybook/docs/style-system/lx.mdx +144 -0
- package/.storybook/docs/style-system/useCreate.mdx +95 -0
- package/.storybook/docs/style-system/useTheme.mdx +52 -0
- package/.storybook/preview-head.html +2 -2
- package/.storybook/{preview.ts → preview.tsx} +6 -1
- package/dist/package.json +2 -3
- package/dist/src/lib/Components/AddressInput/AddressInput.js +1 -1
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts +7 -1
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.js +98 -9
- package/dist/src/lib/Components/AmountInput/AmountInput.d.ts.map +1 -1
- package/dist/src/lib/Components/AmountInput/AmountInput.js +3 -3
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts +10 -1
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.js +162 -9
- package/dist/src/lib/Components/BaseInput/BaseInput.d.ts.map +1 -1
- package/dist/src/lib/Components/BaseInput/BaseInput.js +2 -19
- package/dist/src/lib/Components/BottomSheet/BottomSheet.js +1 -1
- package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.js +8 -8
- package/dist/src/lib/Components/Button/BaseButton.d.ts +3 -3
- package/dist/src/lib/Components/Button/BaseButton.d.ts.map +1 -1
- package/dist/src/lib/Components/Button/BaseButton.js +99 -119
- package/dist/src/lib/Components/Button/Button.d.ts +4 -26
- package/dist/src/lib/Components/Button/Button.d.ts.map +1 -1
- package/dist/src/lib/Components/Button/Button.js +2 -2
- package/dist/src/lib/Components/Button/Button.stories.d.ts +1 -1
- package/dist/src/lib/Components/Button/Button.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/Button/Button.stories.js +25 -48
- package/dist/src/lib/Components/Button/index.d.ts +1 -1
- package/dist/src/lib/Components/Button/index.d.ts.map +1 -1
- package/dist/src/lib/Components/Button/index.js +1 -1
- package/dist/src/lib/Components/Button/{BaseButton.types.d.ts → types.d.ts} +15 -10
- package/dist/src/lib/Components/Button/types.d.ts.map +1 -0
- package/dist/src/lib/Components/CardButton/CardButton.d.ts +4 -3
- package/dist/src/lib/Components/CardButton/CardButton.d.ts.map +1 -1
- package/dist/src/lib/Components/CardButton/CardButton.js +65 -71
- package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/CardButton/CardButton.stories.js +28 -15
- package/dist/src/lib/Components/CardButton/index.d.ts +1 -1
- package/dist/src/lib/Components/CardButton/index.d.ts.map +1 -1
- package/dist/src/lib/Components/CardButton/index.js +1 -1
- package/dist/src/lib/Components/CardButton/{CardButton.types.d.ts → types.d.ts} +5 -4
- package/dist/src/lib/Components/CardButton/types.d.ts.map +1 -0
- package/dist/src/lib/Components/Icon/Icon.d.ts +6 -3
- package/dist/src/lib/Components/Icon/Icon.d.ts.map +1 -1
- package/dist/src/lib/Components/Icon/Icon.js +24 -25
- package/dist/src/lib/Components/Icon/Icon.stories.d.ts +2 -2
- package/dist/src/lib/Components/Icon/Icon.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/Icon/Icon.stories.js +73 -19
- package/dist/src/lib/Components/Icon/createIcon.d.ts +1 -1
- package/dist/src/lib/Components/Icon/createIcon.d.ts.map +1 -1
- package/dist/src/lib/Components/Icon/createIcon.js +1 -2
- package/dist/src/lib/Components/Icon/index.d.ts +1 -1
- package/dist/src/lib/Components/Icon/index.d.ts.map +1 -1
- package/dist/src/lib/Components/Icon/index.js +1 -1
- package/dist/src/lib/Components/Icon/{Icon.types.d.ts → types.d.ts} +7 -4
- package/dist/src/lib/Components/Icon/types.d.ts.map +1 -0
- package/dist/src/lib/Components/IconButton/IconButton.d.ts +2 -19
- package/dist/src/lib/Components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/IconButton/IconButton.stories.js +9 -11
- package/dist/src/lib/Components/IconButton/index.d.ts +1 -0
- package/dist/src/lib/Components/IconButton/index.d.ts.map +1 -1
- package/dist/src/lib/Components/IconButton/index.js +1 -0
- package/dist/src/lib/Components/IconButton/types.d.ts +12 -0
- package/dist/src/lib/Components/IconButton/types.d.ts.map +1 -0
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts +2 -2
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts.map +1 -1
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.figma.js +1 -1
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.js +34 -34
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts +1 -1
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.js +22 -9
- package/dist/src/lib/Components/InteractiveIcon/types.d.ts +3 -7
- package/dist/src/lib/Components/InteractiveIcon/types.d.ts.map +1 -1
- package/dist/src/lib/Components/Link/Link.d.ts +7 -77
- package/dist/src/lib/Components/Link/Link.d.ts.map +1 -1
- package/dist/src/lib/Components/Link/Link.js +59 -75
- package/dist/src/lib/Components/Link/Link.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/Link/Link.stories.js +34 -11
- package/dist/src/lib/Components/Link/index.d.ts +1 -0
- package/dist/src/lib/Components/Link/index.d.ts.map +1 -1
- package/dist/src/lib/Components/Link/index.js +1 -0
- package/dist/src/lib/Components/Link/types.d.ts +43 -0
- package/dist/src/lib/Components/Link/types.d.ts.map +1 -0
- package/dist/src/lib/Components/Link/types.js +1 -0
- package/dist/src/lib/Components/Search/Search.stories.d.ts +6 -1
- package/dist/src/lib/Components/Search/Search.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/Search/Search.stories.js +71 -9
- package/dist/src/lib/Components/Select/Select.d.ts.map +1 -1
- package/dist/src/lib/Components/Select/Select.js +1 -17
- package/dist/src/lib/Components/Spinner/Spinner.d.ts +13 -16
- package/dist/src/lib/Components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/src/lib/Components/Spinner/Spinner.js +33 -5
- package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/Spinner/Spinner.stories.js +1 -1
- package/dist/src/lib/Components/Spinner/index.d.ts +1 -0
- package/dist/src/lib/Components/Spinner/index.d.ts.map +1 -1
- package/dist/src/lib/Components/Spinner/index.js +1 -0
- package/dist/src/lib/Components/Spinner/types.d.ts +15 -0
- package/dist/src/lib/Components/Spinner/types.d.ts.map +1 -0
- package/dist/src/lib/Components/Spinner/types.js +1 -0
- package/dist/src/lib/Components/Tag/Tag.d.ts +2 -1
- package/dist/src/lib/Components/Tag/Tag.d.ts.map +1 -1
- package/dist/src/lib/Components/Tag/Tag.js +15 -4
- package/dist/src/lib/Components/Tag/Tag.stories.js +1 -1
- package/dist/src/lib/Components/Tag/Tag.types.d.ts +7 -1
- package/dist/src/lib/Components/Tag/Tag.types.d.ts.map +1 -1
- package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts +8 -1
- package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts.map +1 -1
- package/dist/src/lib/Components/TextInput/TextInput.stories.js +104 -9
- package/dist/src/lib/Components/Tile/Tile.d.ts.map +1 -1
- package/dist/src/lib/Components/Tile/Tile.js +54 -8
- package/dist/src/lib/Components/Tile/types.d.ts +14 -1
- package/dist/src/lib/Components/Tile/types.d.ts.map +1 -1
- package/dist/src/lib/Components/Tooltip/Tooltip.stories.js +2 -2
- package/dist/src/lib/Components/Utility/Box/Box.d.ts +39 -0
- package/dist/src/lib/Components/Utility/Box/Box.d.ts.map +1 -0
- package/dist/src/lib/Components/{Box → Utility/Box}/Box.js +10 -11
- package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts.map +1 -0
- package/dist/src/lib/Components/{Box → Utility/Box}/Box.stories.js +13 -12
- package/dist/src/lib/Components/Utility/Box/index.d.ts +2 -0
- package/dist/src/lib/Components/Utility/Box/index.d.ts.map +1 -0
- package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts +34 -0
- package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts.map +1 -0
- package/dist/src/lib/Components/Utility/Pressable/Pressable.js +33 -0
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts +7 -0
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts.map +1 -0
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.js +47 -0
- package/dist/src/lib/Components/Utility/Pressable/index.d.ts +3 -0
- package/dist/src/lib/Components/Utility/Pressable/index.d.ts.map +1 -0
- package/dist/src/lib/Components/Utility/Pressable/index.js +1 -0
- package/dist/src/lib/Components/Utility/Pressable/types.d.ts +3 -0
- package/dist/src/lib/Components/Utility/Pressable/types.d.ts.map +1 -0
- package/dist/src/lib/Components/Utility/Pressable/types.js +1 -0
- package/dist/src/lib/Components/Utility/Text/Text.d.ts +40 -0
- package/dist/src/lib/Components/Utility/Text/Text.d.ts.map +1 -0
- package/dist/src/lib/Components/{Text → Utility/Text}/Text.js +13 -9
- package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts.map +1 -0
- package/dist/src/lib/Components/{Text → Utility/Text}/Text.stories.js +3 -3
- package/dist/src/lib/Components/Utility/Text/index.d.ts.map +1 -0
- package/dist/src/lib/Components/Utility/index.d.ts +4 -0
- package/dist/src/lib/Components/Utility/index.d.ts.map +1 -0
- package/dist/src/lib/Components/Utility/index.js +3 -0
- package/dist/src/lib/Components/index.d.ts +1 -3
- package/dist/src/lib/Components/index.d.ts.map +1 -1
- package/dist/src/lib/Components/index.js +1 -3
- package/dist/src/lib/utils/components/InjectStylesIntoChildren.d.ts +6 -5
- package/dist/src/lib/utils/components/InjectStylesIntoChildren.d.ts.map +1 -1
- package/dist/src/lib/utils/components/InjectStylesIntoChildren.js +6 -6
- package/dist/src/styles/LumenStyleSheet.d.ts +1 -1
- package/dist/src/styles/LumenStyleSheet.d.ts.map +1 -1
- package/dist/src/styles/Provider/createStylesheetTheme.d.ts +0 -1
- package/dist/src/styles/Provider/createStylesheetTheme.d.ts.map +1 -1
- package/dist/src/styles/Provider/createStylesheetTheme.js +0 -1
- package/dist/src/styles/create/useCreate.d.ts +2 -1
- package/dist/src/styles/create/useCreate.d.ts.map +1 -1
- package/dist/src/styles/create/useCreate.js +5 -5
- package/dist/src/styles/factories/areLxPropsEqual.d.ts +3 -0
- package/dist/src/styles/factories/areLxPropsEqual.d.ts.map +1 -0
- package/dist/src/styles/factories/areLxPropsEqual.js +15 -0
- package/dist/src/styles/factories/createStyledPressable.d.ts +26 -0
- package/dist/src/styles/factories/createStyledPressable.d.ts.map +1 -0
- package/dist/src/styles/factories/createStyledPressable.js +61 -0
- package/dist/src/styles/factories/createStyledText.d.ts +15 -26
- package/dist/src/styles/factories/createStyledText.d.ts.map +1 -1
- package/dist/src/styles/factories/createStyledText.js +13 -29
- package/dist/src/styles/factories/createStyledView.d.ts +7 -27
- package/dist/src/styles/factories/createStyledView.d.ts.map +1 -1
- package/dist/src/styles/factories/createStyledView.js +10 -30
- package/dist/src/styles/factories/index.d.ts +4 -0
- package/dist/src/styles/factories/index.d.ts.map +1 -0
- package/dist/src/styles/factories/index.js +3 -0
- package/dist/src/styles/index.d.ts +2 -3
- package/dist/src/styles/index.d.ts.map +1 -1
- package/dist/src/styles/index.js +2 -3
- package/dist/src/styles/resolveStyle/resolveConfig.d.ts +7 -7
- package/dist/src/styles/resolveStyle/resolveConfig.d.ts.map +1 -1
- package/dist/src/styles/resolveStyle/resolveConfig.js +9 -9
- package/dist/src/styles/resolveStyle/resolveStyle.d.ts +6 -20
- package/dist/src/styles/resolveStyle/resolveStyle.d.ts.map +1 -1
- package/dist/src/styles/resolveStyle/resolveStyle.js +4 -29
- package/dist/src/styles/types/create.types.d.ts +1 -1
- package/dist/src/styles/types/create.types.d.ts.map +1 -1
- package/dist/src/styles/types/styled.types.d.ts +72 -50
- package/dist/src/styles/types/styled.types.d.ts.map +1 -1
- package/dist/src/styles/types/utility.types.d.ts.map +1 -1
- package/dist/src/styles/utils/index.d.ts +2 -0
- package/dist/src/styles/utils/index.d.ts.map +1 -0
- package/dist/src/styles/utils/index.js +1 -0
- package/dist/src/styles/utils/mergeStyles.d.ts +16 -0
- package/dist/src/styles/utils/mergeStyles.d.ts.map +1 -0
- package/dist/src/styles/utils/mergeStyles.js +20 -0
- package/package.json +3 -4
- package/src/lib/Components/AddressInput/AddressInput.mdx +15 -4
- package/src/lib/Components/AddressInput/AddressInput.stories.tsx +133 -17
- package/src/lib/Components/AddressInput/AddressInput.tsx +1 -1
- package/src/lib/Components/AmountInput/AmountInput.mdx +20 -1
- package/src/lib/Components/AmountInput/AmountInput.stories.tsx +180 -17
- package/src/lib/Components/AmountInput/AmountInput.tsx +24 -15
- package/src/lib/Components/Banner/Banner.test.tsx +48 -15
- package/src/lib/Components/BaseInput/BaseInput.tsx +6 -35
- package/src/lib/Components/BottomSheet/BottomSheet.stories.tsx +8 -8
- package/src/lib/Components/BottomSheet/BottomSheet.tsx +1 -1
- package/src/lib/Components/Button/BaseButton.test.tsx +149 -0
- package/src/lib/Components/Button/BaseButton.tsx +193 -148
- package/src/lib/Components/Button/Button.mdx +34 -31
- package/src/lib/Components/Button/Button.stories.tsx +37 -58
- package/src/lib/Components/Button/Button.tsx +4 -11
- package/src/lib/Components/Button/index.ts +1 -1
- package/src/lib/Components/Button/{BaseButton.types.ts → types.ts} +14 -8
- package/src/lib/Components/CardButton/CardButton.mdx +15 -25
- package/src/lib/Components/CardButton/CardButton.stories.tsx +48 -22
- package/src/lib/Components/CardButton/CardButton.test.tsx +141 -0
- package/src/lib/Components/CardButton/CardButton.tsx +142 -108
- package/src/lib/Components/CardButton/index.ts +1 -1
- package/src/lib/Components/CardButton/{CardButton.types.ts → types.ts} +4 -3
- package/src/lib/Components/Checkbox/Checkbox.mdx +1 -1
- package/src/lib/Components/Checkbox/Checkbox.test.tsx +42 -17
- package/src/lib/Components/Icon/Icon.stories.tsx +143 -73
- package/src/lib/Components/Icon/Icon.test.tsx +84 -0
- package/src/lib/Components/Icon/Icon.tsx +32 -28
- package/src/lib/Components/Icon/createIcon.ts +2 -3
- package/src/lib/Components/Icon/index.ts +1 -1
- package/src/lib/Components/Icon/{Icon.types.ts → types.ts} +4 -3
- package/src/lib/Components/IconButton/IconButton.mdx +13 -10
- package/src/lib/Components/IconButton/IconButton.stories.tsx +12 -14
- package/src/lib/Components/IconButton/IconButton.test.tsx +141 -0
- package/src/lib/Components/IconButton/IconButton.tsx +3 -13
- package/src/lib/Components/IconButton/index.ts +1 -0
- package/src/lib/Components/IconButton/types.ts +12 -0
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.figma.tsx +1 -1
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.mdx +25 -27
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.tsx +82 -43
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.test.tsx +30 -19
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx +78 -45
- package/src/lib/Components/InteractiveIcon/types.ts +4 -7
- package/src/lib/Components/Link/Link.mdx +8 -18
- package/src/lib/Components/Link/Link.stories.tsx +56 -25
- package/src/lib/Components/Link/Link.test.tsx +141 -51
- package/src/lib/Components/Link/Link.tsx +128 -150
- package/src/lib/Components/Link/index.ts +1 -0
- package/src/lib/Components/Link/types.ts +44 -0
- package/src/lib/Components/Search/Search.mdx +14 -1
- package/src/lib/Components/Search/Search.stories.tsx +94 -15
- package/src/lib/Components/Select/Select.test.tsx +8 -4
- package/src/lib/Components/Select/Select.tsx +4 -31
- package/src/lib/Components/Spinner/Spinner.stories.tsx +1 -5
- package/src/lib/Components/Spinner/Spinner.tsx +60 -34
- package/src/lib/Components/Spinner/index.ts +1 -0
- package/src/lib/Components/Spinner/types.ts +15 -0
- package/src/lib/Components/Switch/Switch.mdx +1 -1
- package/src/lib/Components/Tag/Tag.stories.tsx +2 -2
- package/src/lib/Components/Tag/Tag.tsx +22 -6
- package/src/lib/Components/Tag/Tag.types.ts +7 -8
- package/src/lib/Components/TextInput/TextInput.mdx +24 -4
- package/src/lib/Components/TextInput/TextInput.stories.tsx +131 -15
- package/src/lib/Components/Tile/Tile.test.tsx +100 -63
- package/src/lib/Components/Tile/Tile.tsx +64 -13
- package/src/lib/Components/Tile/types.ts +14 -1
- package/src/lib/Components/Tooltip/Tooltip.stories.tsx +2 -2
- package/src/lib/Components/Tooltip/Tooltip.test.tsx +8 -4
- package/src/lib/Components/{Box → Utility/Box}/Box.mdx +15 -13
- package/src/lib/Components/{Box → Utility/Box}/Box.stories.tsx +13 -11
- package/src/lib/Components/{Box → Utility/Box}/Box.tsx +11 -12
- package/src/lib/Components/Utility/Box/index.ts +1 -0
- package/src/lib/Components/Utility/Pressable/Pressable.mdx +103 -0
- package/src/lib/Components/Utility/Pressable/Pressable.stories.tsx +51 -0
- package/src/lib/Components/Utility/Pressable/Pressable.test.tsx +221 -0
- package/src/lib/Components/Utility/Pressable/Pressable.tsx +34 -0
- package/src/lib/Components/Utility/Pressable/index.ts +2 -0
- package/src/lib/Components/Utility/Pressable/types.ts +3 -0
- package/src/lib/Components/{Text → Utility/Text}/Text.mdx +15 -7
- package/src/lib/Components/{Text → Utility/Text}/Text.stories.tsx +3 -3
- package/src/lib/Components/Utility/Text/Text.tsx +39 -0
- package/src/lib/Components/Utility/index.ts +3 -0
- package/src/lib/Components/index.ts +1 -3
- package/src/lib/utils/components/InjectStylesIntoChildren.tsx +23 -14
- package/src/styles/Provider/createStylesheetTheme.ts +0 -1
- package/src/styles/create/useCreate.ts +8 -4
- package/src/styles/factories/areLxPropsEqual.ts +32 -0
- package/src/styles/factories/createStyledPressable.test.tsx +253 -0
- package/src/styles/factories/createStyledPressable.tsx +97 -0
- package/src/styles/factories/createStyledText.test.tsx +28 -20
- package/src/styles/factories/createStyledText.tsx +29 -49
- package/src/styles/factories/createStyledView.test.tsx +22 -16
- package/src/styles/factories/createStyledView.tsx +19 -53
- package/src/styles/factories/index.ts +3 -0
- package/src/styles/index.ts +2 -3
- package/src/styles/resolveStyle/resolveConfig.ts +16 -15
- package/src/styles/resolveStyle/resolveStyle.test.ts +13 -141
- package/src/styles/resolveStyle/resolveStyle.ts +10 -60
- package/src/styles/types/create.types.ts +1 -1
- package/src/styles/types/styled.types.ts +73 -105
- package/src/styles/types/utility.types.ts +1 -0
- package/src/styles/utils/index.ts +1 -0
- package/src/styles/utils/mergeStyles.test.ts +45 -0
- package/src/styles/utils/mergeStyles.ts +25 -0
- package/.storybook/docs/getting-started/StyleSystem.mdx +0 -133
- package/dist/src/lib/Components/Box/Box.d.ts +0 -592
- package/dist/src/lib/Components/Box/Box.d.ts.map +0 -1
- package/dist/src/lib/Components/Box/Box.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Box/Box.types.d.ts +0 -3
- package/dist/src/lib/Components/Box/Box.types.d.ts.map +0 -1
- package/dist/src/lib/Components/Box/index.d.ts +0 -3
- package/dist/src/lib/Components/Box/index.d.ts.map +0 -1
- package/dist/src/lib/Components/Button/BaseButton.types.d.ts.map +0 -1
- package/dist/src/lib/Components/CardButton/CardButton.types.d.ts.map +0 -1
- package/dist/src/lib/Components/Icon/Icon.types.d.ts.map +0 -1
- package/dist/src/lib/Components/Text/Text.d.ts +0 -602
- package/dist/src/lib/Components/Text/Text.d.ts.map +0 -1
- package/dist/src/lib/Components/Text/Text.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Text/index.d.ts.map +0 -1
- package/dist/src/lib/Components/_ToRemove/ToRemove.d.ts +0 -9
- package/dist/src/lib/Components/_ToRemove/ToRemove.d.ts.map +0 -1
- package/dist/src/lib/Components/_ToRemove/ToRemove.js +0 -43
- package/dist/src/styles/utils/styleVarianceAuthority.d.ts +0 -30
- package/dist/src/styles/utils/styleVarianceAuthority.d.ts.map +0 -1
- package/dist/src/styles/utils/styleVarianceAuthority.js +0 -97
- package/src/lib/Components/Box/Box.types.ts +0 -3
- package/src/lib/Components/Box/index.ts +0 -2
- package/src/lib/Components/Text/Text.tsx +0 -35
- package/src/lib/Components/_ToRemove/ToRemove.tsx +0 -65
- package/src/styles/utils/styleVarianceAuthority.test.ts +0 -302
- package/src/styles/utils/styleVarianceAuthority.ts +0 -154
- /package/dist/src/lib/Components/{Box/Box.types.js → Button/types.js} +0 -0
- /package/dist/src/lib/Components/{Button/BaseButton.types.js → CardButton/types.js} +0 -0
- /package/dist/src/lib/Components/{CardButton/CardButton.types.js → Icon/types.js} +0 -0
- /package/dist/src/lib/Components/{Icon/Icon.types.js → IconButton/types.js} +0 -0
- /package/dist/src/lib/Components/{Box → Utility/Box}/Box.stories.d.ts +0 -0
- /package/dist/src/lib/Components/{Box → Utility/Box}/index.js +0 -0
- /package/dist/src/lib/Components/{Text → Utility/Text}/Text.stories.d.ts +0 -0
- /package/dist/src/lib/Components/{Text → Utility/Text}/index.d.ts +0 -0
- /package/dist/src/lib/Components/{Text → Utility/Text}/index.js +0 -0
- /package/src/lib/Components/{Text → Utility/Text}/index.ts +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ViewStyle,
|
|
1
|
+
import type { ViewStyle, TextStyle } from 'react-native';
|
|
2
2
|
import type { LumenStyleSheetTheme } from './theme.types';
|
|
3
3
|
/**
|
|
4
4
|
* Extract token keys from theme
|
|
@@ -12,7 +12,28 @@ type BorderColorToken = keyof LumenStyleSheetTheme['colors']['border'];
|
|
|
12
12
|
type BorderRadiusToken = keyof LumenStyleSheetTheme['borderRadius'];
|
|
13
13
|
type ShadowToken = keyof LumenStyleSheetTheme['shadows'];
|
|
14
14
|
type TypographyToken = keyof LumenStyleSheetTheme['typographies'];
|
|
15
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Main public types - combine token props with RN props
|
|
17
|
+
*/
|
|
18
|
+
export type LumenViewStyle = {
|
|
19
|
+
/**
|
|
20
|
+
* Flex layout
|
|
21
|
+
*/
|
|
22
|
+
flex?: ViewStyle['flex'];
|
|
23
|
+
flexDirection?: ViewStyle['flexDirection'];
|
|
24
|
+
flexWrap?: ViewStyle['flexWrap'];
|
|
25
|
+
justifyContent?: ViewStyle['justifyContent'];
|
|
26
|
+
alignItems?: ViewStyle['alignItems'];
|
|
27
|
+
alignSelf?: ViewStyle['alignSelf'];
|
|
28
|
+
alignContent?: ViewStyle['alignContent'];
|
|
29
|
+
flexGrow?: ViewStyle['flexGrow'];
|
|
30
|
+
flexShrink?: ViewStyle['flexShrink'];
|
|
31
|
+
flexBasis?: ViewStyle['flexBasis'];
|
|
32
|
+
position?: ViewStyle['position'];
|
|
33
|
+
zIndex?: ViewStyle['zIndex'];
|
|
34
|
+
overflow?: ViewStyle['overflow'];
|
|
35
|
+
display?: ViewStyle['display'];
|
|
36
|
+
aspectRatio?: ViewStyle['aspectRatio'];
|
|
16
37
|
/**
|
|
17
38
|
* Padding
|
|
18
39
|
*/
|
|
@@ -38,30 +59,37 @@ type SpacingProps = {
|
|
|
38
59
|
marginHorizontal?: SpacingToken;
|
|
39
60
|
marginVertical?: SpacingToken;
|
|
40
61
|
/**
|
|
41
|
-
*
|
|
62
|
+
* Position
|
|
63
|
+
*/
|
|
64
|
+
top?: SpacingToken;
|
|
65
|
+
bottom?: SpacingToken;
|
|
66
|
+
left?: SpacingToken;
|
|
67
|
+
right?: SpacingToken;
|
|
68
|
+
start?: SpacingToken;
|
|
69
|
+
end?: SpacingToken;
|
|
70
|
+
/**
|
|
71
|
+
* Gap
|
|
42
72
|
*/
|
|
43
73
|
gap?: SpacingToken;
|
|
44
74
|
rowGap?: SpacingToken;
|
|
45
75
|
columnGap?: SpacingToken;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
*/
|
|
50
|
-
type SizeProps = {
|
|
76
|
+
/**
|
|
77
|
+
* Size
|
|
78
|
+
*/
|
|
51
79
|
width?: SizeToken;
|
|
52
80
|
height?: SizeToken;
|
|
53
81
|
minWidth?: SizeToken;
|
|
54
82
|
minHeight?: SizeToken;
|
|
55
83
|
maxWidth?: SizeToken;
|
|
56
84
|
maxHeight?: SizeToken;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
*/
|
|
61
|
-
type BackgroundColorProps = {
|
|
85
|
+
/**
|
|
86
|
+
* Background color
|
|
87
|
+
*/
|
|
62
88
|
backgroundColor?: BackgroundColorToken;
|
|
63
|
-
|
|
64
|
-
|
|
89
|
+
/**
|
|
90
|
+
* Shadow
|
|
91
|
+
*/
|
|
92
|
+
boxShadow?: ShadowToken;
|
|
65
93
|
/**
|
|
66
94
|
* Border width
|
|
67
95
|
*/
|
|
@@ -90,46 +118,40 @@ type BorderProps = {
|
|
|
90
118
|
borderTopRightRadius?: BorderRadiusToken;
|
|
91
119
|
borderBottomLeftRadius?: BorderRadiusToken;
|
|
92
120
|
borderBottomRightRadius?: BorderRadiusToken;
|
|
121
|
+
/**
|
|
122
|
+
* Other styles
|
|
123
|
+
*/
|
|
124
|
+
opacity?: ViewStyle['opacity'];
|
|
125
|
+
borderStyle?: ViewStyle['borderStyle'];
|
|
126
|
+
transform?: ViewStyle['transform'];
|
|
93
127
|
};
|
|
94
|
-
|
|
95
|
-
* Shadow props - use shadow tokens
|
|
96
|
-
*/
|
|
97
|
-
type ShadowProps = {
|
|
98
|
-
boxShadow?: ShadowToken;
|
|
99
|
-
};
|
|
100
|
-
/**
|
|
101
|
-
* Flex layout props - passthrough from React Native
|
|
102
|
-
*/
|
|
103
|
-
type FlexLayoutProps = Pick<FlexStyle, 'flex' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignSelf' | 'alignContent' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'position' | 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end' | 'zIndex' | 'overflow' | 'display' | 'aspectRatio'>;
|
|
104
|
-
/**
|
|
105
|
-
* Other view style props - passthrough from React Native
|
|
106
|
-
*/
|
|
107
|
-
type OtherViewStyleProps = Pick<ViewStyle, 'opacity' | 'borderStyle' | 'transform'>;
|
|
108
|
-
/**
|
|
109
|
-
* Text color props - use text color tokens only
|
|
110
|
-
*/
|
|
111
|
-
type TextColorProps = {
|
|
128
|
+
export type LumenTextStyle = LumenViewStyle & {
|
|
112
129
|
color?: TextColorToken;
|
|
130
|
+
typography?: TypographyToken;
|
|
131
|
+
textAlign?: TextStyle['textAlign'];
|
|
132
|
+
textTransform?: TextStyle['textTransform'];
|
|
133
|
+
textDecorationLine?: TextStyle['textDecorationLine'];
|
|
113
134
|
};
|
|
114
|
-
/**
|
|
115
|
-
* Typography prop
|
|
116
|
-
*/
|
|
117
|
-
type TypographyProps = {
|
|
118
|
-
typo?: TypographyToken;
|
|
119
|
-
};
|
|
120
|
-
/**
|
|
121
|
-
* Text style props - passthrough from React Native
|
|
122
|
-
*/
|
|
123
|
-
type OtherTextStyleProps = Pick<TextStyle, 'textAlign' | 'textTransform' | 'textDecorationLine'>;
|
|
124
|
-
/**
|
|
125
|
-
* Main public types - combine token props with RN props
|
|
126
|
-
*/
|
|
127
|
-
export type LumenViewStyleProps = SpacingProps & SizeProps & BackgroundColorProps & BorderProps & ShadowProps & FlexLayoutProps & OtherViewStyleProps;
|
|
128
|
-
export type LumenTextStyleProps = LumenViewStyleProps & TextColorProps & TypographyProps & OtherTextStyleProps;
|
|
129
135
|
/**
|
|
130
136
|
* Derived style-only types (for internal resolver use)
|
|
131
137
|
*/
|
|
132
|
-
export type
|
|
133
|
-
|
|
138
|
+
export type LumenViewStyleLX = {
|
|
139
|
+
/**
|
|
140
|
+
* Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
|
|
141
|
+
*/
|
|
142
|
+
lx?: LumenViewStyle;
|
|
143
|
+
};
|
|
144
|
+
export type LumenPressableStyleLX = {
|
|
145
|
+
/**
|
|
146
|
+
* Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
|
|
147
|
+
*/
|
|
148
|
+
lx?: LumenViewStyle;
|
|
149
|
+
};
|
|
150
|
+
export type LumenTextStyleLX = {
|
|
151
|
+
/**
|
|
152
|
+
* Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
|
|
153
|
+
*/
|
|
154
|
+
lx?: LumenTextStyle;
|
|
155
|
+
};
|
|
134
156
|
export {};
|
|
135
157
|
//# sourceMappingURL=styled.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/styled.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"styled.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/styled.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utility.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/utility.types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IAAE,UAAU,EAAE,IAAI,CAAA;CAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"utility.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/utility.types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IAAE,UAAU,EAAE,IAAI,CAAA;CAAE,CAAC;AAEjE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG;KACpE,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './mergeStyles';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
|
|
2
|
+
type StyleValue = ViewStyle & TextStyle & ImageStyle;
|
|
3
|
+
type StyleInput = StyleValue | false | null | undefined;
|
|
4
|
+
/**
|
|
5
|
+
* Merges multiple style objects, filtering out falsy values.
|
|
6
|
+
* Use with conditional expressions for variant-based styling.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* const style = mergeStyles(
|
|
10
|
+
* baseStyle,
|
|
11
|
+
* disabled && disabledStyle,
|
|
12
|
+
* );
|
|
13
|
+
*/
|
|
14
|
+
export declare const mergeStyles: (...styles: StyleInput[]) => StyleValue;
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=mergeStyles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../src/styles/utils/mergeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,KAAK,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,GAAI,GAAG,QAAQ,UAAU,EAAE,KAAG,UASrD,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Merges multiple style objects, filtering out falsy values.
|
|
3
|
+
* Use with conditional expressions for variant-based styling.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* const style = mergeStyles(
|
|
7
|
+
* baseStyle,
|
|
8
|
+
* disabled && disabledStyle,
|
|
9
|
+
* );
|
|
10
|
+
*/
|
|
11
|
+
export const mergeStyles = (...styles) => {
|
|
12
|
+
const result = {};
|
|
13
|
+
for (let i = 0; i < styles.length; i++) {
|
|
14
|
+
const style = styles[i];
|
|
15
|
+
if (style) {
|
|
16
|
+
Object.assign(result, style);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return result;
|
|
20
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/lumen-ui-rnative",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.45",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -25,11 +25,10 @@
|
|
|
25
25
|
"import": "./src/lib/Symbols/index.ts",
|
|
26
26
|
"default": "./src/lib/Symbols/index.ts"
|
|
27
27
|
},
|
|
28
|
-
"./styles": "./src/styles/index.ts"
|
|
29
|
-
"./ToRemove": "./src/lib/Components/_ToRemove/ToRemove.tsx"
|
|
28
|
+
"./styles": "./src/styles/index.ts"
|
|
30
29
|
},
|
|
31
30
|
"dependencies": {
|
|
32
|
-
"@ledgerhq/lumen-utils-shared": "0.0.
|
|
31
|
+
"@ledgerhq/lumen-utils-shared": "0.0.12",
|
|
33
32
|
"i18next": "^23.7.0",
|
|
34
33
|
"react-i18next": "^14.0.0"
|
|
35
34
|
},
|
|
@@ -18,7 +18,10 @@ The AddressInput component provides a specialized input field for entering crypt
|
|
|
18
18
|
|
|
19
19
|
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6375-6974&m=dev).
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
|
|
22
|
+
|
|
23
|
+
<Canvas of={AddressInputStories.Base} />
|
|
24
|
+
<Controls of={AddressInputStories.Base} />
|
|
22
25
|
|
|
23
26
|
## Anatomy
|
|
24
27
|
|
|
@@ -28,28 +31,34 @@ The AddressInput component provides a specialized input field for entering crypt
|
|
|
28
31
|
|
|
29
32
|
The component displays "To:" as the default prefix text, but this can be customized via the `prefix` prop for different use cases like "From:", "Withdraw to:", etc.
|
|
30
33
|
|
|
34
|
+
<Canvas of={AddressInputStories.WithCustomPrefix} />
|
|
35
|
+
|
|
31
36
|
### QR Code Scanner
|
|
32
37
|
|
|
33
38
|
When `onQrCodeClick` is provided, a QR code scanner icon appears when the input is empty, allowing users to scan addresses directly. Without `onQrCodeClick`, no QR code icon appears.
|
|
34
39
|
|
|
40
|
+
<Canvas of={AddressInputStories.WithoutQrCode} />
|
|
41
|
+
|
|
35
42
|
### Clear Button
|
|
36
43
|
|
|
37
44
|
A clear button appears **automatically** when input has content, replacing the QR code scanner icon (if present).
|
|
38
45
|
|
|
46
|
+
<Canvas of={AddressInputStories.WithContent} />
|
|
47
|
+
|
|
39
48
|
> **Note:** The clear button only clears the input content/value. It does not clear error states - you must handle error state clearing separately in your component logic.
|
|
40
49
|
|
|
41
50
|
#### **Hiding the Clear Button**
|
|
42
51
|
|
|
43
52
|
Use `hideClearButton` to prevent the clear button from appearing.
|
|
44
53
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
Use `onClear` to extend the default clear behavior with custom logic.
|
|
54
|
+
<Canvas of={AddressInputStories.WithHiddenClearButton} />
|
|
48
55
|
|
|
49
56
|
### Error State
|
|
50
57
|
|
|
51
58
|
The input supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
|
|
52
59
|
|
|
60
|
+
<Canvas of={AddressInputStories.WithError} />
|
|
61
|
+
|
|
53
62
|
The error message will be automatically:
|
|
54
63
|
|
|
55
64
|
- Connected to the input
|
|
@@ -61,6 +70,8 @@ The error message will be automatically:
|
|
|
61
70
|
|
|
62
71
|
The input can be disabled using the `editable` prop set to `false`.
|
|
63
72
|
|
|
73
|
+
<Canvas of={AddressInputStories.DisabledAddressInput} />
|
|
74
|
+
|
|
64
75
|
## Controlled vs Uncontrolled
|
|
65
76
|
|
|
66
77
|
The AddressInput component supports both controlled and uncontrolled usage.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { AddressInput, type AddressInputProps } from './AddressInput';
|
|
4
5
|
|
|
5
6
|
const meta: Meta<typeof AddressInput> = {
|
|
6
7
|
component: AddressInput,
|
|
@@ -14,25 +15,140 @@ const meta: Meta<typeof AddressInput> = {
|
|
|
14
15
|
},
|
|
15
16
|
},
|
|
16
17
|
},
|
|
18
|
+
argTypes: {
|
|
19
|
+
placeholder: {
|
|
20
|
+
control: 'text',
|
|
21
|
+
description: 'Placeholder text when input is empty',
|
|
22
|
+
},
|
|
23
|
+
prefix: {
|
|
24
|
+
control: 'text',
|
|
25
|
+
description: 'Custom prefix text (default: "To:")',
|
|
26
|
+
},
|
|
27
|
+
errorMessage: {
|
|
28
|
+
control: 'text',
|
|
29
|
+
description: 'Error message to display below input',
|
|
30
|
+
},
|
|
31
|
+
editable: {
|
|
32
|
+
control: 'boolean',
|
|
33
|
+
description: 'Whether the input is editable',
|
|
34
|
+
},
|
|
35
|
+
hideClearButton: {
|
|
36
|
+
control: 'boolean',
|
|
37
|
+
description: 'Hide the clear button',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
17
40
|
};
|
|
18
41
|
|
|
19
42
|
export default meta;
|
|
20
43
|
type Story = StoryObj<typeof AddressInput>;
|
|
21
44
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
45
|
+
const AddressInputStory = (args: AddressInputProps) => {
|
|
46
|
+
const [address, setAddress] = useState(args.value?.toString() ?? '');
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<View className='flex min-h-400 items-center justify-center p-24'>
|
|
50
|
+
<View className='w-full max-w-320'>
|
|
51
|
+
<AddressInput
|
|
52
|
+
{...args}
|
|
53
|
+
value={address}
|
|
54
|
+
onChangeText={setAddress}
|
|
55
|
+
onQrCodeClick={
|
|
56
|
+
args.onQrCodeClick ?? (() => alert('QR code scanner opened'))
|
|
57
|
+
}
|
|
58
|
+
/>
|
|
59
|
+
</View>
|
|
60
|
+
</View>
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export const Base: Story = {
|
|
65
|
+
render: (args) => <AddressInputStory {...args} />,
|
|
66
|
+
args: {
|
|
67
|
+
placeholder: 'Enter address or ENS',
|
|
68
|
+
prefix: 'To:',
|
|
69
|
+
editable: true,
|
|
70
|
+
hideClearButton: false,
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export const WithContent: Story = {
|
|
75
|
+
render: (args) => <AddressInputStory {...args} />,
|
|
76
|
+
args: {
|
|
77
|
+
placeholder: 'Enter address or ENS',
|
|
78
|
+
value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
|
|
79
|
+
prefix: 'To:',
|
|
80
|
+
editable: true,
|
|
81
|
+
hideClearButton: false,
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export const WithCustomPrefix: Story = {
|
|
86
|
+
render: (args) => <AddressInputStory {...args} />,
|
|
87
|
+
args: {
|
|
88
|
+
placeholder: 'Enter sender address',
|
|
89
|
+
prefix: 'From:',
|
|
90
|
+
editable: true,
|
|
91
|
+
hideClearButton: false,
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
const AddressInputWithoutQrStory = (args: AddressInputProps) => {
|
|
96
|
+
const [address, setAddress] = useState(args.value?.toString() ?? '');
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<View className='flex min-h-400 items-center justify-center p-24'>
|
|
100
|
+
<View className='w-full max-w-320'>
|
|
101
|
+
<AddressInput
|
|
102
|
+
{...args}
|
|
103
|
+
value={address}
|
|
104
|
+
onChangeText={setAddress}
|
|
105
|
+
onQrCodeClick={undefined}
|
|
106
|
+
/>
|
|
107
|
+
</View>
|
|
108
|
+
</View>
|
|
109
|
+
);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
export const WithoutQrCode: Story = {
|
|
113
|
+
render: (args) => <AddressInputWithoutQrStory {...args} />,
|
|
114
|
+
args: {
|
|
115
|
+
placeholder: 'Enter address or ENS',
|
|
116
|
+
prefix: 'To:',
|
|
117
|
+
editable: true,
|
|
118
|
+
hideClearButton: false,
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export const WithError: Story = {
|
|
123
|
+
render: (args) => <AddressInputStory {...args} />,
|
|
124
|
+
args: {
|
|
125
|
+
placeholder: 'Enter address or ENS',
|
|
126
|
+
value: 'invalid-address',
|
|
127
|
+
errorMessage: 'Invalid address format',
|
|
128
|
+
prefix: 'To:',
|
|
129
|
+
editable: true,
|
|
130
|
+
hideClearButton: false,
|
|
131
|
+
},
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export const DisabledAddressInput: Story = {
|
|
135
|
+
render: (args) => <AddressInputStory {...args} />,
|
|
136
|
+
args: {
|
|
137
|
+
placeholder: 'Enter address or ENS',
|
|
138
|
+
value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
|
|
139
|
+
prefix: 'To:',
|
|
140
|
+
editable: false,
|
|
141
|
+
hideClearButton: false,
|
|
142
|
+
},
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
export const WithHiddenClearButton: Story = {
|
|
146
|
+
render: (args) => <AddressInputStory {...args} />,
|
|
147
|
+
args: {
|
|
148
|
+
placeholder: 'Enter address or ENS',
|
|
149
|
+
value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
|
|
150
|
+
prefix: 'To:',
|
|
151
|
+
editable: true,
|
|
152
|
+
hideClearButton: true,
|
|
37
153
|
},
|
|
38
154
|
};
|
|
@@ -20,7 +20,10 @@ AmountInput is a specialized input component designed for handling numeric value
|
|
|
20
20
|
|
|
21
21
|
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6245-2067&m=dev).
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
|
|
24
|
+
|
|
25
|
+
<Canvas of={AmountInputStories.Base} />
|
|
26
|
+
<Controls of={AmountInputStories.Base} />
|
|
24
27
|
|
|
25
28
|
## Anatomy
|
|
26
29
|
|
|
@@ -30,6 +33,10 @@ AmountInput is a specialized input component designed for handling numeric value
|
|
|
30
33
|
|
|
31
34
|
The currency text can be positioned on either the **left** (default) or **right** side of the input:
|
|
32
35
|
|
|
36
|
+
<Canvas of={AmountInputStories.CurrencyPositionLeft} />
|
|
37
|
+
|
|
38
|
+
<Canvas of={AmountInputStories.CurrencyPositionRight} />
|
|
39
|
+
|
|
33
40
|
### Input Validation
|
|
34
41
|
|
|
35
42
|
The AmountInput provides built-in validation controls:
|
|
@@ -39,6 +46,8 @@ The AmountInput provides built-in validation controls:
|
|
|
39
46
|
`allowDecimals` is set to `true` by default, the input accepts decimal values.
|
|
40
47
|
Set it to `false` to only accept whole numbers.
|
|
41
48
|
|
|
49
|
+
<Canvas of={AmountInputStories.IntegerOnly} />
|
|
50
|
+
|
|
42
51
|
#### **Length Limits**
|
|
43
52
|
|
|
44
53
|
By default, the AmountInput allows:
|
|
@@ -49,18 +58,28 @@ By default, the AmountInput allows:
|
|
|
49
58
|
|
|
50
59
|
You can customize these limits using `maxIntegerLength` and `maxDecimalLength` props if needed.
|
|
51
60
|
|
|
61
|
+
<Canvas of={AmountInputStories.CustomLengthLimits} />
|
|
62
|
+
|
|
52
63
|
#### **Thousands Separator**
|
|
53
64
|
|
|
54
65
|
By default, the component displays thousands separators (e.g., `1 000` for `1000`). You can disable this by setting `thousandsSeparator={false}`.
|
|
55
66
|
|
|
67
|
+
<Canvas of={AmountInputStories.WithThousandsSeparator} />
|
|
68
|
+
|
|
69
|
+
<Canvas of={AmountInputStories.WithoutThousandsSeparator} />
|
|
70
|
+
|
|
56
71
|
### Error State
|
|
57
72
|
|
|
58
73
|
The input supports error handling through `isInvalid` prop which controls the error state styling including text color changes for both input and currency text.
|
|
59
74
|
|
|
75
|
+
<Canvas of={AmountInputStories.ErrorState} />
|
|
76
|
+
|
|
60
77
|
### Disabled State
|
|
61
78
|
|
|
62
79
|
The component supports disabled state through the `editable` prop set to `false` with appropriate visual feedback.
|
|
63
80
|
|
|
81
|
+
<Canvas of={AmountInputStories.DisabledAmountInput} />
|
|
82
|
+
|
|
64
83
|
## Animations
|
|
65
84
|
|
|
66
85
|
The AmountInput features several sophisticated animations:
|