dhre-ui-kit 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +2 -1
  2. package/src/components/accordion/Accordion.styles.ts +1 -0
  3. package/src/components/bottomDrawer/BottomDrawer.interface.ts +2 -0
  4. package/src/components/bottomDrawer/BottomDrawer.styles.ts +1 -0
  5. package/src/components/bottomDrawer/BottomDrawer.tsx +8 -0
  6. package/src/components/customIcon/CustomIcon.styles.ts +0 -1
  7. package/src/components/swipableList/SwipableList.interface.ts +12 -1
  8. package/src/components/swipableList/SwipableList.styles.ts +4 -5
  9. package/src/components/swipableList/SwipableList.test.tsx +102 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dhre-ui-kit",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "main": "src/index.ts",
5
5
  "files": [
6
6
  "src",
@@ -22,6 +22,7 @@
22
22
  "prepare": "husky"
23
23
  },
24
24
  "dependencies": {
25
+ "@react-native-community/blur": "^4.4.1",
25
26
  "@testing-library/react-native": "^12.5.1",
26
27
  "lint-staged": "^15.2.7",
27
28
  "react": "18.2.0",
package/src/components/accordion/Accordion.styles.ts CHANGED
@@ -15,6 +15,7 @@ const styles = StyleSheet.create({
15
15
  flexDirection: 'row',
16
16
  justifyContent: 'space-between',
17
17
  alignItems: 'center',
18
+ paddingHorizontal: horizontalScale(16),
18
19
  },
19
20
  title: {flex: 1, color: '#FFFFFF'},
20
21
  iconStyle: {marginLeft: horizontalScale(20)},
package/src/components/bottomDrawer/BottomDrawer.interface.ts CHANGED
@@ -9,6 +9,8 @@ export interface BottomDrawerProps {
9
9
  testID?: string;
10
10
  style?: ViewStyle;
11
11
  modalContainerStyle?: ViewStyle;
12
+ blurAmount?: number;
13
+ blurViewStyle?: ViewStyle;
12
14
  leftIcon?: React.ReactElement;
13
15
  rightIcon?: React.ReactElement;
14
16
  showLeftIcon?: boolean;
package/src/components/bottomDrawer/BottomDrawer.styles.ts CHANGED
@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
10
10
  flex: 1,
11
11
  justifyContent: 'flex-end',
12
12
  },
13
+ blurView: {...StyleSheet.absoluteFillObject},
13
14
  modalContainer: {
14
15
  flex: 0.5,
15
16
  backgroundColor: '#000',
package/src/components/bottomDrawer/BottomDrawer.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import {View, Modal} from 'react-native';
3
+ import {BlurView} from '@react-native-community/blur';
3
4
  import {BottomDrawerProps} from './BottomDrawer.interface';
4
5
  import styles from './BottomDrawer.styles';
5
6
  import CustomTypography from '../customTypography/CustomTypography';
@@ -14,6 +15,8 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
14
15
  testID = 'BOTTOM-DRAWER',
15
16
  style,
16
17
  modalContainerStyle,
18
+ blurAmount = 10,
19
+ blurViewStyle,
17
20
  showLeftIcon = false,
18
21
  showRightIcon = true,
19
22
  leftIcon = <ArrowLeft />,
@@ -27,6 +30,11 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
27
30
  visible={isModalVisible}
28
31
  onRequestClose={toggleModal}>
29
32
  <View style={[styles.mainContainer, style]} testID={testID}>
33
+ <BlurView
34
+ style={[styles.blurView, blurViewStyle]}
35
+ blurType="light"
36
+ blurAmount={blurAmount}
37
+ />
30
38
  <View style={[styles.modalContainer, modalContainerStyle]}>
31
39
  <View style={styles.separator} />
32
40
  <View style={styles.headerContainer}>
package/src/components/customIcon/CustomIcon.styles.ts CHANGED
@@ -4,7 +4,6 @@ const styles = StyleSheet.create({
4
4
  container: {
5
5
  justifyContent: 'center',
6
6
  alignItems: 'center',
7
- backgroundColor: '#fff',
8
7
  },
9
8
  title: {
10
9
  color: '#000',
package/src/components/swipableList/SwipableList.interface.ts CHANGED
@@ -3,9 +3,20 @@ import {TextStyle, ViewStyle} from 'react-native';
3
3
 
4
4
  export interface ListItem {
5
5
  id: string;
6
+ templateId: number;
6
7
  title: string;
7
- isPinned: boolean;
8
+ subTitle: string;
9
+ icon: string;
8
10
  isRead: boolean;
11
+ isPinned: boolean;
12
+ isDeleted: boolean;
13
+ isActionable: boolean;
14
+ category: string;
15
+ url: string;
16
+ channel: string;
17
+ status: string;
18
+ createdBy: string;
19
+ createdDateTime: string;
9
20
  }
10
21
 
11
22
  export interface ActionButtonProps {
package/src/components/swipableList/SwipableList.styles.ts CHANGED
@@ -1,4 +1,4 @@
1
- import {moderateScale, verticalScale} from '../../utils/stylehelper';
1
+ import {horizontalScale, verticalScale} from '../../utils/stylehelper';
2
2
  import {StyleSheet} from 'react-native';
3
3
 
4
4
  export const styles = StyleSheet.create({
@@ -9,19 +9,18 @@ export const styles = StyleSheet.create({
9
9
  actionButton: {
10
10
  justifyContent: 'center',
11
11
  alignItems: 'center',
12
- paddingHorizontal: moderateScale(24),
13
- paddingVertical: moderateScale(8),
14
12
  },
15
13
  titleStyle: {
16
14
  color: '#fff',
17
15
  },
18
16
  leftActions: {
19
17
  flexDirection: 'row',
20
- justifyContent: 'flex-start',
18
+ gap: horizontalScale(24),
19
+ paddingHorizontal: horizontalScale(24),
21
20
  },
22
21
  rightActions: {
23
22
  flexDirection: 'row',
24
- justifyContent: 'flex-end',
23
+ paddingHorizontal: horizontalScale(24),
25
24
  },
26
25
  seprator: {
27
26
  height: verticalScale(16),
package/src/components/swipableList/SwipableList.test.tsx CHANGED
@@ -35,18 +35,114 @@ const customStyle = {backgroundColor: 'red', padding: 20};
35
35
 
36
36
  describe('Notification Component', () => {
37
37
  const notifications = [
38
- {id: '1', title: 'Notification 1', isPinned: false, isRead: true},
39
- {id: '2', title: 'Notification 2', isPinned: true, isRead: false},
38
+ {
39
+ id: '1',
40
+ title: 'Notification 1',
41
+ isPinned: false,
42
+ isRead: true,
43
+ templateId: 1,
44
+ subTitle: 'Welcome Albus',
45
+ icon: 'https://svgshare.com/i/U7z.svg',
46
+ isDeleted: false,
47
+ isActionable: false,
48
+ category: 'general',
49
+ url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
50
+ channel: 'push',
51
+ status: 'sent',
52
+ createdBy: 'system',
53
+ createdDateTime: '2024-09-02T12:00:00+05:30',
54
+ },
55
+ {
56
+ id: '2',
57
+ title: 'Notification 2',
58
+ isPinned: true,
59
+ isRead: false,
60
+ templateId: 1,
61
+ subTitle: 'Welcome Albus',
62
+ icon: 'https://svgshare.com/i/U7z.svg',
63
+ isDeleted: false,
64
+ isActionable: false,
65
+ category: 'general',
66
+ url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
67
+ channel: 'push',
68
+ status: 'sent',
69
+ createdBy: 'system',
70
+ createdDateTime: '2024-09-02T12:00:00+05:30',
71
+ },
40
72
  ];
41
73
 
42
74
  const notificationsPinned = [
43
- {id: '1', title: 'Notification 1', isPinned: true, isRead: true},
44
- {id: '2', title: 'Notification 2', isPinned: false, isRead: false},
75
+ {
76
+ id: '1',
77
+ title: 'Notification 1',
78
+ isPinned: true,
79
+ isRead: true,
80
+ templateId: 1,
81
+ subTitle: 'Welcome Albus',
82
+ icon: 'https://svgshare.com/i/U7z.svg',
83
+ isDeleted: false,
84
+ isActionable: false,
85
+ category: 'general',
86
+ url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
87
+ channel: 'push',
88
+ status: 'sent',
89
+ createdBy: 'system',
90
+ createdDateTime: '2024-09-02T12:00:00+05:30',
91
+ },
92
+ {
93
+ id: '2',
94
+ title: 'Notification 2',
95
+ isPinned: false,
96
+ isRead: false,
97
+ templateId: 1,
98
+ subTitle: 'Welcome Albus',
99
+ icon: 'https://svgshare.com/i/U7z.svg',
100
+ isDeleted: false,
101
+ isActionable: false,
102
+ category: 'general',
103
+ url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
104
+ channel: 'push',
105
+ status: 'sent',
106
+ createdBy: 'system',
107
+ createdDateTime: '2024-09-02T12:00:00+05:30',
108
+ },
45
109
  ];
46
110
 
47
111
  const notificationsUnPinned = [
48
- {id: '1', title: 'Notification 1', isPinned: false, isRead: false},
49
- {id: '2', title: 'Notification 2', isPinned: false, isRead: false},
112
+ {
113
+ id: '1',
114
+ title: 'Notification 1',
115
+ isPinned: false,
116
+ isRead: false,
117
+ templateId: 1,
118
+ subTitle: 'Welcome Albus',
119
+ icon: 'https://svgshare.com/i/U7z.svg',
120
+ isDeleted: false,
121
+ isActionable: false,
122
+ category: 'general',
123
+ url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
124
+ channel: 'push',
125
+ status: 'sent',
126
+ createdBy: 'system',
127
+ createdDateTime: '2024-09-02T12:00:00+05:30',
128
+ },
129
+ {
130
+ id: '2',
131
+ title: 'Notification 2',
132
+ isPinned: false,
133
+ isRead: false,
134
+ templateId: 1,
135
+ subTitle: 'Welcome Albus',
136
+ icon: 'https://svgshare.com/i/U7z.svg',
137
+ isDeleted: false,
138
+ isActionable: false,
139
+ category: 'general',
140
+ url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
141
+ channel: 'push',
142
+ status: 'sent',
143
+ createdBy: 'system',
144
+ createdDateTime: '2024-09-02T12:00:00+05:30',
145
+ },
50
146
  ];
51
147
 
52
148
  const mockLeftPrimaryActionHandler = jest.fn();