dhre-ui-kit 0.0.7 → 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 (12) 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 +14 -3
  8. package/src/components/swipableList/SwipableList.styles.ts +8 -4
  9. package/src/components/swipableList/SwipableList.test.tsx +102 -6
  10. package/src/components/swipableList/SwipableList.tsx +9 -4
  11. package/src/index.ts +1 -0
  12. package/src/theme/themes.ts +11 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dhre-ui-kit",
3
- "version": "0.0.7",
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
@@ -1,11 +1,22 @@
1
1
  import {ReactNode} from 'react';
2
- import {ViewStyle} from 'react-native';
2
+ 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 {
@@ -33,5 +44,5 @@ export interface SwipableListProps {
33
44
  rightPrimaryActionHandler?: (id: string) => void;
34
45
  rightPrimaryActionStyle?: ViewStyle;
35
46
  itemStyle?: ViewStyle;
36
- titleStyle?: ViewStyle;
47
+ titleStyle?: TextStyle;
37
48
  }
package/src/components/swipableList/SwipableList.styles.ts CHANGED
@@ -1,22 +1,26 @@
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({
5
5
  container: {
6
6
  flex: 1,
7
7
  },
8
+ swippableContainer: {paddingVertical: verticalScale(16)},
8
9
  actionButton: {
9
10
  justifyContent: 'center',
10
11
  alignItems: 'center',
11
- padding: moderateScale(24),
12
+ },
13
+ titleStyle: {
14
+ color: '#fff',
12
15
  },
13
16
  leftActions: {
14
17
  flexDirection: 'row',
15
- justifyContent: 'flex-start',
18
+ gap: horizontalScale(24),
19
+ paddingHorizontal: horizontalScale(24),
16
20
  },
17
21
  rightActions: {
18
22
  flexDirection: 'row',
19
- justifyContent: 'flex-end',
23
+ paddingHorizontal: horizontalScale(24),
20
24
  },
21
25
  seprator: {
22
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();
package/src/components/swipableList/SwipableList.tsx CHANGED
@@ -40,11 +40,15 @@ const SwipableList = (props: SwipableListProps) => {
40
40
  onPress={onPress}
41
41
  style={[styles.actionButton, style]}>
42
42
  {icon}
43
- <CustomTypography variant="L1_REGULAR" style={titleStyle} text={title} />
43
+ <CustomTypography
44
+ variant="L1_REGULAR"
45
+ style={[styles.titleStyle, titleStyle]}
46
+ text={title}
47
+ />
44
48
  </Pressable>
45
49
  );
46
50
 
47
- const leftActionHandle = item => (
51
+ const leftActionHandle = (item: ListItem) => (
48
52
  <View style={[styles.leftActions, leftPrimaryActionStyle]}>
49
53
  {leftPrimaryActionIcon && (
50
54
  <ActionButton
@@ -67,7 +71,7 @@ const SwipableList = (props: SwipableListProps) => {
67
71
  </View>
68
72
  );
69
73
 
70
- const rightActionHandle = item => (
74
+ const rightActionHandle = (item: ListItem) => (
71
75
  <View style={[styles.rightActions, rightPrimaryActionStyle]}>
72
76
  {rightPrimaryActionIcon && (
73
77
  <ActionButton
@@ -85,7 +89,8 @@ const SwipableList = (props: SwipableListProps) => {
85
89
  <GestureHandlerRootView testID={`${testId}-LIST`} style={styles.container}>
86
90
  <Swipeable
87
91
  renderLeftActions={() => leftActionHandle(item)}
88
- renderRightActions={() => rightActionHandle(item)}>
92
+ renderRightActions={() => rightActionHandle(item)}
93
+ containerStyle={styles.swippableContainer}>
89
94
  {props?.renderItem(item)}
90
95
  </Swipeable>
91
96
  </GestureHandlerRootView>
package/src/index.ts CHANGED
@@ -24,3 +24,4 @@ export {default as CustomHeader} from './components/customHeader';
24
24
  export {default as SwipableList} from './components/swipableList';
25
25
  export {default as CustomTypography} from './components/customTypography';
26
26
  export {default as CustomIcon} from './components/customIcon';
27
+ export * from './utils/stylehelper';
package/src/theme/themes.ts CHANGED
@@ -53,33 +53,37 @@ const theme = {
53
53
  dark: '##CECECE',
54
54
  },
55
55
 
56
- BODER_PRIMARY: {
56
+ BORDER_PRIMARY: {
57
57
  light: '#686868',
58
58
  dark: '#404040',
59
59
  },
60
- BODER_SECONDRY: {
60
+ BORDER_SECONDRY: {
61
61
  light: '#A7A7A7',
62
62
  dark: '#686868',
63
63
  },
64
- BODER_DISABLE: {
64
+ BORDER_DISABLE: {
65
65
  light: '#CECECE',
66
66
  dark: '#4F4F4F',
67
67
  },
68
- BODER_INVERTED: {
68
+ BORDER_INVERTED: {
69
69
  light: '#000000',
70
70
  dark: '#FFFFFF',
71
71
  },
72
- BODER_BRAND_STATIC: {
72
+ BORDER_BRAND_STATIC: {
73
73
  light: '#D92D27',
74
74
  dark: '#D92D27',
75
75
  },
76
- BODER_BRAND_TRANSPARENT_STATIC: {
76
+ BORDER_BRAND_TRANSPARENT_STATIC: {
77
77
  light: '#D92D3E',
78
78
  dark: '#D92D3E',
79
79
  },
80
- BODER_STATIC: {
80
+ BORDER_STATIC: {
81
81
  light: '#FFFFFF',
82
82
  dark: '#FFFFFF',
83
83
  },
84
+ BORDER_SEPRATOR: {
85
+ light: '#282828',
86
+ dark: '#FFFFFF',
87
+ },
84
88
  };
85
89
  export default theme;