@ledgerhq/lumen-ui-rnative 0.1.4 → 0.1.6
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/dist/package.json +1 -1
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.js +5 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.js +34 -61
- package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts +1 -0
- package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
- package/dist/src/lib/Components/SegmentedControl/types.d.ts +12 -2
- package/dist/src/lib/Components/SegmentedControl/types.d.ts.map +1 -1
- package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts +19 -0
- package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts.map +1 -0
- package/dist/src/lib/Components/SegmentedControl/usePillLayout.js +46 -0
- package/dist/src/lib/Components/TileButton/TileButton.js +2 -2
- package/jest.config.ts +0 -1
- package/package.json +1 -1
- package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +8 -1
- package/src/lib/Components/SegmentedControl/SegmentedControl.mdx +1 -38
- package/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx +35 -19
- package/src/lib/Components/SegmentedControl/SegmentedControl.tsx +61 -77
- package/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx +1 -0
- package/src/lib/Components/SegmentedControl/types.ts +12 -2
- package/src/lib/Components/SegmentedControl/usePillLayout.ts +76 -0
- package/src/lib/Components/TileButton/TileButton.tsx +2 -2
- package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx +1 -1
- package/tsconfig.json +3 -16
- package/tsconfig.lib.json +5 -0
- package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts +0 -9
- package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts.map +0 -1
- package/dist/src/lib/Animations/Pulse/Pulse.stories.js +0 -38
- package/dist/src/lib/Animations/Spin/Spin.stories.d.ts +0 -9
- package/dist/src/lib/Animations/Spin/Spin.stories.d.ts.map +0 -1
- package/dist/src/lib/Animations/Spin/Spin.stories.js +0 -27
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts +0 -13
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.js +0 -128
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts +0 -10
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.js +0 -127
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts +0 -16
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.js +0 -186
- package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts +0 -22
- package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Avatar/Avatar.stories.js +0 -72
- package/dist/src/lib/Components/Banner/Banner.stories.d.ts +0 -16
- package/dist/src/lib/Components/Banner/Banner.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Banner/Banner.stories.js +0 -268
- package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts +0 -87
- package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.js +0 -266
- package/dist/src/lib/Components/Button/Button.stories.d.ts +0 -16
- package/dist/src/lib/Components/Button/Button.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Button/Button.stories.js +0 -143
- package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts +0 -16
- package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/CardButton/CardButton.stories.js +0 -208
- package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts +0 -14
- package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Checkbox/Checkbox.stories.js +0 -72
- package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts +0 -11
- package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.js +0 -91
- package/dist/src/lib/Components/Divider/Divider.stories.d.ts +0 -9
- package/dist/src/lib/Components/Divider/Divider.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Divider/Divider.stories.js +0 -51
- package/dist/src/lib/Components/Icon/Icon.stories.d.ts +0 -15
- package/dist/src/lib/Components/Icon/Icon.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Icon/Icon.stories.js +0 -137
- package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts +0 -10
- package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/IconButton/IconButton.stories.js +0 -74
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts +0 -11
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.js +0 -90
- package/dist/src/lib/Components/Link/Link.stories.d.ts +0 -17
- package/dist/src/lib/Components/Link/Link.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Link/Link.stories.js +0 -275
- package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts +0 -10
- package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/ListItem/ListItem.stories.js +0 -106
- package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts +0 -10
- package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/NavBar/NavBar.stories.js +0 -72
- package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts +0 -27
- package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.js +0 -42
- package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts +0 -12
- package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/SearchInput/SearchInput.stories.js +0 -98
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts +0 -58
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.js +0 -61
- package/dist/src/lib/Components/Select/Select.stories.d.ts +0 -11
- package/dist/src/lib/Components/Select/Select.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Select/Select.stories.js +0 -83
- package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts +0 -11
- package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Skeleton/Skeleton.stories.js +0 -49
- package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts +0 -9
- package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Spinner/Spinner.stories.js +0 -50
- package/dist/src/lib/Components/Spot/Spot.stories.d.ts +0 -12
- package/dist/src/lib/Components/Spot/Spot.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Spot/Spot.stories.js +0 -156
- package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts +0 -9
- package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Stepper/Stepper.stories.js +0 -35
- package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts +0 -10
- package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Subheader/Subheader.stories.js +0 -34
- package/dist/src/lib/Components/Switch/Switch.stories.d.ts +0 -14
- package/dist/src/lib/Components/Switch/Switch.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Switch/Switch.stories.js +0 -65
- package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts +0 -50
- package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/TabBar/TabBar.stories.js +0 -60
- package/dist/src/lib/Components/Tag/Tag.stories.d.ts +0 -10
- package/dist/src/lib/Components/Tag/Tag.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Tag/Tag.stories.js +0 -45
- package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts +0 -14
- package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/TextInput/TextInput.stories.js +0 -128
- package/dist/src/lib/Components/Tile/Tile.stories.d.ts +0 -14
- package/dist/src/lib/Components/Tile/Tile.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Tile/Tile.stories.js +0 -117
- package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts +0 -12
- package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/TileButton/TileButton.stories.js +0 -63
- package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts +0 -10
- package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Tooltip/Tooltip.stories.js +0 -50
- package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts +0 -7
- package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Box/Box.stories.js +0 -42
- package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts +0 -11
- package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.js +0 -105
- package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts +0 -10
- package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js +0 -101
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts +0 -7
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.js +0 -47
- package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts +0 -7
- package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Text/Text.stories.js +0 -33
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Settings, ChevronRight, Wallet } from '../../Symbols';
|
|
4
|
-
import { Switch } from '../Switch/Switch';
|
|
5
|
-
import { Tag } from '../Tag/Tag';
|
|
6
|
-
import { Box } from '../Utility';
|
|
7
|
-
import { ListItem, ListItemLeading, ListItemContent, ListItemTitle, ListItemDescription, ListItemTrailing, ListItemSpot, ListItemIcon, ListItemTruncate, } from './ListItem';
|
|
8
|
-
const meta = {
|
|
9
|
-
component: ListItem,
|
|
10
|
-
title: 'Containment/ListItem',
|
|
11
|
-
subcomponents: {
|
|
12
|
-
ListItemLeading,
|
|
13
|
-
ListItemContent,
|
|
14
|
-
ListItemTitle,
|
|
15
|
-
ListItemDescription,
|
|
16
|
-
ListItemTrailing,
|
|
17
|
-
ListItemSpot,
|
|
18
|
-
ListItemIcon,
|
|
19
|
-
ListItemTruncate,
|
|
20
|
-
},
|
|
21
|
-
parameters: {
|
|
22
|
-
layout: 'padded',
|
|
23
|
-
backgrounds: { default: 'light' },
|
|
24
|
-
docs: {
|
|
25
|
-
source: {
|
|
26
|
-
language: 'tsx',
|
|
27
|
-
format: true,
|
|
28
|
-
type: 'code',
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
argTypes: {
|
|
33
|
-
disabled: {
|
|
34
|
-
control: 'boolean',
|
|
35
|
-
description: 'Whether the list item is disabled',
|
|
36
|
-
},
|
|
37
|
-
onPress: {
|
|
38
|
-
action: 'pressed',
|
|
39
|
-
description: 'The function to be called when the list item is pressed',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
export default meta;
|
|
44
|
-
export const Base = {
|
|
45
|
-
args: {
|
|
46
|
-
lx: { maxWidth: 's320' },
|
|
47
|
-
},
|
|
48
|
-
render: (args) => (_jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Item with Icon and Description" }), _jsx(ListItemDescription, { children: "Additional information" })] })] }) })),
|
|
49
|
-
parameters: {
|
|
50
|
-
docs: {
|
|
51
|
-
source: {
|
|
52
|
-
code: `
|
|
53
|
-
<ListItem>
|
|
54
|
-
<ListItemLeading>
|
|
55
|
-
<ListItemSpot appearance="icon" icon={Settings} />
|
|
56
|
-
<ListItemContent>
|
|
57
|
-
<ListItemTitle>Item with Icon and Description</ListItemTitle>
|
|
58
|
-
<ListItemDescription>Additional information</ListItemDescription>
|
|
59
|
-
</ListItemContent>
|
|
60
|
-
</ListItemLeading>
|
|
61
|
-
</ListItem>
|
|
62
|
-
`,
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
},
|
|
66
|
-
};
|
|
67
|
-
export const VariantsShowcase = {
|
|
68
|
-
render: () => {
|
|
69
|
-
const [selected, setSelected] = useState(false);
|
|
70
|
-
return (_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's320', gap: 's8' }, children: [_jsx(ListItem, { children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Simple composition" }), _jsx(ListItemDescription, { children: "With description" })] })] }) }), _jsxs(ListItem, { onPress: () => setSelected(!selected), children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Switch Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: selected, onCheckedChange: setSelected }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'error' }, children: "-7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'success' }, children: "+7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Tag Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Tag, { size: 'sm', label: 'New', appearance: 'accent' }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Complex 1" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "With description" }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Complex 2" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' }), _jsx(ListItemTruncate, { variant: 'title', children: "1200.12" })] }), _jsx(ListItemDescription, { children: _jsx(Tag, { size: 'sm', label: 'BTC', appearance: 'gray' }) })] }) })] })] }));
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
export const DisabledState = {
|
|
74
|
-
args: {
|
|
75
|
-
disabled: true,
|
|
76
|
-
},
|
|
77
|
-
render: (args) => (_jsxs(Box, { lx: { flexDirection: 'column', width: 's320' }, children: [_jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: false, disabled: args.disabled }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }) })] })),
|
|
78
|
-
parameters: {
|
|
79
|
-
docs: {
|
|
80
|
-
source: {
|
|
81
|
-
code: `
|
|
82
|
-
<ListItem disabled>
|
|
83
|
-
<ListItemLeading>
|
|
84
|
-
<ListItemSpot appearance="icon" icon={Settings} />
|
|
85
|
-
<ListItemContent>
|
|
86
|
-
<ListItemTitle>Disabled Item</ListItemTitle>
|
|
87
|
-
<ListItemDescription>This item is disabled</ListItemDescription>
|
|
88
|
-
</ListItemContent>
|
|
89
|
-
</ListItemLeading>
|
|
90
|
-
<ListItemTrailing>
|
|
91
|
-
<ChevronRight size={24} />
|
|
92
|
-
</ListItemTrailing>
|
|
93
|
-
</ListItem>
|
|
94
|
-
`,
|
|
95
|
-
},
|
|
96
|
-
},
|
|
97
|
-
},
|
|
98
|
-
};
|
|
99
|
-
export const ResponsiveLayout = {
|
|
100
|
-
render: () => (_jsx(Box, { lx: {
|
|
101
|
-
width: 's400',
|
|
102
|
-
borderWidth: 's1',
|
|
103
|
-
borderColor: 'mutedSubtle',
|
|
104
|
-
padding: 's16',
|
|
105
|
-
}, children: _jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Short Title" }), _jsx(ListItemDescription, { children: "Short description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Long Title that should truncate appropriately" }), _jsx(ListItemDescription, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Long Title that should truncate appropriately" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] })] }) })),
|
|
106
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { NavBar } from './NavBar';
|
|
3
|
-
declare const meta: Meta<typeof NavBar>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof NavBar>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const Expanded: Story;
|
|
8
|
-
export declare const WithCoinCapsule: Story;
|
|
9
|
-
export declare const WithMultipleTrailingActions: Story;
|
|
10
|
-
//# sourceMappingURL=NavBar.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/NavBar/NavBar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EACL,MAAM,EAOP,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA6B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KAwBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA8BzC,CAAC"}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CryptoIcon } from '@ledgerhq/crypto-icons';
|
|
3
|
-
import { MoreHorizontal, Settings } from '../../Symbols';
|
|
4
|
-
import { IconButton } from '../IconButton';
|
|
5
|
-
import { NavBar, NavBarBackButton, NavBarCoinCapsule, NavBarContent, NavBarDescription, NavBarTitle, NavBarTrailing, } from './NavBar';
|
|
6
|
-
const meta = {
|
|
7
|
-
component: NavBar,
|
|
8
|
-
title: 'Navigation/NavBar',
|
|
9
|
-
subcomponents: {
|
|
10
|
-
NavBarBackButton,
|
|
11
|
-
NavBarContent,
|
|
12
|
-
NavBarTitle,
|
|
13
|
-
NavBarDescription,
|
|
14
|
-
NavBarCoinCapsule,
|
|
15
|
-
NavBarTrailing,
|
|
16
|
-
},
|
|
17
|
-
parameters: {
|
|
18
|
-
layout: 'centered',
|
|
19
|
-
backgrounds: { default: 'light' },
|
|
20
|
-
docs: {
|
|
21
|
-
source: {
|
|
22
|
-
language: 'tsx',
|
|
23
|
-
format: true,
|
|
24
|
-
type: 'code',
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
argTypes: {
|
|
29
|
-
appearance: {
|
|
30
|
-
control: 'select',
|
|
31
|
-
options: ['compact', 'expanded'],
|
|
32
|
-
description: 'Controls the appearance/layout of the NavBar',
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
export default meta;
|
|
37
|
-
export const Base = {
|
|
38
|
-
args: {
|
|
39
|
-
appearance: 'compact',
|
|
40
|
-
lx: {
|
|
41
|
-
width: 's480',
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsxs(NavBarContent, { children: [_jsx(NavBarTitle, { children: "Title" }), _jsx(NavBarDescription, { children: "Description" })] }), _jsx(NavBarTrailing, { children: _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: MoreHorizontal, accessibilityLabel: 'More options' }) })] })),
|
|
45
|
-
};
|
|
46
|
-
export const Expanded = {
|
|
47
|
-
args: {
|
|
48
|
-
appearance: 'expanded',
|
|
49
|
-
lx: {
|
|
50
|
-
width: 's480',
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsxs(NavBarContent, { children: [_jsx(NavBarTitle, { children: "Account Details" }), _jsx(NavBarDescription, { children: "View and manage your account" })] }), _jsx(NavBarTrailing, { children: _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: Settings, accessibilityLabel: 'Settings' }) })] })),
|
|
54
|
-
};
|
|
55
|
-
export const WithCoinCapsule = {
|
|
56
|
-
args: {
|
|
57
|
-
appearance: 'compact',
|
|
58
|
-
lx: {
|
|
59
|
-
width: 's480',
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsx(NavBarContent, { children: _jsx(NavBarCoinCapsule, { ticker: 'BTC', icon: _jsx(CryptoIcon, { ledgerId: 'bitcoin', ticker: 'BTC', size: '24px' }) }) }), _jsx(NavBarTrailing, { children: _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: MoreHorizontal, accessibilityLabel: 'More options' }) })] })),
|
|
63
|
-
};
|
|
64
|
-
export const WithMultipleTrailingActions = {
|
|
65
|
-
args: {
|
|
66
|
-
appearance: 'compact',
|
|
67
|
-
lx: {
|
|
68
|
-
width: 's480',
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsxs(NavBarContent, { children: [_jsx(NavBarTitle, { children: "Portfolio" }), _jsx(NavBarDescription, { children: "Manage your assets" })] }), _jsxs(NavBarTrailing, { children: [_jsx(IconButton, { appearance: 'no-background', size: 'md', icon: Settings, accessibilityLabel: 'Settings' }), _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: MoreHorizontal, accessibilityLabel: 'More options' })] })] })),
|
|
72
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
declare const meta: {
|
|
3
|
-
title: string;
|
|
4
|
-
component: {
|
|
5
|
-
({ currentPage, totalPages, lx, ref, ...props }: import("./types").PageIndicatorProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
displayName: string;
|
|
7
|
-
};
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: string;
|
|
10
|
-
backgrounds: {
|
|
11
|
-
default: string;
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
argTypes: {
|
|
15
|
-
currentPage: {
|
|
16
|
-
control: "number";
|
|
17
|
-
};
|
|
18
|
-
totalPages: {
|
|
19
|
-
control: "number";
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
export default meta;
|
|
24
|
-
type Story = StoryObj<typeof meta>;
|
|
25
|
-
export declare const Base: Story;
|
|
26
|
-
export declare const Interactive: Story;
|
|
27
|
-
//# sourceMappingURL=PageIndicator.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/PageIndicator/PageIndicator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAOvE,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAW4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AA0CF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Box, Text, IconButton } from '../';
|
|
4
|
-
import { useTheme } from '../../../styles';
|
|
5
|
-
import { ArrowLeft, ArrowRight } from '../../Symbols';
|
|
6
|
-
import { PageIndicator } from './PageIndicator';
|
|
7
|
-
const meta = {
|
|
8
|
-
title: 'Communication/PageIndicator',
|
|
9
|
-
component: PageIndicator,
|
|
10
|
-
parameters: {
|
|
11
|
-
layout: 'centered',
|
|
12
|
-
backgrounds: { default: 'light' },
|
|
13
|
-
},
|
|
14
|
-
argTypes: {
|
|
15
|
-
currentPage: { control: 'number' },
|
|
16
|
-
totalPages: { control: 'number' },
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
export default meta;
|
|
20
|
-
export const Base = {
|
|
21
|
-
args: {
|
|
22
|
-
currentPage: 1,
|
|
23
|
-
totalPages: 5,
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
const InteractiveComponent = ({ totalPages }) => {
|
|
27
|
-
const [page, setPage] = useState(1);
|
|
28
|
-
const { theme } = useTheme();
|
|
29
|
-
return (_jsxs(Box, { lx: { gap: 's16', alignItems: 'center', width: 'full' }, children: [_jsxs(Box, { lx: {
|
|
30
|
-
flexDirection: 'row',
|
|
31
|
-
gap: 's16',
|
|
32
|
-
alignItems: 'center',
|
|
33
|
-
justifyContent: 'center',
|
|
34
|
-
}, children: [_jsx(IconButton, { icon: ArrowLeft, size: 'xs', accessibilityLabel: 'Previous page', appearance: 'transparent', onPress: () => setPage((v) => Math.max(1, v - 1)) }), _jsx(Text, { lx: { color: 'base', width: 's28', textAlign: 'center' }, style: { ...theme.typographies.heading2SemiBold }, children: page }), _jsx(IconButton, { icon: ArrowRight, size: 'xs', accessibilityLabel: 'Next page', appearance: 'transparent', onPress: () => setPage((v) => Math.min(totalPages, v + 1)) })] }), _jsx(PageIndicator, { currentPage: page, totalPages: totalPages })] }));
|
|
35
|
-
};
|
|
36
|
-
export const Interactive = {
|
|
37
|
-
args: {
|
|
38
|
-
currentPage: 1,
|
|
39
|
-
totalPages: 9,
|
|
40
|
-
},
|
|
41
|
-
render: (args) => _jsx(InteractiveComponent, { totalPages: args.totalPages }),
|
|
42
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { SearchInput } from './SearchInput';
|
|
3
|
-
declare const meta: Meta<typeof SearchInput>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof SearchInput>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const WithContent: Story;
|
|
8
|
-
export declare const WithError: Story;
|
|
9
|
-
export declare const DisabledSearchInput: Story;
|
|
10
|
-
export declare const WithHiddenClearButton: Story;
|
|
11
|
-
export declare const WithClearCallback: Story;
|
|
12
|
-
//# sourceMappingURL=SearchInput.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.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,CAiClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6B1C,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { View } from 'react-native';
|
|
4
|
-
import { SearchInput } from './SearchInput';
|
|
5
|
-
const meta = {
|
|
6
|
-
component: SearchInput,
|
|
7
|
-
title: 'Input/SearchInput',
|
|
8
|
-
args: {
|
|
9
|
-
appearance: 'plain',
|
|
10
|
-
},
|
|
11
|
-
parameters: {
|
|
12
|
-
docs: {
|
|
13
|
-
source: {
|
|
14
|
-
language: 'tsx',
|
|
15
|
-
format: true,
|
|
16
|
-
type: 'code',
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
argTypes: {
|
|
21
|
-
placeholder: {
|
|
22
|
-
control: 'text',
|
|
23
|
-
description: 'Placeholder text when input is empty',
|
|
24
|
-
},
|
|
25
|
-
errorMessage: {
|
|
26
|
-
control: 'text',
|
|
27
|
-
description: 'Error message to display below input',
|
|
28
|
-
},
|
|
29
|
-
editable: {
|
|
30
|
-
control: 'boolean',
|
|
31
|
-
description: 'Whether the input is editable',
|
|
32
|
-
},
|
|
33
|
-
hideClearButton: {
|
|
34
|
-
control: 'boolean',
|
|
35
|
-
description: 'Hide the clear button',
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
};
|
|
39
|
-
export default meta;
|
|
40
|
-
const SearchInputStory = (args) => {
|
|
41
|
-
const [query, setQuery] = useState(args.initialValue ?? '');
|
|
42
|
-
return (_jsx(View, { style: {
|
|
43
|
-
flex: 1,
|
|
44
|
-
minHeight: 96,
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
justifyContent: 'center',
|
|
47
|
-
padding: 24,
|
|
48
|
-
}, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(SearchInput, { ...args, value: query, onChangeText: setQuery, onClear: args.onClear }) }) }));
|
|
49
|
-
};
|
|
50
|
-
export const Base = {
|
|
51
|
-
render: (args) => _jsx(SearchInputStory, { ...args }),
|
|
52
|
-
args: {
|
|
53
|
-
placeholder: 'Search products',
|
|
54
|
-
editable: true,
|
|
55
|
-
hideClearButton: false,
|
|
56
|
-
},
|
|
57
|
-
};
|
|
58
|
-
export const WithContent = {
|
|
59
|
-
render: (args) => _jsx(SearchInputStory, { ...args, initialValue: 'Search text' }),
|
|
60
|
-
args: {
|
|
61
|
-
placeholder: 'Search products',
|
|
62
|
-
editable: true,
|
|
63
|
-
hideClearButton: false,
|
|
64
|
-
},
|
|
65
|
-
};
|
|
66
|
-
export const WithError = {
|
|
67
|
-
render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Invalid search' })),
|
|
68
|
-
args: {
|
|
69
|
-
placeholder: 'Search products',
|
|
70
|
-
errorMessage: 'Search term is invalid',
|
|
71
|
-
editable: true,
|
|
72
|
-
hideClearButton: false,
|
|
73
|
-
},
|
|
74
|
-
};
|
|
75
|
-
export const DisabledSearchInput = {
|
|
76
|
-
render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Disabled search' })),
|
|
77
|
-
args: {
|
|
78
|
-
placeholder: 'Search products',
|
|
79
|
-
editable: false,
|
|
80
|
-
hideClearButton: false,
|
|
81
|
-
},
|
|
82
|
-
};
|
|
83
|
-
export const WithHiddenClearButton = {
|
|
84
|
-
render: (args) => _jsx(SearchInputStory, { ...args, initialValue: 'Search text' }),
|
|
85
|
-
args: {
|
|
86
|
-
placeholder: 'Search products',
|
|
87
|
-
editable: true,
|
|
88
|
-
hideClearButton: true,
|
|
89
|
-
},
|
|
90
|
-
};
|
|
91
|
-
export const WithClearCallback = {
|
|
92
|
-
render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Search cleared!') })),
|
|
93
|
-
args: {
|
|
94
|
-
placeholder: 'Search products',
|
|
95
|
-
editable: true,
|
|
96
|
-
hideClearButton: false,
|
|
97
|
-
},
|
|
98
|
-
};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
|
|
3
|
-
declare const meta: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: typeof SegmentedControl;
|
|
6
|
-
subcomponents: {
|
|
7
|
-
SegmentedControlButton: typeof SegmentedControlButton;
|
|
8
|
-
};
|
|
9
|
-
parameters: {
|
|
10
|
-
layout: string;
|
|
11
|
-
backgrounds: {
|
|
12
|
-
default: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
argTypes: {
|
|
16
|
-
onSelectedChange: {
|
|
17
|
-
action: string;
|
|
18
|
-
description: string;
|
|
19
|
-
table: {
|
|
20
|
-
type: {
|
|
21
|
-
summary: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
accessibilityLabel: {
|
|
26
|
-
control: "text";
|
|
27
|
-
description: string;
|
|
28
|
-
table: {
|
|
29
|
-
type: {
|
|
30
|
-
summary: string;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
selectedValue: {
|
|
35
|
-
control: "text";
|
|
36
|
-
description: string;
|
|
37
|
-
table: {
|
|
38
|
-
type: {
|
|
39
|
-
summary: string;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
children: {
|
|
44
|
-
control: false;
|
|
45
|
-
description: string;
|
|
46
|
-
table: {
|
|
47
|
-
type: {
|
|
48
|
-
summary: string;
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
export default meta;
|
|
55
|
-
type Story = StoryObj<typeof meta>;
|
|
56
|
-
export declare const Base: Story;
|
|
57
|
-
export declare const WithIcons: Story;
|
|
58
|
-
//# sourceMappingURL=SegmentedControl.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAqBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAC"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
|
|
4
|
-
import { Box } from '../Utility';
|
|
5
|
-
import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
|
|
6
|
-
const meta = {
|
|
7
|
-
title: 'Navigation/SegmentedControl',
|
|
8
|
-
component: SegmentedControl,
|
|
9
|
-
subcomponents: {
|
|
10
|
-
SegmentedControlButton,
|
|
11
|
-
},
|
|
12
|
-
parameters: {
|
|
13
|
-
layout: 'centered',
|
|
14
|
-
backgrounds: { default: 'light' },
|
|
15
|
-
},
|
|
16
|
-
argTypes: {
|
|
17
|
-
onSelectedChange: {
|
|
18
|
-
action: 'change',
|
|
19
|
-
description: 'Callback when the selected value changes',
|
|
20
|
-
table: {
|
|
21
|
-
type: { summary: '(value: string) => void' },
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
accessibilityLabel: {
|
|
25
|
-
control: 'text',
|
|
26
|
-
description: 'Accessible label for the control',
|
|
27
|
-
table: {
|
|
28
|
-
type: { summary: 'string' },
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
selectedValue: {
|
|
32
|
-
control: 'text',
|
|
33
|
-
description: 'The value of the currently selected segment (drives the sliding pill)',
|
|
34
|
-
table: {
|
|
35
|
-
type: { summary: 'string' },
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
children: {
|
|
39
|
-
control: false,
|
|
40
|
-
description: 'SegmentedControlButton elements',
|
|
41
|
-
table: {
|
|
42
|
-
type: { summary: 'ReactNode' },
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
export default meta;
|
|
48
|
-
export const Base = {
|
|
49
|
-
args: {},
|
|
50
|
-
render: () => {
|
|
51
|
-
const [state, setState] = useState('send');
|
|
52
|
-
return (_jsx(Box, { lx: { width: 's256' }, children: _jsxs(SegmentedControl, { selectedValue: state, onSelectedChange: setState, accessibilityLabel: 'Transaction type', children: [_jsx(SegmentedControlButton, { value: 'send', children: "Send" }), _jsx(SegmentedControlButton, { value: 'receive', children: "Receive" }), _jsx(SegmentedControlButton, { value: 'buy', children: "Buy" })] }) }));
|
|
53
|
-
},
|
|
54
|
-
};
|
|
55
|
-
export const WithIcons = {
|
|
56
|
-
args: {},
|
|
57
|
-
render: () => {
|
|
58
|
-
const [state, setState] = useState('tokens');
|
|
59
|
-
return (_jsxs(SegmentedControl, { selectedValue: state, onSelectedChange: setState, accessibilityLabel: 'Asset section', children: [_jsx(SegmentedControlButton, { value: 'tokens', icon: Coins, children: "Tokens" }), _jsx(SegmentedControlButton, { value: 'nfts', icon: Nft, children: "NFTs" }), _jsx(SegmentedControlButton, { value: 'activity', icon: TransferHorizontal, children: "Activity" }), _jsx(SegmentedControlButton, { value: 'settings', icon: Settings, children: "Settings" })] }));
|
|
60
|
-
},
|
|
61
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Select } from './Select';
|
|
3
|
-
declare const meta: Meta<typeof Select>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Select>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const WithGroups: Story;
|
|
8
|
-
export declare const WithDisabledItems: Story;
|
|
9
|
-
export declare const DisabledSelect: Story;
|
|
10
|
-
export declare const WithChangeCallback: Story;
|
|
11
|
-
//# sourceMappingURL=Select.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EACL,MAAM,EASP,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAgB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KA2ClB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8ChC,CAAC"}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Box } from '../Utility';
|
|
4
|
-
import { GlobalSelectBottomSheet } from './GlobalSelectBottomSheet';
|
|
5
|
-
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemText, SelectGroup, SelectLabel, SelectSeparator, } from './Select';
|
|
6
|
-
const meta = {
|
|
7
|
-
component: Select,
|
|
8
|
-
subcomponents: {
|
|
9
|
-
SelectTrigger,
|
|
10
|
-
SelectValue,
|
|
11
|
-
SelectContent,
|
|
12
|
-
SelectItem,
|
|
13
|
-
SelectItemText,
|
|
14
|
-
SelectGroup,
|
|
15
|
-
SelectLabel,
|
|
16
|
-
SelectSeparator,
|
|
17
|
-
},
|
|
18
|
-
title: 'Selection/Select',
|
|
19
|
-
parameters: {
|
|
20
|
-
layout: 'fullscreen',
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
export default meta;
|
|
24
|
-
export const Base = {
|
|
25
|
-
render: () => {
|
|
26
|
-
const [value, setValue] = useState('apple');
|
|
27
|
-
return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
|
|
28
|
-
flex: 1,
|
|
29
|
-
minHeight: 400,
|
|
30
|
-
padding: 24,
|
|
31
|
-
width: '100%',
|
|
32
|
-
}, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Choose a fruit', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) }), _jsx(SelectItem, { value: 'grape', children: _jsx(SelectItemText, { children: "Grape" }) }), _jsx(SelectItem, { value: 'mango', children: _jsx(SelectItemText, { children: "Mango" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
export const WithGroups = {
|
|
36
|
-
render: () => {
|
|
37
|
-
const [value, setValue] = useState('btc');
|
|
38
|
-
return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
|
|
39
|
-
flex: 1,
|
|
40
|
-
minHeight: 400,
|
|
41
|
-
padding: 24,
|
|
42
|
-
width: '100%',
|
|
43
|
-
}, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select cryptocurrency', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Popular" }), _jsx(SelectItem, { value: 'btc', children: _jsx(SelectItemText, { children: "Bitcoin" }) }), _jsx(SelectItem, { value: 'eth', children: _jsx(SelectItemText, { children: "Ethereum" }) })] }), _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Altcoins" }), _jsx(SelectItem, { value: 'ada', children: _jsx(SelectItemText, { children: "Cardano" }) }), _jsx(SelectItem, { value: 'dot', children: _jsx(SelectItemText, { children: "Polkadot" }) }), _jsx(SelectItem, { value: 'sol', children: _jsx(SelectItemText, { children: "Solana" }) })] })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
export const WithDisabledItems = {
|
|
47
|
-
render: () => {
|
|
48
|
-
const [value, setValue] = useState('option1');
|
|
49
|
-
return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
|
|
50
|
-
flex: 1,
|
|
51
|
-
minHeight: 400,
|
|
52
|
-
padding: 24,
|
|
53
|
-
width: '100%',
|
|
54
|
-
}, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select option', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'option1', children: _jsx(SelectItemText, { children: "Option 1" }) }), _jsx(SelectItem, { value: 'option2', disabled: true, children: _jsx(SelectItemText, { children: "Option 2 (Disabled)" }) }), _jsx(SelectItem, { value: 'option3', children: _jsx(SelectItemText, { children: "Option 3" }) }), _jsx(SelectItem, { value: 'option4', disabled: true, children: _jsx(SelectItemText, { children: "Option 4 (Disabled)" }) }), _jsx(SelectItem, { value: 'option5', children: _jsx(SelectItemText, { children: "Option 5" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
|
|
55
|
-
},
|
|
56
|
-
};
|
|
57
|
-
export const DisabledSelect = {
|
|
58
|
-
render: () => {
|
|
59
|
-
const [value, setValue] = useState('apple');
|
|
60
|
-
return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
|
|
61
|
-
flex: 1,
|
|
62
|
-
minHeight: 400,
|
|
63
|
-
padding: 24,
|
|
64
|
-
width: '100%',
|
|
65
|
-
}, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, disabled: true, children: [_jsx(SelectTrigger, { label: 'Disabled select', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
|
|
66
|
-
},
|
|
67
|
-
};
|
|
68
|
-
export const WithChangeCallback = {
|
|
69
|
-
render: () => {
|
|
70
|
-
const [value, setValue] = useState('option1');
|
|
71
|
-
return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
|
|
72
|
-
flex: 1,
|
|
73
|
-
minHeight: 400,
|
|
74
|
-
padding: 24,
|
|
75
|
-
width: '100%',
|
|
76
|
-
}, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: (newValue) => {
|
|
77
|
-
setValue(newValue);
|
|
78
|
-
alert(`Selected: ${newValue}`);
|
|
79
|
-
}, onOpenChange: (open) => {
|
|
80
|
-
alert(`Select ${open ? 'opened' : 'closed'}`);
|
|
81
|
-
}, children: [_jsx(SelectTrigger, { label: 'Select with callbacks', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'option1', children: _jsx(SelectItemText, { children: "Option 1" }) }), _jsx(SelectItem, { value: 'option2', children: _jsx(SelectItemText, { children: "Option 2" }) }), _jsx(SelectItem, { value: 'option3', children: _jsx(SelectItemText, { children: "Option 3" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
|
|
82
|
-
},
|
|
83
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Skeleton } from './Skeleton';
|
|
3
|
-
declare const meta: Meta<typeof Skeleton>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Skeleton>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const WithListItem: Story;
|
|
8
|
-
export declare const WithTile: Story;
|
|
9
|
-
export declare const SizeShowcase: Story;
|
|
10
|
-
export declare const ShapeShowcase: Story;
|
|
11
|
-
//# sourceMappingURL=Skeleton.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAa/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC"}
|