dhre-ui-kit 0.0.40 → 0.0.41

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/button/Button.interface.ts +2 -1
  3. package/src/components/button/Button.tsx +16 -2
  4. package/src/components/scrollList/category.tsx +2 -2
  5. package/src/index.ts +1 -1
  6. package/src/theme/fonts.ts +39 -39
  7. package/src/theme/themes.ts +22 -22
  8. package/src/utils/appEnum.ts +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dhre-ui-kit",
3
- "version": "0.0.40",
3
+ "version": "0.0.41",
4
4
  "main": "src/index.ts",
5
5
  "files": [
6
6
  "src",
package/src/components/button/Button.interface.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import {ReactElement} from 'react';
2
2
  import {StyleProp, TextStyle, ViewStyle} from 'react-native';
3
3
  import {SvgProps} from 'react-native-svg';
4
-
5
4
  export interface CustomButtonProps {
6
5
  title: string;
7
6
  onPress: () => void;
@@ -15,4 +14,6 @@ export interface CustomButtonProps {
15
14
  imagePosition?: 'left' | 'right';
16
15
  testID?: string;
17
16
  disabled?: boolean;
17
+ disabledColor?: string;
18
+ disableButtonTitleColor?: string;
18
19
  }
package/src/components/button/Button.tsx CHANGED
@@ -18,6 +18,8 @@ const CustomButton = ({
18
18
  titleVariant = 'L2_REGULAR',
19
19
  imagePosition = 'right',
20
20
  disabled = false,
21
+ disabledColor,
22
+ disableButtonTitleColor,
21
23
  }: CustomButtonProps) => {
22
24
  const {theme} = useTheme();
23
25
  return (
@@ -26,7 +28,13 @@ const CustomButton = ({
26
28
  style={[
27
29
  styles.buttonContainer,
28
30
  containerStyle,
29
- disabled ? {backgroundColor: theme.SURFACE_DISABLE} : {},
31
+ disabled
32
+ ? {
33
+ backgroundColor: disabledColor
34
+ ? disabledColor
35
+ : theme.SURFACE_DISABLE,
36
+ }
37
+ : {},
30
38
  ]}
31
39
  onPress={onPress}
32
40
  disabled={disabled}>
@@ -41,7 +49,13 @@ const CustomButton = ({
41
49
  style={[
42
50
  {color: '#A7A7A7'},
43
51
  textStyle,
44
- disabled ? {color: theme.CONTENT_DISABLE} : {},
52
+ disabled
53
+ ? {
54
+ color: disableButtonTitleColor
55
+ ? disableButtonTitleColor
56
+ : theme.CONTENT_DISABLE,
57
+ }
58
+ : {},
45
59
  ]}
46
60
  textColor={titleColor}
47
61
  />
package/src/components/scrollList/category.tsx CHANGED
@@ -3,7 +3,7 @@ import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
3
3
  import CustomText from '../customText/CustomText';
4
4
 
5
5
  interface ScrollableListProps {
6
- data: {name: string; value: string}[];
6
+ data: {name: string; value: string}[] | undefined;
7
7
  handleSelectCategory: (value: string) => void;
8
8
  containerStyle?: object;
9
9
  scrollViewContentStyle?: object;
@@ -24,7 +24,7 @@ const ScrollableList = ({
24
24
  defaultItemTextColor = 'CONTENT_SECONDRY',
25
25
  }: ScrollableListProps) => {
26
26
  const [selectedItem, setSelectedItem] = useState<string | null>(
27
- data.length > 0 ? data[0].name : null,
27
+ data && data.length > 0 ? data[0].name : null,
28
28
  );
29
29
 
30
30
  return (
package/src/index.ts CHANGED
@@ -37,7 +37,7 @@ export {default as CountryPicker} from './components/countryPicker';
37
37
  export {default as TextInput} from './components/textInput';
38
38
 
39
39
  export {FONT_STYLES} from './theme/fonts';
40
- export {FontStyleKey, ThemeKeys} from './utils/appEnum';
40
+ export {FontStyle, Theme} from './utils/appEnum';
41
41
 
42
42
  export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';
43
43
  export {
package/src/theme/fonts.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import {TextStyle} from 'react-native';
2
2
  import {moderateScale, verticalScale} from '../utils/stylehelper';
3
- import {FontStyleKey} from '../utils/appEnum';
3
+ import {FontStyle} from '../utils/appEnum';
4
4
 
5
5
  interface FontStyles {
6
6
  [key: string]: TextStyle;
@@ -25,48 +25,48 @@ export const serifActivFontfamily: TextStyle = {
25
25
  };
26
26
 
27
27
  export const FONT_STYLES: FontStyles = {
28
- [FontStyleKey.H1_BOLD]: createFontStyle('MeraasAktiv_Bd', 40, 56),
29
- [FontStyleKey.H2_BOLD]: createFontStyle('MeraasAktiv_Bd', 36, 50.4),
30
- [FontStyleKey.H3_BOLD]: createFontStyle('MeraasAktiv_Bd', 32, 44.8),
31
- [FontStyleKey.H4_BOLD]: createFontStyle('MeraasAktiv_Bd', 26, 36.4),
32
- [FontStyleKey.H5_BOLD]: createFontStyle('MeraasAktiv_Bd', 24, 33.6),
33
- [FontStyleKey.H6_BOLD]: createFontStyle('MeraasAktiv_Bd', 22, 30.8),
34
- [FontStyleKey.H7_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
35
- [FontStyleKey.H8_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
28
+ [FontStyle.H1_BOLD]: createFontStyle('MeraasAktiv_Bd', 40, 56),
29
+ [FontStyle.H2_BOLD]: createFontStyle('MeraasAktiv_Bd', 36, 50.4),
30
+ [FontStyle.H3_BOLD]: createFontStyle('MeraasAktiv_Bd', 32, 44.8),
31
+ [FontStyle.H4_BOLD]: createFontStyle('MeraasAktiv_Bd', 26, 36.4),
32
+ [FontStyle.H5_BOLD]: createFontStyle('MeraasAktiv_Bd', 24, 33.6),
33
+ [FontStyle.H6_BOLD]: createFontStyle('MeraasAktiv_Bd', 22, 30.8),
34
+ [FontStyle.H7_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
35
+ [FontStyle.H8_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
36
36
 
37
- [FontStyleKey.H1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 40, 56),
38
- [FontStyleKey.H2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 36, 50.4),
39
- [FontStyleKey.H3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 32, 44.8),
40
- [FontStyleKey.H4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 26, 36.4),
41
- [FontStyleKey.H5_REGULAR]: createFontStyle('MeraasAktiv_Rg', 24, 33.6),
42
- [FontStyleKey.H6_REGULAR]: createFontStyle('MeraasAktiv_Rg', 22, 30.8),
43
- [FontStyleKey.H7_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
44
- [FontStyleKey.H8_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
37
+ [FontStyle.H1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 40, 56),
38
+ [FontStyle.H2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 36, 50.4),
39
+ [FontStyle.H3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 32, 44.8),
40
+ [FontStyle.H4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 26, 36.4),
41
+ [FontStyle.H5_REGULAR]: createFontStyle('MeraasAktiv_Rg', 24, 33.6),
42
+ [FontStyle.H6_REGULAR]: createFontStyle('MeraasAktiv_Rg', 22, 30.8),
43
+ [FontStyle.H7_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
44
+ [FontStyle.H8_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
45
45
 
46
- [FontStyleKey.H1_LIGHT]: createFontStyle('MeraasAktiv_Lt', 40, 56),
47
- [FontStyleKey.H2_LIGHT]: createFontStyle('MeraasAktiv_Lt', 36, 50.4),
48
- [FontStyleKey.H3_LIGHT]: createFontStyle('MeraasAktiv_Lt', 32, 44.8),
49
- [FontStyleKey.H4_LIGHT]: createFontStyle('MeraasAktiv_Lt', 26, 36.4),
50
- [FontStyleKey.H5_LIGHT]: createFontStyle('MeraasAktiv_Lt', 24, 33.6),
51
- [FontStyleKey.H6_LIGHT]: createFontStyle('MeraasAktiv_Lt', 22, 30.8),
52
- [FontStyleKey.H7_LIGHT]: createFontStyle('MeraasAktiv_Lt', 20, 28),
53
- [FontStyleKey.H8_LIGHT]: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
46
+ [FontStyle.H1_LIGHT]: createFontStyle('MeraasAktiv_Lt', 40, 56),
47
+ [FontStyle.H2_LIGHT]: createFontStyle('MeraasAktiv_Lt', 36, 50.4),
48
+ [FontStyle.H3_LIGHT]: createFontStyle('MeraasAktiv_Lt', 32, 44.8),
49
+ [FontStyle.H4_LIGHT]: createFontStyle('MeraasAktiv_Lt', 26, 36.4),
50
+ [FontStyle.H5_LIGHT]: createFontStyle('MeraasAktiv_Lt', 24, 33.6),
51
+ [FontStyle.H6_LIGHT]: createFontStyle('MeraasAktiv_Lt', 22, 30.8),
52
+ [FontStyle.H7_LIGHT]: createFontStyle('MeraasAktiv_Lt', 20, 28),
53
+ [FontStyle.H8_LIGHT]: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
54
54
 
55
- [FontStyleKey.B1_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
56
- [FontStyleKey.B2_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
57
- [FontStyleKey.B3_BOLD]: createFontStyle('MeraasAktiv_Bd', 16, 22.4),
58
- [FontStyleKey.B4_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
55
+ [FontStyle.B1_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
56
+ [FontStyle.B2_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
57
+ [FontStyle.B3_BOLD]: createFontStyle('MeraasAktiv_Bd', 16, 22.4),
58
+ [FontStyle.B4_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
59
59
 
60
- [FontStyleKey.B1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
61
- [FontStyleKey.B2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
62
- [FontStyleKey.B3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 16, 22.4),
63
- [FontStyleKey.B4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
60
+ [FontStyle.B1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
61
+ [FontStyle.B2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
62
+ [FontStyle.B3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 16, 22.4),
63
+ [FontStyle.B4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
64
64
 
65
- [FontStyleKey.L1_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 19.6),
66
- [FontStyleKey.L2_BOLD]: createFontStyle('MeraasAktiv_Bd', 12, 16.8),
67
- [FontStyleKey.L3_BOLD]: createFontStyle('MeraasAktiv_Bd', 10, 14),
65
+ [FontStyle.L1_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 19.6),
66
+ [FontStyle.L2_BOLD]: createFontStyle('MeraasAktiv_Bd', 12, 16.8),
67
+ [FontStyle.L3_BOLD]: createFontStyle('MeraasAktiv_Bd', 10, 14),
68
68
 
69
- [FontStyleKey.L1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 19.6),
70
- [FontStyleKey.L2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 12, 16.8),
71
- [FontStyleKey.L3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 10, 14),
69
+ [FontStyle.L1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 19.6),
70
+ [FontStyle.L2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 12, 16.8),
71
+ [FontStyle.L3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 10, 14),
72
72
  };
package/src/theme/themes.ts CHANGED
@@ -1,89 +1,89 @@
1
- import {ThemeKeys} from '../utils/appEnum';
1
+ import {Theme} from '../utils/appEnum';
2
2
 
3
3
  const theme = {
4
- [ThemeKeys.SURFACE_PRIMARY]: {
4
+ [Theme.SURFACE_PRIMARY]: {
5
5
  light: '#FFFFFF',
6
6
  dark: '#404040',
7
7
  },
8
- [ThemeKeys.SURFACE_SECONDARY]: {
8
+ [Theme.SURFACE_SECONDARY]: {
9
9
  light: '#F5F5F5',
10
10
  dark: '#212121',
11
11
  },
12
- [ThemeKeys.SURFACE_STATIC]: {
12
+ [Theme.SURFACE_STATIC]: {
13
13
  light: '#FFFFFF',
14
14
  dark: '#FFFFFF',
15
15
  },
16
- [ThemeKeys.SURFACE_BRAND_STATIC]: {
16
+ [Theme.SURFACE_BRAND_STATIC]: {
17
17
  light: '#D92D27',
18
18
  dark: '#D92D27',
19
19
  },
20
- [ThemeKeys.SURFACE_BRAND_TRANSPARENT_STATIC]: {
20
+ [Theme.SURFACE_BRAND_TRANSPARENT_STATIC]: {
21
21
  light: '#D92D3E',
22
22
  dark: '#D92D3E',
23
23
  },
24
- [ThemeKeys.SURFACE_DISABLE]: {
24
+ [Theme.SURFACE_DISABLE]: {
25
25
  light: '#E1E1E1',
26
26
  dark: '#A7A7A7',
27
27
  },
28
- [ThemeKeys.SURFACE_INVERTED_TRANSPARENT]: {
28
+ [Theme.SURFACE_INVERTED_TRANSPARENT]: {
29
29
  light: '#686868',
30
30
  dark: '#FFFFFF',
31
31
  },
32
32
 
33
- [ThemeKeys.CONTENT_PRIMARY]: {
33
+ [Theme.CONTENT_PRIMARY]: {
34
34
  light: '#000000',
35
35
  dark: '#FFFFFF',
36
36
  },
37
- [ThemeKeys.CONTENT_SECONDRY]: {
37
+ [Theme.CONTENT_SECONDRY]: {
38
38
  light: '#686868',
39
39
  dark: '#A7A7A7',
40
40
  },
41
- [ThemeKeys.CONTENT_DISABLE]: {
41
+ [Theme.CONTENT_DISABLE]: {
42
42
  light: '#A7A7A7',
43
43
  dark: '#686868',
44
44
  },
45
- [ThemeKeys.CONTENT_INVERTED]: {
45
+ [Theme.CONTENT_INVERTED]: {
46
46
  light: '#FFFFFF',
47
47
  dark: '#000000',
48
48
  },
49
- [ThemeKeys.CONTENT_STATIC]: {
49
+ [Theme.CONTENT_STATIC]: {
50
50
  light: '#FFFFFF',
51
51
  dark: '#FFFFFF',
52
52
  },
53
- [ThemeKeys.CONTENT_SECONDRY_STATIC]: {
53
+ [Theme.CONTENT_SECONDRY_STATIC]: {
54
54
  light: '#CECECE',
55
55
  dark: '#CECECE',
56
56
  },
57
57
 
58
- [ThemeKeys.BORDER_PRIMARY]: {
58
+ [Theme.BORDER_PRIMARY]: {
59
59
  light: '#686868',
60
60
  dark: '#404040',
61
61
  },
62
- [ThemeKeys.BORDER_SECONDRY]: {
62
+ [Theme.BORDER_SECONDRY]: {
63
63
  light: '#A7A7A7',
64
64
  dark: '#686868',
65
65
  },
66
- [ThemeKeys.BORDER_DISABLE]: {
66
+ [Theme.BORDER_DISABLE]: {
67
67
  light: '#CECECE',
68
68
  dark: '#4F4F4F',
69
69
  },
70
- [ThemeKeys.BORDER_INVERTED]: {
70
+ [Theme.BORDER_INVERTED]: {
71
71
  light: '#000000',
72
72
  dark: '#FFFFFF',
73
73
  },
74
- [ThemeKeys.BORDER_BRAND_STATIC]: {
74
+ [Theme.BORDER_BRAND_STATIC]: {
75
75
  light: '#D92D27',
76
76
  dark: '#D92D27',
77
77
  },
78
- [ThemeKeys.BORDER_BRAND_TRANSPARENT_STATIC]: {
78
+ [Theme.BORDER_BRAND_TRANSPARENT_STATIC]: {
79
79
  light: '#D92D3E',
80
80
  dark: '#D92D3E',
81
81
  },
82
- [ThemeKeys.BORDER_STATIC]: {
82
+ [Theme.BORDER_STATIC]: {
83
83
  light: '#FFFFFF',
84
84
  dark: '#FFFFFF',
85
85
  },
86
- [ThemeKeys.BORDER_SEPRATOR]: {
86
+ [Theme.BORDER_SEPRATOR]: {
87
87
  light: '#282828',
88
88
  dark: '#FFFFFF',
89
89
  },
package/src/utils/appEnum.ts CHANGED
@@ -16,7 +16,7 @@ export enum ToggleTextType {
16
16
  OFF = 'OFF',
17
17
  }
18
18
 
19
- export enum FontStyleKey {
19
+ export enum FontStyle {
20
20
  // Bold heading styles
21
21
  H1_BOLD = 'H1_BOLD',
22
22
  H2_BOLD = 'H2_BOLD',
@@ -71,7 +71,7 @@ export enum FontStyleKey {
71
71
  }
72
72
 
73
73
  // ThemeKeys.ts
74
- export enum ThemeKeys {
74
+ export enum Theme {
75
75
  SURFACE_PRIMARY = 'SURFACE_PRIMARY',
76
76
  SURFACE_SECONDARY = 'SURFACE_SECONDARY',
77
77
  SURFACE_STATIC = 'SURFACE_STATIC',