@ledgerhq/lumen-ui-rnative 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/jest.config.ts +0 -1
- package/package.json +1 -1
- package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +8 -1
- 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,266 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Button } from '../Button';
|
|
3
|
-
import { Box, Text } from '../Utility';
|
|
4
|
-
import { BottomSheet } from './BottomSheet';
|
|
5
|
-
import { BottomSheetHeader } from './BottomSheetHeader';
|
|
6
|
-
import { BottomSheetFlatList, BottomSheetScrollView, BottomSheetView, BottomSheetVirtualizedList, } from './Scrollables';
|
|
7
|
-
import { useBottomSheetRef } from './useBottomSheetRef';
|
|
8
|
-
const meta = {
|
|
9
|
-
component: BottomSheet,
|
|
10
|
-
subcomponents: { BottomSheetHeader },
|
|
11
|
-
title: 'Containment/BottomSheet',
|
|
12
|
-
parameters: {
|
|
13
|
-
docs: {
|
|
14
|
-
source: {
|
|
15
|
-
language: 'tsx',
|
|
16
|
-
format: true,
|
|
17
|
-
type: 'code',
|
|
18
|
-
},
|
|
19
|
-
story: {
|
|
20
|
-
inline: false,
|
|
21
|
-
iframeHeight: 400,
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
argTypes: {
|
|
26
|
-
snapPoints: {
|
|
27
|
-
control: 'select',
|
|
28
|
-
options: [
|
|
29
|
-
undefined,
|
|
30
|
-
'full',
|
|
31
|
-
'medium',
|
|
32
|
-
'small',
|
|
33
|
-
'[150, 300]',
|
|
34
|
-
'["25%", "50%"]',
|
|
35
|
-
],
|
|
36
|
-
mapping: {
|
|
37
|
-
undefined: undefined,
|
|
38
|
-
full: 'full',
|
|
39
|
-
medium: 'medium',
|
|
40
|
-
small: 'small',
|
|
41
|
-
'[150, 300]': [150, 300],
|
|
42
|
-
'["25%", "50%"]': ['25%', '50%'],
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
onBack: {
|
|
46
|
-
control: 'select',
|
|
47
|
-
options: ['() => {}', 'undefined'],
|
|
48
|
-
mapping: {
|
|
49
|
-
'() => {}': () => {
|
|
50
|
-
return null;
|
|
51
|
-
},
|
|
52
|
-
undefined: undefined,
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
onClose: {
|
|
56
|
-
control: 'select',
|
|
57
|
-
options: ['() => {}', 'undefined'],
|
|
58
|
-
mapping: {
|
|
59
|
-
'() => {}': () => {
|
|
60
|
-
return null;
|
|
61
|
-
},
|
|
62
|
-
undefined: undefined,
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
onDismiss: {
|
|
66
|
-
control: 'select',
|
|
67
|
-
options: ['() => {}', 'undefined'],
|
|
68
|
-
mapping: {
|
|
69
|
-
'() => {}': () => {
|
|
70
|
-
return null;
|
|
71
|
-
},
|
|
72
|
-
undefined: undefined,
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
backdropPressBehavior: {
|
|
76
|
-
control: 'select',
|
|
77
|
-
options: ['none', 'close', 'collapse', 1],
|
|
78
|
-
mapping: {
|
|
79
|
-
none: 'none',
|
|
80
|
-
close: 'close',
|
|
81
|
-
collapse: 'collapse',
|
|
82
|
-
1: 1,
|
|
83
|
-
},
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
export default meta;
|
|
88
|
-
export const Base = {
|
|
89
|
-
args: {
|
|
90
|
-
snapPoints: 'full',
|
|
91
|
-
hideCloseButton: false,
|
|
92
|
-
onBack: undefined,
|
|
93
|
-
onClose: undefined,
|
|
94
|
-
enableHandlePanningGesture: true,
|
|
95
|
-
enablePanDownToClose: true,
|
|
96
|
-
enableBlurKeyboardOnGesture: true,
|
|
97
|
-
enableDynamicSizing: false,
|
|
98
|
-
detached: false,
|
|
99
|
-
backdropPressBehavior: 'close',
|
|
100
|
-
},
|
|
101
|
-
render: (args) => {
|
|
102
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
103
|
-
return (_jsxs(Box, { lx: {
|
|
104
|
-
height: 's320',
|
|
105
|
-
width: 'full',
|
|
106
|
-
alignItems: 'center',
|
|
107
|
-
justifyContent: 'center',
|
|
108
|
-
paddingTop: 's32',
|
|
109
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Title', appearance: 'compact', description: 'Description' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Et quia voluptates eum, sunt asperiores quod." }, index))) })] }) })] }));
|
|
110
|
-
},
|
|
111
|
-
};
|
|
112
|
-
export const TitleExpanded = {
|
|
113
|
-
args: {
|
|
114
|
-
snapPoints: 'full',
|
|
115
|
-
hideCloseButton: false,
|
|
116
|
-
enableHandlePanningGesture: true,
|
|
117
|
-
enablePanDownToClose: true,
|
|
118
|
-
enableBlurKeyboardOnGesture: true,
|
|
119
|
-
enableDynamicSizing: false,
|
|
120
|
-
detached: false,
|
|
121
|
-
},
|
|
122
|
-
render: (args) => {
|
|
123
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
124
|
-
return (_jsxs(Box, { lx: {
|
|
125
|
-
height: 's320',
|
|
126
|
-
width: 'full',
|
|
127
|
-
alignItems: 'center',
|
|
128
|
-
justifyContent: 'center',
|
|
129
|
-
paddingTop: 's32',
|
|
130
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Expanded title', appearance: 'expanded', description: 'Expanded description.' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: _jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla." }) })] }) })] }));
|
|
131
|
-
},
|
|
132
|
-
};
|
|
133
|
-
export const DynamicSizingWithoutSnapPoints = {
|
|
134
|
-
args: {
|
|
135
|
-
enableDynamicSizing: true,
|
|
136
|
-
snapPoints: null,
|
|
137
|
-
},
|
|
138
|
-
render: (args) => {
|
|
139
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
140
|
-
return (_jsxs(Box, { lx: {
|
|
141
|
-
height: 's320',
|
|
142
|
-
width: 'full',
|
|
143
|
-
alignItems: 'center',
|
|
144
|
-
justifyContent: 'center',
|
|
145
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 5 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
|
|
146
|
-
},
|
|
147
|
-
};
|
|
148
|
-
export const DynamicSizingWithSnapPoints = {
|
|
149
|
-
args: {
|
|
150
|
-
enableDynamicSizing: true,
|
|
151
|
-
snapPoints: [150, 300],
|
|
152
|
-
},
|
|
153
|
-
render: (args) => {
|
|
154
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
155
|
-
return (_jsxs(Box, { lx: {
|
|
156
|
-
height: 's320',
|
|
157
|
-
width: 'full',
|
|
158
|
-
alignItems: 'center',
|
|
159
|
-
justifyContent: 'center',
|
|
160
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height and has snap points' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
|
|
161
|
-
},
|
|
162
|
-
};
|
|
163
|
-
export const PreventClose = {
|
|
164
|
-
args: {
|
|
165
|
-
snapPoints: 'full',
|
|
166
|
-
hideCloseButton: true,
|
|
167
|
-
enablePanDownToClose: false,
|
|
168
|
-
backdropPressBehavior: 'none',
|
|
169
|
-
},
|
|
170
|
-
render: (args) => {
|
|
171
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
172
|
-
return (_jsxs(Box, { lx: {
|
|
173
|
-
height: 's320',
|
|
174
|
-
width: 'full',
|
|
175
|
-
alignItems: 'center',
|
|
176
|
-
justifyContent: 'center',
|
|
177
|
-
paddingTop: 's32',
|
|
178
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Hidden Close Button', appearance: 'compact', description: 'This bottom sheet cannot be closed by dragging or button' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": This bottom sheet stays open and cannot be dismissed by the user. You would need to programmatically close it using the ref."] }, index))) })] }) })] }));
|
|
179
|
-
},
|
|
180
|
-
};
|
|
181
|
-
export const ScrollView = {
|
|
182
|
-
args: {
|
|
183
|
-
snapPoints: 'full',
|
|
184
|
-
},
|
|
185
|
-
render: (args) => {
|
|
186
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
187
|
-
return (_jsxs(Box, { lx: {
|
|
188
|
-
height: 's320',
|
|
189
|
-
width: 'full',
|
|
190
|
-
alignItems: 'center',
|
|
191
|
-
justifyContent: 'center',
|
|
192
|
-
backgroundColor: 'base',
|
|
193
|
-
paddingTop: 's32',
|
|
194
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Scrollable Content', appearance: 'compact', description: 'This bottom sheet contains a scrollable view' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 20 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor!"] }, index))) })] }) })] }));
|
|
195
|
-
},
|
|
196
|
-
};
|
|
197
|
-
export const VirtualList = {
|
|
198
|
-
args: {
|
|
199
|
-
snapPoints: 'full',
|
|
200
|
-
},
|
|
201
|
-
render: (args) => {
|
|
202
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
203
|
-
const data = Array.from({ length: 100 }, (_, i) => ({
|
|
204
|
-
id: i.toString(),
|
|
205
|
-
title: `Item ${i + 1}`,
|
|
206
|
-
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
|
|
207
|
-
}));
|
|
208
|
-
return (_jsxs(Box, { lx: {
|
|
209
|
-
height: 's320',
|
|
210
|
-
width: 'full',
|
|
211
|
-
alignItems: 'center',
|
|
212
|
-
justifyContent: 'center',
|
|
213
|
-
paddingTop: 's32',
|
|
214
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtual List', appearance: 'compact', description: 'This bottom sheet contains a virtualized list' }), _jsx(BottomSheetFlatList, { data: data, keyExtractor: (item) => item.id, renderItem: ({ item }) => {
|
|
215
|
-
const typedItem = item;
|
|
216
|
-
return (_jsxs(Box, { lx: {
|
|
217
|
-
flexDirection: 'column',
|
|
218
|
-
gap: 's4',
|
|
219
|
-
borderBottomWidth: 's1',
|
|
220
|
-
borderColor: 'base',
|
|
221
|
-
paddingVertical: 's12',
|
|
222
|
-
}, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: 'base' }, children: typedItem.title }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: typedItem.description })] }));
|
|
223
|
-
} })] })] }));
|
|
224
|
-
},
|
|
225
|
-
};
|
|
226
|
-
export const VirtualizedList = {
|
|
227
|
-
args: {
|
|
228
|
-
snapPoints: 'full',
|
|
229
|
-
hideCloseButton: false,
|
|
230
|
-
enableHandlePanningGesture: true,
|
|
231
|
-
enablePanDownToClose: true,
|
|
232
|
-
enableBlurKeyboardOnGesture: true,
|
|
233
|
-
enableDynamicSizing: false,
|
|
234
|
-
detached: false,
|
|
235
|
-
},
|
|
236
|
-
render: (args) => {
|
|
237
|
-
const bottomSheetRef = useBottomSheetRef();
|
|
238
|
-
const data = Array.from({ length: 100 }, (_, i) => ({
|
|
239
|
-
id: i.toString(),
|
|
240
|
-
title: `Item ${i + 1}`,
|
|
241
|
-
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
|
|
242
|
-
}));
|
|
243
|
-
return (_jsxs(Box, { lx: {
|
|
244
|
-
height: 's320',
|
|
245
|
-
width: 'full',
|
|
246
|
-
alignItems: 'center',
|
|
247
|
-
justifyContent: 'center',
|
|
248
|
-
paddingTop: 's32',
|
|
249
|
-
}, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtualized List', appearance: 'compact', description: 'This bottom sheet uses a VirtualizedList with custom getItem/getItemCount' }), _jsx(BottomSheetVirtualizedList, { data: data, getItem: (items, index) => {
|
|
250
|
-
const typedData = items;
|
|
251
|
-
return typedData[index];
|
|
252
|
-
}, getItemCount: (items) => {
|
|
253
|
-
const typedData = items;
|
|
254
|
-
return typedData.length;
|
|
255
|
-
}, keyExtractor: (item) => item.id, renderItem: ({ item }) => {
|
|
256
|
-
const typedItem = item;
|
|
257
|
-
return (_jsxs(Box, { lx: {
|
|
258
|
-
flexDirection: 'column',
|
|
259
|
-
gap: 's4',
|
|
260
|
-
borderBottomWidth: 's1',
|
|
261
|
-
borderColor: 'base',
|
|
262
|
-
paddingVertical: 's12',
|
|
263
|
-
}, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: 'base' }, children: typedItem.title }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: typedItem.description })] }));
|
|
264
|
-
} })] })] }));
|
|
265
|
-
},
|
|
266
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Button } from './Button';
|
|
3
|
-
declare const meta: Meta<typeof Button>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Button>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const IconText: Story;
|
|
8
|
-
export declare const Loading: Story;
|
|
9
|
-
export declare const AppearanceShowcase: Story;
|
|
10
|
-
export declare const ContentTypesShowcase: Story;
|
|
11
|
-
export declare const SizesShowcase: Story;
|
|
12
|
-
export declare const StatesShowcase: Story;
|
|
13
|
-
export declare const ResponsiveLayout: Story;
|
|
14
|
-
export declare const LabelTruncate: Story;
|
|
15
|
-
export declare const InteractiveLoadingStates: Story;
|
|
16
|
-
//# sourceMappingURL=Button.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AASrC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAsCtC,CAAC"}
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Plus, Settings } from '../../Symbols';
|
|
4
|
-
import { Box, Text } from '../Utility';
|
|
5
|
-
import { Button } from './Button';
|
|
6
|
-
const meta = {
|
|
7
|
-
component: Button,
|
|
8
|
-
title: 'Action/Button',
|
|
9
|
-
parameters: {
|
|
10
|
-
docs: {
|
|
11
|
-
source: {
|
|
12
|
-
language: 'tsx',
|
|
13
|
-
format: true,
|
|
14
|
-
type: 'code',
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
argTypes: {
|
|
19
|
-
appearance: {
|
|
20
|
-
control: 'select',
|
|
21
|
-
icon: {
|
|
22
|
-
control: 'select',
|
|
23
|
-
description: 'Optional icon component to display',
|
|
24
|
-
options: ['None', 'Plus', 'Settings'],
|
|
25
|
-
mapping: {
|
|
26
|
-
None: undefined,
|
|
27
|
-
Plus: Plus,
|
|
28
|
-
Settings: Settings,
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
export default meta;
|
|
35
|
-
export const Base = {
|
|
36
|
-
args: {
|
|
37
|
-
appearance: 'base',
|
|
38
|
-
children: 'Base Button',
|
|
39
|
-
},
|
|
40
|
-
render: (args) => _jsx(Button, { ...args }),
|
|
41
|
-
parameters: {
|
|
42
|
-
docs: {
|
|
43
|
-
source: {
|
|
44
|
-
code: `
|
|
45
|
-
<Button appearance="base">
|
|
46
|
-
Base Button
|
|
47
|
-
</Button>
|
|
48
|
-
`,
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
export const IconText = {
|
|
54
|
-
args: {
|
|
55
|
-
appearance: 'base',
|
|
56
|
-
children: 'Add Item',
|
|
57
|
-
icon: Plus,
|
|
58
|
-
},
|
|
59
|
-
parameters: {
|
|
60
|
-
docs: {
|
|
61
|
-
source: {
|
|
62
|
-
code: `
|
|
63
|
-
<Button
|
|
64
|
-
appearance="base"
|
|
65
|
-
icon={Plus}
|
|
66
|
-
>
|
|
67
|
-
Add Item
|
|
68
|
-
</Button>
|
|
69
|
-
`,
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
};
|
|
74
|
-
export const Loading = {
|
|
75
|
-
args: {
|
|
76
|
-
appearance: 'base',
|
|
77
|
-
children: 'Loading...',
|
|
78
|
-
loading: true,
|
|
79
|
-
},
|
|
80
|
-
parameters: {
|
|
81
|
-
docs: {
|
|
82
|
-
source: {
|
|
83
|
-
code: `
|
|
84
|
-
<Button
|
|
85
|
-
appearance="base"
|
|
86
|
-
loading
|
|
87
|
-
>
|
|
88
|
-
Loading...
|
|
89
|
-
</Button>
|
|
90
|
-
`,
|
|
91
|
-
},
|
|
92
|
-
},
|
|
93
|
-
},
|
|
94
|
-
};
|
|
95
|
-
export const AppearanceShowcase = {
|
|
96
|
-
render: () => {
|
|
97
|
-
const appearances = [
|
|
98
|
-
{ name: 'Accent', appearance: 'accent' },
|
|
99
|
-
{ name: 'Base', appearance: 'base' },
|
|
100
|
-
{ name: 'Gray', appearance: 'gray' },
|
|
101
|
-
{ name: 'Transparent', appearance: 'transparent' },
|
|
102
|
-
{ name: 'No Background', appearance: 'no-background' },
|
|
103
|
-
{ name: 'Red', appearance: 'red' },
|
|
104
|
-
];
|
|
105
|
-
return (_jsx(Box, { lx: { flexDirection: 'row', gap: 's16', padding: 's8' }, children: appearances.map(({ name, appearance }) => (_jsx(Button, { appearance: appearance, children: name }, appearance))) }));
|
|
106
|
-
},
|
|
107
|
-
};
|
|
108
|
-
export const ContentTypesShowcase = {
|
|
109
|
-
render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'base', children: "Text Only" }), _jsx(Button, { appearance: 'base', icon: Plus, children: "With Icon" })] })),
|
|
110
|
-
};
|
|
111
|
-
export const SizesShowcase = {
|
|
112
|
-
render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'base', size: 'sm', children: "Small" }), _jsx(Button, { appearance: 'base', size: 'md', children: "Medium" }), _jsx(Button, { appearance: 'base', size: 'lg', icon: Settings, children: "Large" })] })),
|
|
113
|
-
};
|
|
114
|
-
export const StatesShowcase = {
|
|
115
|
-
render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'base', children: "Default" }), _jsx(Button, { appearance: 'base', disabled: true, children: "Disabled" }), _jsx(Button, { appearance: 'base', loading: true, children: "Loading" }), _jsx(Button, { appearance: 'base', loading: true, disabled: true, children: "Loading" })] })),
|
|
116
|
-
};
|
|
117
|
-
export const ResponsiveLayout = {
|
|
118
|
-
render: () => (_jsxs(Box, { lx: {
|
|
119
|
-
flexDirection: 'column',
|
|
120
|
-
gap: 's8',
|
|
121
|
-
padding: 's8',
|
|
122
|
-
alignItems: 'flex-start',
|
|
123
|
-
}, children: [_jsx(Button, { appearance: 'base', children: "Short" }), _jsx(Button, { appearance: 'base', children: "Medium length button" }), _jsx(Button, { appearance: 'base', icon: Plus, children: "This is a longer button text to show dynamic width" })] })),
|
|
124
|
-
};
|
|
125
|
-
export const LabelTruncate = {
|
|
126
|
-
render: () => (_jsxs(Box, { children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted' }, children: "This container has a fixed width." }), _jsx(Box, { lx: { width: 's400', padding: 's16' }, children: _jsx(Button, { icon: Plus, children: "This Base button has a fixed width container that should fit the content width." }) })] })),
|
|
127
|
-
};
|
|
128
|
-
export const InteractiveLoadingStates = {
|
|
129
|
-
render: () => {
|
|
130
|
-
const [states, setStates] = React.useState({
|
|
131
|
-
text: 'idle',
|
|
132
|
-
withIcon: 'idle',
|
|
133
|
-
iconOnly: 'idle',
|
|
134
|
-
});
|
|
135
|
-
const handleClick = async (key) => {
|
|
136
|
-
setStates((prev) => ({ ...prev, [key]: 'loading' }));
|
|
137
|
-
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
138
|
-
setStates((prev) => ({ ...prev, [key]: 'red' }));
|
|
139
|
-
setTimeout(() => setStates((prev) => ({ ...prev, [key]: 'idle' })), 2000);
|
|
140
|
-
};
|
|
141
|
-
return (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'red', loading: states.text === 'loading', onPress: () => handleClick('text'), children: states.text === 'red' ? 'Error!' : 'Text Only' }), _jsx(Button, { appearance: 'base', loading: states.withIcon === 'loading', onPress: () => handleClick('withIcon'), icon: Settings, children: states.withIcon === 'red' ? 'Settings Error!' : 'With Icon' })] }));
|
|
142
|
-
},
|
|
143
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { CardButton } from './CardButton';
|
|
3
|
-
declare const meta: Meta<typeof CardButton>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof CardButton>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const WithIcon: Story;
|
|
8
|
-
export declare const WithDescription: Story;
|
|
9
|
-
export declare const WithoutChevron: Story;
|
|
10
|
-
export declare const FullFeatures: Story;
|
|
11
|
-
export declare const NaturalWidth: Story;
|
|
12
|
-
export declare const AppearanceShowcase: Story;
|
|
13
|
-
export declare const ContentVariations: Story;
|
|
14
|
-
export declare const StatesShowcase: Story;
|
|
15
|
-
export declare const ResponsiveLayout: Story;
|
|
16
|
-
//# sourceMappingURL=CardButton.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/CardButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA6CjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAGzC,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA+BhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAsC/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAkC9B,CAAC"}
|
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Settings, Plus, Coins, CreditCard, Bank } from '../../Symbols';
|
|
3
|
-
import { Box, Text } from '../Utility';
|
|
4
|
-
import { CardButton } from './CardButton';
|
|
5
|
-
const meta = {
|
|
6
|
-
component: CardButton,
|
|
7
|
-
title: 'Action/CardButton',
|
|
8
|
-
parameters: {
|
|
9
|
-
docs: {
|
|
10
|
-
source: {
|
|
11
|
-
language: 'tsx',
|
|
12
|
-
format: true,
|
|
13
|
-
type: 'code',
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
argTypes: {
|
|
18
|
-
appearance: {
|
|
19
|
-
control: 'select',
|
|
20
|
-
options: ['base', 'outline'],
|
|
21
|
-
description: 'The visual style appearance of the card button',
|
|
22
|
-
},
|
|
23
|
-
title: {
|
|
24
|
-
control: 'text',
|
|
25
|
-
description: 'The main title text for the card button',
|
|
26
|
-
},
|
|
27
|
-
description: {
|
|
28
|
-
control: 'text',
|
|
29
|
-
description: 'Optional description text displayed below the title',
|
|
30
|
-
},
|
|
31
|
-
icon: {
|
|
32
|
-
control: 'select',
|
|
33
|
-
description: 'Optional icon component to display',
|
|
34
|
-
options: ['None', 'Plus', 'Settings'],
|
|
35
|
-
mapping: {
|
|
36
|
-
None: undefined,
|
|
37
|
-
Plus: Plus,
|
|
38
|
-
Settings: Settings,
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
hideChevron: {
|
|
42
|
-
control: 'boolean',
|
|
43
|
-
description: 'Whether to hide the chevron right icon on the right side',
|
|
44
|
-
},
|
|
45
|
-
disabled: {
|
|
46
|
-
control: 'boolean',
|
|
47
|
-
description: 'Whether the card button is disabled',
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
export default meta;
|
|
52
|
-
export const Base = {
|
|
53
|
-
args: {
|
|
54
|
-
appearance: 'base',
|
|
55
|
-
title: 'Basic Card Button',
|
|
56
|
-
},
|
|
57
|
-
render: (args) => _jsx(CardButton, { ...args }),
|
|
58
|
-
parameters: {
|
|
59
|
-
docs: {
|
|
60
|
-
source: {
|
|
61
|
-
code: `
|
|
62
|
-
<CardButton
|
|
63
|
-
appearance="base"
|
|
64
|
-
title="Basic Card Button"
|
|
65
|
-
/>
|
|
66
|
-
`,
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
};
|
|
71
|
-
export const WithIcon = {
|
|
72
|
-
args: {
|
|
73
|
-
appearance: 'base',
|
|
74
|
-
title: 'Settings',
|
|
75
|
-
icon: Settings,
|
|
76
|
-
},
|
|
77
|
-
parameters: {
|
|
78
|
-
docs: {
|
|
79
|
-
source: {
|
|
80
|
-
code: `
|
|
81
|
-
<CardButton
|
|
82
|
-
appearance="base"
|
|
83
|
-
title="Settings"
|
|
84
|
-
icon={Settings}
|
|
85
|
-
/>
|
|
86
|
-
`,
|
|
87
|
-
},
|
|
88
|
-
},
|
|
89
|
-
},
|
|
90
|
-
};
|
|
91
|
-
export const WithDescription = {
|
|
92
|
-
args: {
|
|
93
|
-
appearance: 'base',
|
|
94
|
-
title: 'Payment Method',
|
|
95
|
-
description: 'Add or manage your payment options',
|
|
96
|
-
},
|
|
97
|
-
parameters: {
|
|
98
|
-
docs: {
|
|
99
|
-
source: {
|
|
100
|
-
code: `
|
|
101
|
-
<CardButton
|
|
102
|
-
appearance="base"
|
|
103
|
-
title="Payment Method"
|
|
104
|
-
description="Add or manage your payment options"
|
|
105
|
-
/>
|
|
106
|
-
`,
|
|
107
|
-
},
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
};
|
|
111
|
-
export const WithoutChevron = {
|
|
112
|
-
args: {
|
|
113
|
-
appearance: 'base',
|
|
114
|
-
title: 'Navigate Forward',
|
|
115
|
-
hideChevron: true,
|
|
116
|
-
},
|
|
117
|
-
parameters: {
|
|
118
|
-
docs: {
|
|
119
|
-
source: {
|
|
120
|
-
code: `
|
|
121
|
-
<CardButton
|
|
122
|
-
appearance="base"
|
|
123
|
-
title="Navigate Forward"
|
|
124
|
-
hideChevron
|
|
125
|
-
/>
|
|
126
|
-
`,
|
|
127
|
-
},
|
|
128
|
-
},
|
|
129
|
-
},
|
|
130
|
-
};
|
|
131
|
-
export const FullFeatures = {
|
|
132
|
-
args: {
|
|
133
|
-
appearance: 'base',
|
|
134
|
-
title: 'Account Settings',
|
|
135
|
-
description: 'Manage your account preferences and security',
|
|
136
|
-
icon: Settings,
|
|
137
|
-
},
|
|
138
|
-
parameters: {
|
|
139
|
-
docs: {
|
|
140
|
-
source: {
|
|
141
|
-
code: `
|
|
142
|
-
<CardButton
|
|
143
|
-
appearance="base"
|
|
144
|
-
title="Account Settings"
|
|
145
|
-
description="Manage your account preferences and security"
|
|
146
|
-
icon={Settings}
|
|
147
|
-
/>
|
|
148
|
-
`,
|
|
149
|
-
},
|
|
150
|
-
},
|
|
151
|
-
},
|
|
152
|
-
};
|
|
153
|
-
export const NaturalWidth = {
|
|
154
|
-
render: () => (_jsxs(Box, { lx: { backgroundColor: 'mutedPressed', padding: 's16' }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted', marginBottom: 's16' }, children: "CardButton naturally flows to fill parent container width" }), _jsx(CardButton, { appearance: 'base', title: 'Natural Width Example', description: 'This card button demonstrates how it flows naturally to fill the full width of its parent container without any max-width constraints', icon: CreditCard })] })),
|
|
155
|
-
parameters: {
|
|
156
|
-
docs: {
|
|
157
|
-
source: {
|
|
158
|
-
code: `
|
|
159
|
-
<CardButton
|
|
160
|
-
appearance="base"
|
|
161
|
-
title="Natural Width Example"
|
|
162
|
-
description="This card button demonstrates how it flows naturally to fill the full width of its parent container without any max-width constraints"
|
|
163
|
-
icon={CreditCard}
|
|
164
|
-
/>
|
|
165
|
-
`,
|
|
166
|
-
},
|
|
167
|
-
},
|
|
168
|
-
},
|
|
169
|
-
};
|
|
170
|
-
export const AppearanceShowcase = {
|
|
171
|
-
render: () => {
|
|
172
|
-
const appearances = [
|
|
173
|
-
{ name: 'Base', appearance: 'base' },
|
|
174
|
-
{ name: 'Outline', appearance: 'outline' },
|
|
175
|
-
];
|
|
176
|
-
return (_jsx(Box, { lx: {
|
|
177
|
-
flexDirection: 'column',
|
|
178
|
-
gap: 's16',
|
|
179
|
-
padding: 's8',
|
|
180
|
-
maxWidth: 's400',
|
|
181
|
-
}, children: appearances.map(({ name, appearance }) => (_jsx(CardButton, { appearance: appearance, title: `${name} Appearance`, description: 'This demonstrates the appearance variation', icon: Coins }, appearance))) }));
|
|
182
|
-
},
|
|
183
|
-
};
|
|
184
|
-
export const ContentVariations = {
|
|
185
|
-
render: () => (_jsxs(Box, { lx: {
|
|
186
|
-
flexDirection: 'column',
|
|
187
|
-
gap: 's16',
|
|
188
|
-
padding: 's8',
|
|
189
|
-
maxWidth: 's400',
|
|
190
|
-
}, children: [_jsx(CardButton, { appearance: 'base', title: 'With Description', description: 'This card has a description below the title', hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'Icon and Description', description: 'This card has both an icon and description', icon: Settings, hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'Description and Chevron', description: 'This card has description and chevron' }), _jsx(CardButton, { appearance: 'base', title: 'Complete Card', description: 'This card has all optional features', icon: CreditCard }), _jsx(CardButton, { appearance: 'base', title: 'With Icon', icon: Plus, hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'With Chevron' })] })),
|
|
191
|
-
};
|
|
192
|
-
export const StatesShowcase = {
|
|
193
|
-
render: () => (_jsxs(Box, { lx: {
|
|
194
|
-
flexDirection: 'column',
|
|
195
|
-
gap: 's16',
|
|
196
|
-
padding: 's8',
|
|
197
|
-
maxWidth: 's400',
|
|
198
|
-
}, children: [_jsx(CardButton, { appearance: 'base', title: 'Base Default', description: 'This is the normal interactive state', icon: Settings }), _jsx(CardButton, { appearance: 'base', title: 'Base Disabled', description: 'This card button is disabled', icon: Settings, disabled: true }), _jsx(CardButton, { appearance: 'outline', title: 'Outline Default', description: 'This is the outline appearance', icon: Bank }), _jsx(CardButton, { appearance: 'outline', title: 'Outline Disabled', description: 'This is the disabled outline appearance', icon: Bank, disabled: true })] })),
|
|
199
|
-
};
|
|
200
|
-
export const ResponsiveLayout = {
|
|
201
|
-
render: () => (_jsxs(Box, { lx: {
|
|
202
|
-
width: 's320',
|
|
203
|
-
flexDirection: 'column',
|
|
204
|
-
gap: 's16',
|
|
205
|
-
backgroundColor: 'mutedPressed',
|
|
206
|
-
padding: 's16',
|
|
207
|
-
}, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted' }, children: "Container: 320px wide" }), _jsx(CardButton, { appearance: 'base', title: 'Short Title', description: 'Short description', icon: Plus }), _jsx(CardButton, { appearance: 'base', title: 'Full Width', description: 'Short description', icon: Plus }), _jsx(CardButton, { appearance: 'base', title: 'Longer Title That Might Overflow When Container is Smaller', description: 'This is a longer description that demonstrates how the card handles longer content within its constraints', icon: Settings })] })),
|
|
208
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Checkbox } from './Checkbox';
|
|
3
|
-
declare const meta: Meta<typeof Checkbox>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof meta>;
|
|
6
|
-
/**
|
|
7
|
-
* The base checkbox in its normal state.
|
|
8
|
-
*/
|
|
9
|
-
export declare const Base: Story;
|
|
10
|
-
/**
|
|
11
|
-
* Interactive example showing all states.
|
|
12
|
-
*/
|
|
13
|
-
export declare const AllStates: Story;
|
|
14
|
-
//# sourceMappingURL=Checkbox.stories.d.ts.map
|