@holper/react-native-holper-storybook 0.7.0 → 0.7.1
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/README.md +1 -1
- package/package.json +5 -1
- package/.expo/README.md +0 -8
- package/.nvmrc +0 -1
- package/.prettierignore +0 -5
- package/.storybook/index.jsx +0 -11
- package/.storybook/main.js +0 -8
- package/.storybook/preview.jsx +0 -51
- package/.storybook/storybook.requires.js +0 -43
- package/.yarn/releases/yarn-4.5.0.cjs +0 -925
- package/.yarnrc.yml +0 -3
- package/App.jsx +0 -29
- package/app.config.js +0 -77
- package/assets/adaptive-icon.png +0 -0
- package/assets/favicon.png +0 -0
- package/assets/fonts/Poppins-Bold.ttf +0 -0
- package/assets/fonts/Poppins-Regular.ttf +0 -0
- package/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/assets/icon.png +0 -0
- package/assets/splash.png +0 -0
- package/babel.config.js +0 -7
- package/build.sh +0 -11
- package/components/Button/index.tsx +0 -66
- package/components/Button/style.ts +0 -111
- package/components/Card/index.tsx +0 -33
- package/components/Card/style.ts +0 -34
- package/components/ConfirmationModal/index.tsx +0 -104
- package/components/ConfirmationModal/style.tsx +0 -53
- package/components/Container/index.tsx +0 -33
- package/components/Container/style.ts +0 -13
- package/components/CustomChatView/index.tsx +0 -65
- package/components/CustomChatView/style.ts +0 -10
- package/components/DeckSwiper/index.tsx +0 -90
- package/components/DeckSwiper/style.ts +0 -59
- package/components/DonutCountdown/index.tsx +0 -86
- package/components/DonutCountdown/style.ts +0 -8
- package/components/FloatingContainer/index.tsx +0 -35
- package/components/FloatingContainer/style.ts +0 -25
- package/components/Footer/index.tsx +0 -35
- package/components/Footer/style.ts +0 -40
- package/components/Header/index.tsx +0 -21
- package/components/Header/style.ts +0 -34
- package/components/ImagePicker/index.tsx +0 -18
- package/components/ImageResponsive/index.tsx +0 -24
- package/components/ImageResponsive/style.ts +0 -9
- package/components/ImageViewer/index.tsx +0 -36
- package/components/ImageViewer/style.ts +0 -38
- package/components/Input/index.tsx +0 -62
- package/components/Input/style.ts +0 -91
- package/components/InputPin/index.tsx +0 -21
- package/components/InputPin/style.ts +0 -22
- package/components/MenuItem/index.tsx +0 -25
- package/components/MenuItem/style.ts +0 -44
- package/components/NavigationTitle/index.tsx +0 -53
- package/components/NavigationTitle/style.ts +0 -49
- package/components/Notification/index.tsx +0 -44
- package/components/Notification/style.ts +0 -50
- package/components/PreventDoubleClick/index.tsx +0 -28
- package/components/Select/index.tsx +0 -51
- package/components/Select/style.ts +0 -64
- package/components/SwipeablePanel/index.tsx +0 -208
- package/components/SwipeablePanel/style.ts +0 -81
- package/components/Switch/index.tsx +0 -30
- package/components/TakePicture/confirmPictureModal.tsx +0 -37
- package/components/TakePicture/index.tsx +0 -148
- package/components/TakePicture/style.ts +0 -95
- package/components/Text/index.tsx +0 -33
- package/components/Text/style.ts +0 -101
- package/components/Textarea/index.tsx +0 -26
- package/components/Textarea/style.ts +0 -38
- package/components/TimeOutButton/index.tsx +0 -67
- package/components/TimeOutButton/style.ts +0 -42
- package/components/Toast/index.tsx +0 -34
- package/components/Toast/style.ts +0 -12
- package/components/UploadDocument/index.tsx +0 -179
- package/components/UploadDocument/style.ts +0 -57
- package/components/VirtualKeyboard/index.tsx +0 -75
- package/components/VirtualKeyboard/style.ts +0 -25
- package/components/index.ts +0 -29
- package/configs/constants.ts +0 -273
- package/configs/types.ts +0 -326
- package/eas.json +0 -27
- package/eslint.config.mjs +0 -205
- package/hooks/index.ts +0 -2
- package/hooks/useDebounce.tsx +0 -24
- package/hooks/useLoadFonts.tsx +0 -13
- package/metro.config.js +0 -11
- package/prettier.config.mjs +0 -23
- package/stories/Button.stories.tsx +0 -181
- package/stories/Card.stories.tsx +0 -22
- package/stories/Colors.stories.tsx +0 -57
- package/stories/ConfirmationModal.stories.tsx +0 -142
- package/stories/Container.stories.tsx +0 -105
- package/stories/DeckSwiper.stories.tsx +0 -43
- package/stories/DonutCountdown.stories.tsx +0 -134
- package/stories/FloatingContainer.stories.tsx +0 -139
- package/stories/Footer.stories.tsx +0 -65
- package/stories/Header.stories.tsx +0 -37
- package/stories/ImagePicker.stories.tsx +0 -14
- package/stories/ImageResponsive.stories.tsx +0 -18
- package/stories/ImageViewer.stories.tsx +0 -24
- package/stories/Input.stories.tsx +0 -119
- package/stories/InputPin.stories.tsx +0 -40
- package/stories/Menu.stories.tsx +0 -53
- package/stories/MenuItem.stories.tsx +0 -30
- package/stories/NavigationTitle.stories.tsx +0 -51
- package/stories/Notification.stories.tsx +0 -58
- package/stories/Select.stories.tsx +0 -270
- package/stories/SwipeablePanel.stories.tsx +0 -360
- package/stories/Switch.stories.tsx +0 -36
- package/stories/TakePicture.stories.tsx +0 -59
- package/stories/Text.stories.tsx +0 -61
- package/stories/Textarea.stories.tsx +0 -48
- package/stories/TimeOutButton.stories.tsx +0 -55
- package/stories/Toast.stories.tsx +0 -37
- package/stories/UploadDocument.stories.tsx +0 -179
- package/stories/VirtualKeyboard.stories.tsx +0 -14
- package/tsconfig.json +0 -21
- package/utilities/ScrollView.tsx +0 -19
- package/utilities/index.ts +0 -2
- package/utilities/utils.ts +0 -29
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import { Container, Input, Text } from '../components';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Container',
|
|
5
|
-
component: Container,
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export const Default = {
|
|
9
|
-
render: () => (
|
|
10
|
-
<Container fullScreen style={{ padding: 20, alignItems: 'center' }}>
|
|
11
|
-
<Text size="large" variant="uppercase" weight="bold">
|
|
12
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
13
|
-
</Text>
|
|
14
|
-
<Input placeholder="Placeholder" />
|
|
15
|
-
<Text>
|
|
16
|
-
{'\n'}
|
|
17
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
18
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
19
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
20
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
21
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
22
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit metus,
|
|
23
|
-
id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
24
|
-
</Text>
|
|
25
|
-
</Container>
|
|
26
|
-
),
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export const WithScroll = {
|
|
30
|
-
render: () => (
|
|
31
|
-
<Container enableScroll fullScreen style={{ padding: 20 }} scrollStyle={{ alignItems: 'center' }}>
|
|
32
|
-
<Text size="large" variant="uppercase" weight="bold">
|
|
33
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
34
|
-
</Text>
|
|
35
|
-
<Input placeholder="Placeholder" />
|
|
36
|
-
<Text>
|
|
37
|
-
{'\n'}
|
|
38
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
39
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
40
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
41
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
42
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
43
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit metus,
|
|
44
|
-
id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
45
|
-
{'\n'}
|
|
46
|
-
{'\n'}
|
|
47
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
48
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
49
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
50
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. Morbi at rutrum sem.
|
|
51
|
-
{'\n'}
|
|
52
|
-
{'\n'}
|
|
53
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
54
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
55
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
56
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
57
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
58
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit metus,
|
|
59
|
-
id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
60
|
-
{'\n'}
|
|
61
|
-
{'\n'}
|
|
62
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
63
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
64
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
65
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. sMorbi at rutrum sem.
|
|
66
|
-
{'\n'}
|
|
67
|
-
{'\n'}
|
|
68
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
69
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
70
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
71
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
72
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
73
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit metus,
|
|
74
|
-
id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
75
|
-
{'\n'}
|
|
76
|
-
{'\n'}
|
|
77
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
78
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
79
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
80
|
-
tristique turpis ligula, quis interdum tellus vehicula semper.
|
|
81
|
-
{'\n'}
|
|
82
|
-
{'\n'}
|
|
83
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
84
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
85
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
86
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. sMorbi at rutrum sem.
|
|
87
|
-
{'\n'}
|
|
88
|
-
{'\n'}
|
|
89
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
90
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
91
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
92
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
93
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
94
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit metus,
|
|
95
|
-
id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
96
|
-
{'\n'}
|
|
97
|
-
{'\n'}
|
|
98
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
99
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
100
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
101
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. Morbi at rutrum sem.
|
|
102
|
-
</Text>
|
|
103
|
-
</Container>
|
|
104
|
-
),
|
|
105
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { DeckSwiper } from '../components';
|
|
2
|
-
|
|
3
|
-
import type { DeckSwiperProps } from '../configs/types';
|
|
4
|
-
|
|
5
|
-
const data: DeckSwiperProps['data'] = [
|
|
6
|
-
{
|
|
7
|
-
title: 'Lorem ipsum dolor sit amet',
|
|
8
|
-
description:
|
|
9
|
-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo commodo urna. Vivamus volutpat non lectus non ultrices. Cras metus massa, cursus eget consequat eu, vehicula quis eros. Fusce ex dolor, interdum et neque sed, sollicitudin vehicula justo.',
|
|
10
|
-
image: { uri: 'https://picsum.photos/200?random=1' },
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
title: 'Quisque orci enim',
|
|
14
|
-
description:
|
|
15
|
-
'Cras non molestie justo. Aliquam pharetra libero sit amet nisi dictum aliquam. Nunc iaculis, augue sit amet eleifend ullamcorper, purus felis interdum justo, eget congue velit nisi ac turpis.',
|
|
16
|
-
image: { uri: 'https://picsum.photos/200?random=2' },
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
title: 'Duis iaculis tortor ornare',
|
|
20
|
-
description:
|
|
21
|
-
'Sed dictum, massa ac volutpat commodo, risus elit malesuada lorem, et blandit nibh leo sed magna. Maecenas massa enim, ultrices ut ultricies ut, placerat non orci.',
|
|
22
|
-
image: { uri: 'https://picsum.photos/200?random=3' },
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
title: 'Ut at laoreet libero',
|
|
26
|
-
description:
|
|
27
|
-
'Pellentesque pharetra aliquet nunc at hendrerit. Suspendisse interdum quam varius volutpat consequat. Nunc accumsan vel ligula nec tincidunt.',
|
|
28
|
-
image: { uri: 'https://picsum.photos/200?random=4' },
|
|
29
|
-
},
|
|
30
|
-
];
|
|
31
|
-
|
|
32
|
-
export default {
|
|
33
|
-
title: 'DeckSwiper',
|
|
34
|
-
component: DeckSwiper,
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export const Default = {
|
|
38
|
-
render: () => <DeckSwiper data={data} nextText="Next" onChange={() => {}} onFinish={() => {}} />,
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export const Inverted = {
|
|
42
|
-
render: () => <DeckSwiper inverted data={data} nextText="Next" onChange={() => {}} onFinish={() => {}} />,
|
|
43
|
-
};
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { DonutCountdown } from '../components';
|
|
2
|
-
import { Colors } from '../configs/constants';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'DonutCountdown',
|
|
6
|
-
component: DonutCountdown,
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
export const Default = {
|
|
10
|
-
render: () => (
|
|
11
|
-
<DonutCountdown
|
|
12
|
-
duration={10}
|
|
13
|
-
radius={80}
|
|
14
|
-
color={Colors.green}
|
|
15
|
-
textColor={Colors.darkgray}
|
|
16
|
-
onComplete={() => console.log('Timer finished!')}
|
|
17
|
-
/>
|
|
18
|
-
),
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export const strokeWidth = {
|
|
22
|
-
render: () => (
|
|
23
|
-
<>
|
|
24
|
-
<DonutCountdown
|
|
25
|
-
duration={10}
|
|
26
|
-
radius={80}
|
|
27
|
-
strokeWidth={20}
|
|
28
|
-
color={Colors.green}
|
|
29
|
-
textColor={Colors.darkgray}
|
|
30
|
-
onComplete={() => console.log('Timer finished!')}
|
|
31
|
-
/>
|
|
32
|
-
<DonutCountdown
|
|
33
|
-
duration={10}
|
|
34
|
-
radius={80}
|
|
35
|
-
strokeWidth={10}
|
|
36
|
-
color={Colors.green}
|
|
37
|
-
textColor={Colors.darkgray}
|
|
38
|
-
onComplete={() => console.log('Timer finished!')}
|
|
39
|
-
/>
|
|
40
|
-
<DonutCountdown
|
|
41
|
-
duration={10}
|
|
42
|
-
radius={80}
|
|
43
|
-
strokeWidth={3}
|
|
44
|
-
color={Colors.green}
|
|
45
|
-
textColor={Colors.darkgray}
|
|
46
|
-
onComplete={() => console.log('Timer finished!')}
|
|
47
|
-
/>
|
|
48
|
-
</>
|
|
49
|
-
),
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export const Radius = {
|
|
53
|
-
render: () => (
|
|
54
|
-
<>
|
|
55
|
-
<DonutCountdown
|
|
56
|
-
duration={10}
|
|
57
|
-
radius={120}
|
|
58
|
-
color={Colors.green}
|
|
59
|
-
textColor={Colors.darkgray}
|
|
60
|
-
onComplete={() => console.log('Timer finished!')}
|
|
61
|
-
/>
|
|
62
|
-
<DonutCountdown
|
|
63
|
-
duration={10}
|
|
64
|
-
radius={60}
|
|
65
|
-
color={Colors.green}
|
|
66
|
-
textColor={Colors.darkgray}
|
|
67
|
-
onComplete={() => console.log('Timer finished!')}
|
|
68
|
-
/>
|
|
69
|
-
<DonutCountdown
|
|
70
|
-
duration={10}
|
|
71
|
-
radius={30}
|
|
72
|
-
color={Colors.green}
|
|
73
|
-
textColor={Colors.darkgray}
|
|
74
|
-
onComplete={() => console.log('Timer finished!')}
|
|
75
|
-
/>
|
|
76
|
-
</>
|
|
77
|
-
),
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
export const Duration = {
|
|
81
|
-
render: () => (
|
|
82
|
-
<>
|
|
83
|
-
<DonutCountdown
|
|
84
|
-
duration={50}
|
|
85
|
-
radius={80}
|
|
86
|
-
color={Colors.green}
|
|
87
|
-
textColor={Colors.darkgray}
|
|
88
|
-
onComplete={() => console.log('Timer finished!')}
|
|
89
|
-
/>
|
|
90
|
-
<DonutCountdown
|
|
91
|
-
duration={30}
|
|
92
|
-
radius={80}
|
|
93
|
-
color={Colors.green}
|
|
94
|
-
textColor={Colors.darkgray}
|
|
95
|
-
onComplete={() => console.log('Timer finished!')}
|
|
96
|
-
/>
|
|
97
|
-
<DonutCountdown
|
|
98
|
-
duration={10}
|
|
99
|
-
radius={80}
|
|
100
|
-
color={Colors.green}
|
|
101
|
-
textColor={Colors.darkgray}
|
|
102
|
-
onComplete={() => console.log('Timer finished!')}
|
|
103
|
-
/>
|
|
104
|
-
</>
|
|
105
|
-
),
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
export const Colorize = {
|
|
109
|
-
render: () => (
|
|
110
|
-
<>
|
|
111
|
-
<DonutCountdown
|
|
112
|
-
duration={10}
|
|
113
|
-
radius={80}
|
|
114
|
-
color={Colors.red}
|
|
115
|
-
textColor={Colors.green}
|
|
116
|
-
onComplete={() => console.log('Timer finished!')}
|
|
117
|
-
/>
|
|
118
|
-
<DonutCountdown
|
|
119
|
-
duration={10}
|
|
120
|
-
radius={80}
|
|
121
|
-
color={Colors.electricblue}
|
|
122
|
-
textColor={Colors.darkgray}
|
|
123
|
-
onComplete={() => console.log('Timer finished!')}
|
|
124
|
-
/>
|
|
125
|
-
<DonutCountdown
|
|
126
|
-
duration={10}
|
|
127
|
-
radius={80}
|
|
128
|
-
color={Colors.brightviolet}
|
|
129
|
-
textColor={Colors.violet}
|
|
130
|
-
onComplete={() => console.log('Timer finished!')}
|
|
131
|
-
/>
|
|
132
|
-
</>
|
|
133
|
-
),
|
|
134
|
-
};
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import { View } from 'react-native';
|
|
2
|
-
|
|
3
|
-
import { Button, FloatingContainer, Text } from '../components';
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: 'Floating Container',
|
|
7
|
-
component: FloatingContainer,
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const Default = {
|
|
11
|
-
render: () => (
|
|
12
|
-
<FloatingContainer
|
|
13
|
-
floatingComponent={
|
|
14
|
-
<Button>
|
|
15
|
-
<Text color="white">Button text</Text>
|
|
16
|
-
</Button>
|
|
17
|
-
}
|
|
18
|
-
>
|
|
19
|
-
<View style={{ padding: 20 }}>
|
|
20
|
-
<Text size="large" variant="uppercase" weight="bold">
|
|
21
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
22
|
-
</Text>
|
|
23
|
-
<Text>
|
|
24
|
-
{'\n'}
|
|
25
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
26
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
27
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
28
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
29
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
30
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit
|
|
31
|
-
metus, id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
32
|
-
{'\n'}
|
|
33
|
-
{'\n'}
|
|
34
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
35
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
36
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
37
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. Morbi at rutrum sem.
|
|
38
|
-
{'\n'}
|
|
39
|
-
{'\n'}
|
|
40
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
41
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
42
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
43
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
44
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
45
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit
|
|
46
|
-
metus, id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
47
|
-
{'\n'}
|
|
48
|
-
{'\n'}
|
|
49
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
50
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
51
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
52
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. sMorbi at rutrum sem.
|
|
53
|
-
{'\n'}
|
|
54
|
-
{'\n'}
|
|
55
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
56
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
57
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
58
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
59
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
60
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit
|
|
61
|
-
metus, id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
62
|
-
{'\n'}
|
|
63
|
-
{'\n'}
|
|
64
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
65
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
66
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
67
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. Morbi at rutrum sem.
|
|
68
|
-
</Text>
|
|
69
|
-
</View>
|
|
70
|
-
</FloatingContainer>
|
|
71
|
-
),
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export const RefreshControl = {
|
|
75
|
-
render: () => (
|
|
76
|
-
<FloatingContainer
|
|
77
|
-
useRefreshControl
|
|
78
|
-
isRefreshing={false}
|
|
79
|
-
onRefresh={() => {}}
|
|
80
|
-
floatingComponent={
|
|
81
|
-
<Button>
|
|
82
|
-
<Text color="white">Button text</Text>
|
|
83
|
-
</Button>
|
|
84
|
-
}
|
|
85
|
-
>
|
|
86
|
-
<View style={{ padding: 20 }}>
|
|
87
|
-
<Text size="large" variant="uppercase" weight="bold">
|
|
88
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
89
|
-
</Text>
|
|
90
|
-
<Text>
|
|
91
|
-
{'\n'}
|
|
92
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
93
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
94
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
95
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
96
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
97
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit
|
|
98
|
-
metus, id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
99
|
-
{'\n'}
|
|
100
|
-
{'\n'}
|
|
101
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
102
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
103
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
104
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. Morbi at rutrum sem.
|
|
105
|
-
{'\n'}
|
|
106
|
-
{'\n'}
|
|
107
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
108
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
109
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
110
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
111
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
112
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit
|
|
113
|
-
metus, id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
114
|
-
{'\n'}
|
|
115
|
-
{'\n'}
|
|
116
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
117
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
118
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
119
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. sMorbi at rutrum sem.
|
|
120
|
-
{'\n'}
|
|
121
|
-
{'\n'}
|
|
122
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor lobortis lacus, et dignissim tortor
|
|
123
|
-
consectetur vitae. Donec dapibus tincidunt rutrum. Nullam luctus sollicitudin urna, sit amet tempor dolor
|
|
124
|
-
feugiat placerat. Vivamus aliquam ante quam, sed iaculis sapien porttitor sed. Maecenas sed ex eu mi vulputate
|
|
125
|
-
gravida. Aenean placerat nisl cursus augue vulputate tristique a sit amet massa. Maecenas imperdiet varius
|
|
126
|
-
tortor, sit amet viverra libero egestas at. Fusce mattis porttitor accumsan. Quisque aliquet enim turpis, eu
|
|
127
|
-
molestie nisl tempus at. Curabitur elementum consequat lectus id scelerisque. Vestibulum aliquam suscipit
|
|
128
|
-
metus, id consectetur quam congue nec. Morbi a ligula tempor quam convallis vestibulum ac non nibh.
|
|
129
|
-
{'\n'}
|
|
130
|
-
{'\n'}
|
|
131
|
-
Morbi mollis, est eu tincidunt tincidunt, odio lectus facilisis tellus, nec euismod ipsum erat quis libero.
|
|
132
|
-
Morbi molestie erat eu hendrerit tincidunt. Sed ornare consequat maximus. Morbi tellus metus, tincidunt non
|
|
133
|
-
auctor eu, bibendum at lorem. Vivamus congue auctor lacus, a rhoncus felis placerat sit amet. Vestibulum
|
|
134
|
-
tristique turpis ligula, quis interdum tellus vehicula semper. Morbi at rutrum sem.
|
|
135
|
-
</Text>
|
|
136
|
-
</View>
|
|
137
|
-
</FloatingContainer>
|
|
138
|
-
),
|
|
139
|
-
};
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { View } from 'react-native';
|
|
2
|
-
|
|
3
|
-
import { Footer } from '../components';
|
|
4
|
-
|
|
5
|
-
import type { FooterProps } from '../configs/types';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Footer',
|
|
9
|
-
component: Footer,
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const defaultTabs: FooterProps['tabs'] = [
|
|
13
|
-
{
|
|
14
|
-
onPress: () => {},
|
|
15
|
-
text: 'Inicio',
|
|
16
|
-
icon: 'home-outline',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
onPress: () => {},
|
|
20
|
-
text: 'Contrataciones',
|
|
21
|
-
icon: 'person-outline',
|
|
22
|
-
badge: 1,
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
onPress: () => {},
|
|
26
|
-
text: 'Historial',
|
|
27
|
-
icon: 'receipt-outline',
|
|
28
|
-
},
|
|
29
|
-
];
|
|
30
|
-
|
|
31
|
-
const invertedTabs: FooterProps['tabs'] = [
|
|
32
|
-
{
|
|
33
|
-
onPress: () => {},
|
|
34
|
-
text: 'Inicio',
|
|
35
|
-
icon: 'home-outline',
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
onPress: () => {},
|
|
39
|
-
text: 'En progreso',
|
|
40
|
-
icon: 'flag-outline',
|
|
41
|
-
badge: 1,
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
onPress: () => {},
|
|
45
|
-
text: 'Programados',
|
|
46
|
-
icon: 'calendar-outline',
|
|
47
|
-
badge: 2,
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
onPress: () => {},
|
|
51
|
-
text: 'Chat',
|
|
52
|
-
icon: 'chatbubble-outline',
|
|
53
|
-
badge: 19,
|
|
54
|
-
},
|
|
55
|
-
];
|
|
56
|
-
|
|
57
|
-
export const Default = {
|
|
58
|
-
render: () => (
|
|
59
|
-
<>
|
|
60
|
-
<Footer tabs={defaultTabs} />
|
|
61
|
-
<View style={{ marginVertical: 20 }} />
|
|
62
|
-
<Footer tabs={invertedTabs} inverted />
|
|
63
|
-
</>
|
|
64
|
-
),
|
|
65
|
-
};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Ionicons } from '@expo/vector-icons';
|
|
2
|
-
import { TouchableOpacity, View } from 'react-native';
|
|
3
|
-
|
|
4
|
-
import { Header } from '../components';
|
|
5
|
-
import { Colors } from '../configs/constants';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Header',
|
|
9
|
-
component: Header,
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export const Default = {
|
|
13
|
-
render: () => (
|
|
14
|
-
<>
|
|
15
|
-
<Header
|
|
16
|
-
logo={{ uri: 'https://picsum.photos/200/100?random=1' }}
|
|
17
|
-
onMenuPress={() => {}}
|
|
18
|
-
right={
|
|
19
|
-
<TouchableOpacity onPress={() => {}}>
|
|
20
|
-
<Ionicons name="notifications-outline" color={Colors.darkblue} size={26} />
|
|
21
|
-
</TouchableOpacity>
|
|
22
|
-
}
|
|
23
|
-
/>
|
|
24
|
-
<View style={{ marginVertical: 20 }} />
|
|
25
|
-
<Header
|
|
26
|
-
logo={{ uri: 'https://picsum.photos/200/100?random=2' }}
|
|
27
|
-
inverted
|
|
28
|
-
onMenuPress={() => {}}
|
|
29
|
-
right={
|
|
30
|
-
<TouchableOpacity onPress={() => {}}>
|
|
31
|
-
<Ionicons name="notifications-outline" color={Colors.white} size={26} />
|
|
32
|
-
</TouchableOpacity>
|
|
33
|
-
}
|
|
34
|
-
/>
|
|
35
|
-
</>
|
|
36
|
-
),
|
|
37
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Button, ImagePicker, Text } from '../components';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Image Picker',
|
|
5
|
-
component: ImagePicker,
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export const Default = {
|
|
9
|
-
render: () => (
|
|
10
|
-
<Button onPress={ImagePicker}>
|
|
11
|
-
<Text color="white">Pick an image from library</Text>
|
|
12
|
-
</Button>
|
|
13
|
-
),
|
|
14
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ImageResponsive } from '../components';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Image Responsive',
|
|
5
|
-
component: ImageResponsive,
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export const Default = {
|
|
9
|
-
render: () => (
|
|
10
|
-
<ImageResponsive source={{ uri: 'https://picsum.photos/id/237/300' }} style={{ height: 200, width: 200 }} />
|
|
11
|
-
),
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export const Avatar = {
|
|
15
|
-
render: () => (
|
|
16
|
-
<ImageResponsive avatar source={{ uri: 'https://picsum.photos/id/237/300' }} style={{ height: 200, width: 200 }} />
|
|
17
|
-
),
|
|
18
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { ImageViewer, Text } from '../components';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Image Viewer',
|
|
5
|
-
component: ImageViewer,
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export const Default = {
|
|
9
|
-
render: () => (
|
|
10
|
-
<>
|
|
11
|
-
<Text>Tap on the image</Text>
|
|
12
|
-
<ImageViewer source={{ uri: 'https://picsum.photos/id/237/300' }} style={{ height: 200, width: 200 }} />
|
|
13
|
-
</>
|
|
14
|
-
),
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export const Avatar = {
|
|
18
|
-
render: () => (
|
|
19
|
-
<>
|
|
20
|
-
<Text>Tap on the image</Text>
|
|
21
|
-
<ImageViewer avatar source={{ uri: 'https://picsum.photos/id/237/300' }} style={{ height: 200, width: 200 }} />
|
|
22
|
-
</>
|
|
23
|
-
),
|
|
24
|
-
};
|